/* FUT Radar - Apple dark system. Tokens first, components after. */
:root{
  --bg:#000; --grp:#1C1C1E; --elev:#2C2C2E; --elev2:#3A3A3C;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#fff; --txt2:rgba(235,235,245,.6); --txt3:rgba(235,235,245,.6); /* 27/09 Gal chose level A: .3 was 2.25:1 on --bg, fails WCAG AA for the 11-13px captions; .6 clears 4.5:1 on every surface (4.59 on --elev2) */
  --acc:#0A84FF; --gain:#30D158; --loss:#FF453A; --gold:#FFD60A; --muted:#8E8E93;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --r:16px; --r-sm:10px;
  --font:'Heebo',-apple-system,'SF Pro Text','Segoe UI',sans-serif;
  --num:'Inter','SF Pro Text',-apple-system,sans-serif;
  --tabs-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip;background:var(--bg);color-scheme:dark}
/* Secondary safety net only (26/09), added after the real fix on main above: html's own
   overflow-x:clip does not reliably stop iOS Safari from rubber-band-panning to a wider layout
   viewport, so body repeats it. body has no fixed/max height either (min-height is a floor, not
   a ceiling) so this still never clips anything vertically. */
body{overflow-x:clip;font-family:var(--font);background:var(--bg);color:var(--txt);min-height:100dvh;font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block}
.num,.ltr{font-family:var(--num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* A number with Hebrew words around it ("17 ברווח · 1 בהפסד", "24 שע׳"): the number font, the sentence's own
   direction. .num forces left-to-right, which reversed these (26/09). test-rtl-arrows fails on Hebrew in a .num. */
.numf{font-family:var(--num);font-variant-numeric:tabular-nums}
.gain{color:var(--gain)} .loss{color:var(--loss)} .dim{color:var(--txt2)} .faint{color:var(--txt3)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* header */
header{position:sticky;top:0;z-index:20;padding:calc(10px + var(--safe-t)) 16px 8px;background:rgba(0,0,0,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
header h1{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hdr-actions{display:flex;align-items:center;gap:8px}
.hdr-sub{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt2);margin-top:4px;min-height:18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gain);display:inline-block}
.dot.warn{background:var(--gold)} .dot.bad{background:var(--loss)} .dot.off{background:var(--muted)}
.seg{display:inline-flex;background:var(--elev);border-radius:9px;padding:2px;gap:2px}
.seg button{padding:6px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--txt2);min-height:32px;transition:background .2s,color .2s}
.seg button.on{background:var(--elev2);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* layout */
/* main never gets a height/max-height, so it always grows to fit its content and this
   never clips anything vertically -- it only stops a horizontal decorative bleed (the card
   screen's .hero::before halo, 130% wide) from reaching the document's own scrollWidth. html's
   overflow-x:clip alone does not stop that on iOS Safari, which can still rubber-band-pan the
   whole page to the wider layout viewport even though Chrome clips it invisibly (26/09, root
   cause of the card screen going wider than the phone: root-cause-tracing on .hero::before). */
main{padding:12px 16px calc(var(--tabs-h) + 24px + var(--safe-b));max-width:640px;margin:0 auto;overflow-x:clip}
.group{background:var(--grp);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.group + .section-h{margin-top:8px}
.section-h{font-size:13px;font-weight:600;color:var(--txt2);margin:18px 12px 8px;text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}
.empty{color:var(--txt2);text-align:center;padding:56px 24px;font-size:16px;line-height:1.7}
.empty b{color:var(--txt);display:block;font-size:20px;margin-bottom:6px}
.empty .btn{margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:var(--acc);color:#fff;font-weight:600;font-size:16px;transition:opacity .15s,transform .15s}
.btn:active{transform:scale(.98);opacity:.9}
.btn.ghost{background:var(--elev);color:var(--txt)}
.btn.danger{background:var(--loss)}
.btn.wide{width:100%}
.btn.gold{background:var(--gold);color:#000}
.btn.gold svg{width:16px;height:16px}
.btn[disabled]{opacity:.5}

/* list rows */
.row{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:72px;position:relative;border-bottom:1px solid var(--line);transition:background .15s}
.row:last-child{border-bottom:0}
.row:active{background:var(--elev)}
.thumb{width:44px;height:60px;flex:0 0 auto;border-radius:6px;background:var(--elev);object-fit:contain;overflow:hidden}
.thumb.ph{display:grid;place-items:center;color:var(--txt3);font-size:11px}
.row .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row .name{font-weight:600;font-size:15px;line-height:1.25;display:flex;align-items:center;gap:6px;min-width:0}
.row .name .ltr{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .name .ovr{flex:0 0 auto}
.row .meta{font-size:12px;color:var(--txt2);display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-width:0}
.row .meta > *{flex:0 0 auto}
.row .meta .chip{flex:0 1 auto;min-width:0}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;background:var(--elev);color:var(--txt2);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.chip.rarity{color:#000}
.chip.special{background:var(--gold);color:#000}
.ovr{font-family:var(--num);font-weight:700;font-size:13px;color:var(--txt);background:var(--elev);border-radius:6px;padding:0 6px;line-height:20px}
.row .price{font-family:var(--num);font-weight:700;font-size:16px;letter-spacing:-.01em;direction:ltr;white-space:nowrap}
.row .price.long{font-size:13.5px}
.row .delta{font-family:var(--num);font-size:12px;font-weight:600;direction:ltr}
.row .spark{flex:0 0 auto}
.coin{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE45A,#C99A00);vertical-align:-1px;margin-inline-end:3px}

/* card page */
.hero{display:flex;flex-direction:column;align-items:center;padding:8px 0 14px;gap:10px}
.hero img{width:200px;height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.hero .name{font-size:24px;font-weight:800;letter-spacing:-.01em;text-align:center}
.hero .meta{color:var(--txt2);font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.bigprice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 2px}
.bigprice .p{font-family:var(--num);font-size:40px;font-weight:700;letter-spacing:-.03em;direction:ltr;display:flex;align-items:center;gap:8px}
.bigprice .coin{width:18px;height:18px;margin:0}
.bigprice .d{display:flex;gap:10px;font-family:var(--num);font-size:14px;font-weight:600}
.ranges{display:flex;gap:6px;padding:12px 12px 4px}
.ranges button{flex:1;min-height:34px;border-radius:8px;font-size:13px;font-weight:600;color:var(--txt2);background:transparent}
.ranges button.on{background:var(--elev);color:var(--txt)}
.chart-wrap{padding:6px 8px 10px;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.chart{display:block;width:100%}
/* 26/09 (v51.5): break gap + touch scrubber for the two index charts only (public/js/chart.js lineChart's
   breaks/scrub options, "option B", Gal approved). position:relative above is harmless for every other
   .chart-wrap - nothing else in it is positioned. */
.chart-svg{display:block;width:100%}
.scrub-line{stroke:rgba(255,255,255,.5);stroke-width:1;stroke-dasharray:3 3;pointer-events:none;opacity:0;transition:opacity .1s}
.scrub-dot{pointer-events:none;opacity:0;transition:opacity .1s;stroke:var(--bg);stroke-width:2}
.break-tick{stroke:rgba(255,214,10,.55);stroke-width:1;stroke-dasharray:2 3}
.gap-dot{r:3}
.tip{position:absolute;top:6px;min-width:150px;max-width:210px;background:rgba(28,28,30,.96);border:1px solid var(--line2);
  border-radius:12px;padding:9px 11px;font-size:12px;line-height:1.55;color:var(--txt2);box-shadow:0 12px 26px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.tip.show{opacity:1}
.tip .t-time{font-size:11px;color:var(--txt3);margin-bottom:3px}
.tip .t-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.tip .t-row + .t-row{margin-top:2px}
.tip .t-k{color:var(--txt3);font-size:11.5px}
.tip .t-v{font-weight:700;color:var(--txt)}
.tip .t-note{margin-top:6px;padding-top:6px;border-top:1px solid var(--line2);color:var(--gold);font-size:11.5px;line-height:1.55}
/* 26/09 (direction C, root cause fix): every number lineChart() used to draw as an SVG <text> - stretched
   sideways along with the viewBox on a wide card, which is what "looks smeared" (Gal) - now comes back as
   one of these plain HTML overlays instead. `left` is a % (the same fraction of the viewBox width the
   stretched line already uses, so the label tracks the stretch exactly); `top` is a real px, since the
   SVG's height is never stretched. See public/js/chart.js's numLabel()/breakMark(). */
.lbl{position:absolute;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;transform:translateX(-50%)}
.lbl-max{color:var(--txt2);font-size:11px;font-weight:600;transform:translate(-50%,-100%)}
.lbl-min{color:var(--txt2);font-size:11px;font-weight:600}
.lbl-empty{color:var(--txt2);font-size:14px;text-align:center;transform:translate(-50%,-50%)}
/* 26/09 (direction C): the "basket changed" chip used to sit at the break's own x position (clamped,
   merged when two breaks landed close together) - nothing stopped that from drifting under the big number
   above the chart, which is exactly what Gal flagged. This one small icon is pinned to a fixed corner of
   the chart instead (inset-inline-start: the reading-start corner in this RTL app) and never moves, so it
   can never land on the number. It expands to the same Hebrew label on hover/focus (here) or tap (the
   `.open` class, toggled in chart.js's wireChartScrub - a touch screen has no hover to rely on), and hides
   itself while the scrub tooltip is open, same as the old chip did. */
/* 26/09: the far (older) corner, not the start: inline-start is the right edge in RTL, where the newest point and
   its dot sit, and the icon covered them on the home card. The oldest end is the low pre-drop stretch, so its top is empty. */
.brk-mark{position:absolute;top:8px;inset-inline-end:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:#000;background:var(--gold);border-radius:999px;padding:4px 5px 4px 9px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);transition:opacity .12s}
.brk-mark .brk-ic{width:14px;height:14px;flex:0 0 auto;border-radius:50%;background:rgba(0,0,0,.18);display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.brk-mark .brk-full{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .25s ease}
.brk-mark:hover .brk-full,.brk-mark:focus-visible .brk-full,.brk-mark.open .brk-full{max-width:220px;margin-inline-start:2px}
.chart-wrap:has(.tip.show) .brk-mark{opacity:0}
.kv{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;min-height:48px;border-bottom:1px solid var(--line);gap:12px}
.kv:last-child{border-bottom:0}
.kv.held{width:100%;text-align:start}
.kv.held:active{background:var(--elev)}
.kv.held .v.gain{color:var(--gain)} .kv.held .v.loss{color:var(--loss)}
/* multi-sell (Gal 04/10): the targets and Stop Loss rows on the card page are buttons that open an editor */
.kv.trow{width:100%;text-align:start}
.kv.trow:active{background:var(--elev)}
.kv.trow .v small{font-size:13px;margin-inline-start:6px}
.kv.trow.add .k{color:var(--acc)}
.kv.trow .k .chip{margin-inline-start:6px;vertical-align:middle}
.lot-h{font-size:13px;font-weight:600;color:var(--txt2);margin:10px 12px 6px}
.note.loss{color:var(--loss)}
.coin-hint{padding:0 14px 10px;margin-top:-6px;font-size:13px;color:var(--txt2);text-align:left;border-bottom:1px solid var(--line)}
.coin-hint:empty{display:none}
.kv:has(+ .coin-hint:not(:empty)){border-bottom:0}
.coin-hint.bad{color:var(--loss);direction:rtl;text-align:right;font-family:var(--font)}
.kv .k{color:var(--txt);font-size:16px}
.kv .v{color:var(--txt2);font-size:16px;text-align:left}
/* platform-115: up to three owner chips in a beta row wrap instead of shrinking into ellipses at 390 */
.kv .acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:0 1 auto}
.kv .acts .chip{flex:0 0 auto}
/* platform-124a: the destructive actions (the owner's 'מחיקה' chip, the friend's deletion request) read red */
.kv .acts .chip.loss,.kv .btn.loss{color:var(--loss)}
.kv input{background:var(--elev);border:0;border-radius:8px;padding:8px 10px;width:130px;text-align:left;font-family:var(--num);font-size:16px;color:var(--txt);direction:ltr}
.kv input.wide{width:100%}
.kv select{background:var(--elev);border:0;border-radius:8px;padding:8px 10px;font-size:15px;color:var(--txt)}
.kv .sw{width:51px;height:31px;border-radius:16px;background:var(--elev2);position:relative;transition:background .2s;flex:0 0 auto}
.kv .sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.kv .sw.on{background:var(--gain)}
[dir="rtl"] .kv .sw.on::after{transform:translateX(-20px)}
.actions{display:flex;gap:10px;padding:4px 0 8px}
.note{font-size:13px;color:var(--txt2);padding:6px 14px 12px;line-height:1.6}

/* search */
.searchbar{position:sticky;top:calc(88px + var(--safe-t));z-index:10;padding:4px 0 10px;background:var(--bg)}
.searchbar input{width:100%;min-height:44px;border-radius:12px;background:var(--grp);border:1px solid var(--line);padding:0 14px;font-size:17px;color:var(--txt);direction:ltr;text-align:left}
.searchbar input::placeholder{color:var(--txt3);direction:rtl;text-align:right}
.badge{font-size:11px;font-weight:700;color:var(--acc);background:rgba(10,132,255,.14);border-radius:6px;padding:1px 6px}

/* scanner */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;min-height:34px;padding:0 14px;border-radius:999px;background:var(--grp);font-size:14px;font-weight:600;color:var(--txt2);border:1px solid var(--line)}
.chips button.on{background:var(--txt);color:#000;border-color:transparent}
/* audit 25/09 #18: at 375px the formation row (squad builder, "mine") scrolls, and the clipped edge chip
   had no affordance. A symmetric fade (not a one-sided gradient, which would point the wrong way once
   mirrored under RTL) hints at the scroll on either edge without touching the layout. */
#sqF,#mnF{-webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent)}

/* tabs */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tabs-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;background:rgba(0,0,0,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line)}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:10px;font-weight:600;min-height:44px}
#tabs a svg{width:24px;height:24px;fill:currentColor}
#tabs a.on{color:var(--acc)}

/* sheet + toast */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;display:flex;align-items:flex-end;animation:fade .2s}
.sheet{width:100%;max-width:640px;margin:0 auto;background:var(--grp);border-radius:20px 20px 0 0;padding:12px 16px calc(20px + var(--safe-b));animation:up .25s cubic-bezier(.2,.8,.2,1)}
/* A sheet taller than the screen used to run off the top with no way to scroll back up (found on the
   v36 holding sheet, true of every sheet). It scrolls inside itself now. */
.sheet{max-height:calc(100dvh - 24px - var(--safe-t));overflow-y:auto;overscroll-behavior:contain}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--elev2);margin:0 auto 12px}
.sheet h2{font-size:20px;font-weight:700;margin-bottom:10px}
.sheet .group{background:var(--elev)}
.sheet .kv input{background:var(--elev2)}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
#toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 20px + var(--safe-b));transform:translateX(-50%) translateY(20px);background:var(--elev);color:var(--txt);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
.skeleton{background:linear-gradient(90deg,var(--grp),var(--elev),var(--grp));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);height:72px;margin-bottom:8px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- v2: filters, summary, range bar ---------- */
.searchbar{display:flex;gap:8px;align-items:center}
.searchbar input{flex:1;min-width:0}
.filter-btn{position:relative;width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:var(--grp);border:1px solid var(--line);color:var(--txt2)}
.filter-btn.on{color:var(--acc);border-color:rgba(10,132,255,.5)}
.filter-btn svg{width:22px;height:22px}
.badge-dot{position:absolute;top:4px;inset-inline-end:4px;min-width:16px;height:16px;border-radius:8px;background:var(--acc);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;font-family:var(--num)}
.kv input.rtl{direction:rtl;text-align:right;font-family:var(--font)}
/* 27/09: a rule name like "99+ Rare" showed as "Rare +99" in the forced-RTL input. Direction from the content, still right-aligned */
.kv input.rtl.autodir{unicode-bidi:plaintext}
.kv select{max-width:60%}

.summary{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);padding:0;overflow:hidden}
.sum{background:var(--grp);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.sum span{font-size:13px;color:var(--txt2)}
.sum b{font-size:19px;font-weight:700;letter-spacing:-.01em}

.rangebar{padding:4px 14px 12px}
.rb-track{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gain),var(--muted),var(--loss));opacity:.85}
.rb-dot{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;margin-inline-start:-7px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.6)}
.rb-labels{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--txt2);gap:8px}
.rb-labels span:nth-child(2){flex:1;text-align:center}

.row.hold{cursor:pointer}
.section-h .chip{cursor:pointer;background:var(--elev);color:var(--acc)}
/* v50.1: an evolution's header opens its full list; the why-line sits under its candidate row */
a.section-h .faint{color:var(--acc)}
.note.evo-why{padding-top:0;margin-top:-4px}
/* v50.2: the upgrade's full list folds away; chips wrap instead of being cut */
.evo-all{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--txt2);font-size:14px}
.evo-all summary{cursor:pointer;color:var(--acc);font-weight:600}
.evo-all p{margin:8px 0 0;line-height:1.55}
.group .kv .v .chip{white-space:nowrap;display:inline-block;margin:2px 0;max-width:none}
.group a.kv .k{color:var(--txt2);font-size:14px}
.delta.rtl{direction:rtl}
.chip.on{background:rgba(10,132,255,.18);color:var(--acc)}
.kv .v .chip{margin-inline-start:4px}
.kv .v{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:70%}

/* ============ v3: the card is the hero ============ */
/* Every row carries its card's own rarity colour, which the catalogue already stores per card. */
.row{--tint:transparent;--edge:var(--line);min-height:96px;padding:12px;gap:12px;
  background:linear-gradient(to left,var(--tint),transparent 62%);
  border-inline-start:3px solid var(--edge)}
[dir="rtl"] .row{background:linear-gradient(to right,var(--tint),transparent 62%)}
.row:active{background:linear-gradient(to right,var(--tint),rgba(255,255,255,.05) 62%)}
.thumb{width:64px;height:88px;border-radius:7px;background:transparent;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.thumb.ph{background:var(--elev);font-size:10px}
.row .name{font-size:16px}
.row .price{font-size:18px}
.row .price.long{font-size:15px}
.row .delta{font-size:13px}

/* price change flash */
@keyframes flash-up{0%{background-color:rgba(48,209,88,.28)}100%{background-color:transparent}}
@keyframes flash-down{0%{background-color:rgba(255,69,58,.28)}100%{background-color:transparent}}
.price.up{animation:flash-up 1.1s ease-out;border-radius:6px}
.price.down{animation:flash-down 1.1s ease-out;border-radius:6px}

/* staggered entry */
@keyframes row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stagger > *{animation:row-in .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 32ms)}
@media (prefers-reduced-motion:reduce){.stagger > *{animation:none}.price.up,.price.down{animation:none}}

/* summary bar */
.summary-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.sb{background:var(--grp);padding:11px 10px;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.sb span{font-size:11px;color:var(--txt2);letter-spacing:.02em}
.sb b{font-family:var(--num);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.sb small{font-family:var(--num);font-size:11px;font-weight:600}

/* pull to refresh */
#ptr{position:fixed;top:calc(var(--safe-t) + 4px);left:50%;transform:translateX(-50%) scale(.6);z-index:25;
  width:32px;height:32px;border-radius:50%;background:var(--elev2);display:grid;place-items:center;
  opacity:0;transition:opacity .15s;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.5)}
#ptr svg{width:18px;height:18px;color:var(--acc)}
#ptr.spin svg{animation:ptr-spin .8s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}

/* designed empty states */
.ghost{padding:14px 10px 6px}
.ghost svg{width:100%;height:110px;display:block;opacity:.35}
.empty-card{background:var(--grp);border-radius:var(--r);padding:22px 18px;text-align:center;margin-bottom:16px}
.empty-card b{display:block;font-size:19px;margin-bottom:6px}
.empty-card p{color:var(--txt2);font-size:15px;line-height:1.65}
.empty-card .btn{margin-top:16px}

/* in-app browser gate (l7, 29/09): sits above every sheet (z-index 40) so it can never be reached
   from underneath, below the splash (100) so the brand mark still shows first. */
#iabGate{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;
  padding:24px 16px calc(24px + var(--safe-b))}
#iabGate .empty-card{max-width:420px;margin-bottom:0}

/* splash */
#splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;
  animation:splash-out .45s ease-in .75s forwards}
#splash .mark{width:92px;height:92px;animation:mark-in .5s cubic-bezier(.2,.8,.2,1) both}
#splash .sweep{transform-origin:50% 50%;animation:sweep 1.1s linear infinite}
#splash .word{position:absolute;bottom:calc(38% - 40px);left:0;right:0;text-align:center;
  font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:.22em;color:var(--txt2);
  animation:mark-in .5s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes mark-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){#splash{animation-delay:.2s}#splash .sweep{animation:none}}


/* ---------- v3.1: the name owns the row, the numbers sit under it ---------- */
.row{align-items:center}
.row .mid{gap:5px}
.row .name{font-size:16px;font-weight:700}
.row .foot{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap;overflow:hidden}
.row .foot .price{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700;font-size:17px;
  letter-spacing:-.01em;direction:ltr;unicode-bidi:isolate;white-space:nowrap;flex:0 0 auto;padding:1px 3px}
.row .foot .price.long{font-size:15px}
.row .foot .delta{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;
  direction:ltr;unicode-bidi:isolate;white-space:nowrap;flex:0 0 auto}
.row .foot .spark{margin-inline-start:auto;flex:0 0 auto;opacity:.95}
/* v38.1: a delta that starts with a Hebrew word ("מ-10K", "נטו 950") keeps RTL; only its number is isolated */
.row .foot .delta.he,.row .delta.he{direction:rtl}
.row .chev{flex:0 0 auto;color:var(--txt3);font-size:22px;line-height:1}
.chev svg{display:inline-block;vertical-align:middle;width:8px;height:14px}
.row .meta{font-size:12.5px}
/* v53 (27/09, "alert from search"): a 36px circle is the same touch-target size as .filter-btn already
   uses (44px including its padding box) minus the row's own tighter spacing - large enough on a 375px
   phone without crowding the price/chevron beside it. */
.row .bell{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--txt3)}
.row .bell svg{width:18px;height:18px}
.row .bell.on{color:var(--gold);background:rgba(255,214,10,.14)}
.row .bell:active{background:var(--elev)}
/* a touch more of the card colour, now that the row is taller */
.row{background:linear-gradient(to right,var(--tint),transparent 70%)}
.bigprice .stamp{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px;
  font-size:12px;color:var(--txt3);line-height:1.5}
.bigprice .stamp .ltr{font-size:12px}

/* the pulse: decisions, not another list */
.pulse{background:var(--grp);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.pulse-h{font-size:12px;font-weight:700;color:var(--txt2);letter-spacing:.03em;padding:11px 14px 7px}
.pulse-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:15px;min-height:48px}
.pulse-row:first-of-type{border-top:0}
.pulse-row .pi{flex:0 0 auto;font-size:17px;line-height:1}
.pulse-row .pt{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
/* The name is the part allowed to lose characters. The decision never is. */
.pulse-row .pname{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.pulse-row .pmeta{flex:0 0 auto;font-size:14px;color:var(--txt2)}
.pulse-row .chev{flex:0 0 auto;color:var(--txt3);font-size:20px;line-height:1}
.pulse-row.hit{background:rgba(48,209,88,.10)}
.pulse-row.hit .pname{color:var(--gain)}
.pulse-row.gain .pname{color:var(--gain)}
.pulse-row.loss .pname{color:var(--loss)}
.pulse-note{padding:8px 14px 11px;font-size:11px;color:var(--txt3);border-top:1px solid var(--line)}
.pulse.quiet{padding:12px 14px;font-size:13px;color:var(--txt2);line-height:1.45}

/* holdings rows are not links, so they need the row affordances spelled out */
.row.hold{cursor:pointer}
.row.hold .foot .delta{font-size:13px}
.group.summary .sum small{display:block;font-size:11px;font-weight:600;margin-top:1px}
.row .meta .sep{color:var(--txt3);flex:0 0 auto}

/* A holdings row carries four facts, which overflows one line at 390px. The row clipped instead of
   wrapping, and in RTL the clip ate the leading digit: a 31,000 price rendered as "1,000". A wrong
   number shown confidently is worse than a wrapped line, so this one wraps. */
.row.hold .meta{white-space:normal;flex-wrap:wrap;overflow:visible;row-gap:1px}

/* SBC shopping list */
.sbc-opts{background:var(--grp);border-radius:var(--r);margin:-8px 0 14px;overflow:hidden}
.sbc-opts summary{padding:11px 14px;font-size:13px;color:var(--txt2);cursor:pointer;list-style:none}
.sbc-opts summary::-webkit-details-marker{display:none}
.sbc-opts summary::after{content:'⌄';float:inline-start;color:var(--txt3);font-size:15px;line-height:1}
.sbc-opts[open] summary::after{content:'⌃'}
.opt-list{border-top:1px solid var(--line)}
.opt{display:flex;align-items:center;gap:9px;padding:9px 14px;border-top:1px solid var(--line);font-size:14px;min-height:42px}
.opt:first-child{border-top:0}
.opt .n{flex:0 0 auto;width:18px;color:var(--txt3);font-family:var(--num);font-size:12px}
.opt .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.opt .cl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt3);font-size:12px}
.opt .pr{flex:0 0 auto;font-weight:700}

/* A three-cell summary left a visible empty box in the two-column grid. The odd one out spans. */
.group.summary > .sum:nth-child(3):last-child{grid-column:1/-1}

.sbc-line{background:var(--grp);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.sbc-line-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;font-size:14px;font-weight:700}
.sbc-line-h .num{font-size:16px}
.sbc-line .opt-list{border-top:1px solid var(--line)}
.sbc-opts.flat{background:transparent;border-radius:0;margin:0;border-top:1px solid var(--line)}

/* squad builder */
.opt.sq .pos{flex:0 0 auto;min-width:34px;font-family:var(--num);font-size:11px;font-weight:700;color:var(--txt2);
  background:var(--elev);border-radius:5px;padding:2px 5px;text-align:center}
.opt.sq .chem{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--num);font-size:11px;font-weight:800}
.opt.sq .chem.c3{background:rgba(48,209,88,.18);color:var(--gain)}
.opt.sq .chem.c2{background:rgba(255,214,10,.18);color:var(--gold)}
.opt.sq .chem.c1{background:rgba(255,214,10,.12);color:var(--gold)}
.opt.sq .chem.c0{background:rgba(255,69,58,.18);color:var(--loss)}
.sbc-line-h .mini{font-size:12px;font-weight:600;color:var(--acc);padding:4px 8px;border-radius:7px;background:var(--elev)}
.warn-card{background:rgba(255,214,10,.10);border:1px solid rgba(255,214,10,.25);border-radius:var(--r);
  padding:11px 14px;margin-bottom:12px;font-size:13px;color:var(--gold);line-height:1.45}
.group.summary > .sum:nth-child(4){grid-column:auto}

/* Club and league names are Latin inside an RTL row. Without direction isolation the ellipsis eats
   the FRONT of the string, so "Borussia Dortmund" renders as "...russia Dortmund". Same fault that
   put a price's leading digit in the bin on the holdings screen. */
.opt .cl{direction:ltr;unicode-bidi:isolate;text-align:start}
/* 26/09: the Streamlined score puts "נק׳" in .cl, which is forced LTR for club/league names. The word is its own
   right-to-left island so "12 נק׳" never reorders. */
.opt .cl .he{direction:rtl;unicode-bidi:isolate}
/* The player name is what the row is for, so it gets the room and the club yields it. */
.opt.sq .nm{flex:1 1 auto}
.opt.sq .cl{flex:0 1 82px}
@media (min-width:400px){.opt.sq .cl{flex:0 1 130px}}


/* ---------- the pitch, direction A (24/09) ----------
   The real card is the tile, and the space around it is the design: generous row gaps, a deep turf,
   hairline markings. Width comes from the widest row (--m), height from the number of rows (--cwh),
   whichever is smaller, so all eleven stay on one screen in every formation. */
.pitch2{
  position:relative;direction:ltr;margin:14px 0 10px;padding:28px 14px;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(90% 55% at 50% 50%,rgba(255,255,255,.035),transparent 70%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.016) 0 52px,transparent 52px 104px),
    linear-gradient(180deg,#0D2F1F 0%,#0A2618 50%,#071C12 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -24px rgba(0,0,0,.9);
}
.pitch2 .pl{position:absolute;border:1px solid rgba(255,255,255,.10);pointer-events:none}
.pitch2 .pl.half{left:0;right:0;top:50%;height:0;border-width:1px 0 0}
.pitch2 .pl.circ{left:50%;top:50%;width:28%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.pitch2 .pl.spot{left:50%;top:50%;width:4px;height:4px;border:0;border-radius:50%;background:rgba(255,255,255,.18);transform:translate(-50%,-50%)}
.pitch2 .pl.box{left:21%;right:21%;height:12%}
.pitch2 .pl.six{left:37%;right:37%;height:4.5%}
.pitch2 .pl.t{top:-1px;border-top:0}
.pitch2 .pl.b{bottom:-1px;border-bottom:0}
.prows{position:relative;display:flex;flex-direction:column;gap:var(--gy,30px)}
.prow2{display:flex;justify-content:space-evenly;align-items:flex-start}
.pcard{
  position:relative;flex:none;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  width:min(var(--cwh,86px),calc((100% - (var(--m,4) - 1) * 12px) / var(--m,4)),96px);
  container-type:inline-size;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.pcard:active{transform:scale(.95)}
.pcard:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:12px}
.pcard img,.pcard .pblank{display:block;width:100%;aspect-ratio:300/419;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.pcard .pblank{display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.06);font-weight:800;font-size:20px}
.pcard .ppill{
  /* Below the card, never on it (Gal 24/09): the card is the object, the price is a caption. Sized in
     card widths (cqw) so it keeps its proportion at the 68px a six-row formation gets. */
  margin-top:7px;display:flex;align-items:center;gap:.4em;white-space:nowrap;
  padding:.15em .7em .15em .6em;border-radius:999px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.14);
  font-size:clamp(9px,13cqw,12px);font-weight:700;line-height:1.45;
}
.cdots{display:inline-flex;gap:2px;direction:ltr}
.cdots i{width:.36em;height:.36em;border-radius:50%;background:rgba(255,255,255,.22)}
.cdots.c3 i.on{background:var(--gain)}
.cdots.c2 i.on{background:var(--gold)}
.cdots.c1 i.on{background:#FF9F0A}
.pcard .ptag{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:1;padding:1px 7px;border-radius:6px;
  background:var(--acc);font-size:10px;font-weight:800;letter-spacing:.04em;line-height:15px;box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.pcard.locked img{filter:drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 0 10px rgba(255,214,10,.35)) drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.pcard .plk{position:absolute;top:-6px;right:-4px;z-index:1;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#000;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pcard .plk svg{width:11px;height:11px}
/* sq5 "דסק מסחר" (Gal 01/10): a price tape under each card instead of the pill (owners). The top edge and the move take
   the 24h color; flat is a quiet grey edge. Oxanium for the digits. Review 01/10: the app's own green and red (one family
   on the whole screen), and never under 10.5px, since a 6-row formation gives a card 68px. */
.pcard .ptape{margin-top:7px;width:calc(100% + 6px);margin-inline:-3px;display:flex;justify-content:space-between;align-items:center;gap:3px;direction:ltr;
  padding:2px 5px 1px;background:#000;border-top:2px solid var(--elev2);border-radius:0 0 5px 5px;box-shadow:0 4px 10px rgba(0,0,0,.45);
  font:700 clamp(10.5px,13cqw,12px)/1.4 'Oxanium',var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard .ptape.flat{justify-content:center}
.pcard .ptape.up{border-top-color:var(--gain)}.pcard .ptape.dn{border-top-color:var(--loss)}
.pcard .ptape .pct{font-weight:800}
.pcard .ptape.up .pct{color:var(--gain)}.pcard .ptape.dn .pct{color:var(--loss)}
.pcard .ptape .pown-p{font-family:var(--font);direction:rtl}
.pcard > .cdots{margin-top:4px;font-size:clamp(9px,13cqw,12px)}
/* the squad index above the pitch, in the app's card colors (Gal 01/10) */
.sq-idx{margin:4px 0 12px;padding:12px 14px 10px;border-radius:16px;background:var(--grp);border:.5px solid var(--line2)}
.sq-idx .ix-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sq-idx .ix-k{font-size:12.5px;font-weight:600;color:var(--txt2)}
.sq-idx .ix-big{justify-content:flex-start;margin-top:2px}
.sq-idx .ix-v{font:700 28px/1.1 'Oxanium',var(--num);direction:ltr;letter-spacing:-.01em}
.sq-idx .ix-d{font:700 15px 'Oxanium',var(--num);direction:ltr}
.sq-idx.up .ix-d{color:var(--gain)}.sq-idx.dn .ix-d{color:var(--loss)}
.sq-idx svg{display:block;width:100%;height:46px;margin-top:6px}
.sq-idx .ix-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--txt2);margin-top:2px}
.sq-idx .ix-save{margin-top:8px;padding-top:8px;border-top:.5px solid var(--line);font-size:14px;font-weight:600;color:var(--txt2)}
.sq-idx .ix-save.gain{color:var(--gain)}
/* the buy list, Apple Reminders style (Gal 01/10) */
.buy-lt{font:700 32px/1.1 -apple-system,'SF Pro Display',var(--font);letter-spacing:-.01em;margin-top:4px}
.buy-lts{color:var(--txt2);font-size:15px;margin:4px 0 10px}
.buy-lts b{color:var(--txt);font-weight:600}
.buy-prog{height:4px;border-radius:4px;background:var(--elev);overflow:hidden}
.buy-prog i{display:block;height:100%;background:var(--acc);border-radius:4px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.buy-bud{font-size:13px;color:var(--txt2);margin:6px 0 4px}
.buy-sec{display:flex;align-items:baseline;gap:8px;margin:18px 4px 8px}
.buy-sec b{font-size:17px;font-weight:700}
.buy-sec span{font-size:13px;color:var(--txt2)}
.buy-sec.up b{color:var(--gain)}.buy-sec.dn b{color:var(--loss)}.buy-sec.own b{color:var(--acc)}
.buy-grp{background:var(--grp);border-radius:12px;overflow:hidden}
.buy-rw{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px 10px 12px;position:relative;
  border:0;background:none;color:inherit;font:inherit;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent}
.buy-rw:active:not(:disabled){background:var(--elev)}
.buy-rw+.buy-rw::before{content:"";position:absolute;top:0;left:0;right:50px;height:.5px;background:rgba(84,84,88,.6)}
.buy-cir{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--muted);transition:all .2s}
.buy-rw.done{cursor:default}
.buy-rw.done .buy-cir{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 3px var(--grp)}
.buy-t{flex:1;min-width:0;display:block}
.buy-t b{display:block;font-size:17px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-t span{font-size:13.5px;color:var(--txt2)}
.buy-rw.done .buy-t b{color:var(--txt2)}
.buy-cap{flex:none;min-width:50px;text-align:center;padding:2px 6px;border-radius:6px;font:700 12px var(--num);color:#000;direction:ltr}
.buy-cap.up{background:var(--gain)}.buy-cap.dn{background:var(--loss)}.buy-cap.flat{background:var(--elev2);color:var(--txt)}
.buy-done{margin:14px 0 2px;padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(48,209,88,.22),rgba(48,209,88,.06));
  border:.5px solid rgba(48,209,88,.4);animation:buyPop .5s cubic-bezier(.3,1.5,.6,1)}
.buy-done b{display:block;font-size:22px;font-weight:800}
.buy-done p{font-size:14px;color:var(--txt2);margin-top:4px}
.buy-done p.gain{color:var(--gain);font-weight:700}
@keyframes buyPop{0%{transform:scale(.92);opacity:0}100%{transform:none;opacity:1}}
/* "כמה שילמת?" is an iOS alert in the upper part of the screen, so the keyboard never covers it */
.buy-al{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:flex-start;
  padding:calc(16vh + var(--safe-t)) 16px 0;opacity:0;transition:opacity .2s}
.buy-al.on{opacity:1}
.buy-al .box{width:min(290px,100%);background:rgba(44,44,46,.97);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-radius:14px;overflow:hidden;
  transform:scale(1.08);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.buy-al.on .box{transform:none}
.buy-al .hd{padding:18px 16px 12px;text-align:center}
.buy-al .hd b{display:block;font-size:17px;font-weight:700}
.buy-al .hd span{font-size:15px;color:var(--txt)}
.buy-al input{display:block;width:calc(100% - 32px);margin:0 16px 16px;height:44px;border-radius:9px;border:.5px solid var(--line2);background:var(--grp);color:var(--txt);font:600 22px var(--num);text-align:center;direction:ltr}
.buy-al .btns{display:flex;border-top:.5px solid rgba(84,84,88,.6)}
.buy-al .btns button{flex:1;height:48px;border:0;background:none;color:var(--acc);font:400 17px -apple-system,var(--font);cursor:pointer}
.buy-al .btns .ok{font-weight:700;border-inline-start:.5px solid rgba(84,84,88,.6)}
.buy-al .btns .ok:disabled{opacity:.5}
#sqBuy{white-space:nowrap;flex:0 0 auto}

/* the summary above the pitch: three calm numbers, not four boxes */
.sq-sum{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin-top:12px}
.sq-sum > div{background:var(--grp);padding:12px 10px 13px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.sq-sum .k{font-size:12px;color:var(--txt2);font-weight:500}
.sq-sum b{font-family:var(--num);font-weight:800;font-size:25px;letter-spacing:-.02em;line-height:1.1}
.sq-sum small{font-size:12px;color:var(--txt3)}
.sq-chem{display:flex;align-items:center;justify-content:center;gap:7px;direction:ltr}
.sq-chem svg{width:24px;height:24px;flex:none}

/* the player sheet */
.psh{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.psh img{width:108px;flex:none;aspect-ratio:300/419;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.psh h2{margin:0;font-size:22px;line-height:1.15}
.psh p{margin:4px 0 0;color:var(--txt2);font-size:14px}
.psh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;margin-bottom:6px}
.psh-stats div{background:var(--elev);padding:9px 4px;text-align:center;display:flex;flex-direction:column;gap:1px}
.psh-stats span{font-size:11px;color:var(--txt2)}
.psh-stats b{font-size:17px;font-weight:800}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}}

/* SBC solution as cards, not text (Gal 25/09: "I also want the cards to be seen"). Reuses pitch2/pcard
   as-is; .sol only needs smaller padding and no --cwh cap, since it sits inside a sheet or the solve
   tab rather than a full-height screen and the sheet already scrolls if the pitch runs long. */
.pitch2.sol{padding:20px 10px 22px;margin:12px 0 14px}
.pitch2.sol .pcard{width:min(calc((100% - (var(--m,4) - 1) * 12px) / var(--m,4)),92px)}
/* Streamlined challenges submit individual items, not an eleven on a pitch: the same card tile,
   wrapped in a plain group since there is no formation to place them on. */
.sol-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 10px;background:var(--grp);
  border-radius:var(--r);padding:16px 10px;margin:12px 0 14px}
.sol-grid .pcard{width:72px}


/* buy / sell target with a cap */
.kv.tgt .k{display:flex;flex-direction:column;line-height:1.2}
.kv.tgt .k small{font-size:12px;color:var(--txt3);font-weight:400}
.tgt-in{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tgt-max{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--txt2)}
.tgt-max input{width:38px;text-align:center;padding:2px 4px}
.kv.tgt:has(+ .tgt-status){border-bottom:0;padding-bottom:4px}
.tgt-status{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 12px;font-size:13px;color:var(--txt2);border-bottom:1px solid var(--line)}
.tgt-status.done{color:var(--gold)}

/* live SBCs */
.opt.lv{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;font:inherit;text-align:start;cursor:pointer;justify-content:space-between}
.opt.lv .lv-n{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.opt.lv .lv-n small{font-size:12px;color:var(--txt3)}
.opt.lv .lv-why{font-size:12px;color:var(--txt2);text-align:end;max-width:55%}

/* my squad (v32): empty slots, out-of-position cards, the slot picker */
.pcard.mn-empty .pblank{border:1.5px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:4px;box-shadow:none;filter:none}
.pcard .mn-plus{font-size:26px;font-weight:300;line-height:1;color:var(--txt2)}
.pcard .mn-slot{font-size:clamp(9px,14cqw,12px);font-weight:800;letter-spacing:.04em;color:var(--txt3)}
.pcard.mn-empty .ppill{color:var(--txt3);font-weight:600}
.pcard .ptag.mn-bad{background:var(--loss);white-space:nowrap}
.pcard.mn-oop img{opacity:.72}
.mn-warn p + p{margin-top:6px}
.mn-warn{color:var(--txt)}
.sheet .searchbar.mn-q{position:static;padding:0 0 8px;background:none}
.sheet .searchbar.mn-q input{background:var(--elev);direction:ltr;text-align:left}

/* slot picker, design C (v33): a deck of real cards, and the centred one against the player in the slot */
.sheet.pk-sheet{max-height:calc(100dvh - 24px - var(--safe-t));overflow-y:auto;overscroll-behavior:contain}
.pk-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.sheet .pk-h h2{margin-bottom:0}
.pk-now{font-size:13px;color:var(--txt2)}
.pk-now .ltr{color:var(--txt);font-weight:600}
.chips.pk-sorts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips.pk-sorts::-webkit-scrollbar{display:none}
.chips.pk-sorts .lab{flex:none;align-self:center;font-size:12px;color:var(--txt3)}
.chips.pk-sorts button{flex:none}
.pk-deck{margin:6px -16px 0;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px calc(50% - 72px) 6px;scrollbar-width:none;direction:ltr}
.pk-deck::-webkit-scrollbar{display:none}
.pk-dk{flex:none;width:144px;padding:0;scroll-snap-align:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:.4;transform:scale(.84)}
.pk-dk.cur{opacity:1;transform:scale(1)}
.pk-dk img,.pk-dk .pblank{display:block;width:100%;aspect-ratio:300/419;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.pk-dk .pblank{display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.06);font-weight:800;font-size:28px;filter:none}
.pk-count{text-align:center;font-size:12px;color:var(--txt3);margin-top:2px}
.pk-more{text-align:center}
.pk-cmp{margin-top:10px;background:var(--elev);border-radius:var(--r);padding:12px 12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;align-items:center}
.pk-cmp h3{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:17px;font-weight:700}
.pk-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--txt2);margin-bottom:2px}
.pk-legend span{display:flex;align-items:center;gap:5px}
.pk-legend i{width:10px;height:3px;border-radius:2px;display:inline-block}
.pk-legend i.me{background:var(--acc)} .pk-legend i.them{background:rgba(235,235,245,.45)}
.pk-oop{color:var(--loss);font-weight:600}
.pk-radar{width:100%;max-width:170px;justify-self:center;overflow:visible}
.pk-radar .grid{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.pk-radar .rim{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.pk-radar .them{fill:rgba(235,235,245,.08);stroke:rgba(235,235,245,.45);stroke-width:1.2;stroke-dasharray:3 3}
.pk-radar .me{fill:rgba(10,132,255,.28);stroke:var(--acc);stroke-width:2;stroke-linejoin:round}
.pk-radar text{font-family:var(--num);font-size:8.5px;font-weight:700;fill:rgba(235,235,245,.45)}
.pk-deltas{display:flex;flex-direction:column;gap:5px;direction:ltr}
.pk-dl{display:grid;grid-template-columns:30px 26px 1fr;align-items:center;gap:6px;font-family:var(--num);font-size:12.5px}
.pk-dl .l{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--txt3)}
.pk-dl .v{font-weight:800;color:var(--sc,var(--txt))}
.pk-dl .d{font-size:11.5px;font-weight:700;text-align:right}
.pk-dl.s90{--sc:var(--gain)} .pk-dl.s80{--sc:#8FD14F} .pk-dl.s70{--sc:var(--gold)} .pk-dl.s60{--sc:#FF9F0A} .pk-dl.s0{--sc:var(--loss)}
.pk-nostats{grid-column:1/-1;font-size:13px;color:var(--txt2);padding:8px 0}
.pk-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;direction:ltr;justify-content:flex-end}
.pk-meta span{font-family:var(--num);font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:7px;background:var(--elev2);color:var(--txt2);unicode-bidi:isolate}
.pk-cta{grid-column:1/-1;margin-top:10px;background:var(--acc);color:#fff;font-weight:700;font-size:16px;border-radius:12px;min-height:46px;display:flex;align-items:center;justify-content:center}
.pk-cta[disabled]{background:var(--elev2);color:var(--txt2)}
/* v34: what placing the card does to chemistry, under each card and in the comparison */
.pk-dk{display:flex;flex-direction:column;align-items:center}
.pk-dk .ppill{margin-top:7px;display:inline-flex;align-items:center;gap:.45em;padding:.15em .7em;border-radius:999px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.14);font-size:12px;font-weight:700}
.pk-chem{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;margin:2px 0 4px}
.pk-chem .k{color:var(--txt2)}
.pk-chem .num{font-weight:700}
/* v35: PlayStyle+ names from EA's feed (base cards only) */
.pk-psp{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;direction:ltr;justify-content:flex-end}
.pk-psp span{font-family:var(--num);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--gold);background:rgba(255,214,10,.12);border:.5px solid rgba(255,214,10,.3);unicode-bidi:isolate}
/* v51.4 (26/09): card screen "סטטים" section (Gal's approved option B1). WF/SM hero tiles, then plain
   (non-plus) PlayStyle chips -- grey, same look as .pk-psp above but never gold, since that colour is
   PlayStyle+'s alone -- then the radar + deltas in a fixed 170px-plus-rest grid (pkRadar/.pk-radar/
   .pk-deltas/.pk-dl above are reused as they are; only this wrapper and the tiles are new). */
.wfsm-hero{display:flex;gap:10px;padding:14px 12px 2px}
.wfsm-tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px 12px;border-radius:18px;background:var(--elev)}
.wfsm-tile b{font-family:var(--num);font-size:30px;font-weight:800;line-height:1;color:var(--gold);display:flex;align-items:baseline;gap:2px}
.wfsm-tile b i{font-style:normal;font-size:15px}
.wfsm-tile span{font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--txt2);text-transform:uppercase}
.ps-plain{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 8px;direction:ltr;justify-content:flex-end}
.ps-plain span{font-family:var(--num);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--txt2);background:var(--elev2);unicode-bidi:isolate}
.radarwrap{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:14px 12px;align-items:center}
@media (max-width:360px){.radarwrap{grid-template-columns:1fr}}
/* the card screen's "אבולושיינים" section right under it: how many, then each one this card fits today. */
.evocount{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 10px;gap:10px}
.evocount .big{font:800 20px var(--num);color:var(--txt)}
.evocount .lbl{font-size:13px;color:var(--txt2)}
.zerobox{padding:16px 14px 18px;color:var(--txt2);font-size:13.5px;line-height:1.65}
/* v36: the journal (months, strategies) and the delivery log */
.jr-mo .v{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.jr-mo .v small,.jr-log .k small{font-size:11.5px;color:var(--txt3);font-weight:500}
.jr-log .k{display:flex;flex-direction:column;gap:2px;min-width:0}
.jr-log .k b{font-weight:600;font-size:14px;direction:rtl;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:62vw}
.jr-log .v{font-size:12.5px;text-align:left}

/* v37 neon portfolio (Gal 24/09): a glowing up, a hot down. Scoped to the portfolio screen. */
:root{--nu:#39FF88;--nd:#FF3B5C}
.nhalo{position:absolute;inset:0 0 auto 0;height:340px;pointer-events:none;z-index:-1}
.nhalo.nu{background:radial-gradient(90% 60% at 50% 0%,rgba(57,255,136,.20),transparent 70%)}
.nhalo.nd{background:radial-gradient(90% 60% at 50% 0%,rgba(255,59,92,.20),transparent 70%)}
.screen{position:relative;isolation:isolate}
.nhero{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 4px}
.nhero span{font-size:13px;color:var(--txt2);font-weight:600}
.nhero b{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1.08}
.nglow.nu{color:var(--nu);text-shadow:0 0 18px rgba(57,255,136,.55),0 0 42px rgba(57,255,136,.25)}
.nglow.nd{color:var(--nd);text-shadow:0 0 18px rgba(255,59,92,.55),0 0 42px rgba(255,59,92,.25)}
.npair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}
.npair > div{border-radius:16px;padding:12px;background:rgba(28,28,30,.85);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.npair > div.nu{border-color:rgba(57,255,136,.35);box-shadow:inset 0 0 22px rgba(57,255,136,.10)}
.npair > div.nd{border-color:rgba(255,59,92,.35);box-shadow:inset 0 0 22px rgba(255,59,92,.10)}
.npair span{font-size:12px;color:var(--txt2)}
.npair b{font-size:22px;font-weight:800}
.npair small{font-size:11.5px;color:var(--txt3)}
.row.hold.neon{position:relative}
.row.hold.neon::after{content:"";position:absolute;inset-block:12px;right:0;width:3px;border-radius:3px;pointer-events:none}
.row.hold.neon.nu::after{background:var(--nu);box-shadow:0 0 12px var(--nu),0 0 3px var(--nu)}
.row.hold.neon.nd::after{background:var(--nd);box-shadow:0 0 12px var(--nd),0 0 3px var(--nd)}
.npill{display:inline-flex;flex-direction:column;align-items:center;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;line-height:1.2;white-space:nowrap}
.npill small{font-size:10.5px;font-weight:700;opacity:.85}
.row.hold.nu .npill{color:var(--nu);background:rgba(57,255,136,.12);box-shadow:0 0 14px rgba(57,255,136,.25)}
.row.hold.nd .npill{color:var(--nd);background:rgba(255,59,92,.12);box-shadow:0 0 14px rgba(255,59,92,.25)}
/* the record below the rows: profits read in the same neon pair */
#stage .jr-mo .gain,#stage .summary .gain{color:var(--nu);text-shadow:0 0 12px rgba(57,255,136,.4)}
#stage .jr-mo .loss,#stage .summary .loss{color:var(--nd);text-shadow:0 0 12px rgba(255,59,92,.4)}
@media (prefers-reduced-motion:reduce){.nglow{text-shadow:none}}

/* ---------- navigation (v40): a stack of screens per tab, back button, edge swipe ---------- */
.screen.off{display:none}
.screen.peek{display:block;position:fixed;z-index:1;pointer-events:none;will-change:transform}
.screen.peek::after{content:"";position:absolute;inset:-100vh 0;background:#000;opacity:var(--shade,0);pointer-events:none}
.screen.front{z-index:2;background:var(--bg);min-height:100dvh;box-shadow:0 0 28px rgba(0,0,0,.55);will-change:transform}
.backbtn{display:flex;align-items:center;gap:4px;color:var(--acc);font-size:16px;font-weight:500;min-height:36px;margin:-4px -6px 2px;padding:0 6px;border-radius:10px}
.backbtn[hidden]{display:none}
.backbtn svg{width:11px;height:18px}
.backbtn:active{opacity:.55}
.sheet-x{position:absolute;top:10px;left:12px;width:30px;height:30px;border-radius:50%;background:var(--elev);color:var(--txt2);font-size:17px;line-height:30px;text-align:center}
.sheet{position:relative;touch-action:pan-y}

/* =====================================================================================================
   v42 design layer: iOS 26 Liquid Glass, blue (Gal 25/09, mockup artifact 81Dx3ysFW5Geio19mTdtSd).
   A layer on top of the tokens above, so every screen inherits it. Real blur only on what floats (header
   edge, tab pill, back button, sheets, toast); groups and lists get the glass fill and rim without
   backdrop-filter, which is what keeps scrolling smooth on an older iPhone (Gal's call).
   ===================================================================================================== */
:root{
  --grp:rgba(255,255,255,.072); --elev:rgba(255,255,255,.11); --elev2:rgba(255,255,255,.17);
  --line:rgba(255,255,255,.09);
  --r:26px; --r-sm:14px;
  --glass:rgba(255,255,255,.085);
  --glass-strong:rgba(34,34,38,.62);
  --rim:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.14) 28%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.14) 74%,rgba(255,255,255,.4));
  --spring:cubic-bezier(.34,1.36,.64,1);
  --tabs-h:64px;
}
/* The light the glass bends: a faint blue from the top corner and warm gold from the side. Fixed behind
   everything (background-attachment:fixed is ignored by iOS Safari, a fixed layer is not). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 38% at 88% -6%,rgba(10,132,255,.24),transparent 70%),
             radial-gradient(70% 30% at 0% 24%,rgba(230,164,107,.12),transparent 72%),
             radial-gradient(80% 40% at 50% 110%,rgba(10,132,255,.10),transparent 70%)}
html,body{background:#000}
.screen.front{background:#000}

/* the material: fill, a specular rim brighter at two corners, a hairline highlight on top */
.group,.lg{position:relative;background:var(--grp);box-shadow:inset 0 .5px 0 rgba(255,255,255,.28),0 10px 30px -12px rgba(0,0,0,.6)}
.group::before,.lg::before,#tabs::before,.sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);z-index:1}
.group{border-radius:var(--r)}
.row{border-bottom:0}
.row:not(:first-child)::after{content:"";position:absolute;top:0;inset-inline:68px 16px;height:.5px;background:var(--line)}
.row:active{background:rgba(255,255,255,.06)}
.thumb{border-radius:8px;background:transparent}

