/* =========================================================
   שפת עיצוב: שחור-לבן נקי, צבע חתימה אחד (ליים חשמלי),
   אייקוני קו דקים, מספרים בגופן מעוגל, ותנועה רכה בכל מקום
   ========================================================= */
:root {
  /* הצבעים של ג'ובה: כחול עמוק מהכיתוב, זהב מהמטבע, ירוק מהשטר, קרם חם מהרקע */
  --bg: #F6F2EA;
  --bg2: #ECE6DA;
  --card: #FFFFFF;
  --card2: #F7F3EC;
  --ink: #12204A;
  --ink2: #33406A;
  --muted: #5E6377;
  --line: rgba(18, 32, 74, .08);
  --line2: rgba(18, 32, 74, .14);
  --blue: #2457E6;
  --blue2: #1A3FB3;
  --lime: #F5B82E;
  --lime2: #E2A21A;
  --violet: #2FA65A;
  --sky: #7FB2FF;
  --peach: #E86A4F;
  --good: #1F9D52;
  --good-soft: #E3F4E8;
  --warn: #E08A00;
  --warn-soft: #FFF1D6;
  --bad: #D93A3A;
  --bad-soft: #FCE5E3;
  --dark: linear-gradient(150deg, #2457E6 0%, #1A3FB3 45%, #12204A 100%);
  --on-dark: #FFFFFF;
  --glass: rgba(255, 255, 255, .76);
  --glass-line: rgba(255, 255, 255, .7);
  --shadow-s: 0 1px 2px rgba(18, 32, 74, .05);
  --shadow: 0 1px 2px rgba(18, 32, 74, .04), 0 10px 30px rgba(18, 32, 74, .06);
  --shadow-l: 0 24px 60px rgba(18, 32, 74, .2);
  --radius: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "Rubik", system-ui, sans-serif;
  --font-d: "Rubik", system-ui, sans-serif;
  --font-n: "Rubik", system-ui, sans-serif;
  --font-hand: "Amatic SC", "Rubik", cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0A1024;
  --bg2: #141B36;
  --card: #131A33;
  --card2: #1B2342;
  --ink: #F3F5FB;
  --ink2: #CBD3EA;
  --muted: #A9B2CC;
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .13);
  --good-soft: #12291D;
  --warn-soft: #2C2210;
  --bad-soft: #2E1515;
  --dark: linear-gradient(150deg, #2457E6 0%, #1A3FB3 50%, #0F1838 100%);
  --glass: rgba(19, 26, 51, .78);
  --glass-line: rgba(255, 255, 255, .08);
  --shadow-s: none;
  --shadow: none;
  --shadow-l: 0 24px 60px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; min-height: 100dvh; overscroll-behavior-y: none; transition: background .4s var(--ease), color .4s var(--ease); }
h1, h2, h3 { font-family: var(--font-d); }
h1 { font-size: 30px; line-height: 1.1; margin: 0 0 6px; font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: 21px; margin: 0 0 10px; font-weight: 750; letter-spacing: -.025em; }
h3 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0 0 10px; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.num { font-family: var(--font-n); font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-weight: 700; }
.ic { display: block; flex: none; }

#app { max-width: 560px; margin: 0 auto; padding: 0 16px 140px; position: relative; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.hidden { display: none !important; }

/* ---------- סרגל עליון וכותרת גדולה ---------- */
.nav { position: sticky; top: 0; z-index: 15; margin: 0 -16px; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; display: flex; align-items: center; gap: 10px; transition: background .25s, box-shadow .25s; }
.nav.scrolled { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 .5px 0 var(--line2); }
.nav .mini { font-weight: 700; font-size: 16px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .35s var(--ease); flex: 1; text-align: center; }
.nav.scrolled .mini { opacity: 1; transform: none; }
.nav .side { min-width: 72px; display: flex; align-items: center; gap: 8px; }
.nav .side.end { justify-content: flex-end; }
.back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-s); text-decoration: none; transition: transform .25s var(--spring); }
.back:active { transform: scale(.88); }
.large { padding: 6px 2px 16px; }
.large h1 { font-size: 36px; }
.large .eyebrow { font-size: 13px; font-weight: 650; color: var(--muted); margin-bottom: 2px; }
.brandmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 850; font-size: 22px; letter-spacing: -.04em; text-decoration: none; }
.brandmark img { width: 32px; height: 32px; border-radius: 10px; }
.me-btn { border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; transition: transform .25s var(--spring); }
.me-btn:active { transform: scale(.9); }

