/* הטיה אחרי העכבר: כרגע אף אחד לא כותב אליהם (הוסרה 11/09 — הטלפון עומד ישר), והם נשארים כווסת מוכן */
@property --tilt-y { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tilt-x { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ═══ הטלפון: מעטפת תלת-ממדית + ערכת הממשק (k-*) — העתק של lib/theme ו-lib/widgets ═══
   כל המידות ב-dp של האפליקציה × --k (0.78). הסולם הניטרלי הקר + שבעת התפקידים — נעולים. */
.dp {
  --k: 0.78;
  --bg: #F2F5F6; --card: #FFFFFF; --cardAlt: #E9EEF0; --ink: #14212A; --onInk: #F2F5F6; --muted: #5C6B75; --faint: #93A1AA;
  --border: #DCE3E7; --borderStrong: #C1CBD1; --accentSoft: #E3F1F2; --goodSoft: #E7F2EC; --badSoft: #F9EBEB; --shadow: rgba(20, 33, 42, 0.07);
  --coach: #12939D; --onCoach: #FFFFFF; --trainee: #F07C1A; --onTrainee: #331B04; --system: #B0599A; --attention: #C08A18; --positive: #37945F; --negative: #CC5555; --neutral: #8A8A8A;
  --fd: var(--font-display); --fb: var(--font-body); --fn: var(--font-digits);
  position: relative;
  z-index: 1;
  width: 300px;
  padding: 9px;
  border-radius: 46px;
  /* מתכת מוברשת + שני פסי אנטנה (נראים רק ברצועת המסגרת, כי המסך אטום) */
  background:
    linear-gradient(180deg, transparent 0 47px, rgba(255, 255, 255, 0.13) 47px 48.5px, rgba(0, 0, 0, 0.35) 48.5px 49.5px, transparent 49.5px),
    linear-gradient(180deg, transparent 0 556px, rgba(255, 255, 255, 0.13) 556px 557.5px, rgba(0, 0, 0, 0.35) 557.5px 558.5px, transparent 558.5px),
    linear-gradient(96deg, #14161a 0%, #2f343b 6%, #464c55 11%, #22262c 19%, #16181c 50%, #22262c 81%, #464c55 89%, #2f343b 94%, #14161a 100%),
    linear-gradient(155deg, #34383d 0%, #16181b 38%, #0f1113 70%, #1d2024 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 0 0 4px #0a0b0c, inset 0 0 0 5px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(21, 18, 15, 0.28), 0 18px 36px -10px rgba(21, 18, 15, 0.45), 0 60px 90px -28px rgba(21, 18, 15, 0.40);
  /* ישר אל המצלמה — התוכן לא באלכסון. העומק נשאר בצלעות ובלחצנים שבולטים מהצללית, ונחשף במלואו בסיבוב.
     rotate/translate/scale נפרדים מ-transform כדי שהסיבוב והקשת יקבלו עקומות שונות */
  --rest-y: 0deg;
  --rest-x: 0deg;
  rotate: y calc(var(--rest-y) + var(--tilt-y));
  transform: rotateX(calc(var(--rest-x) + var(--tilt-x)));
  interpolate-size: allow-keywords;
  font-family: var(--fb);
  color: var(--ink);
  text-align: start;
  transform-style: preserve-3d;
}
.sides .dp { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 4px #0a0b0c, inset 0 0 0 5px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 40px -10px rgba(0, 0, 0, 0.6), 0 70px 100px -30px rgba(0, 0, 0, 0.55); }

/* סיבוב 360° עם קפיצה; התוכן מתחלף כשהמסך פונה מאיתנו */
.dp.is-turning { animation: dp-spin 0.95s cubic-bezier(0.62, 0, 0.38, 1) both, dp-arc 0.95s cubic-bezier(0.34, 0, 0.28, 1) both; }
/* הסיבוב: זוג keyframes אחד — רציפות מהירות מובנית; הקשת: העקומה חלה על כל חצי, המהירות מתאפסת באפקס */
@keyframes dp-spin { from { rotate: y var(--rest-y, 0deg); } to { rotate: y calc(var(--rest-y, 0deg) + 360deg); } }
@keyframes dp-arc {
  0%   { translate: 0 0;     scale: 1;    transform: rotateX(var(--rest-x, 0deg)); }
  50%  { translate: 0 -26px; scale: 0.93; transform: rotateX(calc(var(--rest-x, 0deg) + 7deg)); }
  100% { translate: 0 0;     scale: 1;    transform: rotateX(var(--rest-x, 0deg)); }
}
/* עובי (12 שכבות) — צלעות מתכת: בהיר בקצוות (מה שרואים בזמן הסיבוב), כהה באמצע; שכבות עמוקות יותר כהות יותר */
.dp-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent 0 47px, rgba(255, 255, 255, 0.28) 47px 48.5px, rgba(0, 0, 0, 0.55) 48.5px 49.5px, transparent 49.5px), linear-gradient(180deg, transparent 0 556px, rgba(255, 255, 255, 0.28) 556px 557.5px, rgba(0, 0, 0, 0.55) 557.5px 558.5px, transparent 558.5px), linear-gradient(90deg, #6a7079 0%, #2c3036 7%, #1c1f23 50%, #2c3036 93%, #6a7079 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.6); transform: translateZ(calc(var(--i) * -2.4px)); }
.dp-edge:nth-child(n+6) { background: linear-gradient(90deg, #5a6068 0%, #24282d 7%, #17191d 50%, #24282d 93%, #5a6068 100%); }
/* הגב: זכוכית מט עם אור מלמעלה-שמאל, מסגרת פנימית, כתם אור נע בזמן הסיבוב */
.dp-back { position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.06) 100%), linear-gradient(160deg, #363b42 0%, #2a2f35 38%, #22262b 70%, #272c31 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 0 5px #0b0d0f, inset 0 0 0 6px rgba(255, 255, 255, 0.06), inset 0 -44px 70px rgba(0, 0, 0, 0.36), inset 0 36px 56px rgba(255, 255, 255, 0.025);
  transform: rotateY(180deg) translateZ(20.5px); backface-visibility: hidden; pointer-events: none; }   /* מעבר לצלע העמוקה ביותר (8 × 2.4 = 19.2) — אחרת הצלע מכסה את הגב */
.dp-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 40% at 72% 88%, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.007) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.dp-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 60%); transform: translateX(130%); opacity: 0; }
.dp.is-turning .dp-back::after { animation: dp-backsheen 0.95s both; }
@keyframes dp-backsheen { 0%, 30% { transform: translateX(130%); opacity: 0; } 40% { opacity: 1; } 70%, 100% { transform: translateX(-130%); opacity: 0; } }
/* לוגו חרוט במרכז-תחתית */
.dp-back > svg { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -50px 0 0 -44px; opacity: 0.92; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12)) drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.06)); }
.dp-back .brand { position: absolute; left: 0; right: 0; top: calc(50% + 46px); text-align: center; font-family: var(--fd); font-weight: 600; font-size: 13px; letter-spacing: 0.32em; color: rgba(255, 255, 255, 0.42); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08); direction: ltr; }
/* The owner's rule (02/08/2026): the O is broken at every size and in every colour version — so the lettering on the back is FIT · broken ring · POLIS, in the text's own single colour, not a plain O. */
.dp-back .brand-o { display: inline-block; width: 0.98em; height: 0.98em; vertical-align: -0.14em; margin-right: 0.32em; fill: currentColor; }
.dp-back .brand { white-space: nowrap; }
/* אי המצלמה: ריבוע מעוגל מורם, שלוש עדשות עם טבעת פלדה וזכוכית כחלחלה, פלאש, חיישן */
.dp-cam { position: absolute; top: 14px; right: 14px; width: 104px; height: 104px; border-radius: 30px; background: linear-gradient(150deg, #3a3f46 0%, #262a30 45%, #1c1f24 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5); }
.dp-cam .l { position: absolute; width: 40px; height: 40px; border-radius: 999px; background: conic-gradient(from 210deg, #7b8490, #3a4048 18%, #9aa3ae 32%, #2c3138 48%, #6f7883 62%, #2f343b 80%, #7b8490); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dp-cam .l::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: radial-gradient(circle at 50% 50%, #0b1220 0%, #0a0e16 40%, #05070b 70%, #0d1117 100%); box-shadow: inset 0 0 0 2px #14181d, inset 0 0 0 3px rgba(120, 140, 165, 0.25), inset 0 6px 8px rgba(0, 0, 0, 0.7); }
.dp-cam .l::after { content: ""; position: absolute; inset: 11px; border-radius: 999px; background: radial-gradient(circle at 38% 32%, rgba(160, 190, 230, 0.55) 0%, rgba(90, 110, 150, 0.35) 18%, rgba(30, 40, 70, 0.9) 45%, #04060a 72%); box-shadow: inset 0 0 0 1px rgba(150, 170, 200, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.7); }
.dp-cam .l1 { top: 10px; left: 10px; }
.dp-cam .l2 { bottom: 10px; left: 10px; }
.dp-cam .l3 { top: 32px; right: 10px; }
.dp-cam .flash { position: absolute; top: 12px; right: 18px; width: 11px; height: 11px; border-radius: 999px; background: radial-gradient(circle at 40% 35%, #fff8e6 0%, #e9cf8a 50%, #b8933f 100%); box-shadow: 0 0 0 2px #15181c, 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 8px rgba(255, 230, 160, 0.3); }
.dp-cam .lidar { position: absolute; bottom: 14px; right: 16px; width: 12px; height: 12px; border-radius: 999px; background: radial-gradient(circle at 50% 50%, #1a1f2a 0%, #0a0c10 60%, #14171a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 2px #1a1d21; }
.dp-cam .mic { position: absolute; bottom: 33px; right: 21px; width: 3px; height: 3px; border-radius: 999px; background: #05070a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dp-ground { position: absolute; left: 50%; width: 268px; height: 34px; margin-left: -134px; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(21, 18, 15, 0.26) 0%, rgba(21, 18, 15, 0.17) 30%, rgba(21, 18, 15, 0.07) 56%, rgba(21, 18, 15, 0) 76%); }
.dp-ground::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 13px; margin: -6.5px 0 0 -85px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(16, 14, 12, 0.44) 0%, rgba(16, 14, 12, 0.18) 52%, rgba(16, 14, 12, 0) 78%); }
.sides .dp-ground { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.12) 56%, rgba(0, 0, 0, 0) 76%); }
.sides .dp-ground::before { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 52%, rgba(0, 0, 0, 0) 78%); }
.dp-wrap.is-flipping .dp-ground { animation: dp-ground 0.95s cubic-bezier(0.34, 0, 0.28, 1) both; }
@keyframes dp-ground { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5, 0.78); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
.dp-sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(-130%); opacity: 0; z-index: 7; pointer-events: none; }
.dp.is-turning .dp-sheen { animation: dp-sheen 0.95s both; }
@keyframes dp-sheen { 0%, 55% { transform: translateX(-130%); opacity: 0; } 62% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }

/* ── המסך ───────────────────────────────────────────────────────────── */
.dp-screen { position: relative; height: 592px; border-radius: 38px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; backface-visibility: hidden; transform: translateZ(1px); contain: layout paint style; }
.dp-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 999px; z-index: 6; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 55%, #1b3a5c 0%, #16273d 34%, #060a10 68%, #0d1117 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(120, 140, 165, 0.28), inset 0 0 3px rgba(255, 255, 255, 0.2); }
.dp-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0) 38%), linear-gradient(118deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.055) 56%, rgba(255, 255, 255, 0) 60%); }
.dp-status { height: 28px; padding: 7px 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 500; flex: none; }
.dp-status-icons { display: flex; gap: 4px; color: var(--ink); }
.dp-status-icons svg { width: 12px; height: 12px; }
:where(.dp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: start; }
.dp button:focus-visible { outline: 2px solid var(--coach); outline-offset: 2px; }
.dp svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dp .bi { width: calc(18px * var(--k)); height: calc(18px * var(--k)); }
.dp .bi.lg { width: calc(26px * var(--k)); height: calc(26px * var(--k)); }
.v-coach { color: var(--coach); } .v-trainee { color: var(--trainee); } .v-system { color: var(--system); } .v-attention { color: var(--attention); }
.v-positive { color: var(--positive); } .v-negative { color: var(--negative); } .v-muted { color: var(--muted); } .v-faint { color: var(--faint); }

/* הסרגל העליון (app_topbar / trainee_topbar): לוגו בתחילת השורה, עיגולים 34, אווטאר 48 */
.dp-topbar { display: flex; align-items: center; gap: calc(4px * var(--k)); padding: calc(10px * var(--k)) calc(20px * var(--k)) calc(12px * var(--k)); flex: none; }
.dp-topbar[hidden] { display: none; }
.k-wm { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 0.07em; font-family: var(--fd); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.k-wm .fit { color: var(--coach); } .k-wm .polis { color: var(--trainee); } .k-wm .o { width: 0.98em; height: 0.98em; }
.k-tbtn { width: calc(34px * var(--k)); height: calc(34px * var(--k)); border-radius: 999px; background: var(--card); border: 1.5px solid var(--borderStrong); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative; flex: none; }
.k-tbtn::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; }
.k-me { width: calc(48px * var(--k)); height: calc(48px * var(--k)); margin-inline-start: calc(4px * var(--k)); padding: calc(2.5px * var(--k)); box-sizing: border-box; border-radius: calc(48px * var(--k) * 0.3056); background: var(--card); border: calc(2.5px * var(--k)) solid var(--coach); display: inline-flex; flex: none; }
.k-me.ring-trainee { border-color: var(--trainee); }
.k-me i { flex: 1; border-radius: calc(38px * var(--k) * 0.3056); background: var(--cardAlt); color: var(--coach); font-style: normal; font-weight: 800; font-size: calc(14.4px * var(--k)); display: inline-flex; align-items: center; justify-content: center; }


/* הבמה */
.dp-stage { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.dp-stage::-webkit-scrollbar { display: none; }
.k-page { padding: calc(24px * var(--k)) calc(20px * var(--k)) calc(88px * var(--k)); min-height: 100%; box-sizing: border-box; font-size: calc(15px * var(--k)); line-height: 1.4; }
.dp[data-side="trainee"] .k-page { padding: calc(16px * var(--k)) calc(16px * var(--k)) calc(100px * var(--k)); }
.k-page.full, .dp[data-side="trainee"] .k-page.full { padding: 0; display: flex; flex-direction: column; min-height: 100%; }
.dp .k-page.trainer.full { padding: 0; }

/* ── בר הניווט: גלולה שמכווצת סביב הטאב הפעיל + FAB לידה ─────────────── */
.dp-navwrap { position: absolute; inset: auto 0 0 0; height: 84px; background: none; display: flex; justify-content: center; align-items: center; padding-bottom: calc(18px * var(--k)); box-sizing: border-box; pointer-events: none; z-index: 3; }
.dp-navwrap.is-hidden { display: none; }
.dp-nav { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 3px; padding: calc(6px * var(--k)); border-radius: calc(30px * var(--k)); background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 24px var(--shadow); clip-path: inset(0 round 24px); transform: none; transition: clip-path 0.32s cubic-bezier(0.2, 0, 0, 1), transform 0.32s cubic-bezier(0.2, 0, 0, 1); }
.dp-tab { width: calc(46px * var(--k)); min-height: calc(38px * var(--k)); padding: calc(9px * var(--k)) 0; border-radius: calc(22px * var(--k)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--faint); flex: none; box-sizing: border-box; transition: background-color 0.24s ease, color 0.24s ease, opacity 0.2s ease; }   /* בלי מעברי פריסה: width/padding/gap על חמישה טאבים = חמישה חישובי-פריסה בכל פריים, וזה מה שריצד. התנועה עצמה נשמרת ב-FLIP (demo.js) */
.dp-tab .ico { position: relative; display: inline-flex; }
.dp-tab svg { width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
.dp-tab b { display: block; height: 0; overflow: hidden; opacity: 0; font-size: calc(10px * var(--k)); font-weight: 700; line-height: 1; transition: opacity 0.16s ease; }
.dp-tab.is-on { width: auto; padding: calc(9px * var(--k)) calc(13px * var(--k)); min-height: calc(54px * var(--k)); gap: calc(3px * var(--k)); }
.dp-tab.is-on b { height: auto; opacity: 1; transition-delay: 0.08s; }
.dp-nav[data-side="trainer"] .dp-tab.is-on { background: var(--trainee); color: var(--onTrainee); }
.dp-nav[data-side="trainee"] .dp-tab.is-on { background: var(--ink); color: var(--onInk); }
.k-tabbadge { position: absolute; top: calc(-6px * var(--k)); inset-inline-end: calc(-8px * var(--k)); min-width: calc(16px * var(--k)); height: calc(16px * var(--k)); padding: 0 calc(4px * var(--k)); border-radius: calc(9px * var(--k)); background: var(--coach); color: #fff; border: 1.5px solid var(--card); font-style: normal; font-size: calc(9px * var(--k)); font-weight: 700; line-height: calc(13px * var(--k)); text-align: center; box-sizing: border-box; }
.dp-nav:not(.is-open) .dp-tab:not(.is-on) { opacity: 0; pointer-events: none; }
.dp-nav.is-open .dp-tab:not(.is-on) { transition-delay: 0.08s; }
.dp-nav:not(.is-open) { clip-path: var(--clip, inset(0 round 24px)); transform: var(--shift, none); }
.dp-fab { pointer-events: auto; flex: none; width: calc(56px * var(--k)); height: calc(56px * var(--k)); margin-inline-start: calc(10px * var(--k)); border-radius: calc(18px * var(--k)); background: var(--coach); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1); align-self: center; }
.dp-fab svg { width: calc(28px * var(--k)); height: calc(28px * var(--k)); }
.dp-fab.v-trainee { background: var(--trainee); color: var(--onTrainee); }
.dp-fab.small { width: calc(40px * var(--k)); height: calc(40px * var(--k)); border-radius: calc(14px * var(--k)); background: var(--card); color: var(--ink); border: 1.5px solid var(--borderStrong); box-sizing: border-box; }
.dp-fab.small svg { width: calc(22px * var(--k)); height: calc(22px * var(--k)); }
.dp-navwrap:not(.is-open) .dp-fab { transform: translateX(var(--fabx, 0px)); }
.dp-fab:active { transform: translateX(var(--fabx, 0px)) scale(0.94); }
/* ה-FAB הוא צומת קבוע: מחליף אייקון/צבע/מיקום במעבר, ונולד/נעלם בקנה מידה */
.dp-fab { transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1), scale 0.26s cubic-bezier(0.2, 0, 0, 1), opacity 0.26s ease, background-color 0.26s ease, color 0.26s ease; }
.dp-fab.is-new, .dp-fab.is-gone { scale: 0.5; opacity: 0; pointer-events: none; }
/* רינדור שקט: בלי מעברים בזמן לידה והחלפת הצד בסיבוב */
.dp.no-anim .dp-nav, .dp.no-anim .dp-tab, .dp.no-anim .dp-fab, .dp.no-anim .k-catbar, .dp.no-anim .k-cat { transition: none !important; }

/* טוסט (app_snack): צף 96dp מעל התחתית, רדיוס 14 */
.dp-toast { position: absolute; left: calc(16px * var(--k)); right: calc(16px * var(--k)); bottom: calc(96px * var(--k)); background: var(--ink); color: var(--onInk); padding: calc(12px * var(--k)) calc(16px * var(--k)); border-radius: calc(14px * var(--k)); font-size: calc(14px * var(--k)); font-weight: 600; opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 8; transition: opacity 0.2s ease, transform 0.2s ease; }
.dp-toast.show { opacity: 1; transform: translateY(0); }

/* גיליון תחתון (FormSheet): עמעום 45%, רקע bg, פינות 26, ידית, כותרת + ✕ */
.dp-sheet { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 9; display: flex; align-items: flex-end; border-radius: 38px; }
.dp-sheet[hidden] { display: none; }
.k-form { width: 100%; height: 90%; background: var(--bg); border-radius: calc(26px * var(--k)) calc(26px * var(--k)) 0 0; display: flex; flex-direction: column; overflow: hidden; animation: k-sheet-in 0.32s cubic-bezier(0.05, 0.7, 0.1, 1) both; }
@keyframes k-sheet-in { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.k-form .handle { display: block; width: calc(38px * var(--k)); height: calc(4px * var(--k)); border-radius: 2px; background: var(--borderStrong); margin: calc(12px * var(--k)) auto 0; }
.k-form .ttl { display: flex; align-items: center; justify-content: space-between; padding: calc(16px * var(--k)) calc(20px * var(--k)) calc(12px * var(--k)); }
.k-form .ttl b { font-family: var(--fd); font-weight: 800; font-variation-settings: 'wght' 700; font-size: calc(20px * var(--k)); }
.k-form .x { width: calc(32px * var(--k)); height: calc(32px * var(--k)); border-radius: 999px; background: var(--cardAlt); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.k-form .x svg { width: calc(16px * var(--k)); height: calc(16px * var(--k)); }
.k-form .fbody { flex: 1; overflow-y: auto; padding: calc(20px * var(--k)); display: flex; flex-direction: column; gap: calc(12px * var(--k)); scrollbar-width: none; }
.k-form.center .fbody { justify-content: center; }
.k-detsheet { width: 100%; max-height: 75%; overflow-y: auto; background: var(--card); border-radius: calc(20px * var(--k)) calc(20px * var(--k)) 0 0; padding: calc(16px * var(--k)) calc(20px * var(--k)) calc(20px * var(--k)); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(10px * var(--k)); animation: k-sheet-in 0.32s cubic-bezier(0.05, 0.7, 0.1, 1) both; scrollbar-width: none; }
.k-detsheet .ttl { display: block; text-align: center; font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); }
.k-explain { background: var(--cardAlt); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)); text-align: center; display: flex; flex-direction: column; gap: calc(4px * var(--k)); }
.k-explain b { font-size: calc(15px * var(--k)); font-weight: 700; line-height: 1.3; }
.k-explain small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); line-height: 1.35; }
.k-field { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1.2px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)) calc(14px * var(--k)); box-sizing: border-box; position: relative; }
.k-field small { position: absolute; top: -7px; inset-inline-start: 10px; background: var(--card); padding: 0 4px; font-size: calc(12px * var(--k)); color: var(--muted); font-weight: 500; }
.k-field b { flex: 1; font-size: calc(16px * var(--k)); font-weight: 500; text-align: left; direction: ltr; min-height: 1.35em; }
.k-field i { font-style: normal; font-size: calc(15px * var(--k)); color: var(--muted); }
.k-field.num { width: calc(120px * var(--k)); margin: 0 auto; }
.k-field.num.focus b::after { content: "|"; color: var(--coach); font-weight: 300; animation: k-caret 1s steps(2) infinite; }
@keyframes k-caret { to { opacity: 0; } }
.k-field.wide { width: 100%; }
.k-labeled { display: flex; flex-direction: column; gap: calc(6px * var(--k)); }
.k-labeled small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-fieldbox { display: block; background: var(--card); border: 1.2px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)) calc(14px * var(--k)); font-size: calc(15px * var(--k)); min-height: 1.4em; }
.k-fieldbox.ph { color: var(--faint); }
.k-two { display: flex; gap: calc(12px * var(--k)); } .k-two > * { flex: 1; }
.k-picker { display: flex; align-items: center; gap: 10px; padding: calc(10px * var(--k)) 0; }
.k-picker .col { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.k-picker b { font-size: calc(15px * var(--k)); font-weight: 600; } .k-picker small { font-size: calc(14px * var(--k)); color: var(--muted); }
.k-avail { display: flex; gap: 8px; align-items: flex-start; font-size: calc(15px * var(--k)); font-weight: 600; line-height: 1.4; }
.k-lblp { margin: 0; font-size: calc(15px * var(--k)); color: var(--muted); }
.k-pick { display: flex; align-items: center; gap: 12px; padding: calc(10px * var(--k)) 0; border-bottom: 1px solid var(--border); width: 100%; }
.k-pick b { flex: 1; font-size: calc(16px * var(--k)); font-weight: 500; }
.k-confirm { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); text-align: center; padding: calc(12px * var(--k)) 0; animation: k-pop 0.3s cubic-bezier(0.05, 0.7, 0.1, 1) both; }
@keyframes k-pop { from { transform: scale(0.9); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.k-confirm .ring { width: calc(64px * var(--k)); height: calc(64px * var(--k)); border-radius: 999px; background: var(--goodSoft); color: var(--positive); display: inline-flex; align-items: center; justify-content: center; margin-bottom: calc(8px * var(--k)); }
.k-confirm .ring svg { width: calc(36px * var(--k)); height: calc(36px * var(--k)); stroke-width: 2.4; }
.k-confirm b { font-size: calc(16px * var(--k)); font-weight: 800; color: var(--positive); } .k-confirm small { font-size: calc(15px * var(--k)); color: var(--muted); }
.k-hint { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); line-height: 1.4; margin: 0; display: block; }
.k-hint.center { text-align: center; }
.k-calrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.k-attend { display: flex; gap: calc(8px * var(--k)); }
.k-textbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: calc(8px * var(--k)); border-radius: calc(14px * var(--k)); font-size: calc(15px * var(--k)); font-weight: 700; min-height: calc(44px * var(--k)); }
.k-textbtn.good { color: var(--positive); background: rgba(55, 148, 95, 0.1); } .k-textbtn.bad { color: var(--negative); background: rgba(204, 85, 85, 0.1); } .k-textbtn.muted { color: var(--muted); background: var(--cardAlt); }

