/* ============================================================
   📚 "המדריך המלא" (`/guide/`) — הסצנות שמיוחדות למדריך בלבד (לקוחות, תובנות, הסטודיו, אוטומציות, הגדרות…).
   הכול נשען על הטלפון המצויר ועל מחלקות `m-*`/`st-*` שב-`booni-guide.css` (שנוצר מ-`/start/` — אל תערכו אותו ביד).
   ⚠️ **קובץ כתוב ביד** (בניגוד ל-`booni-guide.css`). כל מחלקה חדשה נושאת `g-`, וכל כלל מצב מוגבל לסצנה שלו (`.sGC3.k2 …`) — שלב k2 בסצנה אחת
   לא מדליק דבר בסצנה אחרת. ☠️ **המצב הסופי כתוב ב-HTML** (כל ה-`kN` על הסצנה), ולכן כל כלל כאן מתאר מה *מתווסף* בשלב.
   ============================================================ */

/* ☠️ הגיליון התחתון ביומן (חסימת תאריכים) אדום; בכל שאר הגיליונות כאן הכפתור בצבע ההדגשה — אדום אומר "חסימה", לא "שמירה" */
.sGC3 .m-names .m-btn, .sGC4 .m-names .m-btn, .sGM1 .m-names .m-btn { background: var(--ma); }