/* header: no bar, a soft blur that fades out downward (the iOS 26 scroll edge) */
header{background:linear-gradient(rgba(0,0,0,.86),rgba(0,0,0,.66) 65%,rgba(0,0,0,0));border-bottom:0;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  -webkit-mask:linear-gradient(#000 calc(100% - 14px),transparent);mask:linear-gradient(#000 calc(100% - 14px),transparent);padding-bottom:14px}
header h1{font-size:32px;letter-spacing:-.015em}
.seg{position:relative;background:var(--glass);border-radius:999px;padding:3px;box-shadow:inset 0 .5px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8)}
.seg button{border-radius:999px;padding:6px 13px}
.seg button.on{background:rgba(255,255,255,.2);box-shadow:inset 0 .5px 0 rgba(255,255,255,.45)}
.backbtn{background:var(--glass);border-radius:999px;padding:0 14px 0 12px;min-height:36px;margin:0 -2px 8px;
  -webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 0 .5px 0 rgba(255,255,255,.4),0 6px 18px -8px rgba(0,0,0,.6);
  width:max-content;transition:transform .18s var(--spring)}
.backbtn:active{transform:scale(.94);opacity:1}

/* the floating tab pill, with a glass lens that slides to the active tab and a minimised state on scroll */
#tabs{left:16px;right:16px;bottom:calc(12px + var(--safe-b));height:var(--tabs-h);padding:5px;border-top:0;border-radius:999px;
  background:rgba(28,28,32,.55);-webkit-backdrop-filter:blur(24px) saturate(1.9);backdrop-filter:blur(24px) saturate(1.9);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),0 16px 40px -10px rgba(0,0,0,.75);
  transition:left .45s var(--spring),box-shadow .3s}