/* ── כותרות ────────────────────────────────────────────────────────── */
.k-stitle { display: flex; align-items: center; gap: calc(12px * var(--k)); padding: calc(6px * var(--k)) 0; }
.k-stitle i, .k-sec i { flex: 1; height: 1px; background: var(--border); }
.k-stitle span { font-family: var(--fd); font-weight: 600; font-size: calc(26px * var(--k)); line-height: 1.2; max-width: 76%; text-align: center; }
.k-sec { display: flex; align-items: center; gap: calc(12px * var(--k)); padding-bottom: calc(12px * var(--k)); }
.k-sec span { font-family: var(--fd); font-weight: 600; font-size: calc(22px * var(--k)); line-height: 1.2; max-width: 76%; text-align: center; }
.k-ghead { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); padding-bottom: calc(12px * var(--k)); }
.k-ghead span { font-family: var(--fd); font-weight: 600; font-size: calc(22px * var(--k)); line-height: 1.2; }
.k-ghead b { width: calc(56px * var(--k)); height: 3px; border-radius: 999px; background: var(--borderStrong); }
.k-ptitle { text-align: center; font-size: calc(16px * var(--k)); font-weight: 800; padding: calc(22px * var(--k)) 0 calc(10px * var(--k)); }
.k-gap8 { height: calc(8px * var(--k)); } .k-gap10 { height: calc(10px * var(--k)); } .k-gap12 { height: calc(12px * var(--k)); } .k-gap20 { height: calc(20px * var(--k)); } .k-gap24 { height: calc(24px * var(--k)); }
.k-center { text-align: center; display: flex; justify-content: center; }
p.k-center { display: block; margin: 0; }
.k-center.muted, .k-center .muted, p.muted { color: var(--muted); }
.k-center.good { color: var(--positive); font-weight: 700; }
.k-div { display: block; height: 1px; background: var(--border); margin: calc(8px * var(--k)) 0; }