/* ---------- כרטיסים ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 14px; position: relative; }
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.card.tight { padding: 4px 18px; }
.sect { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 4px 12px; }
.sect h3 { font-size: 20px; }
.sect a, .sect button { font-size: 14px; font-weight: 650; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }

/* כרטיס כהה עם זוהר ליים זז וגרעיניות */
.dark-card { background: var(--dark); color: var(--on-dark); border-radius: 32px; padding: 24px 22px; overflow: hidden; position: relative; isolation: isolate; box-shadow: 0 24px 50px -22px rgba(26, 63, 179, .65); margin-bottom: 14px; }
.dark-card::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 184, 46, .55), rgba(245, 184, 46, 0) 65%); top: -140px; left: -90px; z-index: -1; animation: orb 12s var(--ease) infinite alternate; }
.dark-card::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .14; mix-blend-mode: overlay; z-index: -1; pointer-events: none; }
.dark-card .glow2 { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(127, 178, 255, .45), rgba(127, 178, 255, 0) 65%); bottom: -120px; right: -60px; z-index: -1; animation: orb2 15s var(--ease) infinite alternate; }
@keyframes orb { to { transform: translate(150px, 70px) scale(1.2); } }
@keyframes orb2 { to { transform: translate(-110px, -40px) scale(.85); } }
.dark-card .label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.62); }
.dark-card .big { font-family: var(--font-n); font-size: clamp(34px, 10.2vw, 52px); font-weight: 800; line-height: 1; margin: 8px 0 8px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dark-card .sub { font-size: 14px; color: rgba(255,255,255,.62); }
.dark-card .pill-l { display: inline-flex; align-items: center; gap: 6px; background: var(--lime); color: #12204A; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 750; }
.dark-card .pill-g { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 650; }
.dark-card .mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.dark-card .mini-stats > div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 12px 14px; }
.dark-card .mini-stats .k { font-size: 12.5px; color: rgba(255,255,255,.55); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.dark-card .mini-stats .v { font-family: var(--font-n); font-weight: 750; font-size: 19px; margin-top: 2px; letter-spacing: -.03em; }
.dark-card .btn.lime { margin-top: 16px; }
.hero-row { display: flex; align-items: center; gap: 14px; }

/* טבעת */
.ring { position: relative; flex: none; }
.ring svg { display: block; transform: rotate(-90deg); overflow: visible; }
.ring .track { stroke: rgba(255,255,255,.12); }
.ring .val { stroke: var(--lime); stroke-linecap: round; transition: stroke-dashoffset 1.5s var(--ease); filter: drop-shadow(0 0 8px rgba(245, 184, 46, .55)); }
.ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring .in b { font-family: var(--font-n); font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ring .in span { font-size: 11px; opacity: .6; margin-top: 3px; }
.ring.light .track { stroke: var(--line); }
.ring.light .val { stroke: var(--ink); filter: none; }

/* ---------- כפתורים ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 18px; padding: 15px 22px; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform .25s var(--spring), opacity .2s, background .2s; user-select: none; -webkit-user-select: none; }
.btn:active, .press:active { transform: scale(.96); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -10px rgba(36, 87, 230, .7); }
.btn.lime { background: var(--lime); color: #12204A; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line2); }
.btn.soft { background: var(--card2); color: var(--ink); }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.block { width: 100%; }
.btn.sm { padding: 9px 15px; font-size: 14px; border-radius: 13px; }
.link { background: none; border: 0; color: var(--ink); padding: 0; cursor: pointer; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.press { transition: transform .25s var(--spring); cursor: pointer; }

/* ---------- טפסים ---------- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 7px; font-weight: 650; }
input, select { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--card2); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 16px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 18px 50%, 13px 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 34px; }
input:focus, select:focus { border-color: var(--blue); background: var(--card); box-shadow: 0 0 0 4px var(--line); }
input[type=checkbox] { width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 2px solid var(--line2); background: var(--card); flex: none; cursor: pointer; position: relative; }
input[type=checkbox]:checked { background: var(--ink); border-color: var(--ink); }
input[type=checkbox]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--lime); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.err { color: var(--bad); font-size: 14px; min-height: 20px; margin-top: 8px; font-weight: 550; }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
input.bignum { font-family: var(--font-n); font-size: 46px; font-weight: 800; text-align: center; background: none; border: 0; box-shadow: none; letter-spacing: -.03em; }
input.bignum:focus { background: none; box-shadow: none; }

/* ---------- רשימות, אייקונים, פסים ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.list > li.tap { cursor: pointer; transition: transform .25s var(--spring), opacity .2s; }
.list > li.tap:active { transform: scale(.98); opacity: .75; }
.tile { width: 44px; height: 44px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--card2); color: var(--ink); }
.tile.sm { width: 36px; height: 36px; border-radius: 12px; }
.tile.dark { background: var(--blue); color: #fff; }
.tile.lime { background: var(--lime); color: #12204A; }
.catrow { display: flex; align-items: center; gap: 13px; }
.catrow .name { font-weight: 650; font-size: 16px; }
.catrow .meta { font-size: 13px; color: var(--muted); margin-top: 1px; }
.catrow .amt { font-family: var(--font-n); font-weight: 750; white-space: nowrap; font-size: 16.5px; letter-spacing: -.02em; }
.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 9px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); width: 0; transition: width 1.2s var(--ease); }
.bar.good > i { background: var(--lime2); }
.bar.warn > i { background: var(--warn); }
.bar.bad > i { background: var(--bad); }
.delta { font-size: 12px; padding: 3px 8px; border-radius: 99px; white-space: nowrap; font-weight: 750; font-family: var(--font-n); }
.delta.up { background: var(--bad-soft); color: var(--bad); }
.delta.down { background: var(--good-soft); color: var(--good); }

.tx { display: flex; gap: 12px; align-items: center; }
.tx .desc { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .meta { font-size: 13px; color: var(--muted); }
.tx .amt { font-family: var(--font-n); font-weight: 750; white-space: nowrap; }
.tx .amt.in { color: var(--good); }
.daygrp { font-size: 13px; font-weight: 700; color: var(--muted); padding: 16px 2px 2px; }

/* אווטארים: א׳ שחור-ליים, ב׳ סגול, משותף ליים */
.av { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex: none; font-family: var(--font-d); box-shadow: 0 0 0 2.5px var(--bg); }
.av.c0 { background: var(--blue); color: #fff; }
.av.c1 { background: var(--violet); color: #fff; }
.av.c0, .av.c1 { font-weight: 800; }
.av.sh { background: var(--lime); color: #12204A; }
.av.sm { width: 24px; height: 24px; font-size: 11px; box-shadow: 0 0 0 2px var(--card); }
.avs { display: inline-flex; }
.avs .av + .av { margin-inline-start: -9px; }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--line2); font-size: 15px; cursor: pointer; font-weight: 650; transition: all .3s var(--spring); }
.chip:active { transform: scale(.94); }
.chip.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 750; }
.badge.warn { background: var(--warn-soft); color: #9A6200; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.lime { background: var(--lime); color: #12204A; }
html[data-theme="dark"] .badge.warn { color: var(--warn); }

.notice { border-radius: 22px; padding: 14px 16px; font-size: 14.5px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: var(--card); box-shadow: var(--shadow); }
.notice .ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.notice.warn .ico { background: var(--warn-soft); color: var(--warn); }
.notice.lime .ico { background: var(--lime); color: #12204A; }
.notice.bad { background: var(--bad-soft); box-shadow: none; }

/* ---------- סרגל תחתון: גלולת זכוכית צפה ---------- */
.tabs { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%); z-index: 30; width: min(calc(100% - 24px), 440px); }
.tabs .in { position: relative; display: flex; align-items: center; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--glass-line); border-radius: 32px; padding: 7px; box-shadow: 0 14px 40px rgba(18, 32, 74, .14); }
.tabs .pill { position: absolute; top: 7px; bottom: 7px; border-radius: 25px; background: var(--blue); transition: transform .5s var(--spring), width .5s var(--spring), opacity .2s; z-index: 0; }
.tabs a { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; color: var(--muted); text-decoration: none; font-size: 10.5px; font-weight: 750; transition: color .35s; }
.tabs a .ic { transition: transform .4s var(--spring); }
.tabs a.on { color: #fff; }

.tabs a:active .ic { transform: scale(.82); }
.tabs a.up { flex: 0 0 62px; }
.tabs a.up .dot { width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: #12204A; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px -6px rgba(200, 140, 0, .7); transition: transform .35s var(--spring); position: relative; }
.tabs a.up .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; animation: pulse 2.8s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.85); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.tabs a.up:active .dot { transform: scale(.86); }

/* ---------- קרוסלת תובנות ---------- */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: none; }
.ins { width: 78%; max-width: 320px; border-radius: 26px; padding: 18px; background: var(--card); box-shadow: var(--shadow); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 172px; text-decoration: none; color: inherit; }
.ins .top { display: flex; align-items: center; justify-content: space-between; }
.ins .v { font-family: var(--font-n); font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ins h3 { font-size: 16px; line-height: 1.3; }
.ins p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.ins.good { background: var(--lime); color: #12204A; }
.ins.good p { color: rgba(18,32,74,.65); }
.ins.good .tile { background: rgba(18,32,74,.08); color: #12204A; }
.ins.warn .tile { background: var(--warn-soft); color: var(--warn); }
.ins.dark { background: var(--dark); color: #fff; }
.ins.dark p { color: rgba(255,255,255,.6); }
.ins.dark .tile { background: rgba(255,255,255,.1); color: var(--lime); }
.ins.big { width: 100%; max-width: none; min-height: 0; margin-bottom: 12px; }

/* ---------- דונאט ---------- */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut { position: relative; flex: none; }
.donut svg { display: block; transform: rotate(-90deg); }
.donut circle.seg { transition: stroke-dashoffset 1.3s var(--ease); }
.donut .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut .in b { font-family: var(--font-n); font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.donut .in span { font-size: 11.5px; color: var(--muted); }
.legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.legend i { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { font-family: var(--font-n); font-weight: 700; }

/* ---------- מפת ימים ---------- */
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.heat .h { font-size: 11px; color: var(--muted); text-align: center; font-weight: 650; padding-bottom: 2px; }
.heat .d { aspect-ratio: 1; border-radius: 10px; background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 650; color: var(--muted); cursor: pointer; animation: cell .5s var(--spring) both; transition: transform .2s var(--spring); }
.heat .d:active { transform: scale(.85); }
.heat .d.e { background: none; cursor: default; animation: none; }
.heat .d.l1 { background: color-mix(in srgb, var(--lime) 30%, var(--card2)); color: var(--ink2); }
.heat .d.l2 { background: color-mix(in srgb, var(--lime) 62%, var(--card2)); color: #12204A; }
.heat .d.l3 { background: var(--lime); color: #12204A; }
.heat .d.l4 { background: var(--blue); color: #fff; }
@keyframes cell { from { transform: scale(.4); opacity: 0; } }
.heat-key { display: flex; align-items: center; gap: 5px; justify-content: flex-end; font-size: 11.5px; color: var(--muted); margin-top: 12px; }
.heat-key i { width: 12px; height: 12px; border-radius: 4px; }

/* ---------- יעדים ---------- */
.goal { border-radius: 26px; padding: 18px; background: var(--card); box-shadow: var(--shadow); margin-bottom: 12px; cursor: pointer; transition: transform .3s var(--spring); position: relative; overflow: hidden; }
.goal:active { transform: scale(.98); }
.goal .row1 { display: flex; align-items: center; gap: 12px; }
.goal .amt { font-family: var(--font-n); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.goal .of { font-size: 13px; color: var(--muted); }
.goal .prog { height: 12px; border-radius: 99px; background: var(--card2); overflow: hidden; margin: 14px 0 10px; }
.goal .prog i { display: block; height: 100%; border-radius: 99px; background: var(--blue); width: 0; transition: width 1.4s var(--ease); position: relative; overflow: hidden; }
.goal .prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(245,184,46,.7), transparent); transform: translateX(-100%); animation: sweep 2.8s var(--ease) 1.4s infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.goal.done .prog i { background: var(--lime2); }
.goal .foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.goal .foot b { color: var(--ink); font-family: var(--font-n); }
.goal-mini { width: 168px; border-radius: 24px; padding: 16px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.goal-mini .pct { font-family: var(--font-n); font-size: 26px; font-weight: 800; letter-spacing: -.04em; margin: 12px 0 0; }
.goal-mini .nm { font-size: 13.5px; font-weight: 650; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.icon-grid button { aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s var(--spring); }
.icon-grid button.on { background: var(--blue); color: #fff; border-color: var(--blue); transform: scale(1.06); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 14px; }
.quick button { border: 1.5px solid var(--line2); background: var(--card); border-radius: 14px; padding: 12px 0; font-family: var(--font-n); font-weight: 750; cursor: pointer; transition: all .25s var(--spring); }
.quick button:active, .quick button.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- העלאה ---------- */
.drop { display: block; position: relative; border-radius: 32px; padding: 40px 20px 32px; text-align: center; cursor: pointer; background: var(--dark); color: #fff; overflow: hidden; isolation: isolate; transition: transform .3s var(--spring); }
.drop::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(245,184,46,.45), transparent 65%); top: -120px; right: -60px; z-index: -1; animation: orb 10s var(--ease) infinite alternate; }
.drop::after { content: ""; position: absolute; inset: 12px; border-radius: 24px; border: 1.5px dashed rgba(255,255,255,.22); pointer-events: none; }
.drop:active { transform: scale(.98); }
.drop.over { transform: scale(1.02); }
.drop .muted { color: rgba(255,255,255,.6); }
.drop .docs { position: relative; width: 120px; height: 100px; margin: 0 auto 18px; }
.drop .doc { position: absolute; width: 66px; height: 84px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.35); top: 6px; padding: 13px 10px; }
.drop .doc i { display: block; height: 5px; border-radius: 9px; background: rgba(18,32,74,.14); margin-bottom: 7px; }
.drop .doc i:nth-child(2) { width: 70%; } .drop .doc i:nth-child(4) { width: 55%; }
.drop .doc.a { left: 2px; transform: rotate(-12deg); animation: floatA 4s var(--ease) infinite alternate; }
.drop .doc.b { right: 2px; transform: rotate(10deg); animation: floatB 4.6s var(--ease) infinite alternate; }
.drop .doc.c { left: 27px; top: 0; z-index: 2; background: var(--lime); animation: floatC 3.6s var(--ease) infinite alternate; }
.drop .doc.c i { background: rgba(18,32,74,.25); }
@keyframes floatA { to { transform: rotate(-17deg) translateY(-7px); } }
@keyframes floatB { to { transform: rotate(15deg) translateY(-5px); } }
@keyframes floatC { to { transform: translateY(-9px); } }
.lock { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); padding: 14px 6px; }
.lock b { color: var(--ink2); }
.howto details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.howto details:last-child { border-bottom: 0; }
.howto summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; align-items: center; gap: 12px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary .chev { margin-inline-start: auto; color: var(--muted); transition: transform .3s var(--ease); }
.howto details[open] summary .chev { transform: rotate(-90deg); }

/* מסך סריקה */
.scan { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: fade .3s var(--ease); }
.scan .paper { position: relative; width: 132px; height: 170px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-l); overflow: hidden; padding: 22px 18px; }
.scan .paper i { display: block; height: 7px; border-radius: 9px; background: var(--line2); margin-bottom: 11px; }
.scan .paper i:nth-child(odd) { width: 78%; }
.scan .beam { position: absolute; left: 0; right: 0; height: 52px; top: -52px; background: linear-gradient(180deg, transparent, rgba(245,184,46,.35), rgba(245,184,46,.75)); border-bottom: 2.5px solid var(--lime2); animation: beam 1.5s var(--ease) infinite; }
@keyframes beam { to { top: 170px; } }
.scan .t { font-weight: 750; font-size: 17px; max-width: 280px; }
.scan .s { color: var(--muted); font-size: 14px; margin-top: -14px; }

/* הצלחה + קונפטי */
.done { text-align: center; padding: 10px 0 6px; }
.check { width: 88px; height: 88px; margin: 6px auto 16px; border-radius: 50%; background: var(--lime); color: #12204A; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -10px rgba(200,140,0,.75); animation: pop .7s var(--spring) both; }
.check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .35s var(--ease) forwards; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--r)); } }

/* ---------- גיליון תחתון ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(8, 8, 11, .42); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade .3s var(--ease); }
.sheet-bg.out { animation: fade .25s var(--ease) reverse forwards; }
.sheet { background: var(--card); width: 100%; max-width: 560px; border-radius: 32px 32px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 88dvh; overflow: auto; box-shadow: var(--shadow-l); animation: up .55s var(--spring); }
.sheet-bg.out .sheet { animation: down .28s var(--ease) forwards; }
.sheet .grab { width: 38px; height: 5px; border-radius: 9px; background: var(--line2); margin: 0 auto 16px; }
.sheet h4 { font-size: 13px; color: var(--muted); font-weight: 700; margin: 18px 0 9px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes down { to { transform: translateY(100%); } }

/* ---------- "האי הדינמי" ---------- */
.island { position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 50%; transform: translateX(-50%); z-index: 80; background: #000; color: #fff; border-radius: 99px; padding: 10px 18px 10px 12px; font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0,0,0,.28); animation: island .65s var(--spring); }
.island.out { animation: islandOut .35s var(--ease) forwards; }
.island .dotc { width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: #12204A; flex: none; display: flex; align-items: center; justify-content: center; }
@keyframes island { from { transform: translateX(-50%) scale(.35, .5); opacity: 0; } }
@keyframes islandOut { to { transform: translateX(-50%) scale(.5); opacity: 0; } }

/* ---------- כניסת מסכים ---------- */
.enter > * { animation: rise .65s var(--ease) both; }
.enter > *:nth-child(2) { animation-delay: .05s; } .enter > *:nth-child(3) { animation-delay: .1s; }
.enter > *:nth-child(4) { animation-delay: .15s; } .enter > *:nth-child(5) { animation-delay: .2s; }
.enter > *:nth-child(6) { animation-delay: .25s; } .enter > *:nth-child(7) { animation-delay: .3s; }
.enter > *:nth-child(n+8) { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.98); } }
.rail > * { animation: slideIn .7s var(--ease) both; }
.rail > *:nth-child(2) { animation-delay: .08s; } .rail > *:nth-child(3) { animation-delay: .16s; } .rail > *:nth-child(n+4) { animation-delay: .24s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-60px); } }
.slide-l { animation: slideL .45s var(--ease); } .slide-r { animation: slideR .45s var(--ease); }
@keyframes slideL { from { opacity: 0; transform: translateX(-46px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(46px); } }
.skel { background: linear-gradient(90deg, var(--line), var(--bg2), var(--line)); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 18px; }
@keyframes sk { to { background-position: -200% 0; } }

/* בורר חודש */
.months { display: flex; align-items: center; gap: 6px; }
.months button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow-s); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .25s var(--spring), opacity .2s; }
.months button:active { transform: scale(.86); }
.months button[disabled] { opacity: .3; }

/* גרף עמודות */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin-top: 12px; padding-top: 26px; }
.chart > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; position: relative; cursor: pointer; }
.chart .b { width: 100%; max-width: 36px; border-radius: 12px 12px 8px 8px; background: var(--card2); height: 0; transition: height 1.1s var(--ease), background .3s; }
.chart .on .b { background: var(--blue); }
html[data-theme="dark"] .chart .on .b { background: var(--lime); }
.chart span { font-size: 12px; color: var(--muted); font-weight: 650; }
.chart .on span { color: var(--ink); }
.chart .tip { position: absolute; top: -22px; font-size: 11.5px; font-weight: 750; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: all .3s var(--ease); font-family: var(--font-n); }
.chart .on .tip { opacity: 1; transform: none; background: var(--lime); color: #12204A; padding: 2px 7px; border-radius: 8px; }

/* פיצול בין בני הזוג */
.split { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--card2); gap: 3px; }
.split > i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.2s var(--ease); }

/* כניסה: רקע חי */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); }
.aurora i:nth-child(1) { width: 380px; height: 380px; background: var(--lime); opacity: .55; top: -140px; right: -120px; animation: orb 14s var(--ease) infinite alternate; }
.aurora i:nth-child(2) { width: 300px; height: 300px; background: var(--violet); opacity: .28; bottom: -100px; left: -120px; animation: orb2 18s var(--ease) infinite alternate; }
.aurora::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .25; mix-blend-mode: multiply; }
.auth { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0 60px; }
.auth .logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth .logo img { width: 88px; height: 88px; border-radius: 26px; box-shadow: 0 22px 44px -14px rgba(18,32,74,.55); animation: pop .8s var(--spring) both; }
.auth .logo .name { font-family: var(--font-d); font-weight: 900; font-size: 44px; letter-spacing: -.06em; line-height: 1; }
.auth .glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--glass-line); border-radius: 32px; padding: 22px; box-shadow: var(--shadow); }
.auth .glass input { background: var(--card); }
.steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; }
.steps i { width: 8px; height: 8px; border-radius: 9px; background: var(--line2); transition: all .4s var(--spring); }
.steps i.on { width: 28px; background: var(--blue); }
.feat { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.feat span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink2); background: var(--glass); border: 1px solid var(--glass-line); padding: 7px 12px; border-radius: 99px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* מתג מקטעים */
.seg { display: flex; background: var(--card2); border-radius: 14px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 9px 0; border-radius: 11px; font-weight: 650; font-size: 14px; cursor: pointer; color: var(--muted); transition: all .3s var(--ease); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(18,32,74,.08); }