#tabs a{position:relative;z-index:2;border-radius:999px;min-height:0;color:rgba(235,235,245,.72);font-size:10.5px;
  transition:flex .45s var(--spring),opacity .25s,transform .18s var(--spring),color .25s;overflow:hidden}
#tabs a:active{transform:scale(.9)}
#tabs a.on{color:var(--acc)}
#tabs .ind{position:absolute;top:5px;bottom:5px;right:0;z-index:1;border-radius:999px;background:rgba(255,255,255,.14);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.45),inset 0 -.5px 0 rgba(255,255,255,.12);
  transition:transform .5s var(--spring),width .5s var(--spring),opacity .25s;pointer-events:none}
#tabs.min{left:calc(100% - 16px - 76px)}
#tabs.min a:not(.on){flex:0 0 0;opacity:0;pointer-events:none}
#tabs.min a span{display:none}
#tabs.min .ind{opacity:0}
main{padding-bottom:calc(var(--tabs-h) + 40px + var(--safe-b))}
#toast{bottom:calc(var(--tabs-h) + 28px + var(--safe-b));border-radius:999px;background:rgba(40,40,44,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}

/* controls */
.btn{border-radius:999px;transition:transform .18s var(--spring),opacity .15s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--glass);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
/* roy-0610 (Roy 06/10: "color the buttons that should stand out"): one colour per action on every screen. Watch = the blue .btn,
   portfolio = green (.hold), remove or delete = the red tint of the squad screens (.rmv; the armed tap still turns it solid .danger). */
.btn.hold{background:rgba(48,209,88,.18);color:var(--gain);box-shadow:inset 0 0 0 .5px rgba(48,209,88,.5)}
.btn.ghost.rmv{background:rgba(255,69,58,.16);color:var(--loss);box-shadow:inset 0 0 0 .5px rgba(255,69,58,.45)}
.chips button{background:var(--glass);border:0;color:var(--txt);box-shadow:inset 0 .5px 0 rgba(255,255,255,.28);transition:transform .18s var(--spring),background .2s}
.chips button:active{transform:scale(.94)}
.chips button.on{background:var(--acc);color:#fff;box-shadow:inset 0 .5px 0 rgba(255,255,255,.5),0 6px 16px -6px var(--acc)}
.ranges{margin:12px 12px 4px;padding:3px;gap:0;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 .5px 1px rgba(0,0,0,.45)}
.ranges button{border-radius:999px;min-height:32px;transition:background .25s,color .25s}
.ranges button.on{background:rgba(255,255,255,.16);box-shadow:inset 0 .5px 0 rgba(255,255,255,.45),0 2px 8px rgba(0,0,0,.25)}
.searchbar{background:transparent}
.searchbar input{border-radius:999px;background:var(--glass);border:0;box-shadow:inset 0 .5px 0 rgba(255,255,255,.28)}
.kv input,.kv select{border-radius:10px}
.ovr{border-radius:8px}

/* card page: the halo in the card's own colour, behind the card, under the glass */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;left:50%;top:-40px;width:130%;max-width:560px;height:420px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(55% 48% at 50% 42%,color-mix(in srgb,var(--hc,#e6a46b) 62%,transparent),transparent 72%),
             radial-gradient(80% 60% at 50% 10%,color-mix(in srgb,var(--hc,#e6a46b) 22%,transparent),transparent 75%);
  filter:blur(6px);opacity:.9}
.hero img{width:196px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.bigprice .p{font-size:46px}

/* sheets float: real glass */
.sheet{background:rgba(30,30,34,.74);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  border-radius:30px 30px 0 0;box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.sheet .group{background:rgba(255,255,255,.07)}
.sheet-x{background:var(--glass);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));background-size:200% 100%}
@media (prefers-reduced-motion:reduce){#tabs.min{left:16px}#tabs.min a:not(.on){flex:1;opacity:1;pointer-events:auto}#tabs.min a span{display:inline}}

/* =====================================================================================================
   v44 home tab (Gal 25/09, design artifact 6yHgLPgxw9xseUV4nqbMeR, direction "glass")
   ===================================================================================================== */
.home-hi{font-size:15px;font-weight:500;color:var(--txt2);margin:2px 4px 4px}
.home-line{font-size:23px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 4px 16px;text-wrap:pretty}
.home-line em{font-style:normal}
/* item 2 audit (26/09): each clause of homeLine() is now its own <p>, so a wrap never crosses between two
   independent sentences; a small gap reads better than the two lines touching. The name itself (.hl-name,
   a player from a break-even alert) stays one non-breaking unit - it is short, so this never fights the
   line for room the way forcing a whole sentence to nowrap would. */
.home-line p + p{margin-top:4px}
.home-line .hl-name{white-space:nowrap}
/* 30/09 (Gal): three even lines, a quiet label and a bold value each, so the market line never breaks mid-value at 390 */
.home-line .hl-sub{font-size:18px;font-weight:700;line-height:1.35}
.home-line .hl-k{color:var(--txt2);font-weight:500}
.home-line p.hl-sub + p.hl-sub{margin-top:6px}
.home-line .hl-tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.home-line .hl-tap:active{opacity:.6}
.radar-legend .leg-i{background:none;border:0;padding:0 2px;color:var(--txt3);font-size:14px;line-height:1;cursor:pointer}
.radar-legend.leg-more{margin-top:2px}
.home-radar{border-radius:var(--r);padding:14px 12px 12px;margin-bottom:16px}
.radar-box{position:relative;width:100%;max-width:330px;aspect-ratio:1;margin-inline:auto;touch-action:manipulation}
.radar-box canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.radar-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--txt3);margin-top:6px}
.radar-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:5px;vertical-align:1px}
.radar-empty{text-align:center;padding:24px 12px}
.radar-empty b{font-size:17px}
.radar-empty p{color:var(--txt2);font-size:14px;margin:6px auto 14px;max-width:30ch}
.radar-bub{position:absolute;z-index:6;width:216px;display:flex;gap:10px;padding:10px;border-radius:20px;color:var(--txt);
  background:rgba(30,30,34,.74);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),0 14px 30px -10px rgba(0,0,0,.8);animation:bubIn .22s var(--spring)}
.radar-bub .thumb{width:48px;height:auto;flex:0 0 48px;align-self:center}
.radar-bub .bt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px;line-height:1.3}
.radar-bub .bt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radar-bub .chip{align-self:flex-start;margin-top:5px;background:var(--acc);color:#fff;font-size:12px;padding:3px 10px}
@keyframes bubIn{from{opacity:0;transform:translateY(6px) scale(.94)}}
.home-card{display:block;border-radius:var(--r);padding:16px;margin-bottom:16px}
.home-card:active{transform:scale(.985)}
.hc-lbl{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--txt2)}
/* 26/09 (direction C, hierarchy fix - Gal's mock): the timeframe used to sit here as plain dim text
   ("24 שע׳"); a small pill reads as a real tag, not a faded afterthought - same treatment the market-index
   screen's own median/rank chips already get, just applied to this one label too. */
.hc-lbl .tag{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.09);color:var(--txt2)}
.hc-big{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hc-big .num{font-family:var(--num)}
.hc-pill{font-size:14px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.1)}
.hc-pill.loss{background:rgba(255,69,58,.18)} .hc-pill.gain{background:rgba(48,209,88,.18)}
.hc-spark{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
/* 26/09 (direction C, hierarchy fix): the % change used to sit inline with the big number itself, and the
   median/basket-size context lived only in a footer row below the chart, both a second-class read. This
   row moves the change to its own line right under the number, next to the same context, matching the
   market-index screen's own "number row, then a change+context row" order (renderIndex's .bigprice/.d) -
   the home card was the one place that still squeezed the change onto the number's row. */
.hc-sub{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;min-height:22px}
.hc-axis{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--txt3);margin-top:4px}
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:12px}
.hc-grid div{display:flex;flex-direction:column;gap:2px}
.hc-grid small{font-size:12px;color:var(--txt2)}
.hc-grid b{font-size:19px;font-weight:700;font-family:var(--num)}
.home-alert .k{font-size:15px;line-height:1.35}
.home-alert .k .faint{font-size:12.5px}
.home-watch{min-height:60px}
.home-watch .name{font-size:16px}