/* ── כרטיס (appCardDecoration): 18, מסגרת 1, צל 0 4 12 ───────────────── */
.k-card { display: flex; flex-direction: column; gap: calc(12px * var(--k)); width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: calc(18px * var(--k)); padding: calc(16px * var(--k)); box-shadow: 0 4px 12px var(--shadow); margin-bottom: calc(12px * var(--k)); text-align: start; }
.k-card.strong { border-color: var(--borderStrong); }
.k-card.home { padding: calc(20px * var(--k)); margin-bottom: calc(16px * var(--k)); align-items: center; }
.k-card.hi { background: var(--accentSoft); border-color: rgba(18, 147, 157, 0.4); }
.k-card.pad20 { padding: calc(20px * var(--k)); }
.k-card.today { padding: calc(8px * var(--k)) calc(16px * var(--k)); gap: 0; margin-bottom: 0; }
.k-card.today .k-div { margin: 0; }
.k-card.meal { padding: calc(20px * var(--k)); gap: calc(10px * var(--k)); margin-bottom: 0; }
.k-card.meal.split, .k-card.meal.hi { padding: calc(16px * var(--k)); }
.k-card.client { padding: calc(20px * var(--k)); margin-bottom: calc(16px * var(--k)); gap: 0; }
.k-card.chatrow { padding: calc(18px * var(--k)) calc(20px * var(--k)); margin-bottom: calc(16px * var(--k)); }
.k-card.pay { padding: calc(18px * var(--k)) calc(20px * var(--k)); margin-bottom: calc(16px * var(--k)); }
.k-card.request { padding: calc(20px * var(--k)); margin-bottom: calc(16px * var(--k)); }
.k-card.pane { gap: calc(8px * var(--k)); margin-bottom: 0; }
.k-hcard-t { display: flex; align-items: center; gap: calc(10px * var(--k)); font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); }
.k-hcard-t svg { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.k-hcard-b { margin: 0; text-align: center; color: var(--muted); font-size: calc(15px * var(--k)); }
.k-hcard-n { margin: calc(-6px * var(--k)) 0 0; text-align: center; color: var(--faint); font-size: calc(12px * var(--k)); }
.k-avrow { display: flex; justify-content: center; gap: calc(10px * var(--k)); }

/* אווטאר (client_avatar): ריבוע מעוגל 0.3056, טבעת 1.5 + ריפוד 2.5 */
.k-av { display: inline-flex; padding: calc(2.5px * var(--k)); background: var(--card); border: calc(1.5px * var(--k)) solid transparent; border-radius: calc((var(--s) * 0.3056 + 3px) * var(--k)); box-sizing: content-box; flex: none; }
.k-av.ring-trainee { border-color: var(--trainee); } .k-av.ring-coach { border-color: var(--coach); }
.k-av.noring { padding: 0; border: 0; }
.k-av i { width: calc(var(--s) * var(--k)); height: calc(var(--s) * var(--k)); border-radius: calc(var(--s) * 0.3056 * var(--k)); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: calc(var(--s) * 0.35 * var(--k)); }
.k-av.big i { border-radius: calc(20px * var(--k)); font-size: calc(22px * var(--k)); }
.av-blue { background: #DBEAFE; color: #1A3A6B; } .av-green { background: #D1FAE5; color: #065F46; } .av-amber { background: #FEF3C7; color: #92400E; } .av-purple { background: #F3E8FF; color: #6D28D9; }

/* כפתורים (app_buttons) */
.k-primary { display: inline-flex; align-items: center; justify-content: center; gap: calc(7px * var(--k)); width: 100%; padding: calc(13px * var(--k)) 0; border-radius: 999px; font-size: calc(16px * var(--k)); font-weight: 700; line-height: 1.35; background: var(--coach); color: #fff; box-sizing: border-box; }
.k-primary.v-trainee { background: var(--trainee); color: var(--onTrainee); }
.k-primary.v-ink { background: var(--ink); color: var(--onInk); }
.k-primary.v-negative { background: var(--negative); }
.k-primary.disabled { background: var(--cardAlt); color: var(--faint); }
.k-primary.narrow { max-width: calc(240px * var(--k)); }
.k-primary:active, .k-secondary:active, .k-eat:active, .k-eatctl:active { transform: scale(0.98); }
.k-secondary { display: inline-flex; align-items: center; justify-content: center; gap: calc(7px * var(--k)); width: 100%; padding: calc(12px * var(--k)) 0; border-radius: calc(14px * var(--k)); font-size: calc(16px * var(--k)); font-weight: 700; line-height: 1.35; background: var(--card); color: var(--coach); border: 1.5px solid var(--coach); box-sizing: border-box; }
.k-secondary.v-trainee { color: var(--trainee); border-color: var(--trainee); }
.dp[data-side="trainee"] .k-secondary:not(.v-coach) { color: var(--trainee); border-color: var(--trainee); }
.dp[data-side="trainee"] .k-page .k-secondary.neutral, .k-secondary.neutral { color: var(--ink); border: 1.2px solid var(--borderStrong); }
.k-secondary.joined { border-radius: 0 0 calc(14px * var(--k)) calc(14px * var(--k)); border-top: 0; }
.k-compact { display: inline-flex; align-items: center; gap: calc(8px * var(--k)); padding: calc(8px * var(--k)) calc(12px * var(--k)); border-radius: 999px; font-size: calc(13px * var(--k)); font-weight: 700; min-height: calc(40px * var(--k)); box-sizing: border-box; }
.k-compact.secondary { background: var(--accentSoft); color: var(--coach); border: 1px solid rgba(18, 147, 157, 0.4); }
.k-badge { display: inline-flex; align-items: center; justify-content: center; gap: calc(5px * var(--k)); padding: calc(7px * var(--k)) calc(14px * var(--k)); border-radius: calc(20px * var(--k)); font-size: calc(13px * var(--k)); font-weight: 800; line-height: 1.25; }
.k-badge .bi { width: calc(14px * var(--k)); height: calc(14px * var(--k)); }
.k-badge.needs { background: var(--badSoft); color: var(--negative); } .k-badge.ok { background: var(--goodSoft); color: var(--positive); } .k-badge.noInfo { background: var(--cardAlt); color: var(--muted); }
.k-opens { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); padding: calc(8px * var(--k)) calc(24px * var(--k)); border-radius: 999px; background: var(--cardAlt); color: var(--muted); border: 1px solid var(--border); font-size: calc(13px * var(--k)); font-weight: 700; min-height: calc(34px * var(--k)); box-sizing: border-box; }
.k-filter { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); padding: calc(10px * var(--k)) calc(20px * var(--k)); border-radius: calc(18px * var(--k)); background: var(--coach); color: #fff; font-size: calc(14px * var(--k)); font-weight: 700; }
.k-filter.v-trainee { background: var(--trainee); color: var(--onTrainee); }
.k-filter .bi { width: calc(16px * var(--k)); height: calc(16px * var(--k)); }
.k-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.2px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)); color: var(--faint); font-size: calc(16px * var(--k)); margin-bottom: calc(10px * var(--k)); }
.k-search .bi { width: calc(20px * var(--k)); height: calc(20px * var(--k)); color: var(--muted); }
.k-filterrow { position: relative; display: flex; justify-content: center; }
.k-archive { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); }
.k-count { text-align: center; font-size: calc(13px * var(--k)); font-weight: 800; color: var(--muted); letter-spacing: 0.6px; padding: calc(14px * var(--k)) 0; }
.k-context { margin: 0 0 calc(12px * var(--k)); text-align: center; font-size: calc(12px * var(--k)); color: var(--muted); }
.k-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(4px * var(--k)); padding: calc(12px * var(--k)); }
.k-empty .ring { width: calc(72px * var(--k)); height: calc(72px * var(--k)); border-radius: 999px; background: var(--cardAlt); color: var(--faint); display: inline-flex; align-items: center; justify-content: center; margin-bottom: calc(16px * var(--k)); }
.k-empty .ring .bi { width: calc(32px * var(--k)); height: calc(32px * var(--k)); }
.k-empty b { font-size: calc(16px * var(--k)); font-weight: 500; line-height: 1.35; } .k-empty p { margin: 0; color: var(--muted); font-size: calc(15px * var(--k)); }
.k-empty.compact { flex-direction: row; gap: calc(8px * var(--k)); padding: calc(4px * var(--k)) 0; text-align: start; }
.k-empty.compact b { font-weight: 700; font-size: calc(15px * var(--k)); }
.k-empty.positive .bi { width: calc(22px * var(--k)); height: calc(22px * var(--k)); flex: none; }
.k-empty.compact.stack { flex-direction: column; align-items: center; text-align: center; }
.k-empty.compact.stack > .bi { width: calc(22px * var(--k)); height: calc(22px * var(--k)); }
.k-empty.compact.stack b { font-weight: 500; font-size: calc(16px * var(--k)); }