/* שורות הגדרות */
.set li { display: flex; align-items: center; gap: 12px; }
.set .tile { width: 34px; height: 34px; border-radius: 11px; }
.set .chev { color: var(--muted); margin-inline-start: auto; }

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

/* ---------- זרימת ההכנסה: לאן הלך כל שקל ---------- */
.flow { display: flex; height: 12px; gap: 3px; border-radius: 99px; overflow: hidden; margin-top: 18px; }
.flow i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.3s var(--ease); }
.flow i:nth-child(2) { transition-delay: .12s; } .flow i:nth-child(3) { transition-delay: .24s; } .flow i:nth-child(4) { transition-delay: .36s; }
.flow-key { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.flow-key div { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.66); }
.flow-key i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.flow-key span { flex: 1; }
.flow-key b { font-family: var(--font-n); color: #fff; font-weight: 700; }

/* ---------- ציד הכסף ---------- */
.hunt-teaser { display: flex; align-items: center; gap: 14px; background: var(--lime); color: #12204A; border-radius: 26px; padding: 16px 18px; margin-bottom: 14px; text-decoration: none; position: relative; overflow: hidden; }
.hunt-teaser b { font-size: 17px; letter-spacing: -.02em; }
.hunt-teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55), transparent 70%); transform: translateX(120%); animation: shine 3.2s var(--ease) 1s infinite; }
@keyframes shine { 0% { transform: translateX(120%); } 60%, 100% { transform: translateX(-120%); } }
.radar-mini { width: 44px; height: 44px; border-radius: 50%; background: #12204A; flex: none; position: relative; overflow: hidden; }
.radar-mini::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(245,184,46,.9), transparent 35%); animation: sweep-r 1.8s linear infinite; }
.radar-mini::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1.5px solid rgba(245,184,46,.5); }
@keyframes sweep-r { to { transform: rotate(360deg); } }
.hunt-scan { min-height: 64vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.radar { width: 200px; height: 200px; border-radius: 50%; background: #12204A; position: relative; overflow: hidden; margin-bottom: 24px; box-shadow: 0 30px 60px -20px rgba(18,32,74,.5); }
.radar i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1.5px solid rgba(245,184,46,.22); }
.radar i:nth-child(1) { width: 60px; height: 60px; } .radar i:nth-child(2) { width: 120px; height: 120px; } .radar i:nth-child(3) { width: 180px; height: 180px; }
.radar::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(245,184,46,.75), rgba(245,184,46,0) 30%); animation: sweep-r 1.6s linear infinite; }
.radar span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); top: 42px; right: 58px; animation: blip 1.6s var(--ease) infinite; }
@keyframes blip { 0%, 60% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; } }
.hunt-hero .big { font-size: clamp(44px, 14vw, 62px); }
.hunt-card { background: var(--card); border-radius: 26px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 12px; animation: flipIn .8s var(--spring) both; transform-origin: top center; }
@keyframes flipIn { from { opacity: 0; transform: perspective(900px) rotateX(-55deg) translateY(30px); } }
.hunt-card h3 { font-size: 16.5px; }
.steps-list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.msg-copy { background: var(--card2); border-radius: 16px; padding: 14px; font-size: 14.5px; line-height: 1.55; border-inline-start: 3px solid var(--lime2); }

/* ---------- יעדים ---------- */
.srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.srcs span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; background: var(--card2); padding: 5px 10px; border-radius: 99px; color: var(--ink2); }
.link-card { background: var(--card); border: 2px dashed var(--lime2); border-radius: 24px; padding: 16px; margin-bottom: 12px; animation: rise .6s var(--ease) both; }
.calc { background: var(--card2); border-radius: 18px; padding: 12px 14px; margin-top: 12px; }
.calc div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14.5px; color: var(--muted); }
.calc .tot { border-top: 1px solid var(--line2); margin-top: 4px; padding-top: 10px; color: var(--ink); font-weight: 700; }

/* ---------- ג'ובה: הכלב ---------- */
.brandmark img { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, #2457E6, #12204A); object-fit: cover; object-position: center 20%; box-shadow: none; }
.brandmark { color: var(--blue); font-weight: 900; }
.tabs a .tabpug { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: center 15%; background: var(--card2); transition: transform .4s var(--spring); }
.tabs a.on .tabpug { transform: scale(1.12) rotate(-6deg); background: rgba(255,255,255,.2); }
.pug-float { width: 96px; height: 96px; object-fit: contain; animation: bob 3s var(--ease) infinite alternate; display: block; margin: 0 auto; }
@keyframes bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
.teaser-pug { width: 52px; height: 52px; object-fit: contain; flex: none; animation: sniffHead 1.6s var(--ease) infinite; }
@keyframes sniffHead { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-6deg) translateY(1px); } 50% { transform: rotate(4deg) translateY(-1px); } 75% { transform: rotate(-3deg); } }
.hero-pug { position: absolute; left: -10px; bottom: -14px; width: 130px; height: 130px; object-fit: contain; opacity: .95; animation: bob 3.4s var(--ease) infinite alternate; z-index: 0; pointer-events: none; }
.hunt-hero .label, .hunt-hero .big, .hunt-hero .sub, .hunt-hero > div { position: relative; z-index: 1; max-width: 72%; }
.sniff { position: relative; width: 190px; height: 190px; margin-bottom: 18px; }
.sniff img { width: 100%; height: 100%; object-fit: contain; animation: sniffHead 1.2s var(--ease) infinite; }
.sniff i { position: absolute; bottom: 42%; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); opacity: 0; animation: whiff 1.5s var(--ease) infinite; }
.sniff i:nth-child(3) { animation-delay: .5s; left: 40%; } .sniff i:nth-child(4) { animation-delay: 1s; left: 58%; }
@keyframes whiff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(-30px, -90px) scale(1.4); opacity: 0; } }

/* ---------- כותרת שאפשר ללחוץ: בוחר חודש ---------- */
.title-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; transition: transform .25s var(--spring); }
.title-btn:active { transform: scale(.97); }
.title-btn h1 { margin: 0; }
.chev-d { width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-s); display: inline-flex; align-items: center; justify-content: center; transform: rotate(-90deg); color: var(--blue); }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mcell { border: 1.5px solid var(--line2); background: var(--card); border-radius: 18px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; animation: cell .45s var(--spring) both; transition: transform .25s var(--spring); }
.mcell:active { transform: scale(.94); }
.mcell b { font-size: 14.5px; }
.mcell span { font-size: 13px; color: var(--ink2); }
.mcell i { font-style: normal; font-size: 11px; color: var(--muted); min-height: 14px; }
.mcell.fut { border-style: dashed; }
.mcell.emp { opacity: .45; }
.mcell.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.mcell.on span, .mcell.on i { color: rgba(255,255,255,.8); }
.big-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 0; font-size: 14.5px; }

/* ---------- חודש עתידי ---------- */
.calc.dark-calc { background: rgba(255,255,255,.08); margin-top: 16px; }
.calc.dark-calc div { color: rgba(255,255,255,.7); }
.calc.dark-calc b { color: #fff; }

/* ---------- איפוס: לחיצה ארוכה ---------- */
.hold { position: relative; width: 100%; border: 0; border-radius: 18px; padding: 16px; background: var(--bad-soft); color: var(--bad); font-weight: 750; font-size: 16px; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.hold i { position: absolute; inset: 0; width: 0; background: var(--bad); transition: width .2s linear; }
.hold.holding i { width: 100%; transition: width 1.8s linear; }
.hold.holding, .hold.done { color: #fff; }
.hold span { position: relative; z-index: 1; }

/* ---------- שנה ---------- */
.ychart { display: flex; align-items: flex-end; gap: 5px; height: 150px; margin-top: 14px; }
.ychart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; cursor: pointer; }
.ychart i { width: 100%; border-radius: 8px 8px 4px 4px; transition: height 1s var(--ease); }
.ychart .act i { background: var(--blue); }
.ychart .fut i { background: repeating-linear-gradient(-45deg, rgba(36,87,230,.35) 0 4px, rgba(36,87,230,.12) 4px 8px); }
.ychart .emp i { background: var(--line); }
.ychart span { font-size: 10.5px; color: var(--muted); font-weight: 650; }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 8px 0 3px; vertical-align: -1px; }
.lg.act { background: var(--blue); } .lg.fut { background: rgba(36,87,230,.3); }
.tile.ghost { background: none; border: 1.5px dashed var(--line2); }

/* ---------- תוכניות ---------- */
.explain { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 24px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-s); }
.explain img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.explain b { font-size: 15px; }
.explain p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.plan-bars { display: flex; align-items: flex-end; gap: 5px; height: 80px; margin-top: 14px; }
.plan-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; cursor: pointer; }
.plan-bars i { width: 100%; background: var(--lime); border-radius: 6px 6px 3px 3px; height: 0; transition: height 1s var(--ease); }
.plan-bars span { font-size: 10px; color: var(--muted); }

/* ---------- רצועת חודשים ---------- */
.strip { display: flex; gap: 8px; overflow-x: auto; margin: -4px -16px 16px; padding: 4px 16px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.strip::-webkit-scrollbar { display: none; }
.strip button { flex: none; scroll-snap-align: center; width: 54px; padding: 9px 0 7px; border-radius: 18px; border: 1.5px solid var(--line2); background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; transition: all .35s var(--spring); }
.strip button b { font-size: 14px; }
.strip button span { font-size: 11px; color: var(--muted); font-weight: 650; }
.strip button.fut { border-style: dashed; opacity: .75; }
.strip button.has::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); margin-top: 3px; }
.strip button.fut::after { content: ""; width: 5px; height: 5px; margin-top: 3px; }
.strip button.on { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(36,87,230,.6); }
.strip button.on span { color: rgba(255,255,255,.75); }
.strip button.yr { width: auto; padding: 9px 14px; flex-direction: row; gap: 6px; background: var(--card2); border-style: solid; }