/* v45: radar range switch, budget prompt, starter picks, feedback link, first-run tour */
.radar-top{display:flex;justify-content:center;margin-bottom:6px}
.radar-top .seg button{min-height:28px;padding:4px 14px;font-size:12.5px}
.sh-actions{display:inline-flex;gap:6px}
.section-h .chip{font-size:12px;padding:2px 10px;line-height:20px;text-transform:none;letter-spacing:0;background:var(--glass);color:var(--acc)}
.home-ask{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:start;margin:0 0 10px;padding:12px 16px;border-radius:var(--r-sm);
  background:rgba(10,132,255,.14);color:var(--txt);font-size:14px;font-weight:600}
.home-ask .chev{color:var(--acc)}
/* ui4 (pkg7 leftover): the "טוען..." of a home block still in flight is a disabled button; it must not look like one you can press */
.home-ask:disabled{opacity:.5;cursor:default}
.starter{padding:6px 4px 2px}
.starter > b{display:block;font-size:19px;text-align:center}
.starter > p{color:var(--txt2);font-size:14px;text-align:center;margin:6px auto 14px;max-width:32ch;line-height:1.45}
.starter .group{margin-bottom:8px;background:rgba(255,255,255,.05)}
.starter-row{min-height:64px}
.starter-row .chip.add{flex:0 0 auto;max-width:none;font-size:12.5px;padding:5px 12px;background:var(--acc);color:#fff}
.starter-row .chip.add.done{background:rgba(48,209,88,.2);color:var(--gain)}
.starter-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--txt3);padding:0 6px 10px}
.home-fb{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border-radius:var(--r);padding:14px 16px;margin:0 0 16px;color:var(--txt)}
.home-fb:active{transform:scale(.985)}
.home-fb .fb-ico{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,159,10,.18);color:#FF9F0A;font-weight:800;font-size:18px}
.home-fb .fb-t{flex:1;display:flex;flex-direction:column;gap:2px}
.home-fb .fb-t b{font-size:16px}
.home-fb .fb-t small{font-size:12.5px;color:var(--txt2)}
.home-fb .chev{color:var(--txt3);font-size:20px}
.sheet textarea{width:100%;background:transparent;border:0;padding:12px 14px;font-size:16px;color:var(--txt);resize:none;direction:rtl;display:block}
.tour{position:fixed;left:12px;right:12px;bottom:calc(var(--tabs-h) + 24px + var(--safe-b));z-index:45;pointer-events:none}
.tour-card{pointer-events:auto;max-width:460px;margin:0 auto;padding:16px 16px 8px;border-radius:22px;background:rgba(30,30,34,.82);
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),0 18px 40px -12px rgba(0,0,0,.85);animation:bubIn .25s var(--spring)}
.tour-card b{font-size:17px}
.tour-card p{margin:6px 0 10px;font-size:14.5px;line-height:1.5;color:var(--txt2)}
.tour-step{font-size:12px;color:var(--acc);margin-bottom:4px}
.tour-card .actions{justify-content:flex-end}
.tour-card .btn{min-height:38px;padding:0 16px;font-size:15px}
.tour-on{outline:2px solid var(--acc);outline-offset:4px;border-radius:var(--r);transition:outline-color .3s}

/* v46: the forecast scorecard card on home */
.fc-lead{margin:8px 0 10px;font-size:15px;font-weight:600;line-height:1.4}
.fc-row{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:.5px solid var(--line)}
.fc-k{font-size:12.5px;color:var(--txt2)}
.fc-v{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14.5px;font-weight:600}
.fc-card-link img{width:40px;height:auto;display:block}
.fc-models{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:10px;border-top:.5px solid var(--line)}
.fc-models span{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--txt2);line-height:1.3}
.fc-models b{font-size:20px;color:var(--txt);font-family:var(--num)}
.fc-models small{font-size:11.5px;color:var(--txt3)}
.fc-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--txt3)}

/* v50.3: the evolved card, drawn from its real parts (src/cardart.js). Positions measured against fut.gg's official
   render on 25/09 (docs/design/evo-card-real-2026-09-25.src.html); the text scales with the card (cqw). */
.fcard{position:relative;width:var(--w,64px);aspect-ratio:576/800;container-type:inline-size;font-family:'Barlow Semi Condensed','Barlow Condensed',sans-serif;direction:ltr;flex:0 0 auto}
.fcard .bg{position:absolute;inset:0;width:100%;height:100%}
.fcard .cut{position:absolute;left:20.5%;top:13.2%;width:68%;-webkit-mask:linear-gradient(#000 88%,transparent);mask:linear-gradient(#000 88%,transparent)}
.fcard .ovr{position:absolute;left:5.5%;width:33%;text-align:center;top:20%;font-weight:700;font-size:16cqw;line-height:1;letter-spacing:-.02em;background:none;padding:0;color:inherit;border-radius:0;font-family:inherit}
.fcard .pos{position:absolute;left:5.5%;width:33%;text-align:center;top:33%;font-weight:700;font-size:7.4cqw;line-height:1}
.fcard .name{position:absolute;left:4%;right:4%;top:63.8%;text-align:center;font-weight:700;font-size:9.4cqw;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .stats{position:absolute;left:10.5%;right:10.5%;top:72.8%;display:grid;grid-template-columns:repeat(6,1fr);text-align:center}
.fcard .stats span{display:flex;flex-direction:column;font-weight:600;font-size:5.9cqw;line-height:1}
.fcard .stats b{font-weight:700;font-size:8.2cqw;margin-top:.6cqw}
.fcard .badges{position:absolute;left:0;right:0;top:83.4%;display:flex;justify-content:center;align-items:center;gap:6cqw}
.fcard .badges img{height:7.4cqw}
.fcard .badges img.flag{height:6cqw}
.chip.newdesign{background:rgba(255,159,10,.16);color:#ff9f0a}

/* v50.4: evolutions, option B "hero card" (Gal 25/09) */
.epair s{text-decoration:none;color:var(--txt3);font-weight:600}
.pill{font:800 13px var(--font);padding:1px 8px;border-radius:999px;background:rgba(48,209,88,.14);color:#30d158;white-space:nowrap}
.erow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:.5px solid var(--line)}
.erow:last-child{border-bottom:0}
.erow .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.erow .nm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:700;font-size:15px}
.erow .rk{font:700 12px var(--num);color:var(--txt3)}
.erow .pr{font-family:var(--num);font-weight:700;font-size:14px;white-space:nowrap;direction:ltr;align-self:flex-start;margin-top:2px}
.egain{font-size:12.5px;color:var(--txt2);line-height:1.35}
.mini6{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;direction:ltr}
.mini6 span{display:flex;flex-direction:column;align-items:center;font:600 9px/1 var(--num);letter-spacing:.05em;color:var(--txt3);background:rgba(255,255,255,.05);border-radius:7px;padding:5px 0}
.mini6 b{font:800 14px/1.15 var(--num);color:var(--txt)}
.mini6 .up{background:rgba(48,209,88,.14)}
.mini6 .up b{color:#30d158}
.ehero{display:block;position:relative;border-radius:24px;overflow:hidden;margin:0 0 16px;background:var(--grp);isolation:isolate;color:var(--txt)}
.ehero::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(45% 50% at 28% 42%,var(--glow,rgba(233,196,106,.4)),transparent 70%)}
.ehero .in{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:18px 18px 16px;align-items:center}
.ehero .eb{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--txt2)}
.ehero .ht{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-top:4px;text-wrap:balance;text-align:right}
.ehero .hm{font-size:13px;color:var(--txt2);margin-top:6px}
.ehero .pair{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:6px}
.ehero .pair .today{width:44px;aspect-ratio:576/800;object-fit:contain;filter:saturate(.7) brightness(.8)}
.ehero .pair .ar{color:#e9c46a;font-size:18px}
.ehero .foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:.5px solid rgba(255,255,255,.12);padding-top:12px;margin-top:6px}
.ehero .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;font-weight:700;min-width:0}
.ehero .pr{font-family:var(--num);font-weight:700;font-size:15px;white-space:nowrap;direction:ltr}

/* v51 (Gal 26/09): quieter top of screen. Platform chip on the status line; the market's tools in four groups. */
.pfchip{position:relative;display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;font:700 13px var(--font);color:var(--txt);background:var(--elev);border-radius:999px;padding:3px 10px;direction:ltr}
.pfchip svg{width:10px;height:10px;opacity:.7}
.pfchip select{position:absolute;inset:0;opacity:0;width:100%;height:100%;font-size:16px;cursor:pointer}
.pfchip:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.mgroups{display:flex;background:var(--elev);border-radius:10px;padding:2px;margin:4px 0 12px;gap:1px}
/* 5 groups since the gallery tab (28/09): equal flex:1 columns forced the longest label ("אבולושיינים")
   to overflow past its neighbor's box (min-width:auto is content-based by default). min-width:0 lets a
   short label's column shrink below its share so the long one can take more; the rest is font/padding. */
.mgroups button{flex:1;min-width:0;min-height:32px;border-radius:8px;font-size:13px;font-weight:600;color:var(--txt2);transition:background .2s,color .2s}
/* 5 groups (owner, with the gallery tab) only: compact labels so all five fit at 390px */
.mgroups.g5 button{padding:0 3px;font-size:11px;line-height:1.15;overflow-wrap:break-word}
.mgroups button.on{background:var(--elev2);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.munder{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;border-bottom:.5px solid var(--line);margin-bottom:14px}
.munder::-webkit-scrollbar{display:none}
.munder button{flex:0 0 auto;padding:4px 0 9px;font-size:15px;font-weight:600;color:var(--txt3);background:none;border-radius:0}
.munder button.on{color:var(--txt);box-shadow:inset 0 -2px 0 var(--txt)}

/* item 7 audit (26/09): four tap targets rendered under the 44px Apple HIG floor (backbtn ~36px, pfchip
   ~24px, mgroups/ranges buttons ~32px). None of them can grow visually without shifting other chrome around
   them, so each gets an invisible ::after that only widens its HIT area: absolutely positioned, negative
   inset, no paint of its own. A pseudo-element's pointer events resolve to its own host element, so a click
   in the extra margin still lands on the real backbtn/button; for .pfchip (a <label> wrapping a hidden
   native <select>, not a button) a click on the label itself - including this ::after - still forwards to
   the wrapped control, per the standard implicit-label activation behaviour. Height only: none of these were
   short on width. */
.backbtn{position:relative}
.backbtn::after{content:"";position:absolute;inset:-5px 0}
.pfchip::after{content:"";position:absolute;inset:-11px 0}
.mgroups button,.ranges button{position:relative}
.mgroups button::after{content:"";position:absolute;inset:-7px 0}
.ranges button::after{content:"";position:absolute;inset:-7px 0}

/* v54 (28/09): market rule rows - an off rule dims its text (not its buttons), a fired one-shot says when */
.rule-off .k{opacity:.55}
.rule-status{font-size:13px;color:var(--gold)}
.rule-acts{display:flex;gap:6px;flex-shrink:0}

/* v54 (28/09): the owner's quota ring - D1 as the ring, the DO stores as the bar under it */
.quota{display:flex;align-items:center;gap:16px;padding:16px 14px 10px}
.quota-ring{width:132px;height:132px;flex-shrink:0;overflow:visible}
.quota-ring circle{fill:none;stroke-width:10;transform:rotate(-90deg);transform-origin:66px 66px}
.q-track{stroke:rgba(255,255,255,.08)}
.q-ghost{opacity:.28}
.q-arc{stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--spring,cubic-bezier(.34,1.36,.64,1))}
.q-tick{stroke:var(--txt2);stroke-width:2;stroke-linecap:round}
.q-pct{font-family:var(--num);font-size:26px;font-weight:700;fill:var(--txt);text-anchor:middle;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.q-sub{font-family:var(--num);font-size:12px;fill:var(--txt2);text-anchor:middle;letter-spacing:.04em}
.quota-side{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--txt2);min-width:0}
.quota-side .q-big{font-size:17px;font-weight:600;color:var(--txt)}
.quota-side .faint{font-size:12.5px}
.quota-do{padding:4px 14px 14px}
.q-do-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--txt2);margin-bottom:6px}
.q-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.q-bar i{display:block;height:100%;border-radius:2px}
.q-do-meta{font-size:12.5px;margin-top:6px}
/* =====================================================================================================
   feat/invest-channel: the "השקעות" channel. Same glass, same tokens. What is new is the tip: the card's own
   colour as a halo (like the card screen), and a rail from the buy price to the sell target with the live
   price riding on it, so "is this still worth it" reads before a single number does.
   ===================================================================================================== */
/* the way in: a glass circle beside the title, a blue dot while something is unread */
.chan-btn{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--txt);
  background:var(--glass);box-shadow:inset 0 .5px 0 rgba(255,255,255,.4),0 6px 18px -8px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);transition:transform .18s var(--spring)}
.chan-btn:active{transform:scale(.9)}
.chan-btn[hidden]{display:none}
.chan-btn svg{width:22px;height:22px}
.chan-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.chan-btn i{position:absolute;top:7px;inset-inline-end:7px;width:10px;height:10px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 2px #000,0 0 10px var(--acc);transform:scale(0);transition:transform .35s var(--spring)}
.chan-btn.unread i{transform:scale(1);animation:ch-ping 2.4s ease-out 1s 3}
@keyframes ch-ping{0%{box-shadow:0 0 0 2px #000,0 0 0 2px rgba(10,132,255,.7)}70%,100%{box-shadow:0 0 0 2px #000,0 0 0 12px rgba(10,132,255,0)}}

/* home: one line when something new is waiting */
.ch-home{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:14px;border-radius:var(--r)}
.ch-home .ch-av{width:40px;height:40px}
.ch-home b{display:block;font-size:15px}
.ch-home span.dim{font-size:13px}
.ch-home .chev{margin-inline-start:auto;color:var(--txt2)}

/* the channel's own header card */
.ch-hero{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r);margin-bottom:14px;overflow:hidden;isolation:isolate}
.ch-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 120% at 100% 0%,rgba(10,132,255,.22),transparent 70%),radial-gradient(60% 100% at 0% 100%,rgba(255,214,10,.10),transparent 70%)}
.ch-hero-mark{flex:0 0 auto;width:56px;height:56px}
.ch-hero-mark svg,.ch-av svg{width:100%;height:100%;display:block}
.ch-hero-mark .sw,.ch-av .sw{transform-origin:50% 50%;animation:sweep 3.2s linear infinite}
.ch-hero b{display:block;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.ch-hero p{font-size:14px;color:var(--txt2);line-height:1.5;margin-top:3px;text-wrap:pretty}
.ch-compose{margin-bottom:16px}
.ch-compose svg{width:18px;height:18px}

/* a post */
.ch-feed{display:flex;flex-direction:column;gap:14px}
.ch-post{border-radius:var(--r);padding:14px 14px 16px;scroll-margin-top:120px}
.ch-post.pinned::before{background:linear-gradient(140deg,rgba(255,214,10,.8),rgba(255,214,10,.18) 30%,rgba(255,255,255,.04) 55%,rgba(255,214,10,.3))}
.ch-post.focus{animation:ch-focus 1.8s ease-out .3s}
@keyframes ch-focus{0%{box-shadow:0 0 0 0 rgba(10,132,255,.0)}20%{box-shadow:0 0 0 3px rgba(10,132,255,.75)}100%{box-shadow:0 0 0 3px rgba(10,132,255,0)}}
.ch-by{display:flex;align-items:center;gap:10px;min-height:36px}
.ch-av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;padding:4px;background:rgba(255,255,255,.06);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
.ch-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ch-who b{font-size:15px}
.ch-who span{font-size:12.5px}
.ch-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--elev);color:var(--txt2);white-space:nowrap}
.ch-tag.gold{background:rgba(255,214,10,.16);color:var(--gold)}
.ch-new{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);flex:0 0 auto}
.ch-more{margin-inline-start:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--txt2);background:var(--glass);position:relative}
.ch-more::after{content:"";position:absolute;inset:-4px}
.ch-more svg{width:18px;height:18px;fill:currentColor}
.ch-body{margin-top:10px}
.ch-body p{font-size:16px;line-height:1.55;text-wrap:pretty;unicode-bidi:plaintext}
.ch-body p + p{margin-top:8px}
.ch-img{display:block;width:100%;margin-top:12px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04)}
.ch-img img{width:100%;max-height:440px;object-fit:cover}
.ch-full{width:100%;border-radius:18px;margin-top:6px}
.ch-legal{font-size:12px;color:var(--txt2);line-height:1.6;text-align:center;margin:22px 10px 4px;text-wrap:pretty}

/* the tip */
.ctip{--hc:#0A84FF;position:relative;isolation:isolate;margin-top:12px;border-radius:20px;padding:12px 12px 14px;overflow:hidden;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
.ctip::before{content:"";position:absolute;inset:-20% -10% auto auto;width:80%;height:150px;z-index:-1;pointer-events:none;filter:blur(8px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hc) 45%,transparent),transparent)}
.tip-card{display:flex;align-items:center;gap:12px}
.tip-card img,.tip-card .thumb{width:54px;height:74px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.tip-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tip-name{display:flex;align-items:center;gap:6px;font-weight:700;font-size:17px;min-width:0}
.tip-name .ltr{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tip-name .ovr{flex:0 0 auto}
.tip-meta{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--txt2);flex-wrap:wrap}
.tip-st{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.tip-now .p0{font-size:15px;color:var(--txt2)}
.tip-status{flex:0 0 auto;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--elev);color:var(--txt2);white-space:nowrap}
.st-open .tip-status{background:rgba(48,209,88,.16);color:var(--gain);box-shadow:0 0 16px -4px rgba(48,209,88,.6)}
.tip-now{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px}
.tip-now .k{font-size:13px;color:var(--txt2)}
.tip-now .p{font-size:30px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:6px}
.tip-now .coin{width:15px;height:15px;margin:0}
/* the rail runs the way the page reads: buy price at the start (right), target at the end (left) */
.tip-track{position:relative;height:22px;margin-top:6px}
.tip-track .rail{position:absolute;top:8px;inset-inline:0;height:6px;border-radius:3px;
  background:linear-gradient(to left,rgba(48,209,88,.95),rgba(48,209,88,.5) 35%,rgba(255,214,10,.55) 70%,rgba(255,214,10,.95));
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35)}
.tip-track .mk{position:absolute;top:3px;right:calc(var(--x) * 100%);width:16px;height:16px;margin-right:-8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 14px rgba(255,255,255,.7);animation:ch-mk .7s var(--spring) both}
@keyframes ch-mk{from{transform:scale(0)}to{transform:scale(1)}}
.tip-ends{display:flex;justify-content:space-between;margin-top:2px}
.tip-ends > div{display:flex;flex-direction:column;gap:1px}
.tip-ends > div:last-child{align-items:flex-end}
.tip-ends .k{font-size:11.5px;color:var(--txt2)}
.tip-ends b{font-size:15px;font-weight:700}
.tip-facts{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:.5px solid var(--line);font-size:13px}
/* 28/09: a tip's buy note, under the buy/sell ends (Gal: "נסו להשיג בבידים") */
.tip-how{margin-top:10px;display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600}
.tip-how .k{font-size:11.5px;font-weight:400;color:var(--txt2);flex:0 0 auto}
.ch-how{padding-bottom:8px}
.tip-own{margin-top:8px;font-size:12.5px;color:var(--gold);display:flex;align-items:center;gap:6px}
.tip-own::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.tip-acts{display:flex;gap:8px;margin-top:12px}
.tip-acts .btn{flex:1;min-width:0;font-size:14.5px;padding:0 12px;white-space:nowrap}
.tip-acts .btn svg{width:17px;height:17px;flex:0 0 auto}
.st-expired .tip-card img,.st-closed .tip-card img{filter:grayscale(.7) drop-shadow(0 8px 14px rgba(0,0,0,.55));opacity:.75}
.st-expired .rail,.st-closed .rail{filter:grayscale(1);opacity:.35}
.st-expired::before,.st-closed::before{opacity:.35}