/* שורות */
.k-crow { display: flex; align-items: center; gap: calc(16px * var(--k)); }
.k-crow .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6px * var(--k)); }
.k-crow .col b { font-family: var(--fd); font-weight: 800; font-variation-settings: 'wght' 700; font-size: calc(20px * var(--k)); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-crow .col small { font-size: calc(15px * var(--k)); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }   /* המסך שלנו צר מ-390dp — שתי שורות במקום קיצוץ באמצע תאריך */
.k-crow .tags { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6px * var(--k)); flex: none; }
.k-crow.chat { gap: calc(16px * var(--k)); }
.k-crow.chat .meta { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6px * var(--k)); flex: none; }
.k-crow.chat time { font-size: calc(13px * var(--k)); color: var(--muted); }
.k-crow .avwrap { position: relative; display: inline-flex; }
.k-crow .online { position: absolute; top: -2px; inset-inline-start: -2px; width: 10px; height: 10px; border-radius: 999px; background: var(--positive); border: 2px solid var(--card); }
.k-count-badge { min-width: calc(22px * var(--k)); height: calc(22px * var(--k)); padding: 0 calc(6px * var(--k)); border-radius: 999px; background: var(--coach); color: #fff; font-size: calc(12px * var(--k)); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; }
.k-mini { margin-top: calc(12px * var(--k)); padding: calc(12px * var(--k)); background: var(--cardAlt); border: 1px solid var(--border); border-radius: calc(14px * var(--k)); }
.k-mini .row { display: flex; align-items: center; gap: calc(12px * var(--k)); }
.k-mini .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-mini .col small { font-size: calc(13px * var(--k)); font-weight: 600; color: var(--muted); } .k-mini .col b { font-size: calc(16px * var(--k)); font-weight: 500; }
.k-daybubble { display: inline-flex; flex-direction: column; align-items: center; padding: calc(6px * var(--k)) calc(10px * var(--k)); background: var(--accentSoft); border-radius: calc(12px * var(--k)); color: var(--coach); flex: none; }
.k-daybubble b { font-family: var(--fd); font-weight: 800; font-variation-settings: 'wght' 700; font-size: calc(20px * var(--k)); line-height: 1; } .k-daybubble small { font-size: calc(11px * var(--k)); }
.k-mini .k-div { margin: calc(12px * var(--k)) 0; }
.k-trow { display: flex; align-items: center; gap: calc(16px * var(--k)); min-height: calc(56px * var(--k)); padding: calc(12px * var(--k)) calc(4px * var(--k)); width: 100%; border-radius: calc(14px * var(--k)); }
.k-trow:active { background: var(--cardAlt); }
.k-trow .bi { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.k-trow .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4px * var(--k)); }
.k-trow small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-trow b { font-size: calc(16px * var(--k)); font-weight: 500; line-height: 1.35; }
.k-row-ic { display: flex; align-items: center; gap: calc(12px * var(--k)); }
.k-row-ic.top { align-items: flex-start; }
.k-row-ic .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-row-ic .col small { font-size: calc(12px * var(--k)); color: var(--muted); }
.k-row-ic b { font-size: calc(15px * var(--k)); font-weight: 700; }
.k-door { display: flex; align-items: center; gap: calc(12px * var(--k)); padding: calc(4px * var(--k)) 0; }
.k-door b { flex: 1; font-size: calc(15px * var(--k)); font-weight: 700; }