/* ── 🧱 אבני בניין משותפות ── */
.g-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.g-tiles.two { grid-template-columns: 1fr 1fr; }
.g-tile { background: var(--mw); border: 1px solid var(--ml); border-radius: 12px; padding: 9px 8px 8px; text-align: center; }
.g-tile b { display: block; font-size: 18px; font-weight: 800; line-height: 1.15; }
.g-tile small { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.3; color: var(--mm); font-weight: 700; }
.g-tile em { display: block; margin-top: 3px; font-style: normal; font-size: 10px; line-height: 1.3; color: #A8601F; font-weight: 700; }
.g-tile.up b { color: #2F7D55; }
.g-act { display: flex; gap: 6px; margin-top: 10px; }
.g-act span { flex: 1; text-align: center; padding: 8px 2px; border-radius: 10px; background: var(--mas); color: var(--ma); font-weight: 800; font-size: 11.5px; }
.g-act.solid span { background: var(--ma); color: #fff; }
.g-kv { margin-top: 10px; border-radius: 12px; background: var(--mw); border: 1px solid var(--ml); padding: 4px 11px; }
.g-kv div { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ml); font-size: 12px; font-weight: 700; }
.g-kv div:last-child { border-bottom: 0; }
.g-kv small { margin-inline-start: auto; color: var(--mm); font-weight: 600; font-size: 11.5px; }
.g-bar { height: 8px; border-radius: 99px; background: var(--ml); overflow: hidden; margin-top: 8px; }
.g-bar i { display: block; height: 100%; width: 38%; border-radius: inherit; background: var(--ma); transition: width .7s ease; }
.g-sent { margin: 8px 0 0; font-size: 12px; font-weight: 700; line-height: 1.5; }
.g-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.g-chips span { padding: 5px 10px; border-radius: 999px; background: var(--mas); color: var(--ma); font-weight: 800; font-size: 11.5px; transition: background .3s, color .3s; }
.g-chips span.on { background: var(--ma); color: #fff; }
.g-sw0, .g-sw1 { transition: opacity .3s; }

/* ── 👥 לקוחות ── */
.m-lr .amt { display: block; margin-top: 4px; color: var(--mm); font-size: 11.5px; font-weight: 700; }
.m-lr .chp.warn { background: #FFF1C9; color: #7A5C1E; }
.m-lr .chp.done { background: #E3F3E8; color: #1F5C3D; }
.g-sub-h { margin: 12px 0 4px; font-size: 11px; color: var(--mm); font-weight: 800; letter-spacing: .02em; }

/* gc3 · רישום תשלום */
.g-pay .s1 { display: none; }
.sGC3.k1 .m-names { transform: none; }
.sGC3.k2 .m-ty.a { width: 5ch; }
.sGC3.k2 .g-chips .pick { background: var(--ma); color: #fff; }
.sGC3.k3:not(.k4) .m-names .m-btn { transform: scale(.96); filter: brightness(1.14); }
.sGC3.k4 .m-names { transform: translateY(105%); }
.sGC3.k4 .g-pay .s0 { display: none; }
.sGC3.k4 .g-pay .s1 { display: block; }
.sGC3.k4 .g-bar i { width: 100%; background: #2F7D55; }

/* gc4 · האירוע נדחה */
.g-strip { margin-top: 9px; padding: 8px 11px; border-radius: 11px; background: #FFF1C9; color: #7A5C1E; font-size: 12px; font-weight: 800; line-height: 1.45; max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; overflow: hidden; transition: max-height .5s, opacity .4s, padding .4s, margin .4s; }
.sGC4.k4 .g-strip { max-height: 60px; opacity: 1; padding-block: 8px; margin-top: 9px; }
.sGC4.k1 .m-names { transform: none; }
.sGC4.k2 .g-chips .pick { background: var(--ma); color: #fff; }
.sGC4.k3:not(.k4) .m-names .m-btn { transform: scale(.96); filter: brightness(1.14); }
.sGC4.k4 .m-names { transform: translateY(105%); }

/* ── 📊 תובנות ── */
.g-fn { margin-top: 8px; }
.g-fn .r { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12px; font-weight: 800; }
.g-fn .r > span { width: 78px; flex: none; }
.g-fn .r > i { display: block; height: 22px; border-radius: 7px; background: var(--ma); min-width: 8px; }
.g-fn .r > b { font-variant-numeric: tabular-nums; }
.g-fn .drop { margin: 2px 0 0 0; font-size: 10.5px; color: #A8601F; font-weight: 700; padding-inline-start: 86px; }
.g-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.g-tbl th { text-align: start; color: var(--mm); font-weight: 700; font-size: 10.5px; padding: 3px 4px; }
.g-tbl td { padding: 7px 4px; border-top: 1px solid var(--ml); font-weight: 700; }
.g-tbl td:first-child { font-weight: 800; }
.g-tbl .pl { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--mas); color: var(--ma); font-weight: 800; }
.g-star { margin-inline-start: auto; font-size: 20px; line-height: 1; color: var(--ma); }
.g-star .s1 { display: none; }
.sGI4.k1 .g-star .s0 { display: none; }
.sGI4.k1 .g-star .s1 { display: inline; color: #D9A625; }
.g-ch { display: flex; align-items: flex-end; gap: 5px; height: 84px; margin-top: 10px; }
.g-ch i { flex: 1; border-radius: 5px 5px 0 0; background: var(--mas); }
.g-ch i.hi { background: var(--ma); }

/* ── 🗓️ פגישות ── */
.g-lbl { display: block; font-size: 11.5px; color: var(--mm); font-weight: 700; margin-top: 10px; }
.g-done .m-rr { align-self: stretch; text-align: right; }
.sGM1.k1 .m-names { transform: none; }
.sGM1.k2 .m-ty.a { width: 10ch; }
.sGM1.k2 .g-chips .pick { background: var(--ma); color: #fff; }
.sGM1.k3:not(.k4) .m-names .m-btn { transform: scale(.96); filter: brightness(1.14); }
.sGM1.k4 .m-names { transform: translateY(105%); }
.sGM1 .g-chips .pick { background: var(--mas); color: var(--ma); }
.sGM1.k2 .g-chips .pick { background: var(--ma); color: #fff; }
.st-scene.goG2.k2 .m-track { transform: translateX(-33.3334%); }
.st-scene.goG2.k4 .m-track { transform: translateX(-66.6667%); }
.goG2 .g-chips .pick { background: var(--mas); color: var(--ma); }
.goG2.k1:not(.k2) .g-chips .pick { background: var(--ma); color: #fff; }
.goG2.k3:not(.k4) .gm2-go { transform: scale(.96); filter: brightness(1.14); }
.g-st .s1 { display: none; }
.g-st .s0.w { color: #A8601F; }
.sGM3.k3:not(.k4) .g-ap span { transform: scale(.97); filter: brightness(1.14); }
.sGM3.k4 .g-st .s0 { display: none; }
.sGM3.k4 .g-st .s1 { display: inline; color: #1F5C3D; font-weight: 800; }
.g-ap span { transition: transform .2s, filter .2s; }

/* ── ✉️ הודעות ומיילים אוטומטיים ── */
.m-tg.on { background: var(--ma); }
.m-tg.on::after { inset-inline-start: 18px; }
.g-mst .m-tg { background: var(--ma); }
.g-mst .m-tg::after { inset-inline-start: 18px; }
.g-mst .s1 { display: none; }
.sGA2.k1:not(.k2) .g-mst .m-tg { background: #C9BFAE; }
.sGA2.k1:not(.k2) .g-mst .m-tg::after { inset-inline-start: 2px; }
.sGA2.k1:not(.k2) .g-mst .s0 { display: none; }
.sGA2.k1:not(.k2) .g-mst .s1 { display: block; }
.g-tagp { padding: 0 5px; border-radius: 6px; background: #FFF1C9; color: #7A5C1E; font-weight: 800; transition: background .35s; }
.sGA3.k1 .m-ty.a { width: 30ch; }
.sGA3.k2 .g-tagp { background: #FCD06B; }
.sGA3.k2:not(.k3) .g-tags span:first-child { background: var(--ma); color: #fff; }
.g-testbtn { background: var(--ma) !important; color: #fff !important; transition: transform .2s, filter .2s; }
.sGA3.k3 .g-testbtn { transform: scale(.96); filter: brightness(1.14); }

/* ── 💡 המלצות ── */
.g-cb { display: inline-block; flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--ml); background: var(--mw); position: relative; }
.g-cb.on { background: var(--ma); border-color: var(--ma); }
.g-cb.on::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; }
.g-sendbtn { background: #2F7D55 !important; color: #fff !important; transition: transform .2s, filter .2s; }
.sGR2.k1:not(.k2) .g-sendbtn { transform: scale(.95); filter: brightness(1.14); }

/* ── 📄 חוזים ── */
.m-sec .it small.g-okt, .g-okt { color: #1F5C3D; font-weight: 800; }
.m-sec .it small.g-wt, .g-wt { color: #A8601F; font-weight: 800; }
.gk-n.s1, .gk-tot .s1 { display: none; }
.sGK2.k1 .gk-pick { background: var(--ma); color: #fff; }
.sGK2.k1 .gk-n.s0 { display: none; }
.sGK2.k1 .gk-n.s1 { display: inline; }
.gk-d { opacity: 0; transition: opacity .4s; }
.sGK2.k2 .gk-d { opacity: 1; }
.sGK2.k3 .gk-tot .s0 { display: none; }
.sGK2.k3 .gk-tot .s1 { display: inline; color: #2F7D55; }
.sGK3.k1 .gk3-sw { background: var(--ma); }
.sGK3.k1 .gk3-sw::after { inset-inline-start: 18px; }

/* ── 🏠 הסטודיו ── */
.g-todo { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-top: 7px; border-radius: 12px; background: var(--mw); border: 1px solid var(--ml); font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.g-todo:first-of-type { margin-top: 0; }
.g-todo b { flex: none; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: var(--ma); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.g-todo.hot b { background: #C0392B; }
.g-todo small { display: block; color: var(--mm); font-size: 11px; font-weight: 600; }
.g-date { font-size: 12px; color: var(--mm); font-weight: 700; margin: 0 0 8px; }
.g-plus { width: 30px; height: 30px; border-radius: 50%; background: var(--ma); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; line-height: 1; }
.g-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.g-topbar b { font-size: 17px; font-weight: 800; }
.g-topbar .g-plus { margin-inline-start: auto; transition: transform .2s, filter .2s; }
.sGS2.k1 .m-ty.a { width: 18ch; }
.sGS2.k1 .m-names { transform: none; }
.sGS2.k2 .g-chips .pick { background: var(--ma); color: #fff; }
.sGS2.k3 .m-names { transform: translateY(105%); }
.g-pop { padding: 12px; border-radius: 16px; background: var(--mw); border: 1px solid var(--ml); box-shadow: 0 10px 22px -14px rgba(46,42,40,.5); margin-top: 10px; max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; overflow: hidden; transition: max-height .6s, opacity .4s, padding .4s, margin .4s; }
.g-pop h5 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
.g-pop .it { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; font-weight: 700; border-top: 1px solid var(--ml); }
.g-pop .it:first-of-type { border-top: 0; }
.g-pop .it::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ma); flex: none; }
.g-pop .note { margin: 7px 0 0; font-size: 10.5px; color: var(--mm); line-height: 1.45; }
.g-inv { padding: 12px; border-radius: 16px; background: var(--mw); border: 1px solid var(--ml); transition: opacity .4s; }
.g-inv h5 { margin: 0 0 3px; font-size: 14px; font-weight: 800; }
.sGS3.k2 .g-pop { max-height: 260px; opacity: 1; padding-block: 12px; margin-top: 10px; }
.sGS3.k2 .g-inv { opacity: .45; }
.sGS3.k1:not(.k2) .g-inv .m-btn { transform: scale(.96); filter: brightness(1.14); }
.sGS3.k3 .g-pop .m-btn { transform: scale(.96); filter: brightness(1.14); }
.sGS3.k3 .g-pop { opacity: .35; }

/* 📊 sGI5 — שלושה גרפים נבנים בזה אחר זה (תובנות · שלב 3). מצב סופי = כל ה-kN; בלי kN הפסים והתאים "ריקים" וגדלים כשהמחלקה מגיעה */
.gx { padding: 9px 10px 10px; margin-top: 8px; }
.gx:first-child { margin-top: 0; }
.gx .m-title { font-size: 13px; }
.gx .m-sub { margin: 0; font-size: 10.5px; }
.gx-fn { margin-top: 5px; }
.gx-fn .r { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11px; font-weight: 800; }
.gx-fn .r > span { width: 74px; flex: none; }
.gx-fn .r > u { flex: 1; display: block; text-decoration: none; }
.gx-fn .r > u i { display: block; height: 15px; width: 0; border-radius: 6px; background: var(--ma); transition: width .8s cubic-bezier(.2,.8,.2,1) .25s; }
.sGI5.k1 .gx-fn .r > u i { width: var(--w); }
.gx-fn .r > u i.ok { background: #2F7D55; }
.gx-fn .r > b { width: 20px; text-align: end; font-variant-numeric: tabular-nums; }
.gx-fn .dp { margin: 3px 0 0; padding: 0; padding-inline-start: 81px; border: 0; background: none; font-size: 10.5px; line-height: 1.3; font-weight: 800; color: #A8601F; }
.gx-yr { display: flex; gap: 3px; margin-top: 7px; direction: rtl; }
.gx-yr .mo { flex: 1; display: flex; flex-direction: column; gap: 2.5px; align-items: stretch; }
.gx-yr .mo i { display: block; height: 10px; border-radius: 3px; opacity: 0; transform: scale(.5); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--c) * 60ms); }
.sGI5.k2 .gx-yr .mo i { opacity: 1; transform: none; }
.gx-yr .mo em { margin-top: 2px; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--mm); text-align: center; white-space: nowrap; }
.gx-yr i.l0, .gx-key i.l0 { background: #EEE8DB; }
.gx-yr i.l1, .gx-key i.l1 { background: #C9D6DE; }
.gx-yr i.l2, .gx-key i.l2 { background: #8DA9BB; }
.gx-yr i.l3, .gx-key i.l3 { background: var(--ma); }
.gx-key { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 6px; font-size: 9.5px; font-weight: 700; color: var(--mm); }
.gx-key i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.gx-key span:first-child { margin-inline-end: 2px; }
.gx-key span:last-child { margin-inline-start: 2px; }
.gx-pk { margin-top: 5px; }
.gx-pk .r { display: grid; grid-template-columns: 74px 1fr 34px; gap: 7px; align-items: center; margin-top: 5px; font-size: 11px; font-weight: 700; }
.gx-pk .r.f > span { font-weight: 800; }
.gx-pk .r > u { display: block; text-decoration: none; height: 12px; border-radius: 5px; background: #EEE8DB; overflow: hidden; }
.gx-pk .r > u i { display: block; height: 100%; width: 0; border-radius: 5px; transition: width .9s cubic-bezier(.2,.8,.2,1) .25s; }
.sGI5.k3 .gx-pk .r > u i { width: var(--w); }
.gx-pk .r > b { font-size: 10.5px; color: var(--mm); font-variant-numeric: tabular-nums; text-align: end; }
.gx-pk i.l1 { background: #C9D6DE; }
.gx-pk i.l2 { background: #8DA9BB; }
.gx-pk i.l3 { background: var(--ma); }