/* ---------- אריחים מרובעים (בנטו) ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.sq { aspect-ratio: 1 / .92; border-radius: 26px; padding: 16px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .3s var(--spring); }
.sq.skel { box-shadow: none; }
.sq:active { transform: scale(.96) rotate(-.5deg); }
.sq .k { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.sq .v { font-family: var(--font-n); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.sq .s { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.sq.inc .tile { background: var(--good-soft); color: var(--good); }
.sq.fix .tile { background: color-mix(in srgb, var(--blue) 12%, var(--card)); color: var(--blue); }
.sq.var .tile { background: color-mix(in srgb, var(--sky) 22%, var(--card)); color: var(--blue2); }
.sq.left { background: var(--dark); color: #fff; }
.sq.left .k, .sq.left .s { color: rgba(255,255,255,.7); }
.sq.left .tile { background: rgba(255,255,255,.14); color: var(--lime); }
.sq.neg { background: var(--bad-soft); }
.sq.neg .tile { background: var(--bad); color: #fff; }
.sq.gold { background: var(--lime); color: #12204A; }
.sq.gold .k, .sq.gold .s { color: rgba(18,32,74,.68); }
.sq.gold .tile { background: rgba(18,32,74,.1); }
.sq-pug { width: 64px; height: 64px; object-fit: contain; margin: -8px -6px 0 0; }
.sq-pug.sniffing { animation: sniffHead 1.6s var(--ease) infinite; }
.sq.level { background: linear-gradient(160deg, #12204A, #23356E); color: #fff; }
.sq.level .k, .sq.level .s { color: rgba(255,255,255,.65); }
.sq.level .tile { background: rgba(245,184,46,.18); color: var(--lime); }
.lv { width: 38px; height: 38px; border-radius: 12px; background: var(--lime); color: #12204A; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; box-shadow: 0 0 0 3px rgba(245,184,46,.3), 0 6px 16px -4px rgba(245,184,46,.7); animation: lvglow 2.4s var(--ease) infinite alternate; }
@keyframes lvglow { to { box-shadow: 0 0 0 6px rgba(245,184,46,.12), 0 6px 22px -2px rgba(245,184,46,.9); } }
.xp { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 8px; }
.xp i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #F5B82E, #FFE08A); transition: width 1.4s var(--ease); box-shadow: 0 0 10px rgba(245,184,46,.7); }
.sheet .xp { background: var(--card2); }
.mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 42px; margin: 8px 0 2px; }
.mini-bars i { flex: 1; background: var(--card2); border-radius: 4px; height: 0; transition: height 1s var(--ease); }
.mini-bars i.on { background: var(--blue); }
.lv-big { display: inline-flex; width: 86px; height: 86px; border-radius: 28px; background: var(--lime); color: #12204A; align-items: center; justify-content: center; font-size: 44px; font-weight: 900; animation: pop .7s var(--spring) both, lvglow 2.4s var(--ease) infinite alternate; }
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.badge-c { border-radius: 20px; padding: 14px; background: var(--card2); display: flex; flex-direction: column; gap: 4px; opacity: .45; filter: grayscale(1); }
.badge-c.ok { opacity: 1; filter: none; background: color-mix(in srgb, var(--lime) 16%, var(--card)); animation: rise .5s var(--ease) both; }
.badge-c.ok .tile { background: var(--lime); color: #12204A; }
.badge-c b { font-size: 14px; } .badge-c i { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- המובילות: פודיום ---------- */
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; margin-bottom: 6px; }
.pod { border-radius: 22px; padding: 14px 10px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; animation: rise .6s var(--spring) both; }
.pod.p1 { padding-top: 24px; background: var(--dark); color: #fff; animation-delay: .1s; }
.pod.p1 .tile { background: rgba(255,255,255,.14); color: var(--lime); }
.pod.p1 i { color: rgba(255,255,255,.65); }
.pod b { font-size: 13px; line-height: 1.25; min-height: 32px; display: flex; align-items: center; }
.pod .num { font-size: 16px; }
.pod i { font-style: normal; font-size: 11px; color: var(--muted); }
.pod .rank { position: absolute; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: #12204A; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.pod.p2 .rank, .pod.p3 .rank { background: var(--card2); color: var(--ink); }

/* ---------- ג׳ובה מדבר ---------- */
.dog-tile { display: flex; align-items: flex-end; gap: 6px; margin: 6px 0 18px; }
.dog { position: relative; width: 104px; height: 104px; flex: none; border: 0; background: none; padding: 0; cursor: pointer; transform-origin: 50% 100%; animation: breathe 3.2s var(--ease) infinite; }
.dog img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; transform-origin: 50% 85%; }
.dog .shadow { position: absolute; bottom: 2px; left: 18%; width: 64%; height: 10px; border-radius: 50%; background: rgba(18,32,74,.18); filter: blur(3px); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
.dog img { animation: tilt 6s var(--ease) infinite; }
@keyframes tilt { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); } 84% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } }
.dog.talk img { animation: yap .22s ease-in-out infinite alternate; }
@keyframes yap { from { transform: scale(1, 1) translateY(0); } to { transform: scale(1.04, .95) translateY(2px) rotate(-1.5deg); } }
.dog.jump { animation: hop .7s var(--spring); }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(4px) scale(1.1, .88); } 55% { transform: translateY(-34px) scale(.94, 1.08) rotate(-6deg); } 80% { transform: translateY(0) scale(1.08, .92); } 100% { transform: translateY(0) scale(1); } }
.bubble { position: relative; flex: 1; background: var(--card); border-radius: 22px 22px 22px 6px; padding: 14px 16px; box-shadow: var(--shadow); font-size: 15px; font-weight: 600; line-height: 1.45; min-height: 70px; margin-bottom: 30px; animation: rise .5s var(--spring) both .2s; }
.bubble::before { content: ""; position: absolute; bottom: 10px; right: -8px; width: 16px; height: 16px; background: var(--card); transform: rotate(45deg); border-radius: 3px; }
.bubble .caret { display: inline-block; width: 2px; height: 1em; background: var(--blue); vertical-align: -2px; margin-inline-start: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- צ'אט ---------- */
.chat { display: flex; flex-direction: column; gap: 12px; padding-bottom: 150px; }
.msg-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-row.me { justify-content: flex-start; flex-direction: row-reverse; }
.msg-row.pop { animation: rise .4s var(--spring) both; }
.msg { max-width: 78%; padding: 12px 15px; border-radius: 22px; font-size: 15.5px; line-height: 1.5; background: var(--card); box-shadow: var(--shadow-s); white-space: pre-wrap; }
.msg-row.bot .msg { border-bottom-right-radius: 6px; }
.msg-row.me .msg { background: var(--blue); color: #fff; border-bottom-left-radius: 6px; }
.mini-dog { width: 40px; height: 40px; object-fit: contain; flex: none; }
.mini-dog.talking { animation: yap .2s ease-in-out infinite alternate; }
.msg.typing { display: flex; gap: 5px; padding: 16px; }
.msg.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: dots 1s var(--ease) infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }
.sugg { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 146px); left: 0; right: 0; display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; z-index: 20; max-width: 560px; margin: 0 auto; }
.sugg::-webkit-scrollbar { display: none; }
.sugg button { flex: none; border: 1.5px solid var(--line2); background: var(--card); border-radius: 99px; padding: 8px 14px; font-size: 14px; font-weight: 650; cursor: pointer; }
.chat-bar { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 92px); left: 50%; transform: translateX(-50%); width: min(calc(100% - 24px), 536px); display: flex; gap: 8px; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--glass-line); border-radius: 26px; padding: 6px; box-shadow: var(--shadow); z-index: 25; }
.chat-bar input { flex: 1; background: var(--card); border-radius: 20px; padding: 12px 16px; font-size: 16px; }
.chat-bar .send { width: 48px; border: 0; border-radius: 20px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* =================== גרסה 6: יותר אוויר, פחות קופסאות =================== */
.hand { font-family: var(--font-hand); font-weight: 700; font-size: 26px; line-height: 1; color: var(--blue); letter-spacing: .5px; }
h1, h2, h3 { letter-spacing: -.01em; }
.block { margin: 34px 0 6px; }
.block-h { margin: 0 2px 14px; }
.block-h .hand { display: block; font-size: 24px; margin-bottom: 2px; transform: rotate(-2deg); transform-origin: right; }
.block-h h2 { font-size: 22px; font-weight: 800; margin: 0; }
.link-more { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--blue); text-decoration: none; }

/* פתיחה */
.home-top { padding-bottom: 4px; }
.hi { font-size: 32px; font-weight: 900; margin: 22px 0 2px; letter-spacing: -.02em; }
.sub-hand { font-size: 30px; color: var(--muted); }
.month-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--card); border-radius: 99px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-s); cursor: pointer; color: var(--ink); }