/* פגישות */
.k-chead { display: flex; align-items: center; gap: calc(8px * var(--k)); }
.k-chead b { flex: 1; text-align: center; font-size: calc(16px * var(--k)); font-weight: 800; }
.k-date { display: inline-flex; flex-direction: column; align-items: center; padding: calc(8px * var(--k)) calc(10px * var(--k)); border-radius: calc(14px * var(--k)); background: var(--accentSoft); color: var(--coach); width: calc(52px * var(--k)); box-sizing: border-box; }
.k-date b { font-size: calc(16px * var(--k)); font-weight: 800; line-height: 1; } .k-date small { font-size: calc(12px * var(--k)); font-weight: 600; margin-top: 2px; }
.k-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8px * var(--k)) ; }
.k-ctag { display: inline-block; padding: calc(4px * var(--k)) calc(12px * var(--k)); border-radius: calc(14px * var(--k)); font-size: calc(12px * var(--k)); font-weight: 800; }
.k-ctag.ok { background: var(--goodSoft); color: var(--positive); } .k-ctag.bad { background: var(--badSoft); color: var(--negative); } .k-ctag.noInfo { background: var(--cardAlt); color: var(--muted); }
.k-stag { display: inline-block; padding: calc(6px * var(--k)) calc(12px * var(--k)); border-radius: 999px; font-size: calc(15px * var(--k)); font-weight: 700; }
.k-stag.c-coach { background: rgba(18, 147, 157, 0.12); color: var(--coach); } .k-stag.c-positive { background: rgba(55, 148, 95, 0.12); color: var(--positive); } .k-stag.c-negative { background: rgba(204, 85, 85, 0.12); color: var(--negative); } .k-stag.c-muted { background: rgba(92, 107, 117, 0.12); color: var(--muted); }
.k-heading { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(6px * var(--k)); text-align: center; }
.k-heading .l { font-size: calc(15px * var(--k)); font-weight: 600; color: var(--muted); }
.k-heading .t { font-family: var(--fd); font-weight: 500; font-size: calc(17px * var(--k)); }
.k-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8px * var(--k)) calc(12px * var(--k)); }
.k-inline { display: inline-flex; gap: calc(6px * var(--k)); font-size: calc(15px * var(--k)); white-space: nowrap; }
.k-inline .l { font-weight: 600; color: var(--muted); } .k-inline b { font-weight: 700; } .k-inline b.warn { color: var(--negative); }
.k-received { text-align: start; font-size: calc(12px * var(--k)); color: var(--faint); }
.k-footer { display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--k)); padding-top: calc(12px * var(--k)); border-top: 1px solid var(--border); font-size: calc(13px * var(--k)); font-weight: 700; line-height: 1.35; }
.k-actions { display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.k-actions .row { display: flex; gap: calc(8px * var(--k)); } .k-actions .row > * { flex: 1; }
.k-catbar { display: flex; justify-content: center; margin: 0 auto; padding: calc(6px * var(--k)); background: var(--card); border: 1px solid var(--border); border-radius: calc(30px * var(--k)); box-shadow: 0 calc(8px * var(--k)) calc(24px * var(--k)) var(--shadow); width: max-content; max-width: 100%; }
.k-cat { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); margin: 0 calc(2px * var(--k)); padding: calc(9px * var(--k)) calc(14px * var(--k)); border-radius: calc(22px * var(--k)); color: var(--faint); font-size: calc(12px * var(--k)); font-weight: 700; }
.k-cat.on { background: var(--coach); color: #fff; } .k-cat.on.v-trainee { background: var(--trainee); color: var(--onTrainee); }
.k-catbar:not(.is-open) .k-cat:not(.on) { display: none; }

/* פרופיל הלקוח */
.k-profile { display: flex; flex-direction: column; min-height: 100%; }
.k-phead { display: flex; align-items: center; gap: calc(4px * var(--k)); padding: calc(8px * var(--k)) calc(16px * var(--k)) calc(4px * var(--k)) calc(8px * var(--k)); }
.k-phead b { flex: 1; font-family: var(--fd); font-weight: 600; font-size: calc(20px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-iconbtn { width: calc(48px * var(--k)); height: calc(48px * var(--k)); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex: none; }
.k-iconbtn .bi { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.k-hero { display: flex; gap: calc(12px * var(--k)); padding: calc(8px * var(--k)) calc(20px * var(--k)) calc(16px * var(--k)); align-items: flex-start; }
.k-hero .who { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: calc(12px * var(--k)); }   /* בלי זה האווטאר (inline-flex ברקע לבן) נמתח לרוחב העמודה ונראה כמלבן ריק */
.k-hero .facts { display: flex; flex-direction: column; gap: calc(8px * var(--k)); font-size: calc(13px * var(--k)); }
.k-hero .facts i { font-style: normal; font-weight: 600; color: var(--muted); } .k-hero .facts b { font-weight: 700; }
.k-hero .tagsbox { width: calc(168px * var(--k)); flex: none; display: flex; flex-direction: column; gap: calc(4px * var(--k)); padding: calc(8px * var(--k)); background: var(--cardAlt); border: 1px solid var(--border); border-radius: calc(16px * var(--k)); box-sizing: border-box; }
.k-hero .tagsbox .k-badge { justify-content: center; }
.k-hero .gt { background: var(--card); border-radius: calc(8px * var(--k)); padding: 3px; text-align: center; font-size: calc(13px * var(--k)); font-weight: 800; letter-spacing: 0.4px; }
.k-hero .reason { display: block; text-align: center; font-size: calc(12px * var(--k)); color: var(--muted); line-height: 1.35; }
.k-goal { display: inline-block; text-align: center; padding: calc(7px * var(--k)) calc(14px * var(--k)); border-radius: calc(20px * var(--k)); background: var(--accentSoft); color: var(--coach); font-size: calc(13px * var(--k)); font-weight: 800; }
.k-hero .k-div { margin: calc(8px * var(--k)) 0; }
.k-tabbar { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.k-tabbar button { flex: 1; text-align: center; padding: calc(14px * var(--k)) 0; font-size: calc(14px * var(--k)); font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; }
.k-tabbar button.on { color: var(--coach); border-bottom-color: var(--coach); }
.k-panel { padding: calc(4px * var(--k)) calc(20px * var(--k)) calc(24px * var(--k)); display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
.k-expand { background: var(--card); border: 1px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)); }
.k-expand.open { border-color: var(--borderStrong); }
.k-expand .head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); text-align: center; }
.k-expand .head b { font-family: var(--fd); font-weight: 600; font-size: calc(20px * var(--k)); } .k-expand .head small { font-size: calc(15px * var(--k)); color: var(--muted); }
.k-expand .body { display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
.k-expand .body .k-div { margin: calc(8px * var(--k)) 0 0; }
.k-vine { display: flex; justify-content: space-between; padding: calc(12px * var(--k)) 0 calc(4px * var(--k)); position: relative; }
.k-vine::before { content: ""; position: absolute; top: calc(12px * var(--k) + 4px); left: 0; right: 0; height: 3px; background: rgba(20, 33, 42, 0.8); }
.k-vine .day { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); position: relative; flex: 1; }
.k-vine .knot { width: 9px; height: 9px; border-radius: 999px; background: var(--ink); position: relative; top: 0; } .k-vine .today .knot { width: 13px; height: 13px; background: var(--coach); margin-top: -2px; }
.k-vine .branch { width: 2px; height: calc(10px * var(--k)); background: rgba(20, 33, 42, 0.8); } .k-vine .future .branch { background: rgba(20, 33, 42, 0.35); }
.k-vine b { font-size: calc(13px * var(--k)); font-weight: 600; } .k-vine .today b { color: var(--coach); font-weight: 800; } .k-vine .future b { color: var(--faint); }
.k-vine .g { width: calc(22px * var(--k)); height: calc(22px * var(--k)); border-radius: 999px; border: 1.5px solid var(--faint); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.k-vine .g.ok { background: var(--positive); border-color: var(--positive); } .k-vine .g.ok::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.k-vine .g.miss { background: var(--badSoft); border-color: var(--negative); } .k-vine .g.miss::after { content: "×"; color: var(--negative); font-size: 11px; font-weight: 700; line-height: 1; }
.k-vine .g.open { border-color: var(--coach); } .k-vine .g.fut { border-color: var(--faint); } .k-vine .g.ex { background: var(--cardAlt); border-color: var(--muted); }
.k-adapt { display: flex; justify-content: center; padding: calc(16px * var(--k)); background: var(--card); border: 1px solid var(--borderStrong); border-radius: calc(18px * var(--k)); }
.k-adapt .t { display: inline-flex; align-items: center; gap: calc(8px * var(--k)); font-size: calc(16px * var(--k)); font-weight: 800; }
.k-infobox { background: var(--card); border: 1px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(14px * var(--k)); display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.k-infobox .k-div { margin: calc(4px * var(--k)) 0; }
.k-infobox .k-ts { font-size: calc(14px * var(--k)); font-weight: 500; }
.k-curw { background: var(--cardAlt); border: 1.2px solid var(--borderStrong); border-radius: calc(14px * var(--k)) calc(14px * var(--k)) 0 0; padding: calc(10px * var(--k)) calc(20px * var(--k)); display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: calc(6px * var(--k)); }
.k-curw small { font-size: calc(12px * var(--k)); color: var(--muted); } .k-curw b { font-family: var(--fd); font-weight: 800; font-variation-settings: 'wght' 700; font-size: calc(20px * var(--k)); color: var(--trainee); }
.k-infobox .k-secondary.joined { margin-top: -1px; }

/* צ'אט */
.k-thead { display: flex; align-items: center; gap: calc(10px * var(--k)); padding: calc(8px * var(--k)) calc(12px * var(--k)) calc(10px * var(--k)) calc(8px * var(--k)); background: var(--card); border-bottom: 1px solid var(--border); flex: none; width: 100%; box-sizing: border-box; }
.k-thead .who { display: flex; align-items: center; gap: calc(10px * var(--k)); flex: 1; }
.k-thead b { font-size: calc(16px * var(--k)); font-weight: 700; }
.k-thead.trainee { padding: calc(12px * var(--k)) calc(16px * var(--k)); gap: calc(12px * var(--k)); }
.k-thead.trainee .col { display: flex; flex-direction: column; gap: 2px; } .k-thead.trainee small { font-size: calc(12px * var(--k)); color: var(--muted); }
.k-bubbles { flex: 1; display: flex; flex-direction: column; gap: calc(10px * var(--k)); padding: calc(16px * var(--k)); }
.k-bubbles.navpad { padding-bottom: calc(88px * var(--k)); }
.k-bub { max-width: calc(300px * var(--k)); padding: calc(9px * var(--k)) calc(12px * var(--k)); border-radius: calc(16px * var(--k)); font-size: calc(15px * var(--k)); line-height: 1.4; display: flex; flex-direction: column; gap: calc(5px * var(--k)); }
.k-bub time { font-size: calc(11px * var(--k)); opacity: 0.78; }
.k-bub.theirs { align-self: flex-start; } .k-bub.mine { align-self: flex-end; }
.k-bub.from-trainer { background: var(--coach); color: #fff; } .k-bub.from-trainee { background: var(--trainee); color: var(--onTrainee); }
.k-bub.cardwrap { padding: calc(6px * var(--k)); border-radius: calc(18px * var(--k)); max-width: calc(300px * var(--k)); }
.k-coord { background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)); display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.k-coord .t { display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--k)); font-size: calc(16px * var(--k)); font-weight: 800; }
.k-coord .stamp { text-align: center; font-size: calc(11px * var(--k)); color: var(--muted); }
.k-input { display: flex; align-items: flex-end; gap: calc(4px * var(--k)); padding: calc(8px * var(--k)) calc(16px * var(--k)) calc(12px * var(--k)) calc(8px * var(--k)); background: var(--card); border-top: 1px solid var(--border); flex: none; }
.k-input .field { flex: 1; background: var(--card); border: 1.2px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(12px * var(--k)) calc(14px * var(--k)); font-size: calc(16px * var(--k)); min-height: 1.35em; }
.k-input .send { width: calc(48px * var(--k)); height: calc(48px * var(--k)); border-radius: 999px; background: var(--coach); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; animation: k-pop 0.4s cubic-bezier(0.05, 0.7, 0.1, 1) both; }
.k-input .send.v-trainee { background: var(--trainee); color: var(--onTrainee); }
.k-input .send .bi { transform: scaleX(-1); }
.k-input > .bi { width: calc(24px * var(--k)); height: calc(24px * var(--k)); margin: calc(12px * var(--k)) calc(6px * var(--k)); }
.k-input .btns { display: flex; align-items: center; justify-content: center; gap: calc(4px * var(--k)); width: calc(148px * var(--k)); flex: none; }
.k-input .btns > .bi { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.k-input .apps { width: calc(40px * var(--k)); height: calc(40px * var(--k)); border-radius: 999px; background: var(--cardAlt); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.k-input .apps .bi { width: calc(22px * var(--k)); height: calc(22px * var(--k)); }

/* היום / תזונה / אימונים (trainee) */
.k-voicepill { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(6px * var(--k)); padding: calc(4px * var(--k)) calc(11px * var(--k)); border: 2px solid var(--coach); border-radius: 999px; font-size: calc(13px * var(--k)); font-weight: 700; }
.k-voicepill .bi { width: calc(13px * var(--k)); height: calc(13px * var(--k)); color: var(--coach); }
.k-mealname { font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); line-height: 1.2; display: block; }
.k-mealname.sm { font-family: var(--fb); font-weight: 800; font-size: calc(16px * var(--k)); }
.k-mealname.fd { font-family: var(--fd); }
.k-mealtime { display: flex; align-items: center; gap: calc(6px * var(--k)); font-size: calc(15px * var(--k)); color: var(--muted); margin-top: calc(-6px * var(--k)); }
.k-mealtime .bi { width: calc(15px * var(--k)); height: calc(15px * var(--k)); }
.k-lbl { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); margin-top: calc(-8px * var(--k)); }
.k-sources { display: flex; flex-direction: column; gap: calc(12px * var(--k)); }
.k-sources .grp { display: flex; flex-direction: column; gap: calc(4px * var(--k)); }
.k-sources .gh { font-size: calc(15px * var(--k)); } .k-sources .gh b { font-weight: 800; } .k-sources .gh span { color: var(--muted); }
.k-sources .src { display: block; width: 100%; padding: calc(2px * var(--k)) calc(8px * var(--k)) calc(4px * var(--k)); font-size: calc(15px * var(--k)); font-weight: 600; border-radius: calc(14px * var(--k)); }
.k-sources .src.picked { font-weight: 800; } .k-sources .src.dim { color: var(--muted); }
.k-macros { display: flex; gap: calc(8px * var(--k)); }
.k-macros .cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); padding: calc(8px * var(--k)); background: var(--cardAlt); border-radius: calc(14px * var(--k)); text-align: center; }
.k-macros small { font-size: calc(11px * var(--k)); font-weight: 600; color: var(--muted); }
.k-macros b { font-family: var(--fn); font-weight: 400; font-size: calc(17px * var(--k)); font-variant-numeric: tabular-nums; }
.k-macros b i { font-family: var(--fb); font-style: normal; font-size: calc(12px * var(--k)); color: var(--muted); margin-inline-start: 3px; }
.k-eat { display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--k)); width: 100%; min-height: calc(48px * var(--k)); padding: 0 calc(8px * var(--k)); border-radius: 999px; background: var(--trainee); color: var(--onTrainee); font-size: calc(16px * var(--k)); font-weight: 700; box-sizing: border-box; }
.k-eat .bi { width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
.k-eat.compact { min-height: calc(40px * var(--k)); font-size: calc(13px * var(--k)); } .k-eat.compact .bi { width: calc(17px * var(--k)); height: calc(17px * var(--k)); }
.k-eatctl { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: calc(44px * var(--k)); border-radius: calc(14px * var(--k)); background: var(--card); border: 1px solid var(--borderStrong); font-size: calc(13px * var(--k)); font-weight: 700; box-sizing: border-box; }
.k-eatrow { display: flex; gap: calc(8px * var(--k)); align-items: stretch; }
.k-eatrow .eaten { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(4px * var(--k)); min-height: calc(44px * var(--k)); border-radius: calc(14px * var(--k)); background: var(--goodSoft); color: var(--positive); font-size: calc(13px * var(--k)); font-weight: 700; }
.k-eatrow .undo { padding: 0 calc(16px * var(--k)); min-height: calc(44px * var(--k)); border-radius: calc(14px * var(--k)); border: 1px solid var(--borderStrong); font-size: calc(13px * var(--k)); font-weight: 700; }
.k-split { display: flex; align-items: stretch; }
.k-split .half { flex: 1; display: flex; flex-direction: column; gap: calc(8px * var(--k)); align-items: flex-start; }
.k-split .half:first-child { padding-inline-end: calc(12px * var(--k)); } .k-split .half:last-child { padding-inline-start: calc(12px * var(--k)); }
.k-split .vdiv { width: 1px; background: var(--border); }
.k-split small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-split b { font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); line-height: 1.2; } .k-split b.muted { color: var(--muted); }
.k-split .done { display: inline-flex; align-items: center; gap: calc(4px * var(--k)); font-size: calc(15px * var(--k)); font-weight: 700; }
.k-split .half:last-child small { font-weight: 400; margin-top: calc(-4px * var(--k)); }
.k-seg { display: flex; padding: calc(4px * var(--k)); background: var(--cardAlt); border-radius: 999px; margin-bottom: calc(12px * var(--k)); }
.k-seg button { flex: 1; min-height: calc(40px * var(--k)); border-radius: 999px; text-align: center; font-size: calc(15px * var(--k)); font-weight: 700; color: var(--muted); }
.k-seg button.on { background: var(--ink); color: var(--onInk); }
.k-varhead { display: flex; flex-direction: column; gap: calc(4px * var(--k)); }
.k-varhead b { font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); } .k-varhead small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); line-height: 1.35; }
.k-bignum { display: flex; align-items: baseline; gap: calc(8px * var(--k)); justify-content: flex-start; }
.k-bignum b { font-family: var(--fd); font-weight: 500; font-size: calc(22px * var(--k)); font-variant-numeric: tabular-nums; } .k-bignum span { font-size: calc(15px * var(--k)); color: var(--muted); }
.k-from { text-align: left; font-size: calc(15px * var(--k)); color: var(--muted); direction: ltr; }
.k-chart { width: 100%; height: calc(var(--h) * var(--k)); display: block; }
.k-range { display: flex; padding: calc(4px * var(--k)); background: var(--cardAlt); border-radius: 999px; }
.k-range button { flex: 1; min-height: calc(34px * var(--k)); border-radius: 999px; text-align: center; font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-range button.on { background: var(--ink); color: var(--onInk); }
.k-footnote { margin: calc(12px * var(--k)) calc(8px * var(--k)) 0; text-align: center; font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); line-height: 1.4; }
.k-goalline { margin: calc(4px * var(--k)) 0 0; text-align: center; font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-dayname { margin: 0 0 calc(8px * var(--k)); text-align: center; font-size: calc(13px * var(--k)); font-weight: 700; color: var(--coach); }
.k-celebrate { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--k)); text-align: center; }
.k-celebrate .big { width: calc(72px * var(--k)); height: calc(72px * var(--k)); border-radius: 999px; background: var(--cardAlt); color: var(--trainee); display: inline-flex; align-items: center; justify-content: center; border: 2.4px solid rgba(240, 124, 26, 0.85); animation: k-pop 0.6s cubic-bezier(0.05, 0.7, 0.1, 1) both; }
.k-celebrate .big .bi { width: calc(40px * var(--k)); height: calc(40px * var(--k)); stroke-width: 3; }
.k-celebrate b { font-size: calc(15px * var(--k)); font-weight: 700; line-height: 1.35; }
.k-tile { background: var(--card); border: 1px solid var(--border); border-radius: calc(18px * var(--k)); box-shadow: 0 4px 12px var(--shadow); margin-bottom: calc(12px * var(--k)); }
.k-tile.open { border-color: var(--borderStrong); }
.k-tile .head { width: 100%; display: flex; align-items: center; gap: calc(8px * var(--k)); padding: calc(16px * var(--k)); }
.k-tile .head .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--k)); }
.k-tile .head b { font-size: calc(15px * var(--k)); font-weight: 700; } .k-tile .head b.fd { font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); }
.k-tile .head small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-tile .head .range { display: inline-flex; align-items: center; gap: calc(4px * var(--k)); font-size: calc(12px * var(--k)); margin-top: calc(2px * var(--k)); } .k-tile .head .range .bi { width: calc(13px * var(--k)); height: calc(13px * var(--k)); }
.k-tile .head .chev { width: calc(24px * var(--k)); height: calc(24px * var(--k)); }
.k-tile.open .head .chev { transform: rotate(180deg); }
.k-tile .body { padding: 0 calc(16px * var(--k)) calc(16px * var(--k)); display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.k-tile .body .k-div { margin: 0 0 calc(4px * var(--k)); }
.k-donechip { display: inline-flex; align-items: center; gap: calc(4px * var(--k)); padding: calc(3px * var(--k)) calc(10px * var(--k)); border-radius: 999px; background: var(--cardAlt); font-size: calc(13px * var(--k)); font-weight: 700; margin-inline-end: calc(8px * var(--k)); }
.k-donechip .bi { width: calc(14px * var(--k)); height: calc(14px * var(--k)); }
/* ביצוע אימון */
.k-ahead { display: flex; align-items: center; gap: calc(4px * var(--k)); padding: calc(8px * var(--k)) calc(16px * var(--k)) calc(8px * var(--k)) calc(8px * var(--k)); }
.k-ahead b { flex: 1; font-family: var(--fd); font-weight: 600; font-size: calc(26px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-timer { display: inline-flex; align-items: center; gap: calc(5px * var(--k)); padding: calc(6px * var(--k)) calc(12px * var(--k)); border-radius: 999px; background: var(--accentSoft); color: var(--coach); font-size: calc(13px * var(--k)); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.k-timer .bi { width: calc(14px * var(--k)); height: calc(14px * var(--k)); }
.k-body16 { padding: calc(16px * var(--k)); display: flex; flex-direction: column; gap: calc(12px * var(--k)); }
.k-excard { background: var(--card); border: 1px solid var(--border); border-radius: calc(18px * var(--k)); box-shadow: 0 4px 12px var(--shadow); padding: calc(16px * var(--k)); display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); text-align: center; }
.k-excard b { font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); } .k-excard small { font-size: calc(16px * var(--k)); font-weight: 500; color: var(--muted); }
.k-excard .prev { width: 100%; padding: calc(10px * var(--k)) 0; margin-top: calc(8px * var(--k)); background: var(--accentSoft); border-radius: calc(14px * var(--k)); color: var(--coach); font-family: var(--fd); font-weight: 500; font-size: calc(20px * var(--k)); }
.k-excard .k-field { margin-top: calc(12px * var(--k)); }
.k-note { display: flex; flex-direction: column; gap: calc(6px * var(--k)); }
.k-note small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-note .k-fieldbox { color: var(--faint); min-height: 2.8em; }
/* עוד */
.k-payhead { display: flex; align-items: center; gap: calc(12px * var(--k)); }
.k-payhead b { flex: 1; text-align: center; font-family: var(--fd); font-weight: 600; font-size: calc(20px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-payhead .sp { width: calc(46px * var(--k)); flex: none; }
.k-hint.k-center { text-align: center; }
/* תוספות מסבב הביקורת: מסילת ווריאציות, נקודת המתנה, שורת מסנן, גפן אימונים, הערות, תזכורות, אירובי, ציר זמן, באנר חסימה */
.k-filterwrap { display: flex; justify-content: center; margin-bottom: calc(12px * var(--k)); }
.k-filterrow .k-filterwrap { margin-bottom: 0; }
.k-dot { position: absolute; top: calc(2px * var(--k)); inset-inline-end: calc(2px * var(--k)); width: calc(9px * var(--k)); height: calc(9px * var(--k)); border-radius: 999px; background: var(--attention); border: 1.5px solid var(--bg); box-sizing: content-box; }
.k-varhead.withrail { flex-direction: row; align-items: flex-start; gap: calc(12px * var(--k)); }
.k-varhead .txt { flex: 1; display: flex; flex-direction: column; gap: calc(4px * var(--k)); min-width: 0; }
.k-varhead .railhint { font-size: calc(11px * var(--k)); font-weight: 700; color: var(--faint); }
.k-rail { display: flex; flex-direction: column; align-items: center; background: var(--cardAlt); border-radius: 999px; flex: none; }
.k-rail .arr { width: calc(56px * var(--k)); height: calc(30px * var(--k)); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.k-rail .arr.end { color: var(--faint); }
.k-rail .arr .bi { width: calc(24px * var(--k)); height: calc(24px * var(--k)); } .k-rail .arr .bi.up { transform: rotate(180deg); }
.k-rail .dot { width: calc(56px * var(--k)); height: calc(24px * var(--k)); display: inline-flex; align-items: center; justify-content: center; }
.k-rail .dot i { width: calc(10px * var(--k)); height: calc(10px * var(--k)); border-radius: 999px; background: var(--borderStrong); transition: height 0.2s cubic-bezier(0.2, 0, 0, 1), background 0.2s; }
.k-rail .dot.on i { height: calc(16px * var(--k)); background: var(--ink); }
.k-varfoot { margin: calc(8px * var(--k)) 0 0; font-size: calc(11px * var(--k)); font-weight: 700; color: var(--faint); }
.k-adapt { flex-direction: column; gap: calc(10px * var(--k)); align-items: stretch; }
.k-adapt .k-div { margin: 0; }
.k-target { display: flex; align-items: stretch; gap: calc(12px * var(--k)); }
.k-target .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.k-target .col small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); } .k-target .col b { font-size: calc(16px * var(--k)); font-weight: 800; }
.k-target .vdiv { width: 1px; background: var(--border); }
.k-good { display: block; text-align: center; font-size: calc(15px * var(--k)); font-weight: 700; color: var(--positive); }
.k-vine.rest .g.ex { background: var(--cardAlt); border-color: var(--muted); }
.k-missed { margin: 0; text-align: center; font-size: calc(13px * var(--k)); font-weight: 800; color: var(--negative); }
.k-aero { display: flex; align-items: center; gap: calc(8px * var(--k)); padding: calc(8px * var(--k)) calc(12px * var(--k)); background: var(--cardAlt); border: 1px solid var(--border); border-radius: calc(14px * var(--k)); font-size: calc(13px * var(--k)); font-weight: 700; }
.k-mtrack { background: var(--card); border: 1px solid var(--border); border-radius: calc(14px * var(--k)); padding: calc(14px * var(--k)); display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); text-align: center; }
.k-mtrack > b { font-size: calc(16px * var(--k)); font-weight: 800; }
.k-mtrack .val { display: inline-flex; align-items: center; gap: calc(8px * var(--k)); font-size: calc(16px * var(--k)); font-weight: 800; } .k-mtrack .val i { font-style: normal; font-size: calc(15px * var(--k)); }
.k-mtrack small { font-size: calc(12px * var(--k)); color: var(--muted); }
.k-mtrack .k-div { width: 100%; margin: calc(8px * var(--k)) 0; }
.k-mtrack .btns { display: flex; gap: calc(10px * var(--k)); flex-wrap: wrap; justify-content: center; }
.k-noteshead { display: flex; align-items: center; justify-content: space-between; }
.k-noteshead small { font-size: calc(12px * var(--k)); color: var(--muted); }
.k-textlink { color: var(--coach); font-size: calc(14px * var(--k)); font-weight: 700; padding: calc(4px * var(--k)) 0; }
.k-notes { margin: 0; font-size: calc(15px * var(--k)); line-height: 1.5; }
.k-door { display: flex; align-items: center; gap: calc(12px * var(--k)); padding: calc(4px * var(--k)) 0; width: 100%; }
.k-card.selfnote { margin-bottom: 0; }
.k-card.selfnote .lbl { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-card.selfnote b.normal { font-size: calc(15px * var(--k)); font-weight: 400; line-height: 1.35; }
.k-lbl2 { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); }
.k-chips { display: flex; flex-wrap: wrap; gap: calc(8px * var(--k)) calc(4px * var(--k)); margin-top: calc(-4px * var(--k)); }
.k-chip { display: inline-block; padding: calc(3px * var(--k)) calc(12px * var(--k)); border-radius: 999px; background: var(--cardAlt); border: 1.5px solid var(--trainee); font-size: calc(13px * var(--k)); font-weight: 700; }
.k-aerorow { display: flex; gap: calc(8px * var(--k)); align-items: stretch; }
.k-aerorow .k-primary { flex: 1; width: auto; }
.k-donebar { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(4px * var(--k)); min-height: calc(44px * var(--k)); padding: calc(4px * var(--k)) calc(8px * var(--k)); border-radius: 999px; background: var(--cardAlt); font-size: calc(13px * var(--k)); font-weight: 700; text-align: center; box-sizing: border-box; }
.k-undo { min-height: calc(44px * var(--k)); padding: 0 calc(16px * var(--k)); border-radius: calc(14px * var(--k)); border: 1.5px solid var(--borderStrong); font-size: calc(13px * var(--k)); font-weight: 700; }
.k-undo.pill { border-radius: 999px; }
.k-exrow { display: flex; align-items: flex-start; gap: calc(8px * var(--k)); padding: calc(6px * var(--k)) 0; font-size: calc(15px * var(--k)); font-weight: 500; }
.k-exrow .bi { width: calc(16px * var(--k)); height: calc(16px * var(--k)); margin-top: 3px; }
.k-exrow span { flex: 1; } .k-exrow small { font-size: calc(13px * var(--k)); font-weight: 700; color: var(--muted); white-space: nowrap; }
.k-tline { display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.k-tline .row { display: flex; align-items: flex-start; gap: calc(10px * var(--k)); padding-inline-start: calc(10px * var(--k)); border-inline-start: 3px solid currentColor; }
.k-tline .row .col { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.k-tline .row .col b { font-size: calc(15px * var(--k)); font-weight: 600; } .k-tline .row .col small { font-size: calc(12px * var(--k)); color: var(--muted); }
.k-card.block { gap: calc(8px * var(--k)); }
.k-card.block .k-row-ic span { font-size: calc(15px * var(--k)); line-height: 1.4; }
.k-card.block .k-row-ic .bi { width: calc(20px * var(--k)); height: calc(20px * var(--k)); margin-top: 2px; }
.k-disclose { display: inline-flex; align-items: center; gap: calc(4px * var(--k)); color: var(--coach); font-size: calc(15px * var(--k)); font-weight: 700; padding: calc(4px * var(--k)) 0; align-self: flex-start; }
.k-disclose .bi { width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
.k-card.block.pulse { animation: k-pulse 1.05s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes k-pulse { 0% { box-shadow: 0 4px 12px var(--shadow), 0 0 0 0 rgba(18, 147, 157, 0); } 40% { box-shadow: 0 4px 12px var(--shadow), 0 0 0 2.5px rgba(18, 147, 157, 0.9); } 100% { box-shadow: 0 4px 12px var(--shadow), 0 0 0 0 rgba(18, 147, 157, 0); } }
.dp-fab.disabled { background: var(--cardAlt); color: var(--faint); }
.k-detsheet.bg { background: var(--bg); }
.k-secondary.v-negative { color: var(--negative); border-color: rgba(204, 85, 85, 0.45); border-width: 1.2px; font-size: calc(13px * var(--k)); }
.k-card[role="button"], .k-curw[role="button"] { cursor: pointer; }
.k-card[role="button"]:focus-visible { outline: 2px solid var(--coach); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .dp.is-turning, .dp.is-turning .dp-sheen, .dp-wrap.is-flipping .dp-ground, .k-form, .k-detsheet, .k-confirm, .k-celebrate .big, .k-input .send { animation: none !important; }
  .dp-nav, .dp-fab, .dp-tab { transition: none; }
}
.k-textlink { display: inline-flex; align-items: center; gap: calc(4px * var(--k)); }
.k-textlink .bi { width: calc(16px * var(--k)); height: calc(16px * var(--k)); }


/* ── סבב 5: בידוד, שכבות מוכנות מראש, מדידת שיבוט, וצמצום תנועה ── */
.dp-navwrap { contain: layout style; }
.dp-stage { contain: layout paint style; }
.dp-wrap:has(.flip-btn:hover) .dp, .dp-wrap.is-flipping .dp { will-change: rotate, translate, scale, transform; }
.dp-wrap:has(.flip-btn:hover) .dp-ground, .dp-wrap.is-flipping .dp-ground { will-change: transform, opacity; }
/* fitNav מודד שיבוט סמוי של הבר במצב היעד — כך הגלולה נוסעת אל הגאומטריה הסופית בזמן שרוחב הטאב עדיין במעבר */
.dp-nav.measure { position: absolute !important; visibility: hidden !important; pointer-events: none !important; clip-path: none !important; transform: none !important; }
.dp-nav.measure, .dp-nav.measure * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dp-tab, .dp-tab b, .dp-fab { transition: none !important; }
}

/* ── לחצני צד (בעובי המכשיר, אלמנטים אמיתיים): הפעלה מימין; השתקה, עוצמה+ ועוצמה- משמאל; מגש סים ── */
.dp-btn { position: absolute; width: 4.5px; border-radius: 2.5px; background: linear-gradient(90deg, #5c626b 0%, #3a3f46 30%, #22262b 70%, #15181c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), 1px 0 2px rgba(0, 0, 0, 0.35); transform: translateZ(-9.6px); pointer-events: none; }
.dp-btn.power { right: -4.5px; top: 150px; height: 60px; }
.dp-btn.mute { left: -4px; top: 92px; height: 16px; width: 4px; background: linear-gradient(90deg, #15181c 0%, #2a2e34 40%, #464c55 100%); }
.dp-btn.mute::after { content: ""; position: absolute; left: 1px; top: 4px; width: 2px; height: 4px; border-radius: 1px; background: #f07c1a; opacity: 0.85; }
.dp-btn.vol-up { left: -4.5px; top: 122px; height: 34px; background: linear-gradient(90deg, #15181c 0%, #22262b 30%, #3a3f46 70%, #5c626b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), -1px 0 2px rgba(0, 0, 0, 0.35); }
.dp-btn.vol-down { left: -4.5px; top: 164px; height: 34px; background: linear-gradient(90deg, #15181c 0%, #22262b 30%, #3a3f46 70%, #5c626b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6), -1px 0 2px rgba(0, 0, 0, 0.35); }
.dp-tray { position: absolute; left: -1px; top: 400px; width: 2px; height: 44px; border-radius: 1px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); transform: translateZ(-9.6px); pointer-events: none; }
/* ── מסך הפתיחה: כמו פתיחת האפליקציה, עם "התחל הדגמה" — לפני הלחיצה הבמה לא גוללת והגלילה של הדף עוברת דרך הטלפון ── */
.dp-cover { position: absolute; inset: 0; z-index: 8; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12px * var(--k)); padding: 0 calc(24px * var(--k)); transition: opacity 0.45s ease, visibility 0.45s; }
.dp-cover .wm { display: inline-flex; align-items: center; gap: 0.03em; font-family: var(--fd); font-weight: 600; font-size: calc(34px * var(--k)); line-height: 1; margin-bottom: calc(6px * var(--k)); }
.dp-cover .wm .fit { color: var(--coach); } .dp-cover .wm .polis { color: var(--trainee); } .dp-cover .wm .o { width: 0.95em; height: 0.95em; }
.dp-cover p { margin: 0; font-size: calc(14px * var(--k)); line-height: 1.45; color: var(--muted); text-align: center; }
.dp-cover .dp-start { margin-top: calc(12px * var(--k)); background: var(--ink); color: var(--onInk); border-radius: 999px; padding: calc(13px * var(--k)) calc(30px * var(--k)); font-family: var(--fb); font-weight: 700; font-size: calc(16px * var(--k)); box-shadow: 0 8px 24px var(--shadow); cursor: pointer; }
.dp:not(.is-idle) .dp-cover { opacity: 0; visibility: hidden; pointer-events: none; }
.dp.is-idle .dp-stage { overflow: hidden; }
.dp.is-idle .dp-navwrap, .dp.is-idle .dp-topbar { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .dp-cover { transition: none; } }
/* ── לפני "התחל הדגמה": כפתור המעבר והרמז מוסתרים; הבר וה-FAB בשכבה משלהם כדי שלא יצוירו מחדש בכל תזוזה ── */
.flip-btn, .demo-hint { transition: opacity 0.35s ease, visibility 0.35s; }
.dp-wrap.is-idle .flip-btn, .dp-wrap.is-idle .demo-hint { display: none; }   /* יוצאים מהזרימה, אחרת נשאר שטח מת (ורווח ה-flex) מתחת לטלפון לפני שההדגמה מתחילה */
.dp-wrap:not(.is-idle) .flip-btn, .dp-wrap:not(.is-idle) .demo-hint { animation: dp-appear 0.35s ease both; }
@keyframes dp-appear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dp-nav { will-change: clip-path, transform; }
.dp-fab { will-change: transform; }

/* ── מסך מגע: הטלפון לא גונב את הגלילה ──────────────────────────────
   שני גלילים מקוננים על מסך מגע = האצבע לא יודעת מי יזוז. הגליל הפנימי נסגר
   לאצבע (overflow:hidden עדיין מאפשר גלילה מהקוד), והדף תמיד עונה לאצבע.
   למה שמתחת לקיפול מגיעים בנגיעה על dp-more — כמו כל שאר הדמו. */
.dp-more { display: none; }
@media (hover: none) and (pointer: coarse) {
  .dp-stage { overflow: hidden; scroll-behavior: smooth; }
  .dp-more { position: absolute; z-index: 7; inset-inline-start: calc(11px * var(--k)); bottom: calc(100px * var(--k));
    width: calc(38px * var(--k)); height: calc(38px * var(--k)); border-radius: 999px; padding: 0;
    background: var(--card); border: 1px solid var(--borderStrong); box-shadow: 0 4px 14px var(--shadow);
    display: inline-flex; align-items: center; justify-content: center; color: var(--coach); cursor: pointer; }
  .dp-more[hidden] { display: none; }
  .dp-more .bi { width: calc(21px * var(--k)); height: calc(21px * var(--k)); transition: rotate 0.22s ease; }
  .dp-more.up .bi { rotate: 180deg; }
  .dp.is-idle .dp-more { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dp-stage { scroll-behavior: auto; } }

/* ── דיוקנאות: התמונה ממלאת את הריבוע הפנימי ונחתכת לצורתו (כמו ClientAvatar עם תמונה) ── */
.k-av.pic i, .k-me.pic i { overflow: hidden; padding: 0; }
.k-face { width: 100%; height: 100%; display: block; }