/* the composer */
.ch-kind{display:flex;width:100%;margin-bottom:4px}
.ch-kind button{flex:1;min-height:38px;font-size:15px;font-weight:600;color:var(--txt2)}
.ch-kind button.on{color:var(--txt)}
.ch-search{padding:10px}
.ch-search input{width:100%;min-height:44px;padding:0 16px;font-size:16px}
.ch-res{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;text-align:start;border-top:.5px solid var(--line)}
.ch-res:active{background:rgba(255,255,255,.06)}
.ch-res .thumb{width:40px;height:55px}
.ch-res .name{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.ch-res .name .ltr{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-picked{display:flex;align-items:center;gap:12px;padding:12px}
.ch-picked .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ch-picked .name{display:flex;align-items:center;gap:6px;font-weight:700;font-size:16px;min-width:0}
.ch-picked .name .ltr{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-picked .meta{font-size:13px}
.ch-picked .btn{min-height:36px;padding:0 14px;font-size:14px}
.ch-ta{display:block;width:100%;min-height:128px;padding:14px;background:transparent;border:0;resize:vertical;font-size:16px;line-height:1.5;color:var(--txt);outline:none;unicode-bidi:plaintext}
.ch-ta::placeholder{color:var(--txt2)}
.sheet .ch-ta{background:rgba(255,255,255,.07);border-radius:14px;margin-bottom:12px}
.ch-pick{cursor:pointer}
.ch-pick .v{color:var(--acc)}
.ch-imgprev{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.ch-imgprev img{width:100%;max-height:260px;object-fit:cover;border-radius:14px}
.sheet .ch-post{background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){.ch-hero-mark .sw,.ch-av .sw{animation:none}.chan-btn.unread i{animation:none}}
/* Friend setup list on home (28/09) */
.setup{border-radius:var(--r);padding:14px 12px 4px;margin:0 0 16px}
.setup-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 10px}
.setup-h b{font-size:17px}
.setup-h .num{color:var(--txt2);font-size:14px}
.setup .group{margin-bottom:8px;background:rgba(255,255,255,.05)}
.su-row{display:flex;align-items:center;gap:12px;width:100%;text-align:start;color:var(--txt);background:none;border:0;font:inherit}
.su-row .k{flex:1;line-height:1.35}
.su-row .faint{font-size:13px}
.setup .su-row.done .k{opacity:.5}
.su-ico{flex:0 0 24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:13px;font-weight:800}
.su-ico.on{background:var(--gain);border-color:var(--gain);color:#000}
/* First-run tutorial (28/09): the tab bar and Back wait until it is done */
body.tut-on #tabs, body.tut-on #backBtn, body.tut-on #pfChip{display:none}
.tut{padding:4px 2px 24px}
.tut-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tut-dots{display:flex;gap:6px}
.tut-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.tut-dots i.on{background:#0A84FF}
.tut h2{font-size:24px;margin:0 0 6px}
.tut .note{margin:6px 0 12px}
.tut .group{margin-bottom:12px}
.tut-pf{margin-bottom:14px}
.tut .chip.add.done{opacity:.7}

/* Gallery, phase 1 (docs/gallery-design.md, Gal's picks: store grid "1ב", coins-per-token bars "2ב").
   Reuses the app's own tokens (no --mint/--hof of the mock: --gain/--gold/--loss carry the same meaning). */
.g-count{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(255,69,58,.14),transparent);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:10px}
.g-count b{font-family:var(--num);font-size:28px;font-weight:900;color:var(--gold);line-height:1}
.g-count span{font-size:12.5px;color:var(--txt2);line-height:1.4}
/* minmax(0,1fr), not plain 1fr: a grid track's default min size is auto (content-based), so a long
   unbreakable card name (white-space:nowrap below) was forcing the 3rd column past the viewport edge
   (28/09 bug - "no horizontal scroll" missed it because html/body use overflow-x:clip, which hides an
   overflow instead of making it scrollable, so scrollWidth alone never catches this). min-width:0 on the
   card itself is the other half: without it a flex/grid item still refuses to shrink below its content. */
.g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.g-card{position:relative;min-width:0;background:var(--grp);border-radius:var(--r-sm);padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.g-card.best{box-shadow:0 0 0 1.5px var(--gain) inset}
.g-card.best::after{content:"הכי משתלם";position:absolute;top:4px;inset-inline-start:4px;font-size:8.5px;font-weight:800;background:var(--gain);color:#000;border-radius:5px;padding:0 4px}
.g-card .gmedia{width:100%;max-width:56px;aspect-ratio:576/800;background:var(--elev);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.g-card .gimg{width:100%;height:100%;object-fit:contain;display:block}
.g-card .gfallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;height:100%}
.g-card .gfallback b{font-family:var(--num);font-size:16px;font-weight:800;color:var(--gold);line-height:1}
.g-card .gfallback span{font-size:8.5px;font-weight:700;color:var(--txt3)}
.g-card .gkit{width:100%;min-height:56px;display:flex;align-items:center;justify-content:center;background:var(--elev);border-radius:6px;padding:4px;font-size:10.5px;font-weight:700;line-height:1.3;min-width:0}
.g-card .n{width:100%;font-size:10.5px;font-weight:700;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-card .c{font-size:11px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:3px}
.g-card .v{font-size:10.5px;font-weight:700;color:var(--gain)}
.tok-dot{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--gold) 55%,#a67c00);display:inline-block;flex:0 0 auto}
.g-bar-row{padding:10px 14px;border-bottom:.5px solid var(--line)}
.g-bar-row:last-child{border-bottom:0}
.g-bar-row .top2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.g-bar-row .nm{font-size:14.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-bar-row .v{font-size:12.5px;color:var(--txt2);white-space:nowrap}
.g-bar-row .bar{height:7px;border-radius:4px;background:var(--elev);overflow:hidden}
.g-bar-row .bar i{display:block;height:100%;border-radius:4px;background:var(--acc)}
.g-bar-row .bar i.gain{background:var(--gain)}
.g-bar-row .bar i.gold{background:var(--gold)}
.g-bar-row .bar i.loss{background:var(--loss)}
.g-bar-row .meta{display:flex;align-items:center;gap:6px;margin-top:6px}
.chip.gr{background:rgba(255,214,10,.16);color:var(--gold)}
.chip.tok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;margin-inline-end:3px}

/* Gallery phase 2: the 3ד clean ladder (#/gallery/item/:id). Same tokens as phase 1: --gain stands for the mock's mint.
   Every row is a grid with min-width:0 cells, so a long Latin set name truncates instead of pushing past 390. */
a.g-card{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.gl-goal{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding-bottom:12px;border-bottom:.5px solid var(--line);margin-bottom:8px}
.gl-goal .gmedia{width:48px;aspect-ratio:576/800;background:var(--elev);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gl-goal .gimg{width:100%;height:100%;object-fit:contain;display:block}
.gl-goal .gfallback{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}
.gl-goal .gfallback b{font-family:var(--num);font-size:15px;font-weight:800;color:var(--gold)}
.gl-goal .gfallback span{font-size:8.5px;font-weight:700;color:var(--txt3)}
.gl-goal .nm{font-weight:900;font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-goal .t{font-size:12.5px;color:var(--txt2);margin-top:2px}
.gl-have{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt2);margin:4px 0 10px}
.gl-have input{width:84px;background:var(--grp);border:.5px solid var(--line);border-radius:10px;color:var(--txt);font-family:var(--num);font-size:16px;font-weight:700;padding:6px 8px;text-align:center}
.gl-lad{position:relative}
.gl-lad::before{content:"";position:absolute;inset-block:22px 22px;inset-inline-start:7px;width:2px;background:var(--elev2,#3A3A3C)}
.gl-s{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;position:relative;width:100%;text-align:start;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.gl-s i.d,.gl-more i.d{width:16px;height:16px;border-radius:50%;background:var(--bg,#000);box-shadow:inset 0 0 0 2px var(--gain);position:relative;z-index:1}
.gl-s .nm{font-weight:700;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-s .m{font-size:12px;color:var(--txt2);margin-top:2px}
.gl-s .g{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.gl-s .g b{font-family:var(--num);font-size:15px;font-weight:800;color:var(--gain);display:flex;align-items:center;gap:4px}
.gl-s .g small{font-family:var(--num);font-size:11px;color:var(--txt2)}
.gl-s.fin i.d{background:var(--gain);box-shadow:none}
.gl-s.fin .nm{color:var(--gain)}
.gl-more{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;color:var(--txt2);font-size:12.5px;width:100%;text-align:start;background:none;border:0;font-family:inherit;cursor:pointer}
.gl-more i.d{box-shadow:inset 0 0 0 2px var(--elev2,#3A3A3C)}
.gl-more b{color:var(--acc);font-weight:700}
.gl-cards{margin:0 0 8px;margin-inline-start:28px;background:var(--grp);border-radius:var(--r-sm);overflow:hidden}
.gl-cards a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 12px;border-bottom:.5px solid var(--line);color:inherit;text-decoration:none;font-size:13.5px}
.gl-cards a:last-child{border-bottom:0}
.gl-cards .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-cards .p{font-family:var(--num);font-weight:700}
.gl-pace{display:flex;align-items:center;gap:10px;border-radius:var(--r-sm);padding:10px 12px;background:rgba(255,214,10,.08);box-shadow:0 0 0 1px rgba(255,214,10,.3) inset;margin-top:8px;font-size:13.5px;line-height:1.45}
.gl-pace b{font-family:var(--num);font-weight:900;color:var(--gold)}

/* Gallery v2 (Gal 29/09, round 2 U5DxsuyJfQihKR2JMK8n3s): store ד, coins per token ג + goal progress, ladder ד.
   Full card, no box: no grey tile behind the card, a soft shadow under it, so EA's silver frame reads as the card. */
.gmedia.gfull{aspect-ratio:576/800;background:transparent;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center;max-width:100%}
.gmedia.gfull .gimg{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.gmedia.gfull .gfallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--elev);border-radius:10px}
.gmedia.gfull .gfallback b{font-family:var(--num);font-size:16px;font-weight:800;color:var(--gold);line-height:1}
.gmedia.gfull .gfallback span{font-size:9px;font-weight:700;color:var(--txt3)}
.gkit2{aspect-ratio:576/800;max-width:100%;border-radius:12px;background:linear-gradient(160deg,var(--elev2),var(--grp));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center;color:var(--txt2);overflow:hidden}
.gkit2 svg{width:38%;aspect-ratio:1/1;flex:0 0 auto;opacity:.9}
.gkit2 b{font-size:10.5px;font-weight:800;line-height:1.25}
.gd-hero{background:linear-gradient(180deg,rgba(255,214,10,.09),var(--grp));border-radius:var(--r);padding:16px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;text-align:center}
.gd-hero .big{width:112px}
.gd-goal{display:block;color:inherit;-webkit-tap-highlight-color:transparent}
.gd-nm{font-weight:900;font-size:19px;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-row{display:flex;align-items:center;gap:14px;justify-content:center}
.gd-cap{font-size:13px;color:var(--txt2);line-height:1.55;text-align:start}
.gd-cap b{color:var(--txt);font-weight:800}
.gd-act{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;flex-wrap:wrap;margin-top:2px}
.gd-act .gl-have{margin:0}
.gd-go{display:inline-flex;align-items:center;gap:6px;color:var(--acc);font-weight:700;font-size:14.5px;text-decoration:none;padding:6px 2px}
.gd-go svg{width:7px;height:12px}
.gl-hero .gl-have{justify-content:center;margin:2px 0 0}
.gd-shelf{margin-bottom:16px}
.gd-lbl{font-size:14px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gd-lbl .dim{font-size:12px;font-weight:600}
.gd-strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;padding-bottom:4px;scroll-snap-type:x proximity}
.gd-strip::-webkit-scrollbar{display:none}
.gd-tile{flex:0 0 92px;width:92px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;background:none;border:0;color:inherit;font:inherit;padding:4px 0 2px;cursor:pointer;scroll-snap-align:start;position:relative;border-radius:12px}
.gd-tile .gmedia,.gd-tile .gkit2{width:84px}
.gd-tile .nm{width:100%;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-tile .c{font-size:11.5px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:3px}
.gd-tile .v{font-size:11px;font-weight:700;color:var(--gain)}
.gd-tile.best::after{content:"הכי משתלם";position:absolute;top:0;inset-inline-start:0;font-size:9px;font-weight:800;background:var(--gain);color:#000;border-radius:5px;padding:0 5px;z-index:1}
.gd-bar{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;background:linear-gradient(90deg,rgba(255,214,10,.09),var(--grp));border-radius:var(--r-sm);padding:10px 12px;margin-bottom:16px;color:inherit;text-decoration:none}
.gd-bar .mini{width:36px}
.gd-bar .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.gd-bar .t b{font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-bar .t small{font-size:12px;color:var(--txt2)}
.gs-tile{flex:0 0 96px;width:96px;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:center;scroll-snap-align:start}
.gs-tile .box{aspect-ratio:1/1;border-radius:14px;background:radial-gradient(120% 100% at 100% 0%,rgba(255,214,10,.14),transparent 60%),var(--grp);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative}
.gs-tile .box .chip{position:absolute;top:6px;inset-inline-start:6px;font-size:10px;padding:0 6px;line-height:16px}
.gs-tile .box b{font-family:var(--num);font-size:20px;font-weight:900;line-height:1}
.gs-tile .box span{font-size:10px;color:var(--txt2)}
.gs-tile.on .box{box-shadow:inset 0 0 0 2px var(--gain);background:radial-gradient(120% 100% at 100% 0%,rgba(48,209,88,.18),transparent 60%),var(--grp)}
.gs-tile .nm{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-tile .tk{font-size:11px;color:var(--txt2);display:inline-flex;align-items:center;justify-content:center;gap:3px}
.gs-tile .tk .tok-dot{width:9px;height:9px}
.chip.on-path{background:rgba(48,209,88,.16);color:var(--gain)}

/* Gallery round 3 (Gal 29/09): crests on every set, the spaced 2-up store grid, the card page's path shelf. */
.gcrest{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;background:var(--grp);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.gcrest img{width:72%;height:72%;object-fit:contain;display:block;position:relative;z-index:1}
.gcrest span{display:none;font-family:var(--num);font-weight:900;font-size:15px;color:rgba(255,255,255,.9);letter-spacing:.02em}
.gcrest.mono{background:linear-gradient(160deg,var(--elev2),var(--grp))}
.gcrest.mono span{display:block}
.gcrest.lg span{font-size:24px}
.gg-lbl{margin-top:4px}
.gg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-bottom:14px}
.gg-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.gg-card .gmedia,.gg-card .gkit2{width:78%}
.gg-card .nm{width:100%;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg-card .line{font-size:12px;color:var(--txt2)}
.gg-card .line .num{color:var(--gain);font-weight:700}
.gg-card .bar{width:78%;height:5px;border-radius:3px;background:var(--elev);overflow:hidden}
.gg-card .bar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.gg-card.best::after{content:"הכי משתלם";position:absolute;top:0;inset-inline-start:0;font-size:9.5px;font-weight:800;background:var(--gain);color:#000;border-radius:5px;padding:1px 6px;z-index:2}
.gc-tile{flex:0 0 92px;width:92px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;position:relative;scroll-snap-align:start}
.gc-tile .cpt,.gp-tile .cpt{font-family:var(--num);font-size:16px;font-weight:900;color:var(--gold);line-height:1.1}
.gc-tile .nm{width:100%;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-tile .meta,.gp-tile .meta{display:flex;align-items:center;gap:4px}
.gc-tile .meta .chip,.gp-tile .meta .chip{font-size:10px;padding:0 6px;line-height:16px}
.gc-tile .tk,.gp-tile .tk{font-size:11px;color:var(--txt2);display:inline-flex;align-items:center;gap:3px}
.gc-tile .tk .tok-dot,.gp-tile .tk .tok-dot{width:9px;height:9px}
.gc-tile.on .gcrest{box-shadow:inset 0 0 0 2px var(--gain)}
.gc-tile .tag{position:absolute;top:5px;inset-inline-start:5px;z-index:2;font-size:9px;font-weight:800;background:var(--gain);color:#000;border-radius:5px;padding:0 5px}
.gp-strip{padding-top:4px;margin-bottom:12px}
.gp-tile{flex:0 0 88px;width:88px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;scroll-snap-align:start}
.gp-tile.open .gcrest{box-shadow:inset 0 0 0 2px var(--acc)}
.gp-tile .cum{font-size:10px;color:var(--txt2)}
.gl-cards-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 12px;border-bottom:.5px solid var(--line);font-weight:800;font-size:14px}
.gl-cards-h span{font-size:12px;font-weight:600;color:var(--txt2);white-space:nowrap}
.gl-pn{margin:0 0 16px;scroll-margin-top:80px}
.gl-tog{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--acc);cursor:pointer}
.gl-lbl{margin-top:4px}
.gl-lad-crest::before{display:none}
.gl-s.gl-crest{grid-template-columns:36px minmax(0,1fr) auto;padding:8px 0}
.gl-s.gl-crest .gcrest{width:36px;border-radius:9px}
.gl-s.gl-crest.open .gcrest{box-shadow:inset 0 0 0 2px var(--acc)}
.gl-s.gl-crest.fin .gcrest{box-shadow:inset 0 0 0 2px var(--gain)}
.gl-goalbtn{background:var(--grp);border:.5px solid var(--line2);color:var(--txt);font:inherit;font-size:13.5px;font-weight:700;border-radius:999px;padding:7px 14px;cursor:pointer}
.gl-goalbtn.on{background:rgba(255,214,10,.14);border-color:rgba(255,214,10,.5);color:var(--gold)}
.gl-lad-crest .gl-more{grid-template-columns:36px minmax(0,1fr)}
.gl-lad-crest .gl-more i.d{margin-inline:auto}

/* Kit shelf (Gal 29/09, artifact 6LZCrFGMYoNJJSppax8G2h, direction א): the one FC 27 pack on a ground in a colour
of our own per league, the five picks on one shelf after the cards, and what is left to collect under every bar. */
.gkit2.gpack{--l1:var(--grp);--l2:var(--elev2);background:radial-gradient(120% 80% at 50% 30%,var(--l2),var(--l1) 70%);padding:0}
.gkit2.gpack img{width:74%;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.gkit2.gpack svg{display:none}
.gkit2.gpack.noimg svg{display:block}
.gd-bar .gkit2.gpack{border-radius:6px}
.gg-card .need,.gk-tile .need{font-size:11.5px;font-weight:700;color:var(--gold);margin-top:-2px}
.gg-card .need.done,.gk-tile .need.done{color:var(--gain)}
.gk-lbl{margin-top:6px}
.gk-lbl .grn{color:var(--gain);font-weight:700}
.gk-strip{gap:12px;padding-bottom:6px}
.gk-tile{flex:0 0 112px;width:112px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:inherit;text-decoration:none;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.gk-tile .gkit2{width:100%}
.gk-tile .nm{width:100%;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gk-tile .sub{font-size:11px;color:var(--txt2);margin-top:-4px}
.gk-tile .bar{width:100%;height:5px;border-radius:3px;background:var(--elev);overflow:hidden}
.gk-tile .bar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
/* Coins view: the sets a league cannot show yet, and why (Gal 29/09). */
.gd-miss{font-size:12px;color:var(--txt2);margin:6px 0 0;line-height:1.5}
/* a22 emergency mode bar (Gal 29/09): under the status line, for everyone, gold like the other warnings */
.embar{margin-top:8px;padding:9px 12px;border-radius:12px;background:rgba(255,214,10,.13);border:1px solid rgba(255,214,10,.38);color:var(--gold);font-size:13px;line-height:1.4}
.embar b{font-weight:800}
.gbanner{margin:0 0 12px;padding:9px 12px;border-radius:12px;background:rgba(255,214,10,.13);border:1px solid rgba(255,214,10,.38);color:var(--gold);font-size:13px;line-height:1.4}
.gbanner b{font-weight:800}

/* Screen 5: "גם לגלריה" marks a card that sits in a set on the goal's cheapest path */
.gchip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;background:rgba(255,214,10,.14);border:.5px solid rgba(255,214,10,.4);color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta .gchip{flex:0 1 auto;min-width:0}
.opt.sq.hasg{flex-wrap:wrap}
.opt.sq.hasg .nm{flex:1 1 0}
.opt.sq .gbreak{flex:0 0 100%;height:0;margin:-5px 0 0}
.opt.sq .gchip{margin-inline-start:43px}
/* a31: set page (chips D..S, numbers, priced lineup) */
.gs-hero{margin-bottom:12px}
.gs-cat{font-size:12px;color:var(--txt2)}
.gs-chips{justify-content:center;margin-bottom:12px}
.gs-chips button{min-width:48px;font-family:var(--num);font-weight:800}
.gs-chips button.dim:not(.on){opacity:.45}
.gs-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.gs-nums>div{background:var(--grp);border-radius:var(--r-sm);padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.gs-nums small{font-size:11px;color:var(--txt2)}
.gs-nums b{font-size:18px;font-weight:900;color:var(--gold)}
.gs-cards{margin-inline-start:0}
/* 30/09: lineup rows with a card image, "84 · CB", price and a "קניתי" tick (phone-only). Own prefix gcr-: .gl-cards a
   and .thumb are global, so the rules below beat them by specificity instead of touching them. */
.gl-cards .gcr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:6px;padding-block:6px;padding-inline:12px 8px;border-bottom:.5px solid var(--line);font-size:13.5px;transition:opacity .15s}
.gl-cards .gcr:last-child{border-bottom:0}
.gl-cards .gcr .gcr-l{display:flex;align-items:center;gap:10px;min-width:0;padding:0;border:0;color:inherit}
.gl-cards .gcr .thumb{width:36px;height:50px;border-radius:5px;background:transparent}
.gl-cards .gcr .thumb.ph{background:var(--elev);font-size:9px}
.gcr-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.gl-cards .gcr .nm{font-weight:600}
.gcr-f{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;font-weight:700;color:var(--txt2);letter-spacing:.02em}
.gcr-b{width:16px;height:16px;flex:0 0 16px;object-fit:contain;border-radius:0}
.gcr-b.fl{border-radius:2px}
.gcr-tx{unicode-bidi:plaintext;min-width:0;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:600;color:var(--txt3)}
.gcr-f .num{flex:0 0 auto}
.gcr-chk{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;min-height:44px;justify-content:center;color:var(--txt3)}
.gcr-chk i{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--txt3);display:grid;place-items:center;transition:background .15s,border-color .15s}
.gcr-chk small{font-size:9.5px;line-height:1}
.gcr-chk[aria-checked="true"]{color:var(--gain)}
.gcr-chk[aria-checked="true"] i{background:var(--gain);border-color:var(--gain)}
.gcr-chk[aria-checked="true"] i::after{content:"";width:6px;height:11px;border:solid #000;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.gcr.bought{opacity:.5}
.gcr.bought .nm{text-decoration:line-through}
.gcr-cnt{white-space:nowrap}
/* the set page: a small crest beside the name, so the card list starts above the bottom nav at 390x844 */
.gd-hero.gs-hero{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:10px 14px;margin-bottom:10px;text-align:start}
.gs-hero .gcrest{width:52px;border-radius:12px}
.gs-hero .gcrest.lg span{font-size:17px}
.gs-hero .gd-nm{flex:1;min-width:0;font-size:17px}
.gs-hero .gs-cat{margin-inline-start:auto;white-space:nowrap}
.gs-nums>div{padding:8px 6px}
a.gc-tile{color:inherit;text-decoration:none}

/* squad builder v2 (30/09, owner first): filter panel, diagnostics, alternatives, saved squads.
   Same tokens and chips as the rest of the builder; nothing here renders for a friend. */
.sqf{margin:2px 0 10px}
.sqf-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 14px;border-radius:12px;background:var(--grp);border:1px solid var(--line);font-size:15px;font-weight:600}
.sqf-car{width:8px;height:8px;border-right:2px solid var(--txt2);border-bottom:2px solid var(--txt2);transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.sqf-head[aria-expanded="true"] .sqf-car{transform:rotate(-135deg);margin-top:3px}
.sqf-sum{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 2px 2px}
.sqf-chip{display:inline-block;line-height:26px;padding:0 10px;border-radius:999px;background:var(--elev);font-size:12.5px;font-weight:600;color:var(--txt)}
.sqf-chip.dim{color:var(--txt2);font-weight:500}
.sqf .mini,.sqs .mini,.sqlist .mini,.sq-age .mini{font-size:12px;font-weight:600;color:var(--acc);padding:4px 8px;border-radius:7px;background:var(--elev)}
.sqf-body{padding-top:6px}
.sqf-body[hidden]{display:none}
.sqf-h{font-size:12.5px;font-weight:700;color:var(--txt2);padding:10px 4px 6px}
.sqf .chips{padding-bottom:6px}
.sqf-row{display:flex;align-items:center;gap:10px;padding:2px 0}
.sqf-row .sqf-lab{flex:0 0 76px;font-size:14px;color:var(--txt)}
.sqf-row .chips{flex:1;min-width:0}
.sqf-g{background:var(--grp);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.sqf-g b{display:block;font-size:14px;margin-bottom:8px}
.sqf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sqf-stats label{display:flex;flex-direction:column;gap:3px;min-width:0}
.sqf-stats label span{font-size:12px;color:var(--txt2)}
.sqf-stats input{width:100%;min-width:0;background:var(--elev);border:0;border-radius:8px;padding:7px 8px;font-family:var(--num);font-size:16px;direction:ltr;text-align:center}
.sqf-note{padding:2px 4px 4px}
.sqf-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0}
.sqf-list .sqf-lab{flex:0 0 100%;font-size:13px;color:var(--txt2)}
.sqf-pick{min-height:32px;padding:0 12px;border-radius:999px;background:var(--grp);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--txt2)}
.sqf-pick.on{background:var(--txt);color:#000;border-color:transparent}
.sqlist{display:flex;flex-wrap:wrap;gap:8px;max-height:44vh;overflow-y:auto;padding:4px 0 8px}
.sqf-warn{background:rgba(255,214,10,.08);border-radius:var(--r);padding:8px 12px;margin-bottom:10px;font-size:12.5px;color:var(--gold);line-height:1.5}
.sqf-warn p{margin:2px 0}
.sqf-fo,.sqf-swapped{padding:2px 4px 8px}
.sq-more{border-style:dashed !important}
.sqform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:6px}
.sqform button{min-height:40px;border-radius:12px;background:var(--elev);font-family:var(--num);font-weight:700;font-size:15px;border:1px solid var(--line)}
.sqform button.on{background:var(--txt);color:#000;border-color:transparent}
.sqd{background:var(--grp);border-radius:var(--r);padding:14px;margin-bottom:12px}
.sqd > b{display:block;font-size:16px;margin-bottom:2px}
.sqd > small{display:block;font-size:12.5px;color:var(--txt2);margin-bottom:8px}
.sqd-top{margin-bottom:10px}
.sqd-near{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.sqd-c{display:flex;gap:10px;align-items:center;background:var(--elev);border-radius:12px;padding:8px}
.sqd-c img,.sqd-c .pblank{flex:0 0 40px;width:40px;aspect-ratio:300/419;height:auto;border-radius:6px}
.sqd-c .pblank{display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:13px;font-weight:800}
.sqd-c > div{min-width:0;display:flex;flex-direction:column;gap:2px}
.sqd-c b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sqd-c .num{font-size:12px;color:var(--txt2)}
.sqd-m{display:flex;flex-wrap:wrap;gap:4px}
.sqd-m i{font-style:normal;font-size:12px;color:var(--gold);background:rgba(255,214,10,.10);border-radius:6px;padding:1px 6px}
.sqd-sn{display:block;font-size:11.5px;color:var(--dim,#9aa);margin-top:2px}
.sqf-tag{display:inline-block;font-size:11px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.08);margin-inline-start:4px}
.sqalt{margin-bottom:6px}
.sqalt-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px;width:100%;min-height:46px;padding:8px 12px;margin-bottom:6px;border-radius:12px;background:var(--elev);border:1px solid var(--line);text-align:start}
.sqalt-b b{font-size:14px}
.sqalt-b .ltr{font-size:12.5px;color:var(--txt2)}
.sqalt-b small{flex:0 0 100%;font-size:12px;color:var(--loss)}
.sqs .chips{padding-bottom:6px}
.sqs-empty{padding:0 4px 6px}
.sqs-sub{display:block;font-size:12px;color:var(--txt3);font-family:var(--num);direction:ltr;text-align:start}
#sqsList,#sqsAct{-webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.chips.sqfw{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
#sqF.sqfw,#mnF.sqfw{-webkit-mask-image:none;mask-image:none}

/* squad builder v2, round 3 (30/09, owner first): one player sheet, drag to swap, move mode, undo toast, blocked chips, owned tag. */
#toast.act{pointer-events:auto;display:flex;gap:14px;align-items:center}
#toast .tact{background:none;border:0;color:var(--acc);font:inherit;font-weight:700;padding:6px 4px;min-height:32px}
.sqacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 12px}
.sqact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:14px;background:var(--elev);color:var(--txt);border:0;font:inherit;font-size:13.5px;font-weight:600}
.sqact.pri{background:var(--acc);color:#fff}
.sqact svg{width:22px;height:22px}
.sqact:active{transform:scale(.97)}
.sqrow{flex-wrap:wrap;overflow:visible;padding-bottom:4px}
.sqbl{text-align:center;padding:6px 0 2px}
.sqbl button{background:none;border:0;color:var(--txt2);font:inherit;font-size:13.5px;font-weight:600;padding:8px 12px;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.sqf-tag.own,.pk-meta .own{color:var(--gain);background:rgba(48,209,88,.14)}
.pk-meta .own{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
.pcard .pown{position:absolute;top:-6px;left:-4px;z-index:1;padding:1px 6px;border-radius:999px;background:var(--gain);color:#000;font-size:10px;font-weight:800;line-height:16px}
.pk-dk{position:relative}
.pk-dk .pown{position:absolute;top:2px;left:2px;z-index:1;padding:1px 6px;border-radius:999px;background:var(--gain);color:#000;font-size:10px;font-weight:800}
.sqbl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 2px 2px}
.sqmove{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(10,132,255,.9);color:#fff;font-size:13.5px;font-weight:600}
.sqmove button{background:rgba(255,255,255,.22);border:0;border-radius:999px;color:#fff;font:inherit;font-weight:700;padding:4px 12px}
.pitch2.moving .pcard{opacity:.5}
.pitch2.moving .pcard.mv-ok,.pitch2.moving .pcard.mv-src{opacity:1}
.pitch2.moving .pcard.mv-ok{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:12px}
.pitch2.moving .pcard.mv-src{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:12px}
.pitch2.dnd .pcard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pitch2.dnd .pcard img{-webkit-user-drag:none;pointer-events:none}
.pitch2.dragging .pcard.dnd-src{opacity:.35}
.pitch2.dragging .pcard.dnd-over{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:12px;transform:scale(1.06)}
.pcard.dnd-ghost{position:fixed;z-index:80;margin:0;pointer-events:none;opacity:.92;transform:scale(1.1) rotate(-3deg);filter:drop-shadow(0 16px 22px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:reduce){.pcard.dnd-ghost{transform:none}}
.pcard .pown-p{color:var(--gain);font-size:11px;font-weight:800}
.sq-age{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sq-age .mini{flex:0 0 auto;white-space:nowrap}
/* sq8 (Gal 01/10): the slot picker, results first. Search, then one control row, then the list. */
.pk-v2 .pk-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pk-v2 .pk-out{background:none;border:0;color:var(--loss);font:inherit;font-size:14px;padding:4px 0}
.pk-v2 .searchbar{position:static;padding:2px 0 0}
.pk-ctl{display:flex;align-items:center;gap:8px;margin:10px 0 4px}
.pk-seg{flex:1;min-width:0;display:flex;background:var(--elev);border-radius:9px;padding:2px}
.pk-seg button{flex:1;border:0;background:none;color:var(--txt);font:inherit;font-size:13px;padding:6px 0;border-radius:7px;white-space:nowrap}
.pk-seg button.on{background:var(--elev2);font-weight:700}
.pk-sort{position:relative;flex:none}
.pk-sort .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pk-sort select{appearance:none;-webkit-appearance:none;border:0;background:var(--elev);color:var(--txt);font:inherit;font-size:13px;border-radius:9px;padding:7px 10px 7px 22px;background-image:linear-gradient(45deg,transparent 50%,var(--txt2) 50%),linear-gradient(135deg,var(--txt2) 50%,transparent 50%);background-position:9px 50%,13px 50%;background-size:4px 4px;background-repeat:no-repeat}
.pk-fbtn{flex:none;border:0;background:var(--elev);color:var(--txt);font:inherit;font-size:13px;border-radius:9px;padding:6px 10px;display:inline-flex;align-items:center;gap:5px}
.pk-fbtn i{font-style:normal;background:var(--acc);color:#fff;border-radius:99px;font-size:11px;min-width:17px;height:17px;display:inline-grid;place-items:center;padding:0 4px}
.pk-fbtn[aria-expanded="true"]{background:var(--elev2)}
.pk-fwrap[hidden]{display:none}
.pk-fwrap{margin:6px 0 2px}
.pk-fwrap .sqf-slot{margin:0}
.pk-hint{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;padding:4px 2px;font-size:12px;color:var(--txt2)}
.pk-clr{background:none;border:0;color:var(--acc);font:inherit;font-size:12px;padding:2px 0;white-space:nowrap}
/* 05/10 picker search: the list on screen is waiting for a newer answer. The delay keeps a quick answer from flickering; taking the class off is instant. */
#pkBody.pk-loading{opacity:.45;transition:opacity .2s .15s;pointer-events:none}
.pk-sq{color:var(--txt);font-weight:600;direction:ltr;unicode-bidi:isolate}
.empty .pk-he{font-size:14px;line-height:1.5;margin:10px 0 0}
#pkBody #pkAll{display:flex;width:fit-content;margin:18px auto 0}
.pk-list{background:var(--elev);border-radius:var(--r);overflow:hidden}
.pk-row{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:.5px solid var(--line)}
.pk-sec{padding:10px 14px 6px;font-size:13px;font-weight:700;color:var(--txt2);border-bottom:.5px solid var(--line)}   /* pick-chem: 'מתאימים לכימיה' / 'שאר השחקנים' */
.pk-row:last-child{border-bottom:0}
.pk-row.here{background:rgba(10,132,255,.08)}
.pk-hit{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:none;color:var(--txt);font:inherit;text-align:right;padding:6px 12px 6px 4px}
.pk-hit:active{background:var(--elev2)}
.pk-img{flex:none;width:40px}
.pk-img img,.pk-img .pblank{display:block;width:40px;aspect-ratio:300/419;height:auto}
.pk-img .pblank{display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.06);font-weight:800;font-size:13px}
.pk-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pk-mid b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-sub{font-size:12px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-chem{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700}
.pk-price{flex:none;min-width:48px;text-align:left;font-family:'Oxanium',var(--num);font-weight:700;font-size:14px}
.pk-price .pown-p{color:var(--gain);font-family:var(--font);font-size:12px;font-weight:800}
.pk-i{width:36px;height:44px;border:0;background:none;color:var(--txt2);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:15px}
.pk-i[aria-expanded="true"]{color:var(--acc)}
.pk-row .pk-cmp{grid-column:1/-1;margin:0 10px 10px}
.pk-row .pk-cmp[hidden]{display:none}
.pk-v2{min-height:min(82dvh,720px)}
.pk-mid b,.pk-sub{direction:ltr;text-align:right;unicode-bidi:plaintext}
/* sq8 step 2: the owner's builder form, one question in big type */
.sqb-card{background:var(--grp);border-radius:var(--r);padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px}
.sqb-lab{font-size:14px;color:var(--txt2)}
.sqb-in{display:flex;align-items:baseline;gap:8px;border-bottom:1.5px solid var(--line2);padding-bottom:4px}
.sqb-in:focus-within{border-color:var(--acc)}
.sqb-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--txt);font-family:'Oxanium',var(--num);font-weight:800;font-size:38px;line-height:1.15;direction:ltr;text-align:right;padding:0}
.sqb-in span{color:var(--txt2);font-size:15px}
.sqb-err{color:var(--loss);font-size:12px;min-height:15px;margin-top:-4px}
.sqb-pre{display:flex;gap:6px}
.sqb-pre button{flex:1;border:0;background:var(--elev);color:var(--txt);border-radius:999px;padding:8px 0;font-family:var(--num);font-weight:600;font-size:13px}
.sqb-pre button.on{background:var(--acc);color:#fff}
.sqb-sum{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--grp);border:0;border-radius:12px;padding:12px 14px;color:var(--txt2);font:inherit;font-size:14px;text-align:right}
.sqb-sum b{color:var(--txt);font-weight:500}
.sqb-sum .sqf-car{flex:none}
.sqb-sum[aria-expanded="true"] .sqf-car{transform:rotate(-135deg);margin-top:3px}
.sqb-adv{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sqb-adv[hidden]{display:none}
.sqb-go{margin-top:12px}
/* builder tab, build only on the button (Gal 01/10): the pending count on the button, the quiet note, the two folded layers */
.sqb-n{font-style:normal;margin-inline-start:8px;display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.24);font-size:12px;font-weight:600;line-height:1.5}
.sqb-pend{margin:8px 2px 0;text-align:center;font-size:12.5px;color:var(--txt2)}
.sqb-pend[hidden]{display:none}
.sqb-fh{margin-top:12px}
.sqf-bld{margin:6px 0 10px}
.sqf-bld .sqf-sec b{color:var(--acc);font-weight:700}
.sqf-bld .sqf-sec span{display:flex;gap:2px;color:var(--txt);font-weight:600}
.sqf-sub{margin-top:14px}
.sqf-rst{margin-top:8px}
.sqf-rst[hidden]{display:none}
.sq-how{display:flex;justify-content:center;margin:6px 0 4px}
.sq-how-list .v{color:var(--txt2);font-size:14px}
/* sq8 step 3: the squad price alert, set like a card's */
.sq-idxw{position:relative}
.sq-idx-none{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--grp);border-radius:var(--r);padding:10px 14px;margin:10px 0;color:var(--txt2);font-size:14px}
.sq-idx-none .ix-bell{position:static}
.ix-bell{position:absolute;top:10px;left:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:var(--elev);color:var(--txt);display:grid;place-items:center;padding:0}
.ix-bell svg{width:17px;height:17px}
.ix-bell i{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--acc);display:none}
.ix-bell.on{background:rgba(10,132,255,.22);color:var(--acc)}
.ix-bell.on i{display:block}
.al-now{font-size:13px;color:var(--txt2);margin:-4px 0 10px}
.al-opts{padding:0}
.al-fr{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:.5px solid var(--line)}
.al-fr:last-child{border-bottom:0}
.al-fr .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.al-fr .t b{font-size:16px;font-weight:600}
.al-fr .t span{font-size:12px;color:var(--txt2)}
.al-in{flex:none;display:flex;align-items:center;gap:3px;background:var(--elev2);border-radius:8px;padding:0 8px;height:34px;width:78px}
.al-in.w{width:112px}
.al-in input{width:100%;min-width:0;background:none;border:0;outline:0;color:var(--txt);font-family:var(--num);font-weight:600;font-size:16px;direction:ltr;text-align:left;padding:0}
.al-in input::placeholder{color:var(--txt2);font-family:var(--font);font-weight:400;font-size:13px;text-align:right}
.al-in i{font-style:normal;color:var(--txt2);font-size:13px}
.al-pv{display:flex;gap:10px;align-items:flex-start;background:var(--elev);border-radius:14px;padding:10px 12px;margin:12px 0 4px;font-size:13px;line-height:1.4}
.al-pv .ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--acc);display:grid;place-items:center;font-family:var(--num);font-weight:800;font-size:12px}
.al-pv b{display:block;font-size:13px}
.al-pv span{color:var(--txt2)}
.al-note{margin-top:6px}
.ix-bell.on.off{background:var(--elev);color:var(--muted)}
.ix-bell.on.off i{background:var(--loss)}
.sqf-hid{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 6px}
.sqf-hidc{border:0;cursor:pointer;font-family:inherit}

/* =====================================================================================================
   Levels (01/10, Gal): the opportunities screen v2, direction A from the approved mock. Owner only.
   Uses the app's tokens; strength sets four custom props (--sc bar/dot, --sbg chip, --stxt chip text, --fill range
   fill, --edge tile edge) on any element that carries .lv-s-*. Numbers are .num; Hebrew is never inside a .num.
   ===================================================================================================== */
.lv-s-strong{--sc:var(--gain);--sbg:rgba(48,209,88,.16);--stxt:var(--gain);--fill:rgba(48,209,88,.45);--edge:rgba(48,209,88,.45)}
.lv-s-good{--sc:var(--gold);--sbg:rgba(255,214,10,.16);--stxt:var(--gold);--fill:rgba(255,214,10,.42);--edge:rgba(255,214,10,.4)}
.lv-s-watch{--sc:#636366;--sbg:rgba(142,142,147,.24);--stxt:#C7C7CC;--fill:rgba(174,174,178,.35);--edge:rgba(142,142,147,.35)}
.lv-head{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.lv-title{font-size:28px;font-weight:700;line-height:34px;letter-spacing:-.3px}
.lv-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:13px;line-height:18px;color:var(--txt2)}
.lv-sep{opacity:.5}
.lv-pf{font:700 12px/1 'Oxanium',var(--num);letter-spacing:.5px}
.lv-stale{margin-top:6px;padding:7px 12px;border-radius:12px;background:rgba(255,214,10,.09);box-shadow:inset 0 0 0 .5px rgba(255,214,10,.35);font-size:12.5px;line-height:17px;color:#E5E5EA}
.lv-chips{display:flex;gap:8px;margin-top:8px}
.lv-chips button{flex:1 1 auto;min-width:0;height:44px;padding:5px 0}
.lv-chips button > span{display:flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border-radius:12px;background:var(--grp);font-size:14px;font-weight:500;color:#E5E5EA;white-space:nowrap;transition:background .2s,box-shadow .2s}
.lv-chips button.on > span{background:rgba(10,132,255,.24);box-shadow:inset 0 0 0 1px var(--acc);color:#fff;font-weight:600}
.lv-ctl{display:flex;gap:8px}
.lv-ctl button{flex:1 1 0;min-width:0;height:44px;padding:5px 0}
.lv-ctl button > span{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:12px;background:var(--grp);box-shadow:inset 0 0 0 .5px rgba(84,84,88,.65);font-size:14px;font-weight:500;color:#fff}
.lv-ctl svg{flex:none}
.lv-ctl button > span > svg:first-child{color:var(--acc)}
.lv-ctl button > span > svg:last-child{color:var(--muted)}
.lv-k{flex:1;text-align:start;white-space:nowrap}
.lv-k2{color:#AEAEB2}
.lv-gold{font-weight:700;color:var(--gold)}
.lv-grow{flex:1}
.lv-acc{display:flex;align-items:center;gap:8px;margin-top:2px;min-height:34px;padding:6px 12px;border-radius:12px;background:rgba(255,214,10,.09);box-shadow:inset 0 0 0 .5px rgba(255,214,10,.35);font-size:12px;line-height:16px;color:#E5E5EA}
.lv-acc svg{flex:none;color:var(--gold)}
.lv-list{margin-top:10px;margin-bottom:12px}
.lv-row{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;cursor:pointer;transition:background .15s}
.lv-row + .lv-row::after{content:"";position:absolute;top:0;inset-inline:14px;height:.5px;background:rgba(84,84,88,.6)}
.lv-row:active{background:rgba(255,255,255,.06)}
.lv-row:focus-visible{outline-offset:-2px}
.lv-tile{position:relative;flex:none;width:46px;height:58px;border-radius:10px;background:var(--elev);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 0 0 1px var(--edge)}
.lv-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sc);z-index:1}
.lv-tile img{width:100%;height:100%;object-fit:contain;padding:5px 2px 2px}
.lv-tov{font:700 22px/22px 'Oxanium',var(--num);color:#fff}
.lv-tin{font-size:10px;font-weight:600;line-height:12px;letter-spacing:.6px;color:#AEAEB2}
.lv-tile.big{width:50px;height:64px;border-radius:11px}
.lv-tile.big .lv-tov{font-size:25px;line-height:25px}
.lv-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px}
.lv-nm{display:flex;align-items:center;gap:6px;height:22px;min-width:0}
.lv-nm .ltr{flex:0 1 auto;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-ovr{flex:none;font-size:12px;font-weight:600;color:var(--txt2)}
.lv-tags{display:flex;align-items:center;gap:8px;min-height:20px;min-width:0}
.lv-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--sbg);color:var(--stxt);font-size:11px;font-weight:700;white-space:nowrap}
.lv-sig{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--txt2);white-space:nowrap;min-width:0}
.lv-ml{font-size:10.5px;line-height:14px;color:var(--txt2);opacity:.8;white-space:nowrap}
.lv-sig svg{flex:none}
.lv-broken{font-size:12px;font-weight:700;color:var(--loss);white-space:nowrap}
.lv-rng{direction:ltr;margin-top:3px}
.lv-track{position:relative;height:6px;border-radius:3px;background:var(--elev2)}
.lv-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--fill)}
.lv-pin{position:absolute;top:-3px;width:12px;height:12px;border-radius:6px;background:var(--sc);border:2px solid #17171a}
.lv-pin.over{background:var(--acc)}
.lv-pin.under{background:var(--loss)}
.lv-row.broken .lv-fill{background:rgba(255,69,58,.4)}
.lv-rl{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-family:var(--num);font-size:11px;line-height:14px;color:var(--muted)}
.lv-tag{font-family:var(--font);font-size:10px;font-weight:700;unicode-bidi:plaintext}
.lv-tag.over{color:#64B5FF}
.lv-tag.under{color:var(--loss)}
.lv-px{flex:none;width:112px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lv-price{font:600 19px/22px var(--num);letter-spacing:-.2px}
.lv-spark{display:block;direction:ltr}
.lv-spark .lv-band{fill:rgba(10,132,255,.16)}
.lv-spark .lv-line{stroke:var(--acc)}
.lv-spark .lv-dot{fill:#fff}
.lv-plan{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap}
.lv-pl{font-size:10.5px;line-height:14px;color:var(--muted);white-space:nowrap}
.lv-pv{display:flex;align-items:baseline;gap:5px}
.lv-pv .num{font-size:12px;font-weight:600}
.lv-pv .lv-pp{font-size:10.5px;font-weight:600;color:var(--txt2)}
.lv-hp{font-size:12px}
.lv-dn{font-size:10.5px;line-height:14px;font-weight:600;color:var(--loss);white-space:normal;max-width:84px;text-align:end}
.lvs-exp{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--elev);font-size:12.5px;line-height:18px;color:var(--txt2)}
.lvs-exp b{color:var(--txt)}
.lv-more{margin-bottom:16px}
.lv-empty{margin-top:12px}
.lv-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 0 8px}
.lv-opts .btn{min-height:52px;font-size:18px}
.lv-cardline{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:0 14px 12px;font-size:12.5px;line-height:18px;color:var(--txt2)}
.lv-cardline .num{color:var(--txt);font-weight:600}
.pulse-row .pi svg{display:block;width:18px;height:18px}
.pulse-row.lvp .pi{color:var(--gain)}
.pulse-row.lvp .pname{color:var(--txt)}
.row .meta .lv-chip{flex:none}
/* chart overlays (chart.js levels option): labels, event tag, date row. The sheet chart has no padding, so these
   coordinates match the SVG exactly; the card page's chart-wrap pads 6px 8px, hence the offsets. */
.lv-cl{position:absolute;right:10px;max-width:72%;font-size:12px;font-weight:600;line-height:16px;color:#fff;pointer-events:none;text-align:start}
.lv-cl .lv-cn{display:block;font-size:10.5px;font-weight:400;line-height:14px;color:var(--txt2)}
.lv-cl-ceil{transform:translateY(-100%)}
.lv-cl-floor{color:var(--gain)}
.lv-cl.lv-sm{font-size:11px;line-height:15px;font-weight:600;color:var(--txt2)}
.lv-cl.lv-sm.lv-cl-floor{color:var(--gain)}
.lv-cl.lv-l{right:auto;left:10px}
.chart-wrap:not(.lvs-chart) .lv-cl{right:16px;margin-top:6px}
.chart-wrap:not(.lvs-chart) .lv-cl.lv-l{right:auto;left:16px}
.lv-evline{position:absolute;width:0;border-left:1.4px dotted var(--gold);pointer-events:none}
.lv-ev{position:absolute;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:22px;max-width:calc(100% - 12px);padding:0 8px;border-radius:7px;background:var(--gold);color:#000;font-size:11px;font-weight:700;white-space:nowrap;pointer-events:none}
.lv-ev .ev-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lv-ev .ev-time{flex:none}
.lv-ev .ev-time{font-weight:700}
.lv-ev .ev-time::before{content:"";display:inline-block;width:3px;height:3px;margin-inline-end:6px;border-radius:50%;background:currentColor;vertical-align:middle}
.lv-day{position:absolute;transform:translateX(-50%);font:500 10.5px/14px var(--num);color:var(--muted);white-space:nowrap;direction:ltr;pointer-events:none}
/* the sheet */
.lvs-head{display:flex;align-items:center;gap:14px;margin-top:16px}
.lvs-id{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px}
.lvs-nm{display:flex;align-items:baseline;gap:10px;min-width:0}
.lvs-nm .ltr{flex:0 1 auto;min-width:0;font-size:21px;font-weight:700;letter-spacing:-.4px;line-height:26px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.lvs-rate{flex:none;font-size:13px;color:var(--txt2)}
.lvs-rate .num{font-weight:600;color:var(--txt)}
.lvs-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lvs-chip{height:24px;padding:0 9px;border-radius:7px;font-size:12px}
.lvs-sig{display:inline-flex;align-items:center;gap:5px;background:var(--elev);color:#E5E5EA;font-weight:500}
.lvs-sig.lv-broken{color:var(--loss);font-weight:700}
.lvs-now{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px;color:var(--txt2)}
.lvs-px{font:600 21px/26px var(--num);letter-spacing:-.3px;color:var(--txt)}
.lvs-why{margin:12px 0;font-size:14px;line-height:21px;color:#E5E5EA}
.lvs-chart{padding:0;border-radius:14px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 .5px rgba(84,84,88,.65);overflow:hidden}
.lvs-plan{display:flex;gap:8px;margin-top:12px}
.lvs-plan > div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:14px;background:var(--elev)}
.lvs-plan .k{font-size:11px;line-height:14px;color:var(--txt2)}
.lvs-val{font:700 20px/26px 'Oxanium',var(--num);color:var(--txt);white-space:nowrap}
.lvs-val.long{font-size:15px}
.lvs-plan .gainc{background:rgba(48,209,88,.14);box-shadow:inset 0 0 0 1px rgba(48,209,88,.5)}
.lvs-plan .gainc .lvs-val{color:var(--gain)}
.lvs-pct{font-size:11px;font-weight:600;color:var(--gain);margin-top:-2px}
.lvs-cur{margin-top:12px;font-size:12.5px;line-height:18px;color:var(--txt2)}
/* qa10 (04/10): the sheet of a card that is not yet a buy: one plain block where the plan would be */
.lvs-not{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--elev);font-size:12.5px;line-height:18px;color:var(--txt2)}
.lvs-not b{font-size:14px;line-height:20px;color:var(--txt)}
.lvs-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lvs-ask{flex:1 1 100%;margin:0;font-size:14px;line-height:21px;color:#E5E5EA}
.lvs-acts .btn{min-height:52px;font-size:18px;font-weight:700}
.lvs-go{flex:2 1 0}
.lvs-x{flex:1 1 0;font-weight:600!important}
.lvs-disc{margin-top:10px;text-align:center;font-size:11px;line-height:14px;color:var(--txt2)}
#toast.wide{width:max-content;max-width:min(92vw,420px)}
/* sq7: the share image preview in its sheet, and the share chip under the builder's actions */
.sq-shimg{display:block;width:100%;max-width:300px;margin:4px auto 12px;border-radius:18px;border:1px solid rgba(255,255,255,.12)}
.sq-shrow{justify-content:center}
/* The simple opportunities screen (Gal 02/10, owner first): one instruction per row, "שווה לעקוב" folded at the bottom */
.lv-intro{margin:6px 2px 0;font-size:14px;line-height:20px;color:var(--txt2)}
.lv-row-s{align-items:center}
.lv-row-s .lv-main{gap:4px}
.lv-do{display:flex;flex-wrap:wrap;gap:0 10px;font-size:13.5px;line-height:19px;color:var(--txt)}
.lv-do > span{white-space:nowrap}
.lv-row-s.w .lv-do{color:var(--txt2)}
.lv-row-s.w .lv-do > span{white-space:normal}
.lv-px-s{width:auto;min-width:72px;gap:1px}
.lv-gain{font:600 17px/21px var(--num);letter-spacing:-.2px}
.lv-px-s .lv-pp{font-size:11px;font-weight:600;color:var(--txt2)}
.lv-now{font:600 15px/19px var(--num);color:var(--txt2)}
.lv-fold-wrap{margin:0 0 16px}
.lv-fold-wrap:empty{display:none}
.lv-fold{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:0 16px;border-radius:14px;background:var(--grp);font-size:16px;font-weight:600;text-align:start}
.lv-fold-n{font-weight:600;color:var(--txt2)}
.lv-fold svg{margin-inline-start:auto;color:var(--muted);transition:transform .2s}
.lv-fold.open svg{transform:rotate(180deg)}
.lv-fold:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lv-fold-note{margin:6px 4px 0;font-size:12.5px;line-height:17px;color:var(--txt2)}
@media (prefers-reduced-motion:reduce){.lv-fold svg{transition:none}}
/* Gal 02/10: "במעקב" on a row the watchlist already holds, and the sheet's way to the card page */
.lv-watched{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:rgba(10,132,255,.16);color:#64B5FF;font-size:11px;font-weight:700;white-space:nowrap;flex:none}
.lvs-tlink{flex:none;display:block;border-radius:11px}
.lvs-tlink:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lvs-card{margin-top:4px}
.lv-home{margin-top:0}
.kv input:disabled{opacity:.4}
/* sq6 (Gal 03/10): "מה עוד כסף קונה לך" under the squad summary. Closed it is one quiet row; open, rows per tier and a small line chart. */
#sqTiers{margin-top:12px}
.sqt-open{width:100%;display:flex;align-items:center;gap:10px;padding:13px 14px;min-height:56px;background:var(--grp);border-radius:var(--r);text-align:start;color:var(--txt)}
.sqt-open:active{background:var(--elev)}
.sqt-ot{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sqt-ot b{font-size:16px;font-weight:700}
.sqt-ot small{font-size:13px;color:var(--txt2)}
.sqt-open .chev,.sqt-row .chev{flex:0 0 auto;color:var(--txt3)}
.sqt-card{background:var(--grp);border-radius:var(--r);overflow:hidden}
.sqt-h{display:flex;flex-direction:column;gap:3px;padding:13px 14px 8px}
.sqt-h b{font-size:16px;font-weight:700}
.sqt-h small{font-size:13px;color:var(--txt2);line-height:1.45}
.sqt-chart{display:block;width:100%;height:auto;padding:0 6px}
.sqt-ax{stroke:var(--line2);stroke-width:1}
.sqt-ln{fill:none;stroke:var(--gain);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.sqt-pt{fill:var(--grp);stroke:var(--gain);stroke-width:2}
.sqt-here{fill:var(--txt);stroke:var(--grp);stroke-width:2}
.sqt-tx{fill:var(--txt3);font-size:12px;font-family:var(--num);direction:ltr}
.sqt-tx.on{fill:var(--txt);font-weight:700}
.sqt-rows{border-top:1px solid var(--line)}
.sqt-row{width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;min-height:52px;border-bottom:1px solid var(--line);text-align:start;color:var(--txt)}
.sqt-row:last-child{border-bottom:0}
button.sqt-row:active{background:var(--elev)}
.sqt-b{flex:0 0 52px;font-family:var(--num);font-weight:800;font-size:16px;direction:ltr;text-align:start}
.sqt-t{flex:1;min-width:0;font-size:13.5px;color:var(--txt2);line-height:1.4}
.sqt-chip{flex:0 0 auto;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap}
.sqt-chip.gain{background:rgba(48,209,88,.16);color:var(--gain)}
.sqt-chip.gold{background:rgba(255,214,10,.14);color:var(--gold)}
.sqt-chip.mute{background:var(--elev);color:var(--txt2)}
.sqt-ok{padding:10px 14px 13px;font-size:13px;color:var(--txt2);border-top:1px solid var(--line)}
.sqt-shn{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-4px 0 8px}
.sqt-sw{padding:10px 0;border-top:1px solid var(--line)}
.sqt-swt{display:flex;align-items:center;gap:10px}
.sqt-slot{flex:0 0 38px;font-size:12px;font-weight:700;color:var(--txt2);direction:ltr;text-align:center}
.sqt-faces{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.sqt-faces img,.sqt-faces .sqt-ov{width:38px;height:52px;object-fit:contain;display:grid;place-items:center}
.sqt-faces .out{opacity:.45}
.sqt-faces .arr{color:var(--txt3);display:grid;place-items:center}
.sqt-faces .arr svg{display:block;width:7px;height:12px}
.sqt-ov{background:var(--elev);border-radius:8px;font-weight:800;font-size:14px}
.sqt-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sqt-who b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqt-who small{font-size:12px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqt-why{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;padding-inline-start:48px}
/* the report picture (feedbackSheet, 05/10): a pick button, the disclosure under it, a small preview with its remove control */
.fb-img{margin-bottom:12px}
.fb-img .note{padding:8px 4px 0}
.fb-prev{display:flex;align-items:center;gap:12px;margin-top:10px}
.fb-prev[hidden]{display:none}
.fb-prev img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
/* B1 (05/10): a redraw that keeps the old screen (sqRedraw) marks #mBody aria-busy: dimmed after a moment (a quick one never flickers), so a slow evaluate or rebuild does not look frozen */
#mBody{transition:opacity .15s}
#mBody[aria-busy="true"]{opacity:.55;transition:opacity .2s .3s}
@media (prefers-reduced-motion:reduce){#mBody[aria-busy="true"]{opacity:1}}

/* builder clean (Gal 05/10, lane D). Three things, CSS only.
   1. Destructive reads red. One class, .sq-dng, same tint as the saved-squad delete (lane U: rgba(255,69,58,.16), var(--loss), inset .5px
      rgba(255,69,58,.45)): "הסרה" in the player sheet, "איפוס" in the builder, "ניקוי המגרש" under the pitch. "לא להציע אותו שוב" deletes
      nothing, so it lost its red (.sqbl above). .btn.danger stays for the armed confirm ("לאשר מחיקה").
   2. 44px hit areas. Where the parent does not clip (overflow visible) the look stays and an invisible ::after widens the hit area, the
      item 7 technique above; a .chips row scrolls (overflow-x:auto, which clips a pseudo-element), so there the control grows for real.
   3. The empty "הקבוצה שלי": one line under the fill button (.mn-first), "ניקוי המגרש" in its own row under the pitch (.mn-clr). */
.sq-dng,.chips button.sq-dng,.btn.ghost.sq-dng,.sqact.sq-dng{background:rgba(255,69,58,.16);color:var(--loss);box-shadow:inset 0 0 0 .5px rgba(255,69,58,.45)}
.mn-clr{display:flex;justify-content:center;margin:14px 0 2px}
.mn-first{text-align:center;padding:2px 14px 6px}
/* formation chips (#sqF, #mnF) and the action row: wrap, overflow visible, so the pseudo-element reaches. 34px look, 44px hit; the row gap
   is 10 so two wrapped rows touch and never overlap. */
#sqF.sqfw,#mnF.sqfw,.mn-acts{row-gap:10px}
#sqF.sqfw button,#mnF.sqfw button,.mn-acts button,.sqb-pre button,.pk-seg button,.pk-fbtn{position:relative}
#sqF.sqfw button::after,#mnF.sqfw button::after,.mn-acts button::after{content:"";position:absolute;inset:-5px 0}
.sqb-pre button::after{content:"";position:absolute;inset:-6px 0}
.pk-seg button::after,.pk-fbtn::after{content:"";position:absolute;inset:-8px 0}
.sheet-x::after{content:"";position:absolute;inset:-7px}
/* the sort select cannot take a ::after: a transparent 7px border is part of its box, so the box is 44px high while the painted pill
   (background-clip:padding-box) and the row (margin -7px) stay what they were; the radius is the old 9 plus the border. */
.pk-sort select{border:7px solid transparent;margin:-7px;background-clip:padding-box;border-radius:16px}
/* sub-tabs sit in a scrolling row (clipped): taller for real, the underline stays on the bottom edge */
.munder button{padding:12px 0}
.kv #mnB,.kv #sqB,.sqb-in input{min-height:44px}
.sqform button{min-height:44px}
.sq-how .mini{min-height:44px;padding:0 14px}
/* the close X now reaches 49px from the sheet's left edge (12 + 30 + 7): the v2 picker header's "להוציא את ..." sits at that edge, so the header keeps 40px
   clear on that side (16 sheet padding + 40 = 56 > 49) and a tap on the name never lands on the X's hit area. */
.pk-v2 .pk-h{padding-inline-end:40px}
/* Untradeable cards in "הקבוצה שלי" (Gal 05/10, option B): a gold mark, never the lock (the lock is top-right and already means "נעול" in the
   builder, the mark is top-left and its glyph is two opposite arrows with a slash). The tape says "Untradeable" in gold with a gold top edge
   instead of a price; a picker row gets a 16px mark after the name and the word in the price column. */
.pcard .ut-badge,.pk-dk .ut-badge{position:absolute;top:-6px;left:-4px;z-index:1;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#000;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pcard .ut-badge svg,.pk-dk .ut-badge svg{width:12px;height:12px}
/* a card out of position wears the centred "לא בעמדה" tag (top -8px, 15px line + 2px padding, so its bottom edge is at 9px, and at a 68px card
   it is wider than the card): the mark drops just under it, so both stay readable */
.pcard.mn-oop .ut-badge{top:10px}
.sq-untr .sw:disabled{opacity:.6}
.pk-dk .ut-badge{top:2px;left:2px}
.ut-inline{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--gold);color:#000;vertical-align:-3px;margin-inline-start:6px}
.ut-inline svg{width:10px;height:10px}
.ut-b{font-family:var(--font);font-size:11.5px;font-weight:800;color:var(--gold)}
.pcard.ut-card .ppill .num{display:none}   /* a friend's pill has no tape: an untradeable card shows its chemistry dots only, the gold mark says the rest */
.pcard .ptape.ut-tape{justify-content:center;border-top-color:var(--gold)}
.pcard .ptape.ut-tape span{font-family:var(--font);color:var(--gold);font-size:clamp(9.5px,12cqw,11px);font-weight:800}
.psh-stats b.ut-s{font-family:var(--font);font-size:11px;font-weight:800;color:var(--gold);line-height:22px}
.sq-untr .kv .k small{display:block;font-size:12px;font-weight:400;color:var(--txt2);margin-top:2px;line-height:1.4}
/* the delete of a saved squad (the chip, and "מחיקה והמשך" in the full-list sheet) reads red, like .kv .acts .chip.loss */
.chips button.del,.kv .sqs-del{background:rgba(255,69,58,.16);color:var(--loss);box-shadow:inset 0 0 0 .5px rgba(255,69,58,.45)}
.kv .sqs-del{font-size:12px;font-weight:600;padding:4px 10px;border-radius:7px}
/* Card versions (Gal 05/10, option ח): one glass row under the hero (the same material as .home-fb), the list in the app's own sheet, and the small
   card that flies to the big one. A card is 300x419 everywhere, so the boxes carry that ratio and the flight scales a box onto a box. */
.vrow{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 16px;margin:0 0 16px;border-radius:var(--r);text-align:start;color:var(--txt);transition:transform .18s var(--spring)}
.vrow:active{transform:scale(.985)}
.vstack{display:flex;flex:0 0 auto;isolation:isolate}
.vstack img{position:relative;width:34px;height:auto;aspect-ratio:300/419;border-radius:5px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.vstack img + img{margin-inline-start:-16px}
.vstack img:nth-child(1){z-index:3}
.vstack img:nth-child(2){z-index:2}
.vstack img:nth-child(3){z-index:1}
.vtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vrow .vtxt b{font-size:16px;font-weight:700;line-height:1.3}
.vsub{font-size:13px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .chev{flex:0 0 auto;color:var(--txt3)}
.vleg{padding:0 2px 10px;margin-top:-4px}   /* the line under the sheet title lines up with the title, not with the rows' text */
.vlist{margin-bottom:4px}
.vitem{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:8px 14px;text-align:start;color:var(--txt);border-bottom:1px solid var(--line);transition:background .15s}
.vitem:last-child{border-bottom:0}
.vitem:active{background:var(--elev)}
.vitem.on{background:rgba(10,132,255,.14)}
.vitem .thumb{width:44px;height:auto;aspect-ratio:300/419}   /* .thumb is 64x88 globally (and 44x60 above it): the box is the card, 300x419 */
.vname{display:flex;min-width:0;font-size:16px}
.vname .ltr{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.vpr{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:46%}
.vp{display:flex;align-items:center;gap:6px;direction:ltr;font-family:var(--num);font-weight:700;font-size:16px;white-space:nowrap}
.vp .coin{margin:0;flex:0 0 auto}
.vnone{font-size:13px;color:var(--txt2);white-space:nowrap}
.vchg{font-size:12.5px;font-weight:600;white-space:nowrap}
.vck{flex:0 0 18px;width:18px;height:18px;color:var(--acc)}
.vck svg{display:block;width:18px;height:18px}
.ver-fly{position:fixed;z-index:70;margin:0;max-width:none;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.vrow:active{transform:none}.ver-fly{display:none}}

/* Chemistry Styles (Gal 05/10, docs/chem-styles-design.md; markup in public/js/chem-ui.js). Three parts: the third tile in the card screen's
   stats group (round 4, option 4: green tint, a hexagon, same size as SM and WF), the comparison sheet (round 3), and home's one-time card (round 2). */
.wfsm-tile.chem-tile{color:var(--txt);background:rgba(48,209,88,.12);box-shadow:inset 0 0 0 1px rgba(48,209,88,.35);transition:transform .18s var(--spring)}
.wfsm-tile.chem-tile:active{transform:scale(.96)}
.wfsm-tile.chem-tile b{color:var(--gain);align-items:center;justify-content:center;height:30px}
.wfsm-tile.chem-tile span{font-family:var(--font);font-size:13px;letter-spacing:0;color:var(--txt)}
.chem-hex{width:28px;height:28px;display:block}
/* the sheet: the title leaves room for the sheet's own x at the left, the table reads left to right like the numbers in it */
.chem h2{padding-inline-start:40px}
.chem-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.chem-leg{font-size:12.5px;color:var(--txt2);line-height:1.35}
.chem-seg{flex:none}
.chem-seg button{font-family:var(--num);min-width:34px;padding:4px 12px}
.chem-tbl{width:100%;border-collapse:collapse;direction:ltr;font-family:var(--num);font-size:13px}
.chem-tbl th{font-size:10px;letter-spacing:.06em;color:var(--txt2);font-weight:700;padding:5px 2px;text-align:center}
.chem-tbl td{padding:0 2px;text-align:center;color:var(--txt2);border-top:.5px solid var(--line);height:33px}
.chem-tbl td.up{color:var(--gain);font-weight:700}
.chem-tbl td.top{background:rgba(48,209,88,.16);border-radius:6px}
.chem-tbl tr.on td{background:rgba(255,255,255,.1)}
.chem-tbl tr.on td.top{background:rgba(48,209,88,.3)}
.chem-tbl th:first-child,.chem-tbl td:first-child{text-align:left;padding-left:10px;width:28%}
.chem-tbl tr[data-style]{cursor:pointer}
.chem-nb{display:block;width:100%;padding:8px 0;text-align:left;font-weight:700;color:var(--txt);white-space:nowrap}
.chem-tbl tr[data-style=""] .chem-nb{color:var(--txt2)}
.chem-hint{font-size:12px;color:var(--txt2);text-align:center;margin:8px 0 2px}
/* the picked style: the radar is the boosted card over the card as it is (pkRadar draws the second one dashed), green because green means up here */
.chem-sel{background:rgba(255,255,255,.05);border-radius:var(--r-sm);margin:0 0 10px;padding:10px 0 6px}
.chem-sel .pk-radar .me{fill:rgba(48,209,88,.28);stroke:var(--gain)}
.chem-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 14px}
.chem-pn{font-size:17px;font-weight:800}
.chem-pc{font-size:12.5px;color:var(--txt2)}
.pk-dl.chem-dl{grid-template-columns:30px 1fr auto}
.chem-dl .v{font-weight:600;color:var(--txt2)}
.chem-dl.up .v{color:var(--txt)}
.chem-pair b{color:var(--gain);font-weight:800}
.chem-ar{width:11px;height:8px;margin:0 5px;vertical-align:middle;flex:none}
.chem-d{display:inline-block;font-size:11.5px;font-weight:700;line-height:18px;padding:0 7px;border-radius:999px;color:var(--gain);background:rgba(48,209,88,.16)}
.chem-subs{padding:4px 14px 2px}
.chem-sh{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--txt2);margin:2px 0 6px}
.chem-sb{display:grid;grid-template-columns:124px 1fr 66px;gap:8px;align-items:center;direction:ltr;font-family:var(--num);font-size:11.5px;padding:3px 0}
.chem-sb .k{color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chem-sb i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.chem-sb i span{position:absolute;top:0;bottom:0}
.chem-sb .b0{left:0;background:rgba(255,255,255,.45)}
.chem-sb .b1{background:var(--gain)}
.chem-sb .v{text-align:right;white-space:nowrap;color:var(--txt2)}
.chem-sb .v b{color:var(--gain)}
/* home's one-time card */
.chem-new{border-radius:var(--r);padding:16px;margin-bottom:16px}
.chem-new-x{position:absolute;top:12px;left:14px;width:26px;height:26px;border-radius:50%;background:var(--elev);color:var(--txt2);font-size:13px;line-height:26px;text-align:center;z-index:2}
.chem-new-x::after{content:"";position:absolute;inset:-9px}
.chem-new-eb{font-size:13px;font-weight:700;color:var(--gold)}
.chem-new-t{font-size:24px;font-weight:900;line-height:1.12;letter-spacing:-.015em;margin:4px 0 12px}
.chem-grad{background:linear-gradient(90deg,#30D158,#D7F75B 55%,#FFD60A);-webkit-background-clip:text;background-clip:text;color:transparent}
.chem-demo{background:rgba(0,0,0,.35);border-radius:18px;padding:12px}
.chem-chips{display:flex;gap:7px;direction:ltr;justify-content:flex-end;padding-bottom:8px}
.chem-chips span{font-family:var(--num);font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--txt2)}
.chem-chips span.on{background:#fff;color:#000}
.chem-ln{display:flex;align-items:center;justify-content:space-between;direction:ltr;font-family:var(--num);font-size:15px;padding:3px 0}
.chem-ln .k{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--txt2);width:34px}
.chem-ln .chem-pair b{color:var(--gain)}
.chem-foot{font-size:11.5px;color:var(--txt2);text-align:center;margin-top:6px}
.chem-btns{display:flex;gap:8px;margin-top:14px}
.chem-btns .btn{flex:1;min-height:40px;font-size:15px}

/* =====================================================================================================
   06/10 the drop strip (public/js/drops-ui.js, Gal's mockup JLYTiTePzASGX4jZJP2BHB, direction "glass + drop glow"): the latest drop
   and the new evolutions, under the radar. The glass is the app's own .lg; the drop's moment is the gold: a pulsing dot, and one
   sweep of light across the card for two days after a drop. Numbers stay in .num (the only forced-LTR class, test-rtl-arrows).
   ===================================================================================================== */
.dr{padding:16px 0 14px;margin-bottom:16px;overflow:hidden;border-radius:var(--r)}
.dr.fresh::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 30%,rgba(255,214,10,.2) 48%,transparent 62%);background-size:260% 100%;animation:drSweep 2.4s ease-out .3s 1 both}
@keyframes drSweep{from{background-position:120% 0}to{background-position:-60% 0}}
.dr-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 16px}
.dr-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--gold)}
.dr-live i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:drPing 1.8s infinite}
.dr-live.old{color:var(--txt2)} .dr-live.old i{background:var(--txt2);animation:none}
@keyframes drPing{0%{box-shadow:0 0 0 0 rgba(255,214,10,.55)}80%,100%{box-shadow:0 0 0 9px rgba(255,214,10,0)}}
.dr-when{font-size:12px;color:var(--txt2)}
.dr-cd{font-size:12px;font-weight:700;color:var(--txt)} .dr-cd .num{color:var(--gold)}
.dr-title{font-size:23px;font-weight:800;margin:6px 16px 0;line-height:1.2}
.dr-meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:2px 16px 0;font-size:13px;color:var(--txt2)}
.dr-dl{font-weight:700;font-size:12px;padding:1px 7px;border-radius:7px;white-space:nowrap}
.dr-dl.dn{color:var(--loss);background:rgba(255,69,58,.14)} .dr-dl.up{color:var(--gain);background:rgba(48,209,88,.14)}
.dr-strip{display:flex;gap:12px;overflow-x:auto;padding:14px 16px 4px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dr-strip::-webkit-scrollbar{display:none}
.dr-it{flex:0 0 auto;width:108px;scroll-snap-align:start;display:grid;gap:5px;justify-items:center;animation:drRise .55s var(--spring) both;animation-delay:calc(var(--i) * 60ms + .1s)}
.dr-it a{display:block;width:100%}
.dr-it img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
@keyframes drRise{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
.dr-px{display:flex;gap:6px;align-items:center;font-size:14px;font-weight:700}
.dr-trk{border:0;border-radius:10px;padding:5px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;background:var(--acc);color:#fff}   /* roy-0610: the same solid blue as every other "הוספה למעקב" */
.dr-trk.on{background:rgba(48,209,88,.16);color:var(--gain);cursor:default}
.dr-trk:disabled{opacity:.5}
.dr-more{margin:12px 0 0}
.dr-more .dr-sec{display:grid;gap:6px;padding:0 16px}
.dr-more .dr-strip{gap:10px;padding:8px 16px 4px}
.dr-more .dr-it{width:74px}
.dr-more .dr-px{font-size:12px}
.dr-more .dr-trk{font-size:11px;padding:4px 7px}
.dr-evo{margin:12px 12px 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.06);display:grid;gap:8px}
.dr-evo-h{display:flex;justify-content:space-between;align-items:center;gap:8px;color:inherit;text-decoration:none}
.dr-k{font-size:11.5px;font-weight:800;color:#b48cff}
.dr-end{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2)}
.dr-end .chev{width:7px;display:inline-flex;color:var(--txt3)} .dr-end .chev svg{width:7px;height:12px}
.dr-evo-n{font-size:16px;font-weight:800}
.dr-chips{display:flex;flex-wrap:wrap;gap:6px}
.dr-chips span{font-size:11.5px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--txt2)}
.dr-sec{font-size:11.5px;font-weight:700;color:var(--txt2)}
.dr-best{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;color:inherit;text-decoration:none}
.dr-best img{width:44px;height:auto}
.dr-bt{min-width:0} .dr-bt b{display:block;font-size:14px} .dr-bt small{display:block;font-size:11.5px;color:var(--txt2)}
.dr-up{font-weight:700;color:var(--gain)}
.dr-bp{font-size:13px;font-weight:700}
.dr-pop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dr-pop a{display:grid;justify-items:center;gap:1px;text-align:center;min-width:0;color:inherit;text-decoration:none;font-size:12px;font-weight:700}
.dr-pop img{width:52px;height:auto}
.dr-pop span{font-size:11px;font-weight:500;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (prefers-reduced-motion:reduce){.dr.fresh::after,.dr-live i,.dr-it{animation:none}}

/* Gal 06/10: the consent screen (first entry, the app waits behind it until accepted) and the in-app terms page (public/js/consent-ui.js). */
body.ck-on #tabs, body.ck-on #backBtn, body.ck-on #pfChip, body.ck-on header{display:none}
body.ck-pre #tabs{display:none}

/* --- consent: a full-height sheet, no grab handle and no backdrop tap: it cannot be dismissed --- */
.ck-bg{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 60% at 50% 0%,rgba(10,132,255,.16),transparent 60%),rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:flex-end}
.ck{width:100%;max-width:640px;margin:0 auto;max-height:calc(100dvh - 12px - var(--safe-t));display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--grp);border-radius:24px 24px 0 0;border-top:1px solid var(--line2);animation:up .3s cubic-bezier(.2,.8,.2,1)}
.ck-top{padding:22px 20px 6px;display:grid;gap:8px;justify-items:start}
.ck-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--elev);color:var(--acc)}
.ck-mark svg{width:26px;height:26px}
.ck-top h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ck-top p{font-size:15px;color:var(--txt2);line-height:1.45}
.ck-body{overflow-y:auto;overscroll-behavior:contain;padding:10px 16px 6px;display:grid;gap:14px}
.ck-h{font-size:13px;font-weight:600;color:var(--txt2);margin:0 4px}
.ck-list{background:var(--elev);border-radius:var(--r);display:grid}
.ck-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:13px 14px}
.ck-row + .ck-row{border-top:1px solid var(--line)}
.ck-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--elev2);color:var(--txt)}
.ck-ic svg{width:17px;height:17px}
.ck-row p{font-size:15px;line-height:1.5}
.ck-row b{font-weight:700}
.ck-list.give{background:linear-gradient(180deg,rgba(48,209,88,.10),rgba(48,209,88,.04));box-shadow:inset 0 0 0 1px rgba(48,209,88,.18)}
.ck-list.give .ck-ic{background:rgba(48,209,88,.16);color:var(--gain)}
.ck-mail{font-family:var(--num);direction:ltr;unicode-bidi:isolate;color:var(--acc);font-weight:600}
.ck-foot{padding:12px 16px calc(14px + var(--safe-b));display:grid;gap:10px;border-top:1px solid var(--line);background:rgba(28,28,30,.92)}
.ck-terms{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;font-size:15px;font-weight:600;color:var(--acc)}
.ck-terms svg{width:7px;height:12px}
.ck-note{font-size:12px;color:var(--txt2);text-align:center;line-height:1.4}

/* --- terms page --- */
.tm{padding:0 0 40px;display:grid;gap:14px}
.tm .section-h{margin:4px 4px 0}
.tm-ver{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--txt2)}
.tm-ver span{padding:4px 10px;border-radius:9px;background:var(--elev)}
.tm-toc{background:var(--grp);border-radius:var(--r);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden}
.tm-toc a{background:var(--grp);display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:baseline;padding:11px 12px;font-size:14px;line-height:1.3}
.tm-toc a b{font-family:var(--num);font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.tm-toc{background:var(--line)}
.tm-sec{background:var(--grp);border-radius:var(--r);padding:16px;display:grid;gap:10px;scroll-margin-top:110px}
.tm-sec h3{font-size:18px;font-weight:700;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline}
.tm-sec h3 i{font-style:normal;font-family:var(--num);color:var(--acc);font-weight:700}
.tm-sec p{font-size:15px;line-height:1.6;color:rgba(235,235,245,.86)}
.tm-sec p.cl-p{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px}
.tm-sec p .cl{font-family:var(--num);font-weight:600;color:var(--txt2);font-variant-numeric:tabular-nums}
.tm-sec.key{box-shadow:inset 0 0 0 1px rgba(255,214,10,.28)}
.tm-ack{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;background:var(--grp);border-radius:var(--r);padding:14px}
.tm-ack .ck-ic{background:rgba(48,209,88,.16);color:var(--gain)}
.tm-ack p{font-size:14px;line-height:1.45} .tm-ack small{display:block;color:var(--txt2);font-size:12.5px}