/* ג׳ובה עם עיניים חיות */
.jdog { position: relative; width: 120px; height: 120px; flex: none; cursor: pointer; transform-origin: 50% 100%; animation: breathe 3.4s var(--ease) infinite; }
.jdog .jbody { position: absolute; inset: 0; transform-origin: 50% 90%; transition: transform .5s var(--spring); animation: tilt 7s var(--ease) infinite; }
.jdog img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.jdog .lids { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jdog .lids .ul { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .09s ease-in; }
.jdog .lids .ll { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .3s var(--ease); }
.jdog.blink .ul { transform: scaleY(1); }
.jdog.happy .ul { transform: scaleY(.28); transition-duration: .25s; }
.jdog.happy .ll { transform: scaleY(.5); }
.jdog.happy .jbody { animation: wiggle .6s var(--ease) 2; }
.jdog.wow .jbody { transform: scale(1.08) translateY(-4px); }
.jdog.wow .ul { transform: scaleY(0) !important; }
.jdog[data-look="l"] .jbody { transform: rotate(-5deg) translateX(-2px); }
.jdog[data-look="r"] .jbody { transform: rotate(5deg) translateX(2px); }
.jdog[data-look="u"] .jbody { transform: translateY(-3px) scale(1.02); }
.jdog.talk .jbody { animation: yap .2s ease-in-out infinite alternate; }
.jdog.hop { animation: hop .7s var(--spring); }
.jdog .shadow { position: absolute; bottom: 0; left: 18%; width: 64%; height: 10px; border-radius: 50%; background: rgba(18,32,74,.16); filter: blur(3px); z-index: -1; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.jdog.big { width: 150px; height: 150px; }
.jdog.small { width: 74px; height: 74px; animation: none; }
.jdog.sniff .jbody { animation: sniffHead 1.4s var(--ease) infinite; }

.dog-stage { display: flex; align-items: flex-end; gap: 4px; margin: 10px -4px 0; }
.dog-stage .bubble { margin-bottom: 44px; font-size: 16px; }

/* המספר הגדול */
.headline { margin: 18px 2px 0; }
.headline .kicker { font-weight: 700; color: var(--ink2); font-size: 17px; }
.mega { font-size: clamp(52px, 17vw, 76px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; background: linear-gradient(120deg, #1A3FB3, #2457E6 40%, #2FA65A); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 4px 0 6px; }
.mega.neg { background: linear-gradient(120deg, #B32626, #E05050); -webkit-background-clip: text; background-clip: text; }

/* הזרימה */
.flow-viz { position: relative; display: grid; grid-template-columns: 1fr 46%; align-items: stretch; background: var(--card); border-radius: 30px; padding: 62px 16px 22px 18px; box-shadow: var(--shadow); }
.flow-viz svg { width: 100%; display: block; overflow: visible; }
.flow-viz .band { opacity: 0; transform-box: fill-box; transform-origin: left; animation: bandIn 1s var(--ease) forwards; }
@keyframes bandIn { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
.flow-viz .node { opacity: 0; animation: appear .5s var(--ease) forwards; }
@keyframes appear { to { opacity: 1; transform: none; } }
.flow-viz .node.in { opacity: 1; animation: none; }
.fv-labels { position: relative; }
.fv-labels > div { position: absolute; right: 0; left: 0; transform: translateY(-50%); display: grid; grid-template-columns: 10px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; opacity: 0; animation: labIn .6s var(--ease) forwards; }
@keyframes labIn { from { opacity: 0; transform: translate(-16px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.fv-labels i { width: 10px; height: 10px; border-radius: 4px; grid-row: 1 / 3; }
.fv-labels span { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.fv-labels b { font-size: 16px; grid-column: 2; }
.fv-labels em { font-style: normal; font-size: 12px; color: var(--muted); grid-column: 3; grid-row: 1 / 3; }
.fv-in { position: absolute; top: 14px; left: 18px; text-align: left; display: flex; align-items: baseline; gap: 8px; }
.fv-in .hand { font-size: 22px; color: var(--good); }
.fv-in b { font-size: 18px; font-weight: 800; }
.flow-viz.compact { padding: 18px 14px; }

/* ג׳ובה מצא: רצועה */
.hunt-strip { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding: 14px 18px 14px 16px; border-radius: 28px; background: var(--lime); color: #12204A; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 16px 30px -16px rgba(200,140,0,.8); }
.hunt-strip b { font-size: 22px; font-weight: 900; }
.hunt-strip .tiny { opacity: .75; }
.hunt-strip .hand { color: #12204A; }
.hunt-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5), transparent 70%); transform: translateX(120%); animation: shine 3.4s var(--ease) 1.2s infinite; pointer-events: none; }

/* הערות של ג׳ובה: רשימה נקייה */
.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.notes li { display: flex; gap: 14px; align-items: flex-start; animation: rise .55s var(--ease) both; }
.notes .ni { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--card); box-shadow: var(--shadow-s); color: var(--blue); }
.notes .ni.good { background: var(--good-soft); color: var(--good); }
.notes .ni.warn { background: var(--warn-soft); color: var(--warn); }
.notes b { font-size: 16px; display: block; }
.notes p { margin: 3px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* קופות: שורות */
.goal-lines { display: flex; flex-direction: column; gap: 16px; }
.goal-lines .gl { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.bar.thick { height: 10px; margin-top: 7px; }

/* רמה */
.level-strip { display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, #12204A, #23356E); color: #fff; border-radius: 26px; padding: 16px 18px; cursor: pointer; }
.level-strip .muted { color: rgba(255,255,255,.6); }
.level-strip b { font-size: 18px; }

/* צ׳אט: כפתור צף בצד */
.chat-fab { position: fixed; left: 16px; bottom: calc(env(safe-area-inset-bottom) + 98px); width: 62px; height: 62px; border-radius: 50%; border: 0; padding: 0; background: linear-gradient(150deg, #2FA65A, #1F8A47); box-shadow: 0 12px 26px -8px rgba(31,138,71,.7); cursor: pointer; z-index: 35; transform: scale(0); transition: transform .5s var(--spring); }
.chat-fab.show { transform: scale(1); }
.chat-fab:active { transform: scale(.9); }
.chat-fab img { width: 56px; height: 56px; object-fit: contain; margin-top: 2px; animation: sniffHead 2.6s var(--ease) infinite; }
.chat-fab .on { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #3BE07A; border: 2.5px solid var(--bg); }
.chat-fab .tip { position: absolute; left: 70px; top: 14px; white-space: nowrap; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 14px 14px 14px 4px; animation: rise .5s var(--spring) both 1s; }
body.chat-open .chat-fab, body.chat-open .tabs { opacity: 0; pointer-events: none; }

/* חלון הצ׳אט בסגנון וואטסאפ */
.chatwin { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #EFE7DA; animation: up .45s var(--spring); }
html[data-theme="dark"] .chatwin { background: #0D1430; }
.chatwin.out { animation: down .3s var(--ease) forwards; }
.cw-head { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; background: var(--blue2); color: #fff; }
.cw-head .back { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.cw-head .tiny { opacity: .75; }
.cw-av { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.16); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.cw-av .jdog { width: 54px; height: 54px; animation: none; margin-bottom: -4px; }
.cw-body { flex: 1; overflow-y: auto; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 8px; background-image: radial-gradient(rgba(18,32,74,.05) 1.5px, transparent 1.5px); background-size: 22px 22px; }
.day-pill { align-self: center; background: rgba(255,255,255,.8); color: var(--muted); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 10px; margin-bottom: 6px; }
.cw-body .msg { max-width: 82%; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.cw-body .msg-row.bot .msg { background: #fff; border-radius: 4px 18px 18px 18px; }
html[data-theme="dark"] .cw-body .msg-row.bot .msg { background: var(--card); }
.cw-body .msg-row.me .msg { background: #D7F5C7; color: #12204A; border-radius: 18px 4px 18px 18px; }
.cw-sugg { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; }
.cw-sugg::-webkit-scrollbar { display: none; }
.cw-sugg button { flex: none; border: 0; background: #fff; border-radius: 99px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); color: var(--blue2); }
.cw-bar { display: flex; gap: 8px; padding: 8px 12px calc(env(safe-area-inset-bottom) + 10px); }
.cw-bar input { flex: 1; background: #fff; border-radius: 24px; padding: 12px 18px; font-size: 16px; }
.cw-bar .send { width: 50px; height: 50px; border: 0; border-radius: 50%; background: #1F8A47; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* מסך החודש */
.month-sum { display: flex; justify-content: space-between; gap: 10px; padding: 6px 4px 0; }
.ms-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ms-item .hand { font-size: 24px; color: var(--muted); }
.ms-item b { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.ms-item b.pos { color: var(--good); } .ms-item b.neg { color: var(--bad); }
.inc-list { display: flex; flex-direction: column; gap: 16px; background: var(--card); border-radius: 26px; padding: 18px; box-shadow: var(--shadow); }
.inc { display: flex; gap: 12px; align-items: center; cursor: pointer; animation: rise .5s var(--ease) both; }
.inc b { font-size: 16px; }
.empty-line { color: var(--muted); padding: 18px; border: 2px dashed var(--line2); border-radius: 22px; text-align: center; }
#app { padding-bottom: 170px; }
.ms-item b { font-size: clamp(18px, 5.6vw, 23px); white-space: nowrap; }
.inc b.num, .amt, .catrow .amt { white-space: nowrap; }
.inc .row b:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ===== v7: החשבון של החודש (קודם נכנס, אחר כך לאן הלך) ===== */
.receipt { background: var(--card); border-radius: 26px; padding: 18px 18px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: radial-gradient(circle at 8px -2px, transparent 7px, var(--bg) 7.5px) 0 0 / 16px 8px repeat-x; opacity: .9; }
.rc-in { display: block; color: inherit; text-decoration: none; padding-bottom: 12px; border-bottom: 1.5px dashed var(--line2); animation: rise .55s var(--spring) both .1s; }
.rc-in .big-in { font-size: clamp(28px, 8.5vw, 38px); font-weight: 900; color: var(--good); white-space: nowrap; letter-spacing: -.5px; }
.rc-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rc-src span { background: var(--good-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.rc-arrow { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
.rc-arrow .ic { animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.rc-line { display: block; color: inherit; text-decoration: none; padding: 10px 0 8px; animation: rise .55s var(--spring) both; border-radius: 12px; }
.rc-line .rc-l { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.rc-line .rc-l i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rc-line b { font-size: 17px; white-space: nowrap; }
.rc-bar { height: 8px; background: var(--bg2); border-radius: 99px; margin-top: 7px; overflow: hidden; }
.rc-bar i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1.1s var(--ease); }
.rc-hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, var(--blue), var(--blue2)); color: #fff; animation: pop .6s var(--spring) both; }
.rc-total span { font-weight: 700; font-size: 15px; opacity: .9; }
.rc-total b { font-size: clamp(26px, 8vw, 34px); font-weight: 900; white-space: nowrap; }
.rc-total.neg { background: linear-gradient(135deg, #E5484D, #B4232A); }
.rc-foot { font-size: 13px; color: var(--muted); margin: 10px 2px 6px; line-height: 1.5; }
.receipt.compact { padding: 16px 16px 14px; }
.receipt.compact .rc-hint { display: none; }
.bal-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin: 12px 4px 0; }

/* ===== הידעת? ===== */
.tip-card { margin: 26px 0 6px; padding: 16px 18px 12px; border-radius: 24px; background: linear-gradient(140deg, #FFF4D6, #FDE7A8); color: #3A2A00; position: relative; overflow: hidden; animation: rise .6s var(--spring) both; }
.tip-card::before { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.45); left: -40px; top: -60px; }
.tip-card p { margin: 2px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; }
.tip-card .tip-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #F5B82E; color: #12204A; flex: none; position: relative; animation: wiggle 3s var(--ease) infinite; }
.tip-card .link { display: block; margin: 8px auto 0 0; color: #7A5600; font-weight: 800; background: none; border: 0; cursor: pointer; font-family: inherit; }
.tip-card.flip { animation: tipflip .45s var(--ease); }
@keyframes tipflip { 50% { transform: rotateX(80deg) scale(.96); opacity: .4; } }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
html[data-theme=dark] .tip-card { background: linear-gradient(140deg, #3A2E10, #2A2210); color: #FBE7B0; }
html[data-theme=dark] .tip-card .link { color: #F5B82E; }

/* ===== מדריכים (סטוריז) ===== */
.guides { padding-top: 6px; }
.guide { width: 112px; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; font-family: inherit; color: var(--ink); }
.guide .g-ring { width: 76px; height: 76px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--lime), var(--blue), var(--good), var(--lime)); animation: spinring 6s linear infinite; }
.guide .g-ring .tile { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 3px solid var(--bg); color: var(--blue); animation: spinring 6s linear infinite reverse; }
@keyframes spinring { to { transform: rotate(360deg); } }
.guide b { font-size: 13px; line-height: 1.3; font-weight: 700; }
.guide i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.story { position: fixed; inset: 0; z-index: 90; background: linear-gradient(160deg, #2457E6, #12204A); color: #fff; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 12px) 20px calc(env(safe-area-inset-bottom) + 20px); animation: storyIn .35s var(--ease); overflow: hidden; }
.story.out { animation: storyOut .3s var(--ease) forwards; }
@keyframes storyIn { from { opacity: 0; transform: scale(.92); } }
@keyframes storyOut { to { opacity: 0; transform: scale(.94); } }
.st-bars { display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.st-bars i b { display: block; height: 100%; width: 0; background: #fff; }
.st-bars i.done b { width: 100%; }
.st-bars i.run b { animation: stbar 6.5s linear forwards; }
@keyframes stbar { to { width: 100%; } }
.st-head { display: flex; align-items: center; gap: 10px; margin-top: 14px; position: relative; z-index: 3; }
.st-head .tile { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.st-head b { flex: 1; font-size: 15px; }
.st-x { background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; }
.st-body { margin-top: 12vh; animation: rise .5s var(--spring) both; position: relative; z-index: 1; }
.st-num { font-size: 72px; line-height: .8; color: var(--lime); }
.st-body h2 { font-size: 30px; font-weight: 800; margin: 10px 0 12px; line-height: 1.2; }
.st-body p { font-size: 18px; line-height: 1.55; opacity: .92; margin: 0; }
.st-dog { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 40px); left: 20px; width: 150px; pointer-events: none; z-index: 1; }
.st-dog .jdog { width: 150px; height: 150px; }
.st-tap { position: absolute; top: 80px; bottom: 0; width: 50%; z-index: 2; }
.st-tap.prev { right: 0; } .st-tap.next { left: 0; }
.st-hint { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 16px); right: 20px; font-size: 12px; opacity: .6; }

/* ===== צעדים ראשונים ===== */
.checklist { margin: 16px 0 6px; padding: 16px 18px 8px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); animation: rise .55s var(--spring) both; }
.checklist ul { list-style: none; margin: 10px 0 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--line); font-weight: 650; font-size: 15px; cursor: pointer; }
.checklist li.ok { color: var(--muted); text-decoration: line-through; cursor: default; font-weight: 500; }
.checklist .ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; flex: none; }
.checklist li.ok .ck { background: var(--good); border-color: var(--good); color: #fff; animation: pop .5s var(--spring); }

/* ===== תיקוני חפיפות ===== */
#app { padding-bottom: calc(env(safe-area-inset-bottom) + 190px); }
.chat-fab { bottom: calc(env(safe-area-inset-bottom) + 92px); width: 56px; height: 56px; }
.chat-fab img { width: 50px; height: 50px; }
.chat-fab .tip { animation: rise .5s var(--spring) both 1s, tipaway .4s var(--ease) forwards 5s; pointer-events: none; }
@keyframes tipaway { to { opacity: 0; transform: translateX(-10px); visibility: hidden; } }
body:has(.sheet-bg) .chat-fab, body:has(.story) .chat-fab, body:has(.story) .tabs { opacity: 0; pointer-events: none; }
.tip-card > * { position: relative; z-index: 1; }
.chat-fab.hide { transform: scale(0) !important; }

/* ===== v8: קבלה מיושרת לימין (תווית, ומתחתיה המספר) ===== */
.rc-in { text-align: start; }
.rc-k { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--good); }
.rc-in .big-in { display: block; margin-top: 2px; }
.rc-arrow { margin: 14px 0 2px; }
.rc-line .rc-l { font-size: 14px; color: var(--ink2); font-weight: 650; }
.rc-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.rc-row b { font-size: 20px; font-weight: 800; }
.rc-pct { font-size: 12px; font-weight: 700; color: var(--muted); }
.rc-total { flex-direction: column; align-items: flex-start; gap: 0; }
.rc-total span { font-size: 13.5px; }
.dog-stage.compact { margin: 4px 0 6px; align-items: center; gap: 10px; }
.dog-stage.compact .jdog { width: 84px; height: 84px; flex: none; }
.dog-stage.compact .bubble { margin-bottom: 0; min-height: 0; font-size: 14.5px; padding: 12px 14px; }
.dog-stage.compact .bubble::before { bottom: 50%; transform: translateY(50%) rotate(45deg); }

/* פנסיה וביטוח */
.lt-hero { background: linear-gradient(150deg, #1F8A47, #12663A); color: #fff; border-radius: 26px; padding: 18px 18px 16px; box-shadow: var(--shadow); animation: rise .55s var(--spring) both; }
.lt-hero .rc-k { color: #CFF5DC; }
.lt-hero > b { display: block; font-size: clamp(30px, 9vw, 40px); font-weight: 900; margin-top: 2px; white-space: nowrap; }
.lt-split { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lt-split span { background: rgba(255,255,255,.14); border-radius: 14px; padding: 7px 11px; display: flex; flex-direction: column; }
.lt-split i { font-style: normal; font-size: 11.5px; opacity: .85; }
.lt-split b { font-size: 15px; white-space: nowrap; }
.big-seg button { font-size: 13.5px; padding-inline: 6px; }

/* כניסה */
.btn.google { background: #fff; color: #1f1f1f; border: 1.5px solid #DADCE0; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; text-decoration: none; }
html[data-theme=dark] .btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 14px 0 6px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin: 22px 0 10px; font-size: 12.5px; }
.legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; margin: 4px 0 14px; cursor: pointer; }
.check-line input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--blue); }
.check-line a { color: var(--blue); font-weight: 700; }
.switch-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0; cursor: pointer; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--blue); }

/* ===== נגישות ===== */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
html[data-theme=dark] :focus-visible { outline-color: var(--lime); }
.skip-link { position: fixed; top: -60px; right: 12px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip-link:focus { top: 12px; }
html.a11y-lg #app, html.a11y-lg .tabs { zoom: 1.12; }
html.a11y-xl #app, html.a11y-xl .tabs { zoom: 1.25; }
html.a11y-links a { text-decoration: underline !important; }
html.a11y-contrast { --muted: #2B3550; --ink2: #0A1024; --line: #8C95AE; --line2: #6B7590; }
html.a11y-contrast[data-theme=dark] { --muted: #E6EAF5; --ink2: #FFFFFF; --line: #A9B2CC; --line2: #C5CCDF; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.sheet:focus { outline: none; }
body:has(.tabs.hidden) .chat-fab { display: none; }
#a11y-card h3 { display: flex; align-items: center; gap: 8px; }

/* ===== v9: סרגל עליון קבוע (מותג + חשבון), נעלם בגלילה למטה ===== */
.nav { transition: background .25s, box-shadow .25s, transform .35s var(--ease); min-height: 56px; }
.nav.hide { transform: translateY(-110%); }
.nav .mini { font-size: 15px; }
.brandmark { color: var(--blue); text-decoration: none; }
.acct { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); border-radius: 99px; padding: 3px 10px 3px 4px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-s); transition: transform .2s var(--spring); max-width: 150px; }
.acct:active { transform: scale(.94); }
.acct .av { width: 30px; height: 30px; font-size: 14px; }
.acct-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.acct .ic { color: var(--muted); flex: none; }
.acct-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.acct-head .av { width: 52px; height: 52px; font-size: 22px; }
.plan-chip { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 14px; cursor: pointer; background: #E4ECFF; color: var(--blue2); text-align: start; }
.plan-chip.paid { background: var(--good-soft); color: var(--good); }
.plan-chip.expired { background: var(--warn-soft); color: var(--ink); }
.home-top { padding-top: 0; }
.home-top .month-chip { margin-top: 4px; }
/* בחירת מנוי */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.plan { position: relative; border: 2px solid var(--line2); background: var(--card); color: var(--ink); border-radius: 20px; padding: 18px 12px 14px; font: inherit; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s, transform .2s var(--spring); }
.plan.on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36,87,230,.12); }
.plan:active { transform: scale(.97); }
.plan > b { font-size: 16px; }
.plan .pr { font-size: 13px; color: var(--muted); } .plan .pr b { font-size: 26px; color: var(--ink); font-weight: 900; }
.plan i { font-style: normal; font-size: 12px; color: var(--muted); }
.plan .ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--lime); color: #12204A; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.perks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; font-size: 14.5px; font-weight: 600; }
.perks li { display: flex; align-items: center; gap: 8px; } .perks .ic { color: var(--good); }
.spin.sm { width: 16px; height: 16px; border-width: 2px; display: inline-block; vertical-align: -3px; }

/* ===== v10: גרפים ===== */
.charts { padding: 14px 14px 16px; margin-top: 14px; }
.seg.sm button { font-size: 13.5px; padding: 8px 6px; }
.ch { margin-top: 14px; animation: rise .4s var(--ease) both; }
.bars-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bars-svg .gb { cursor: pointer; }
.bars-svg .gb rect:not([fill=transparent]) { transform-box: fill-box; transform-origin: bottom; animation: growUp .8s var(--ease) both; animation-delay: inherit; }
@keyframes growUp { from { transform: scaleY(0); } }
.bars-svg .gb:not(.on) rect:not([fill=transparent]) { opacity: .9; }
.bars-svg .ax { font: 600 11px Rubik, system-ui; fill: var(--muted); }
.bars-svg .ax.on { fill: var(--ink); font-weight: 800; }
.bars-svg .ln { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawLn 1.2s var(--ease) .5s forwards; }
@keyframes drawLn { to { stroke-dashoffset: 0; } }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--ink2); margin-top: 6px; }
.ch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }
.ch-legend .ln-i { width: 14px; height: 3px; background: var(--ink); border-radius: 2px; vertical-align: 2px; }
.pie-wrap { display: flex; align-items: center; gap: 18px; }
.pie-legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 9px; }
.pie-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pie-legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hbars li { font-size: 14px; font-weight: 600; }
.hb { height: 9px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.hb i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1s var(--ease); }

/* ===== הבית: מצב כללי ===== */
.status-hero { background: linear-gradient(150deg, #2457E6, #12204A); color: #fff; border-radius: 26px; padding: 16px 18px 18px; box-shadow: var(--shadow); margin-top: 6px; animation: rise .55s var(--spring) both; }
.st-chip { background: color-mix(in srgb, var(--c) 30%, #fff); color: #12204A; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 99px; }
.st-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-rows > div { background: rgba(255,255,255,.09); border-radius: 16px; padding: 10px 12px; }
.st-rows span { display: flex; align-items: center; gap: 5px; font-size: 12.5px; opacity: .85; font-weight: 600; }
.st-rows b { display: block; font-size: 21px; font-weight: 850; white-space: nowrap; }
.st-rows .st-left { background: rgba(123,224,160,.18); }
.st-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.12); margin-top: 14px; }
.st-bar i { display: block; height: 100%; width: var(--w); animation: wGrow 1.1s var(--ease) both .3s; }
@keyframes wGrow { from { width: 0; } }
.wealth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.w-tile { background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-s); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-tile span { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.w-tile b { font-size: 17px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-tile b.dim { color: var(--blue); font-size: 20px; }
.w-tile i { font-style: normal; font-size: 11px; color: var(--muted); }
.notes li.tap { cursor: pointer; }
.notes li .ic:last-child { color: var(--muted); flex: none; align-self: center; }

/* ===== החודש: זרימה ===== */
.m-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--card); border-radius: 16px; padding: 11px 14px; box-shadow: var(--shadow-s); font-size: 14px; margin-top: 4px; }
.m-status .dotc { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.m-status b { color: var(--c); }
.mflow { position: relative; margin-top: 12px; }
.fstep { background: var(--card); border-radius: 22px; box-shadow: var(--shadow-s); overflow: hidden; animation: rise .5s var(--spring) both; }
.fs-head { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none; font: inherit; color: inherit; text-align: start; padding: 14px 16px; cursor: pointer; }
.fs-n { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--c); flex: none; }
.fstep[data-k=variable] .fs-n { color: #12204A; } .fstep[data-k=saving] .fs-n { color: #12204A; }
.fs-k { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.fs-head b { display: block; font-size: 23px; font-weight: 850; line-height: 1.2; }
.fs-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.fs-chev { color: var(--muted); transition: transform .3s var(--ease); transform: rotate(-90deg); }
.fstep.open .fs-chev { transform: rotate(90deg); }
.fs-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.fs-body .list { margin-top: 4px; }
.fs-op { text-align: center; font-size: 12.5px; font-weight: 800; color: var(--muted); padding: 6px 0; position: relative; }
.fs-op::before { content: "−"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg2); margin-inline-end: 6px; color: var(--ink); }
.fs-op.eq::before { content: "="; }
.fs-result { background: linear-gradient(135deg, var(--blue), var(--blue2)); color: #fff; border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; animation: pop .6s var(--spring) both; }
.fs-result.neg { background: linear-gradient(135deg, #E5484D, #B4232A); }
.fs-result span { font-size: 13.5px; opacity: .9; font-weight: 700; }
.fs-result b { font-size: clamp(30px, 9vw, 38px); font-weight: 900; }
.fs-result i { font-style: normal; font-size: 12.5px; opacity: .85; display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.more-row { text-align: center; padding: 8px 0 2px !important; border: 0 !important; }
.more-row .link { color: var(--blue); font-weight: 800; background: none; border: 0; font: inherit; cursor: pointer; padding: 6px 10px; }

/* ===== חיסכון ותכנון ===== */
.plan-intro { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink2); background: var(--card); border-radius: 14px; padding: 10px 12px; margin: 0 0 16px; line-height: 1.5; }
.plan-intro .ic { flex: none; color: var(--blue); margin-top: 2px; }
.big-seg button { font-size: 12.5px; gap: 4px; }

/* ===== היכרות: מה עושים עכשיו ===== */
.start-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.start-steps li { display: flex; gap: 12px; background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-s); animation: rise .5s var(--spring) both; }
.start-steps li:nth-child(2) { animation-delay: .1s; } .start-steps li:nth-child(3) { animation-delay: .2s; }
.ss-n { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.start-steps b { font-size: 15.5px; } .start-steps p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ===== הדרכה בפעם הראשונה ===== */
.coach { position: fixed; inset: auto 0 calc(env(safe-area-inset-bottom) + 96px) 0; z-index: 80; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.coach-card { pointer-events: auto; width: min(100%, 440px); display: flex; gap: 10px; align-items: flex-start; background: var(--ink); color: var(--bg); border-radius: 22px; padding: 14px; box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); animation: pop .45s var(--spring) both; }
.coach-card img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.coach-card b { font-size: 15.5px; } .coach-card p { margin: 3px 0 10px; font-size: 13.5px; line-height: 1.5; opacity: .9; }
.coach-card .link { color: inherit; opacity: .7; background: none; border: 0; font: inherit; cursor: pointer; }
.coach-dots { display: flex; gap: 4px; } .coach-dots i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .3; } .coach-dots i.on { width: 16px; opacity: 1; }
.coach-on { position: relative; z-index: 60; outline: 3px solid var(--lime) !important; outline-offset: 4px; border-radius: 18px; animation: coachPulse 1.6s ease-in-out infinite; }
@keyframes coachPulse { 50% { outline-offset: 8px; } }

/* ===== v11: פירוט שנפתח מתחת (במקום חלונות) ===== */
.inline-panel { list-style: none; overflow: hidden; animation: ipOpen .32s var(--ease) both; padding: 0 !important; border: 0 !important; }
.inline-panel.closing { animation: ipClose .22s var(--ease) forwards; }
.ip-in { background: var(--bg2); border-radius: 16px; padding: 12px 12px 14px; margin: 2px 0 10px; box-shadow: inset 0 0 0 1px var(--line); }
.inline-panel .ip-in > h2 { font-size: 18px; }
@keyframes ipOpen { from { opacity: 0; transform: translateY(-6px); max-height: 0; } to { max-height: 1600px; } }
@keyframes ipClose { to { opacity: 0; max-height: 0; } }
.expanded { background: color-mix(in srgb, var(--blue) 6%, transparent); border-radius: 14px; }
.expanded .chev, .expanded > .catrow .chev { transform: rotate(-90deg); }
.list.sub li { padding-inline: 4px; }
.ip-in .link.small { display: inline-block; margin-top: 8px; color: var(--blue); font-weight: 700; text-decoration: none; }
.hunt-card + .inline-panel .ip-in, .goal + .inline-panel .ip-in { margin-top: -6px; }
.hunt-card + .inline-panel .ip-in > .ip-x + .row { display: none; }

/* ===== v12: שאלון לפני ההרשמה + כניסה עם סיסמה ===== */
.quiz { max-width: 480px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 14px) 0 40px; min-height: 100vh; }
.qz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qz-bar { flex: 1; height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.qz-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #7FB2FF); border-radius: 99px; transition: width .5s var(--spring); }
.qz-n { font-size: 13px; font-weight: 700; color: var(--muted); }
.qz-dog { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.qz-dog .jdog { width: 96px; height: 96px; flex: none; }
.qz-q { margin: 0; font-size: 19px; font-weight: 750; line-height: 1.35; min-height: 0; animation: pop .45s var(--spring) both; }
.qz-q::before { bottom: 50% !important; transform: translateY(50%) rotate(45deg); }
.qz-opts { display: grid; gap: 10px; }
.qz-opts.many { grid-template-columns: 1fr 1fr; }
.qz-opt { display: flex; align-items: center; gap: 12px; background: var(--card); border: 2px solid transparent; border-radius: 18px; padding: 14px 16px; font: inherit; color: var(--ink); text-align: start; cursor: pointer; box-shadow: var(--shadow-s); animation: rise .45s var(--spring) both; transition: transform .2s var(--spring), border-color .2s, background .2s; }
.qz-opt:active { transform: scale(.97); }
.qz-opt.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--card)); }
.qz-opt .qe { font-size: 26px; line-height: 1; }
.qz-opt b { font-size: 16px; }
.qz-opts.many .qz-opt { flex-direction: column; text-align: center; gap: 6px; padding: 14px 8px; }
.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plan-list li { display: flex; gap: 12px; background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-s); animation: rise .5s var(--spring) both; }
.pl-e { font-size: 26px; flex: none; }
.plan-list b { font-size: 16px; } .plan-list p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.pw { position: relative; display: block; }
.pw input { padding-inline-end: 44px; }
.pw-eye { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; }
.quiz-cta { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 18px; padding: 10px 14px; margin-top: 14px; box-shadow: var(--shadow-s); text-decoration: none; color: inherit; font-size: 14px; }
.quiz-cta img { width: 44px; height: 44px; object-fit: contain; }
.quiz-cta span { flex: 1; }

/* ===== v13: סרגל עליון: תפריט מימין, ג׳ובה באמצע, חשבון משמאל ===== */
.nav { display: grid !important; grid-template-columns: 1fr auto 1fr; }
.nav .side { min-width: 0; }
.nav .mid { display: flex; justify-content: center; }
.nav .mini { display: none; }
.nav .brandmark { font-size: 21px; gap: 7px; }
.nav .brandmark img { width: 34px; height: 34px; }
.menu-b { width: 42px; height: 42px; border: 0; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-s); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.menu-b i { width: 17px; height: 2px; border-radius: 2px; background: var(--ink); }
.menu-b i:nth-child(2) { width: 12px; margin-inline-start: 5px; }
.acct { padding: 2px; border-radius: 50%; max-width: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent), var(--shadow-s); border: 0; background: none; }
.acct .av { width: 36px; height: 36px; font-size: 15px; }
.drawer-bg { position: fixed; inset: 0; z-index: 90; background: rgba(18,32,74,.35); animation: fade .25s both; }
.drawer-bg.out { animation: fade .25s reverse forwards; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--bg); padding: calc(env(safe-area-inset-top) + 14px) 16px 24px; box-shadow: -20px 0 50px -20px rgba(18,32,74,.45); overflow-y: auto; animation: drawerIn .45s var(--spring) both; border-radius: 26px 0 0 26px; }
.drawer-bg.out .drawer { animation: drawerOut .25s var(--ease) forwards; }
@keyframes drawerIn { from { transform: translateX(105%); } }
@keyframes drawerOut { to { transform: translateX(105%); } }
.drawer-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drawer ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.drawer li { animation: slideL .45s var(--spring) both; }
.drawer a:not(.brandmark) { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.drawer a:not(.brandmark):hover { background: var(--card); }
.drawer b { display: block; font-size: 16px; } .drawer i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.drawer .ic:last-child { color: var(--muted); }

/* אייקונים בתלת-ממד (כמו באתר) */
.ic3d { --c1: #6E9BFF; --c2: #2457E6; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; flex: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 42%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.18), inset 0 5px 9px rgba(255,255,255,.45), 0 12px 20px -10px var(--c2); transform: perspective(400px) rotateX(10deg) rotateY(-8deg); transition: transform .4s var(--spring); }
.ic3d svg { width: 48%; height: 48%; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.ic3d.sm { width: 40px; height: 40px; border-radius: 13px; transform: none; }
.c-blue { --c1: #6E9BFF; --c2: #2457E6; } .c-gold { --c1: #FFD76B; --c2: #E59A12; } .c-green { --c1: #6BDB93; --c2: #1F9A4D; }
.c-red { --c1: #FF8A80; --c2: #E5484D; } .c-purple { --c1: #A88BFF; --c2: #6A44F0; } .c-pink { --c1: #FF9CC8; --c2: #E0447F; }
.qz-opt.on .ic3d, .qz-opt:hover .ic3d { transform: scale(1.08) rotate(-6deg); }
.plan-list .ic3d { flex: none; }

/* ===== v14: ביקורות ===== */
.stars { display: flex; gap: 4px; direction: ltr; justify-content: flex-end; }
.stars button { background: none; border: 0; font-size: 32px; line-height: 1; color: #D9D3C7; cursor: pointer; padding: 2px; transition: transform .2s var(--spring), color .2s; }
.stars button.on, .stars.sm button:hover, .stars.sm button:hover ~ button { color: #F5B82E; }
.stars button:active { transform: scale(1.25); }
.stars.sm { justify-content: flex-start; margin-top: 4px; direction: rtl; }
.stars.sm button { font-size: 28px; }
.review-ask { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 22px; padding: 12px 14px; margin-top: 18px; box-shadow: var(--shadow-s); position: relative; animation: rise .5s var(--spring) both; }
.ra-dog { width: 74px; height: 74px; object-fit: contain; flex: none; }
.review-ask b { font-size: 16px; } .review-ask p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.ra-x { position: absolute; top: 8px; left: 8px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; }
textarea { width: 100%; font: inherit; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); padding: 10px 12px; resize: vertical; }
/* ===== v15: ניגודיות (בדיקה אוטומטית) ===== */
.status-hero .hand { color: #FFE7A6; }
.status-hero .st-chip { background: #fff; color: #12204A; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, #fff); }
.status-hero p, .status-hero .st-rows span { opacity: 1; color: #E3EAFF; }
.delta.down, .badge.good { color: #17703A; }
.delta.up, .badge.bad { color: #B3202A; }
html[data-theme=dark] .delta.down, html[data-theme=dark] .badge.good { color: #7BE0A0; }
html[data-theme=dark] .delta.up, html[data-theme=dark] .badge.bad, html[data-theme=dark] [style*="color:var(--bad)"] { color: #FF9A9A !important; }
html[data-theme=dark] .hand, html[data-theme=dark] .link, html[data-theme=dark] .more-row .link { color: #8FB0FF; }
html[data-theme=dark] .tip-card .hand { color: #FFD76B; }

/* ===== v16: גרפים שאפשר לשחק איתם ===== */
.ce { padding: 14px; }
.ce-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.ce-range { flex: 1 1 200px; } .ce-type { flex: 0 1 140px; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.ce-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line2); background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 99px; cursor: pointer; transition: all .2s; }
.ce-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); opacity: .35; }
.ce-chip.on { color: var(--ink); border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--card)); }
.ce-chip.on i { opacity: 1; }
.bars-svg .sb { transform-box: fill-box; transform-origin: bottom; animation: growUp .6s var(--ease) both; }
.bars-svg .sl { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawLn 1s var(--ease) forwards; }
.bars-svg .hit { cursor: pointer; }
.ce-tip { margin-top: 8px; background: var(--card2); border-radius: 14px; padding: 10px 12px; animation: rise .3s var(--ease); }
.ce-tip > b { font-size: 15px; }
.ce-vals { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 4px; font-size: 13px; }
.ce-vals span { display: inline-flex; align-items: center; gap: 5px; }
.ce-vals i { width: 9px; height: 9px; border-radius: 3px; }
.pie-legend li.sel { font-weight: 800; }
.pie-legend li { border-radius: 10px; padding: 2px 4px; }
.donut .seg { transition: opacity .3s, stroke-dashoffset 1s var(--ease); }
/* שאלון: פוזות של ג׳ובה */
.qz-pose { width: 110px; height: 110px; object-fit: contain; flex: none; transform-origin: 50% 100%; animation: breathe 3.4s var(--ease) infinite; }
.qz-pose.bop { animation: hop .6s var(--spring); }
.qz-opt { justify-content: space-between; min-height: 58px; }
.qz-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; color: transparent; flex: none; transition: all .2s; }
.qz-opt.on .qz-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.qz-opts.many .qz-opt { flex-direction: row; text-align: start; padding: 14px; }
.pl-n { width: 34px; height: 34px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 900; display: grid; place-items: center; flex: none; }
.plan-list li:nth-child(2) .pl-n { background: #E59A12; } .plan-list li:nth-child(3) .pl-n { background: #2FA65A; } .plan-list li:nth-child(4) .pl-n { background: #6A44F0; }
.drawer a:not(.brandmark) { padding: 13px 12px; border-inline-start: 3px solid transparent; }
.drawer a:not(.brandmark):hover { border-color: var(--blue); }

/* ===== v17: עמוד תשלום וקרוסלת מסלולים ===== */
.plan-car { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px 26% 10px; margin: 0 -16px; scrollbar-width: none; }
.plan-car::-webkit-scrollbar { display: none; }
.pc { flex: none; width: 62%; max-width: 240px; scroll-snap-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border: 2px solid var(--line2); border-radius: 24px; padding: 22px 12px 16px; font: inherit; color: var(--ink); cursor: pointer; transition: transform .35s var(--spring), border-color .2s, box-shadow .3s; transform: scale(.92); opacity: .85; }
.pc.on { transform: scale(1); opacity: 1; border-color: var(--blue); box-shadow: 0 18px 34px -16px rgba(36,87,230,.5); }
.pc.best { background: linear-gradient(170deg, color-mix(in srgb, var(--blue) 7%, var(--card)), var(--card)); }
.pc .ribbon { position: absolute; top: -12px; background: linear-gradient(135deg, #FFD76B, #F5B82E); color: #12204A; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 8px; white-space: nowrap; }
.pc-t { font-size: 17px; }
.pc-p { font-size: 18px; font-weight: 700; } .pc-p b { font-size: 44px; font-weight: 900; letter-spacing: -.03em; }
.pc-per, .pc-sub { font-size: 13px; color: var(--muted); }
.pc i { font-style: normal; font-size: 12.5px; font-weight: 800; color: #17703A; margin-top: 6px; }
.pc-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.pc-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line2); } .pc-dots i.on { width: 20px; background: var(--blue); }
.co-sum .row { padding: 4px 0; } .co-sum .row:first-child { font-weight: 800; font-size: 17px; }
.co-sum .perks { margin: 12px 0 0; }

/* ===== v18: הצעד הבא + ניסיון ===== */
.next-step { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 24px; padding: 14px 16px; margin: 6px 0 14px; box-shadow: 0 14px 30px -18px rgba(36,87,230,.55); border: 2px solid color-mix(in srgb, var(--blue) 22%, transparent); animation: rise .5s var(--spring) both; }
.ns-dog { width: 92px; height: 92px; object-fit: contain; flex: none; transform-origin: 50% 100%; animation: breathe 3.4s var(--ease) infinite; }
.ns-k { font-size: 12px; font-weight: 800; color: var(--blue); letter-spacing: .03em; }
.next-step b { display: block; font-size: 17px; line-height: 1.3; margin: 2px 0 4px; }
.next-step p { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.trial-bar { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--warn-soft); color: var(--ink); border-radius: 14px; padding: 9px 12px; font-size: 13.5px; text-decoration: none; margin: 4px 0 10px; }
.trial-bar b { color: var(--blue); } .trial-bar.bad { background: var(--bad-soft); }

/* ===== מחשב: תפריט צד, רוחב מלא, שתי עמודות ===== */
@media (min-width: 1024px) {
  body { background: var(--bg); }
  #app { max-width: 1180px; padding: 0 36px 70px; margin-right: calc(230px + max(0px, (100vw - 230px - 1180px) / 2)); margin-left: max(0px, calc((100vw - 230px - 1180px) / 2)); }
  #app:not(.has-side) > *:not(.nav) { max-width: 820px; margin-inline: auto; }
  .dcols { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 32px; align-items: start; }
  .dmain, .dside { min-width: 0; }
  .dside { display: flex; flex-direction: column; padding-top: 8px; }
  .dside > * { flex-shrink: 0; }
  .dside > .block:first-child, .dside > section:first-child { margin-top: 0; }
  /* תפריט: עמודה קבועה בצד ימין */
  .tabs { top: 0; bottom: 0; right: 0; left: auto; transform: none; width: 230px; }
  .tabs .in { height: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; border-radius: 0; border: 0; border-inline-start: 1px solid var(--line2); padding: 92px 14px 20px; box-shadow: none; background: var(--card); }
  .tabs .pill { display: none; }
  .tabs a { flex: none; flex-direction: row; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 15.5px; font-weight: 700; color: var(--ink2); }
  .tabs a:hover { background: var(--bg); }
  .tabs a.on { background: var(--blue); color: #fff; }
  .tabs a.up { order: -1; flex: none; margin-bottom: 14px; }
  .tabs a.up .dot { width: 100%; height: 48px; border-radius: 14px; gap: 8px; font-weight: 800; }
  .tabs a.up .dot::before { content: "העלאה / הוספה"; font-size: 15px; order: 2; }
  .tabs a.up .dot::after { border-radius: 16px; }
  .tabs a .tabpug { width: 24px; height: 24px; }
  .nav { margin: 0 -40px; padding-inline: 40px; }
  .nav .menu-b { display: none; }
  /* חלונות במרכז במקום מלמטה */
  .sheet-bg { align-items: center; }
  .sheet { border-radius: 28px; max-width: 540px; max-height: 84vh; animation: pop .35s var(--spring); }
  .chatwin { inset: auto 250px 24px auto; width: 400px; height: min(680px, calc(100vh - 48px)); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); }
  .chat-fab { left: auto; right: 260px; bottom: 28px; }
  .chat-fab .tip { left: auto; right: 70px; }
  .drawer { border-radius: 0; }
  .coach { inset: auto 250px 30px 0; }
  .plan-car { margin: 0; padding-inline: 10px; justify-content: center; }
  .plan-car .pc { width: 220px; }
  .quiz { max-width: 560px; }
  .auth { max-width: 460px; }
  .bars-svg { max-height: 300px; }
  .next-step { padding: 18px 20px; } .ns-dog { width: 110px; height: 110px; }
}
@media (min-width: 1024px) and (max-width: 1240px) { #app.has-side { grid-template-columns: minmax(0, 1fr) 330px; } }
.empty-hero { text-align: center; padding: 10px 0 14px; }
.eh-dog { width: 170px; height: 170px; object-fit: contain; margin: 0 auto; animation: breathe 3.4s var(--ease) infinite; transform-origin: 50% 100%; }
.empty-hero h1 { font-size: 28px; margin: 6px 0 4px; } .empty-hero p { color: var(--muted); margin: 0; }
@media (min-width: 1024px) {
  body:has(.tabs.hidden) #app { margin-right: auto; margin-left: auto; }
  .nav { margin: 0 -36px; padding-inline: 36px; }
  .dmain > .block:first-child { margin-top: 0; }
}
@media (min-width: 1024px) { .chat-fab { right: auto; left: 28px; bottom: 28px; } .chat-fab .tip { right: auto; left: 70px; } .chatwin { inset: auto auto 24px 24px; } }
html, body { overflow-x: clip; }

/* ===== v19: עודף/גירעון החודש + העו״ש עכשיו ===== */
.m-banner { border-radius: 24px; padding: 16px 18px; margin: 4px 0 12px; color: #fff; background: linear-gradient(140deg, #2FA65A, #17703A); box-shadow: var(--shadow); animation: rise .5s var(--spring) both; }
.m-banner.neg { background: linear-gradient(140deg, #E5484D, #A3222A); }
.m-banner.none { background: var(--card); color: var(--ink); }
.mb-k { font-size: 13.5px; font-weight: 700; opacity: .9; }
.m-banner > b { display: block; font-size: clamp(34px, 10vw, 44px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0; }
.m-banner.none > b { font-size: 18px; }
.m-banner p { margin: 2px 0 0; font-size: 14px; opacity: .92; }
.mb-split { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.25); font-size: 14px; }
.mb-split span { display: inline-flex; align-items: center; gap: 6px; }
.mb-split i { width: 10px; height: 10px; border-radius: 3px; }
.mb-hint { margin-top: 8px !important; font-size: 13px !important; }
.bank-card { background: var(--card); border-radius: 22px; padding: 16px 16px 12px; box-shadow: var(--shadow-s); margin: 18px 0 6px; }
.bk-k { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
.bk-amt { display: block; font-size: 32px; font-weight: 900; margin-top: 2px; }
.bank-card.neg .bk-amt { color: var(--bad); }
.bk-date { font-size: 13px; color: var(--muted); }
.bk-date .up, .bk-foot .up { color: #17703A; } .bk-date .dn, .bk-foot .dn { color: #B3202A; }
.bk-spark { width: 100%; height: 70px; display: block; margin: 8px 0 4px; }
.bk-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.bank-card.empty p { color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
html[data-theme=dark] .bk-date .up, html[data-theme=dark] .bk-foot .up { color: #7BE0A0; } html[data-theme=dark] .bk-date .dn, html[data-theme=dark] .bk-foot .dn { color: #FF9A9A; }

/* ===== v20: מסך פתיחה, חלונית קטנה, שינוי קטגוריה מהיר, סוף זרימה רגוע ===== */
.boot { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3A6BFF, #1A3FB3 60%, #12204A); color: #fff; clip-path: circle(150% at 50% 50%); transition: clip-path .75s cubic-bezier(.2,.8,.2,1); }
.boot.done { clip-path: circle(0% at 50% 42%); pointer-events: none; }
.boot-in { text-align: center; position: relative; }
.boot-dog { position: relative; width: 210px; height: 210px; margin: 0 auto; animation: bootDrop 1s cubic-bezier(.34,1.56,.64,1) .1s both; }
.boot-dog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.boot-dog .b-cel { opacity: 0; transform: scale(.7) translateY(20px); animation: bootCheer .45s cubic-bezier(.34,1.56,.64,1) 1.15s forwards; }
.boot-dog .b-sit { animation: bootSitOut .25s ease 1.15s forwards; }
@keyframes bootDrop { 0% { transform: translateY(-120vh) rotate(-30deg); } 70% { transform: translateY(10px) rotate(4deg) scale(1.05, .92); } 100% { transform: none; } }
@keyframes bootCheer { to { opacity: 1; transform: none; } }
@keyframes bootSitOut { to { opacity: 0; transform: scale(.9); } }
.boot-name { font-family: var(--font-d, inherit); font-size: 60px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; animation: bootPop .6s cubic-bezier(.34,1.56,.64,1) .8s both; }
.boot-tag { font-size: 17px; opacity: .9; animation: bootPop .6s cubic-bezier(.34,1.56,.64,1) 1.05s both; }
@keyframes bootPop { from { opacity: 0; transform: translateY(20px) scale(.8); } }
.boot-burst i { position: absolute; top: 90px; left: 50%; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(145deg, #FFD976, #F5B82E); box-shadow: inset 0 -3px 5px rgba(0,0,0,.2); opacity: 0; animation: bootBurst 1.1s cubic-bezier(.2,.8,.2,1) 1.15s both; }
.boot-burst i:nth-child(1) { --x: -160px; --y: -110px; } .boot-burst i:nth-child(2) { --x: 160px; --y: -120px; } .boot-burst i:nth-child(3) { --x: -190px; --y: 40px; } .boot-burst i:nth-child(4) { --x: 190px; --y: 30px; }
.boot-burst i:nth-child(5) { --x: -100px; --y: 150px; background: #7BE0A0; } .boot-burst i:nth-child(6) { --x: 110px; --y: 160px; background: #fff; } .boot-burst i:nth-child(7) { --x: -40px; --y: -170px; background: #FF9CC8; } .boot-burst i:nth-child(8) { --x: 50px; --y: -160px; background: #A88BFF; }
@keyframes bootBurst { 0% { opacity: 0; transform: translate(-50%, 0) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) scale(1); } }
.boot-load { width: 120px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 22px auto 0; overflow: hidden; animation: bootPop .4s ease 1.3s both; }
.boot-load i { display: block; height: 100%; width: 40%; border-radius: 4px; background: #F5B82E; animation: bootLoad 1.1s ease-in-out infinite; }
@keyframes bootLoad { 0% { transform: translateX(160%); } 100% { transform: translateX(-260%); } }
@media (prefers-reduced-motion: reduce) { .boot-dog, .boot-name, .boot-tag, .boot-load { animation: none; } .boot-dog .b-sit { opacity: 0; } .boot-dog .b-cel { animation: none; opacity: 1; transform: none; } .boot-burst { display: none; } }

/* חלונית קטנה */
.jpop { position: absolute; z-index: 300; background: var(--card); color: var(--ink); border-radius: 20px; padding: 16px 16px 14px; box-shadow: 0 24px 60px -18px rgba(18,32,74,.45), 0 0 0 1px var(--line); animation: popIn .22s cubic-bezier(.34,1.56,.64,1); transform-origin: var(--ax, 50%) 0; }
.jpop.above { transform-origin: var(--ax, 50%) 100%; }
.jpop.out { animation: popOut .18s ease forwards; }
@keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
@keyframes popOut { to { opacity: 0; transform: scale(.94); } }
.jpop::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px; background: var(--card); transform: rotate(45deg); border-radius: 3px; box-shadow: -1px -1px 0 var(--line); }
.jpop.above::before { top: auto; bottom: -6px; box-shadow: 1px 1px 0 var(--line); }
.pop-x, .ip-x, .sheet-x { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--bg2); color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.pop-x:hover, .ip-x:hover, .sheet-x:hover { background: var(--line); }
.sheet { position: relative; } .sheet-x { top: 14px; left: 16px; width: 34px; height: 34px; }
.ip-in { position: relative; padding-top: 14px; } .ip-x { top: 8px; left: 8px; width: 28px; height: 28px; background: var(--card); }
.pop-in { position: relative; }
.pop-t { display: block; font-size: 16px; font-weight: 800; padding-left: 36px; margin-bottom: 8px; }
.pop-rows { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; font-size: 14px; }
.pop-rows li { display: flex; align-items: center; gap: 8px; }
.pop-rows li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pop-rows li b { margin-inline-start: auto; font-weight: 750; }
.pop-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.pop-sum b { font-size: 18px; font-weight: 850; }
.pop-sum.pos { background: var(--good-soft); color: var(--good); } .pop-sum.neg { background: var(--bad-soft); color: var(--bad); }
.pop-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pop-big b { font-size: 26px; font-weight: 900; } .pop-big span { font-size: 13px; color: var(--muted); font-weight: 600; }
.pop-p { margin: 2px 0; font-size: 13.5px; color: var(--ink2); }
.pop-tx { list-style: none; padding: 8px 0 0; margin: 8px 0 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; }
.pop-tx li { display: flex; justify-content: space-between; gap: 10px; } .pop-tx li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb, .hbars li { cursor: pointer; } .gb:focus-visible { outline: none; } .gb.pop-on rect:not([fill="transparent"]) { filter: brightness(1.1); } .hbars li.pop-on { background: var(--bg2); border-radius: 10px; }

/* תגית קטגוריה ליד כל עסקה */
.tx .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cat-tag { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 700; color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, transparent); border: 0; border-radius: 8px; padding: 3px 8px; cursor: pointer; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s; }
.cat-tag:hover, .cat-tag.pop-on { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.cat-tag svg { flex: none; opacity: .7; }
.cat-tag.guess { color: #9A6200; background: var(--warn-soft); }
.learned { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--good); }
.tx .meta .badge { padding: 2px 8px; font-size: 11.5px; }

/* שינוי קטגוריה מהיר */
.qc-t { display: block; font-size: 16px; font-weight: 800; padding-left: 36px; }
.qc-d { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--muted); margin: 2px 0 10px; }
.qc-d span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-q { width: 100%; margin-bottom: 8px; }
.qc-list { max-height: min(42vh, 300px); overflow: auto; margin: 0 -4px; padding: 0 4px; overscroll-behavior: contain; }
.qc-h { font-size: 12px; font-weight: 800; color: var(--muted); margin: 8px 0 6px; }
.qc-g { display: flex; flex-wrap: wrap; gap: 6px; }
.qc-c { font: inherit; font-size: 13.5px; font-weight: 650; border: 0; border-radius: 10px; padding: 7px 11px; background: var(--bg2); color: var(--ink); cursor: pointer; transition: background .15s, transform .15s; }
.qc-c:hover { background: var(--line); } .qc-c:active { transform: scale(.95); }
.qc-c.on { background: var(--ink); color: var(--card); }
.qc-new { margin-top: 8px; } .qc-new .seg { margin-bottom: 8px; }
.qc-learn { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; margin-top: 12px; cursor: pointer; }
.qc-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.qc-note svg { color: var(--good); flex: none; margin-top: 2px; }

/* סוף הזרימה: קטן, ברור ורגוע */
.fres { border-radius: 18px; padding: 14px 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); animation: pop .5s var(--spring) both; }
.fres-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fres-row span { font-weight: 800; font-size: 15px; }
.fres-row b { font-size: 22px; font-weight: 850; white-space: nowrap; }
.fres p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.fres .fres-bal { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.fres.pos { background: var(--good-soft); box-shadow: none; } .fres.pos .fres-row b { color: var(--good); }
.fres.calm .fres-row b { color: var(--ink); }
.fres.neg { background: var(--bad-soft); box-shadow: none; } .fres.neg .fres-row b { color: var(--bad); }
.jpop .btn.block { margin-top: 4px; min-height: 0; }