/* sp_ux — shared components for the redesigned client and therapist screens.
   Builds on sp_app tokens: --sp-primary(-dark/-soft), --sp-ink(-2), --sp-line, --sp-surface, --sp-bg, --sp-ok/-warn/-danger. */
:root{--u-ok:#1E7F4F;--u-ok-s:#E6F4EC;--u-bad:#B3261E;--u-bad-s:#FCEBEA;--u-warn:#9A5B00;--u-warn-s:#FFF4E0;--u-info-s:#EEF0FB;--u-r:16px}

/* ---------- small building blocks ---------- */
.u-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:var(--fs-label,12px);font-weight:600;line-height:1;padding:6px 9px;border-radius:999px;background:var(--sp-primary-soft);color:var(--sp-primary)}
.u-pill.ok{background:var(--u-ok-s);color:var(--u-ok)}.u-pill.bad{background:var(--u-bad-s);color:var(--u-bad)}
.u-pill.warn{background:var(--u-warn-s);color:var(--u-warn)}.u-pill.mute{background:var(--ds-surface,#EEF0F4);color:var(--sp-ink-2)}
.u-pill.info{background:var(--u-info-s);color:var(--sp-primary)}
.u-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--u-bad);color:#fff;font-size:var(--fs-label,12px);font-weight:700;margin-inline-start:6px;vertical-align:middle}
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:0;background:var(--sp-primary);color:#fff;font:inherit;font-size:var(--fs-body-sm,14px);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.u-btn.ok{background:var(--u-ok)}.u-btn.line{background:#fff;color:var(--sp-ink);border:1px solid var(--sp-line)}
.u-btn.ghost-bad{background:transparent;color:var(--u-bad);padding:0 10px}
.u-btn.soft{background:var(--sp-primary-soft);color:var(--sp-primary);width:100%;min-height:44px}
.u-btn.inv{background:#fff;color:var(--sp-primary-dark)}.u-btn.glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.u-btn:active{filter:brightness(.94)}
.u-hint{margin:-2px 0 8px;font-size:var(--fs-caption,13px);color:var(--sp-ink-2);line-height:1.8}

/* ---------- sections ---------- */
.u-sec{margin:20px 0 6px}
.u-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 8px}
.u-sec-h h2{margin:0;font-size:var(--fs-body,16px);font-weight:700;display:flex;align-items:center}
.u-sec-h a{font-size:var(--fs-body-sm,13.5px);text-decoration:none;font-weight:600}
.u-empty{display:flex;flex-direction:column;gap:2px;padding:18px 16px;border:1px dashed var(--sp-line);border-radius:var(--u-r);background:var(--sp-surface);text-align:center}
.u-empty small{color:var(--sp-ink-2)}.u-empty.ok b{color:var(--u-ok)}
.u-list{display:flex;flex-direction:column;gap:8px}
.u-banner{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--u-r);margin:8px 0}
.u-banner.warn{background:var(--u-warn-s);color:var(--u-warn)}
.u-inline-form{display:flex;gap:8px}.u-inline-form input{flex:1;min-width:0;min-height:40px;border:1px solid var(--sp-line);border-radius:10px;padding:0 10px;font:inherit;background:#fff}

/* ---------- generic tappable row ---------- */
.u-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--u-r);text-decoration:none;color:inherit;margin-bottom:8px}
.u-row-b{flex:1;min-width:0;display:flex;flex-direction:column}
.u-row-b b{font-size:var(--fs-body,15px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.u-row-b small{color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px)}
.u-ic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--sp-primary-soft);color:var(--sp-primary)}
.u-ic svg,.u-qa-i svg,.u-switch svg,.u-tcard-ic svg,.wl-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.u-ic.me{background:var(--ds-surface,#EEF0F4);color:var(--sp-ink-2)}

/* ---------- therapist header ---------- */
.u-thead{gap:6px}.u-thead-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.u-thead-t h1{margin:0;font-size:var(--fs-title,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.u-thead-t small{color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px)}
.u-switch{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--sp-line);background:#fff;color:var(--sp-ink);text-decoration:none;font-size:var(--fs-caption,12.5px);font-weight:600;white-space:nowrap}
.u-switch svg{width:16px;height:16px}

/* ---------- therapist hero (next session) ---------- */
.u-hero{display:flex;flex-direction:column;gap:2px;padding:16px 18px 16px;border-radius:20px;color:#fff;background:linear-gradient(140deg,var(--sp-primary) 0%,var(--sp-primary-dark) 100%);box-shadow:0 8px 24px -12px var(--sp-primary)}
.u-hero.live{background:linear-gradient(140deg,#1E7F4F 0%,#14573A 100%)}
.u-hero-k{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-caption,13px);opacity:.9}
.u-hero-rel{background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px;font-size:var(--fs-label,12px)}
.u-hero-when{display:flex;align-items:baseline;gap:10px;margin-top:6px}.u-hero-when b{font-size:var(--fs-headline,24px)}.u-hero-when span{font-size:var(--fs-title-sm,18px);opacity:.95}
.u-hero-who{font-size:var(--fs-title-sm,17px);margin-top:2px}.u-hero-meta{font-size:var(--fs-caption,13px);opacity:.85}
.u-hero-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.u-hero-act form{display:contents}

/* ---------- session row (therapist) ---------- */
.u-srow{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--u-r);padding:12px 14px}
.u-srow.review{border-color:color-mix(in srgb,var(--u-warn) 35%,var(--sp-line));background:linear-gradient(0deg,#fff,#fff) padding-box}
.u-srow.live{border-color:var(--u-ok);box-shadow:0 0 0 3px var(--u-ok-s)}
.u-srow-top{display:flex;align-items:center;gap:12px}
.u-srow-time{flex:none;width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 0;border-radius:12px;background:var(--sp-bg)}
.u-srow-time b{font-size:var(--fs-body,15px);line-height:1.3}.u-srow-time small{font-size:var(--fs-label,12px);color:var(--sp-ink-2);line-height:1.3;text-align:center}
.u-srow-who{flex:1;min-width:0;display:flex;flex-direction:column}
.u-srow-name{font-weight:700;color:var(--sp-ink);text-decoration:none;font-size:var(--fs-body,15.5px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-srow-who small{color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-srow-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--sp-line)}
.u-srow-act form{display:contents}
.u-srow-act .ghost-bad{margin-inline-start:auto}
.u-cx{display:flex;flex-direction:column;gap:6px}.u-cx-t{font-size:var(--fs-title-sm,17px)}.u-cx-n{font-size:var(--fs-body-sm,13.5px);color:var(--sp-ink-2);margin:4px 0}

/* ---------- week strip / KPIs / quick actions ---------- */
.u-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.u-day{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 0;border-radius:14px;background:var(--sp-surface);border:1px solid var(--sp-line);text-decoration:none;color:var(--sp-ink)}
.u-day small{font-size:var(--fs-label,12px);color:var(--sp-ink-2);white-space:nowrap}.u-day b{font-size:var(--fs-body,16px);line-height:1.4}
.u-day span{font-size:var(--fs-label,12px);font-weight:700;color:var(--sp-primary)}.u-day.zero span{color:#B6B9C4;font-weight:400}
.u-day.on{background:var(--sp-primary);border-color:var(--sp-primary);color:#fff}.u-day.on small,.u-day.on span{color:#fff}
.u-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.u-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--u-r);background:var(--sp-surface);border:1px solid var(--sp-line);text-decoration:none;color:inherit}
.u-kpi small{color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px)}.u-kpi b{font-size:var(--fs-title,19px)}.u-kpi.warn b{color:var(--u-warn)}
.u-qa{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.u-qa.four{grid-template-columns:repeat(4,1fr)}
.u-qa-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 4px;border-radius:var(--u-r);background:var(--sp-surface);border:1px solid var(--sp-line);color:var(--sp-ink);text-decoration:none;font:inherit;font-size:var(--fs-label,12px);font-weight:600;text-align:center;line-height:1.5;cursor:pointer}
.u-qa-i svg{width:22px;height:22px;color:var(--sp-primary)}
.u-qa:not(.four) .u-qa-i{flex-direction:row;min-height:52px;font-size:var(--fs-body-sm,13.5px)}

/* ---------- segmented tabs as links ---------- */
.u-seg{display:flex;gap:4px;padding:4px;margin:6px 0 4px;background:var(--ds-surface,#ECEEF4);border-radius:14px}
.u-seg a{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:11px;text-decoration:none;color:var(--sp-ink-2);font-size:var(--fs-body-sm,14px);font-weight:600}
.u-seg a.on{background:#fff;color:var(--sp-ink);box-shadow:0 1px 3px rgba(20,30,80,.12)}
.u-dayh{font-size:var(--fs-body-sm,13.5px);color:var(--sp-ink-2);font-weight:700;margin:16px 4px 8px}

/* ---------- client: therapist entry card, relatives, account ---------- */
.u-tcard{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:4px 0 12px;border-radius:var(--u-r);background:var(--sp-ink);color:#fff;text-decoration:none}
.u-tcard-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.u-tcard-b{flex:1;display:flex;flex-direction:column;line-height:1.5}.u-tcard-b small{opacity:.75;font-size:var(--fs-caption,12.5px)}
.u-tcard .hm-chev{border-color:#fff}
.u-pc-book{padding:0 14px 12px}
.card.prof .p-body{align-items:flex-start}
.card.prof .p-body small.u-phone{direction:rtl;unicode-bidi:normal;text-align:right}
.u-hw .money-l{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.u-hw .u-pill{margin-top:2px}
.wallet-chip .wc-debt{color:var(--u-bad)}

/* ================= wallet ================= */
.wl-hero{position:relative;display:flex;flex-direction:column;gap:2px;padding:20px 20px 18px;margin:8px 0 6px;border-radius:22px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--sp-primary) 70%,#fff) 0%,var(--sp-primary) 45%,var(--sp-primary-dark) 100%);box-shadow:0 12px 28px -16px var(--sp-primary-dark)}
.wl-hero.bad{background:radial-gradient(120% 140% at 100% 0%,#D5534B 0%,#A8231C 50%,#7A1712 100%)}
.wl-k{font-size:var(--fs-body-sm,13.5px);opacity:.85}
.wl-amt{font-size:var(--fs-display,32px);font-weight:800;line-height:1.35;letter-spacing:-.2px}
.wl-side{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:var(--fs-caption,12.5px);font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18)}
.wl-dot{width:7px;height:7px;border-radius:50%;background:#7CF0B2}.wl-hero.bad .wl-dot{background:#FFD0CC}.wl-hero.mute .wl-dot{background:#fff}
.wl-hint{font-size:var(--fs-caption,12.5px);opacity:.85;margin-top:6px;line-height:1.8}
.wl-cta{display:flex;gap:8px;margin-top:14px}
.wl-btn{flex:1;min-height:46px;border:0;border-radius:14px;background:#fff;color:var(--sp-primary-dark);font:inherit;font-weight:700;font-size:var(--fs-body,15px);cursor:pointer}
.wl-hero.bad .wl-btn{color:#8E1C16}
.wl-stale{font-size:var(--fs-caption,12.5px);color:var(--u-warn);margin:2px 4px 0}
.wl-tabs{margin-top:16px}
.wl-tabs>input{position:absolute;opacity:0;pointer-events:none}
.wl-seg{display:flex;gap:4px;padding:4px;background:var(--ds-surface,#ECEEF4);border-radius:14px;overflow-x:auto;scrollbar-width:none}
.wl-sl{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border-radius:11px;color:var(--sp-ink-2);font-size:var(--fs-body-sm,13.5px);font-weight:600;cursor:pointer;white-space:nowrap}
.wl-sl small{font-size:var(--fs-label,12px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center}
.wl-panel{display:none}
.wt-all:checked~.wl-p-all,.wt-inv:checked~.wl-p-inv,.wt-paid:checked~.wl-p-paid,.wt-pinv:checked~.wl-p-pinv,.wt-got:checked~.wl-p-got{display:block}
.wt-all:checked~.wl-seg .wl-sl-all,.wt-inv:checked~.wl-seg .wl-sl-inv,.wt-paid:checked~.wl-seg .wl-sl-paid,.wt-pinv:checked~.wl-seg .wl-sl-pinv,.wt-got:checked~.wl-seg .wl-sl-got{background:#fff;color:var(--sp-ink);box-shadow:0 1px 3px rgba(20,30,80,.12)}
.wl-tabs>input:focus-visible~.wl-seg{outline:2px solid var(--sp-primary);outline-offset:2px}
.wl-month{font-size:var(--fs-caption,13px);font-weight:700;color:var(--sp-ink-2);margin:16px 4px 6px}
.wl-panel .wl-month+.wl-row{border-top-left-radius:var(--u-r);border-top-right-radius:var(--u-r)}
.wl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--sp-surface);border:1px solid var(--sp-line);border-top-width:0}
.wl-month+.wl-row{border-top-width:1px}
.wl-row:has(+.wl-month),.wl-row:last-child{border-bottom-left-radius:var(--u-r);border-bottom-right-radius:var(--u-r)}
.wl-ic{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ds-surface,#EEF0F4);color:var(--sp-ink-2)}
.wl-row.in .wl-ic{background:var(--u-ok-s);color:var(--u-ok)}.wl-row.out .wl-ic{background:var(--u-warn-s);color:var(--u-warn)}
.wl-b{flex:1;min-width:0;display:flex;flex-direction:column}.wl-b b{font-size:var(--fs-body-sm,14.5px);font-weight:600}
.wl-b small{font-size:var(--fs-label,12px);color:var(--sp-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wl-ok{color:var(--u-ok);font-weight:600}
.wl-a{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:var(--fs-body,15px);line-height:1.35}
.wl-a small{font-size:var(--fs-label,12px);font-weight:400;color:var(--sp-ink-2)}.wl-a.ok{color:var(--u-ok)}.wl-a.ink{color:var(--sp-ink)}
.wl-empty{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;margin-top:18px;padding:22px 16px;border:1px dashed var(--sp-line);border-radius:var(--u-r);background:var(--sp-surface)}
.wl-empty small{color:var(--sp-ink-2);font-size:var(--fs-caption,13px)}
.wl-foot{text-align:center;font-size:var(--fs-label,12px);color:var(--sp-ink-2);margin:14px 0 4px}
.wl-top{display:flex;flex-direction:column;gap:4px}.wl-top-t{font-size:var(--fs-title-sm,17px);margin-bottom:4px}
.wl-top input[name=amount]{width:100%;min-height:48px;border:1px solid var(--sp-line);border-radius:10px;padding:0 12px;font:inherit}
.u-srow-end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.u-mini-x{border:0;background:none;color:var(--u-bad);font:inherit;font-size:var(--fs-caption,12.5px);font-weight:600;padding:2px 2px;cursor:pointer}

/* ================= v3: forms, booking, top-up, relatives, home ================= */
/* chip-style labels inside forms were getting the block "field label" rule (text pushed to the top) */
.form label.chip,.form label.tp-opt,.form label.tp-debt{display:flex;margin:0;font-weight:500}
.form label.chip{display:inline-flex;align-items:center;justify-content:center}

/* shared sheet header */
.sh-grip{display:block;width:40px;height:4px;border-radius:4px;background:#D9DCE6;margin:-4px auto 10px}
.sh-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.sh-head b{font-size:var(--fs-title-sm,17px)}
.sh-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--ds-surface,#F0F1F6);color:var(--sp-ink-2);font-size:var(--fs-headline,22px);line-height:1;cursor:pointer}

/* booking list: identical cards */
.bk-card{display:flex;align-items:center;gap:12px;height:76px;margin:0 0 8px;padding:0 12px 0 14px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--u-r);color:inherit;text-decoration:none}
.bk-card:active{background:var(--sp-primary-soft)}
.bk-av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--sp-primary-soft);color:var(--sp-primary);display:flex;align-items:center;justify-content:center;font-size:var(--fs-title,19px);font-weight:700}
.bk-av.lg{width:48px;height:48px}
.bk-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.55}
.bk-n{font-size:var(--fs-body,15px);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-m{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-slot{flex:none;width:96px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:var(--u-ok-s);color:var(--u-ok);line-height:1.35}
.bk-slot small{font-size:var(--fs-label,12px);max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-slot b{font-size:var(--fs-body,15.5px)}
.bk-slot.off{background:var(--ds-surface,#F0F1F5);color:var(--sp-ink-2)}.bk-slot.off b{font-size:var(--fs-caption,13px);font-weight:600}
.bk-title{margin:18px 2px 10px}

/* booking step 2 */
.bk-thead{display:flex;align-items:center;gap:12px;margin:10px 0;padding:12px 14px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--u-r)}
.bk-thead .bk-b small{font-size:var(--fs-label,12px)}
.bk-change{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--sp-line);color:var(--sp-primary);text-decoration:none;font-size:var(--fs-body-sm,13.5px);font-weight:600}
#bk-form h2.sec{font-size:var(--fs-body,15px);margin:18px 2px 8px}
#bk-form .days{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
#bk-form .days .day{flex:none;width:54px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:14px;border:1px solid var(--sp-line);background:var(--sp-surface);color:var(--sp-ink);text-decoration:none;line-height:1.35}
#bk-form .days .day small{font-size:var(--fs-label,12px);color:var(--sp-ink-2)}#bk-form .days .day b{font-size:var(--fs-title-sm,17px)}
#bk-form .days .day.on{background:var(--sp-primary);border-color:var(--sp-primary);color:#fff}#bk-form .days .day.on small{color:#fff;opacity:.85}
#bk-form .days .day.off{opacity:.4;border-style:dashed}
#bk-form .days .mon{flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:14px;background:var(--sp-primary-soft);color:var(--sp-primary);font-size:var(--fs-label,12px);font-weight:700;writing-mode:horizontal-tb}
#bk-form .part{font-size:var(--fs-caption,13px);font-weight:600;color:var(--sp-ink-2);margin:12px 2px 6px}
#bk-form .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
#bk-form .slots .chip.slot{height:46px;min-height:46px;padding:0;border-radius:12px;font-size:var(--fs-body,15.5px);font-weight:600;background:var(--sp-surface)}
#bk-form .slots .chip.slot:has(input:checked){background:var(--sp-primary);border-color:var(--sp-primary);color:#fff}
@media (max-width:360px){#bk-form .slots{grid-template-columns:repeat(3,1fr)}}
.bk-note{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2);margin:14px 2px}
.bk-note svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* top-up sheet */
.tp{display:flex;flex-direction:column}
.tp-k{display:block;font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2);margin:12px 2px 8px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;border-radius:14px;border:1px solid var(--sp-line);background:var(--sp-surface);cursor:pointer;line-height:1.3}
.tp-opt b{font-size:var(--fs-title-sm,17px)}.tp-opt small{font-size:var(--fs-label,12px);color:var(--sp-ink-2)}
.tp-opt input,.tp-debt input{position:absolute;opacity:0;width:0;height:0}
.tp-opt:has(input:checked){border-color:var(--sp-primary);background:var(--sp-primary-soft);color:var(--sp-primary);box-shadow:0 0 0 1px var(--sp-primary) inset}
.tp-debt{position:relative;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--sp-line);cursor:pointer}
.tp-debt-b{flex:1;display:flex;flex-direction:column}.tp-debt-b small{font-size:var(--fs-label,12px);color:var(--sp-ink-2)}.tp-debt-b b{font-size:var(--fs-title-sm,18px)}
.tp-tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--sp-line)}
.tp-debt:has(input:checked){border-color:var(--u-bad);background:var(--u-bad-s)}
.tp-debt:has(input:checked) .tp-tick{border:6px solid var(--u-bad)}
.tp-in{display:flex;align-items:center;border:1px solid var(--sp-line);border-radius:12px;background:#fff;padding-inline-end:14px}
.tp-in:focus-within{border-color:var(--sp-primary);box-shadow:0 0 0 3px var(--sp-primary-soft)}
.form .tp-in input{flex:1;min-width:0;border:0;min-height:50px;font-size:var(--fs-title-sm,18px);font-weight:600;padding:0 14px;background:transparent;outline:0}
.tp-in span{color:var(--sp-ink-2);font-size:var(--fs-body-sm,14px)}
.tp-pay{margin:16px 0 4px}
.tp-safe{display:flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-label,12px);color:var(--sp-ink-2);margin:4px 0 0}
.tp-safe svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* relatives */
.rl-lead{font-size:var(--fs-caption,13px);color:var(--sp-ink-2);margin:8px 2px 12px;line-height:1.8}
.rl{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:18px;padding:14px;margin:0 0 10px}
.rl-top{display:flex;align-items:center;gap:12px}
.rl-av{flex:none;width:48px;height:48px;border-radius:50%;background:var(--c,var(--sp-primary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-title,20px);font-weight:700}
.rl-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.55}
.rl-b b{font-size:var(--fs-body,16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rl-b small{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2)}
.rl-act{display:flex;align-items:center;gap:6px;margin-top:12px}
.rl-act form{margin:0}.rl-grow{flex:1}
.rl-book{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:12px;background:color-mix(in srgb,var(--c,var(--sp-primary)) 12%,#fff);color:color-mix(in srgb,var(--c,var(--sp-primary)) 80%,#000);font:inherit;font-weight:700;font-size:var(--fs-body-sm,14.5px);cursor:pointer}
.rl-book svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rl-link{min-height:44px;padding:0 10px;border:0;background:none;font:inherit;font-size:var(--fs-body-sm,13.5px);font-weight:600;color:var(--sp-ink-2);cursor:pointer}
.rl-link.bad{color:var(--u-bad)}
.rl-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;margin:6px 0 0;border:1.5px dashed color-mix(in srgb,var(--sp-primary) 45%,#fff);border-radius:18px;background:transparent;color:var(--sp-primary);font:inherit;font-weight:700;font-size:var(--fs-body,15px);cursor:pointer}
.rl-add span{font-size:var(--fs-headline,22px);line-height:1}
.rl-empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:28px 18px;margin:10px 0;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:18px}
.rl-empty small{color:var(--sp-ink-2);line-height:1.8;font-size:var(--fs-caption,13px)}
.rl-empty-ic{width:56px;height:56px;border-radius:50%;background:var(--sp-primary-soft);color:var(--sp-primary);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.rl-empty-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#add-person-form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#add-person-form .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#add-person-form .chips .chip{min-height:42px;padding:0 6px;font-size:var(--fs-body-sm,14px)}
#add-person-form .bdate{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:8px}
#add-person-form .bdate select{min-height:48px}

/* home: account strip only when there is something to do */
.hm-acct{margin:14px 0 0}
.hm-debt{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 8px;border-radius:var(--u-r);background:var(--u-bad-s);color:var(--u-bad);text-decoration:none;border:1px solid color-mix(in srgb,var(--u-bad) 20%,#fff)}
.hm-debt-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;display:block}
.hm-debt-b{flex:1;display:flex;flex-direction:column;line-height:1.5}.hm-debt-b small{font-size:var(--fs-caption,12.5px);opacity:.85}.hm-debt-b b{font-size:var(--fs-title-sm,17px)}
.hm-debt-go{flex:none;min-height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:12px;background:var(--u-bad);color:#fff;font-weight:700;font-size:var(--fs-body-sm,14px)}
.hm-acct .hw-pk{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--u-r);background:var(--sp-surface);border:1px solid var(--sp-line);text-decoration:none;color:inherit;margin-bottom:8px}

/* ================= v4: focused booking step + home ================= */
/* choosing a time / confirming: no bottom navigation, the confirm bar sits on the edge */
body:has(#bk-form) .sp-nav,body:has(#sr-form) .sp-nav{display:none}
body.has-nav:has(#bk-form) .sp-main,body.has-nav:has(#sr-form) .sp-main{padding-bottom:24px}
body:has(#bk-form) .bk-pad .confirm-bar,body:has(#sr-form) .bk-pad .confirm-bar{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px -12px rgba(20,30,80,.35)}

/* home sections */
.h2-sec{margin:18px 0 4px}
#home-debt{margin:8px 0 0}
.u-tcard{margin:10px 0 0}
.h2-sec .hero{margin:0 0 8px}
.h2-empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:24px 18px 14px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:20px}
.h2-empty small{color:var(--sp-ink-2);font-size:var(--fs-caption,13px);line-height:1.8;max-width:290px}
.h2-empty .btn.big{margin:12px 0 0}
.h2-empty-ic{width:56px;height:56px;border-radius:50%;background:var(--sp-primary-soft);color:var(--sp-primary);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.h2-empty-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h2-rebook{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--u-r);text-decoration:none;color:inherit}
.h2-go{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:12px;background:var(--sp-primary);color:#fff;font-weight:700;font-size:var(--fs-body-sm,14px)}
.h2-go.sm{min-height:36px;padding:0 14px;font-size:var(--fs-caption,13px)}
.h2-sec .u-row .u-row-b small:first-child{font-size:var(--fs-label,12px)}
.h2-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.h2-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:96px;border-radius:var(--u-r);background:var(--sp-surface);border:1px solid var(--sp-line);color:var(--sp-ink);text-decoration:none}
.h2-tile b{font-size:var(--fs-body-sm,13.5px);font-weight:600}
.u-ic.cls{background:#FFF1E6;color:#B4580B}.u-ic.pkg{background:#EAF6EF;color:var(--u-ok)}.u-ic.grp{background:var(--ds-primary-container,#EEF0FB);color:var(--sp-primary)}
.h2-pk{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--u-r);background:var(--sp-surface);border:1px solid var(--sp-line);text-decoration:none;color:inherit;margin-bottom:8px}

/* ================= v5: app bar (header) — one standard for every page ================= */
/* 56px sticky bar, full-bleed, translucent; back (right in RTL) · title (one line) · balance chip · avatar */
.top,.top.bk-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:6px;min-height:56px;margin:-12px -16px 8px;
  padding:env(safe-area-inset-top) 12px 0 12px;border-top:0;background:color-mix(in srgb,var(--sp-bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--sp-line) 70%,transparent)}
.top h1,.top .u-thead-t h1{flex:1;min-width:0;margin:0;font-size:var(--fs-title-sm,18px);font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .back{flex:none;width:40px;height:40px;min-width:40px;min-height:40px;margin:0;border-radius:50%;font-size:0;color:var(--sp-ink);transform:none;display:inline-flex;align-items:center;justify-content:center}
.top .back::before{content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.top .back:active{background:rgba(20,30,80,.08)}
.top .head-end{gap:6px;margin-inline-start:auto}
.top .wallet-chip,.bk-head .wallet-chip{min-height:34px;height:34px;padding:0 10px 0 12px;gap:6px;font-size:var(--fs-caption,13px);font-weight:700;border-radius:999px;background:var(--sp-surface);color:var(--sp-ink);border:1px solid var(--sp-line)}
.top .wallet-chip svg{width:17px;height:17px;color:var(--sp-primary)}
.top .wallet-chip .wc-debt{color:var(--u-bad)}
.top .acct-btn{width:44px;height:44px;border:0;padding:0;background:transparent;overflow:visible}
.acct-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:var(--fs-body,15px)}
.top .acct-btn.on .acct-av{box-shadow:0 0 0 2px var(--sp-bg),0 0 0 4px var(--sp-primary)}
.top .u-switch{min-height:34px;height:34px}
/* home: greeting as a two-line large title */
body.has-nav .top:has(+ #home-notice-slot) h1,.top h1{letter-spacing:0}

/* ================= v5: navigation bar (bottom) ================= */
.sp-nav{height:calc(64px + env(safe-area-inset-bottom));padding:0 8px env(safe-area-inset-bottom);border-top:1px solid color-mix(in srgb,var(--sp-line) 70%,transparent);
  background:color-mix(in srgb,#fff 92%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 -4px 16px -12px rgba(20,30,80,.25)}
.sp-nav a{gap:4px;font-size:var(--fs-label,12px);font-weight:500;color:var(--sp-ink-2);min-height:56px}
.sp-nav a svg{width:22px;height:22px;padding:4px 18px;box-sizing:content-box;border-radius:999px;transition:background .18s}
.sp-nav a.on{color:var(--sp-primary);font-weight:700}
.sp-nav a.on svg{fill:none;background:var(--sp-primary-soft);stroke-width:2}
.sp-nav.u-tnav a svg{padding:4px 12px}
body.has-nav .sp-main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* ================= v5: session detail ================= */
.ss-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:4px 0 10px;border-radius:14px;font-size:var(--fs-body-sm,14px);font-weight:600}
.ss-banner svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ss-banner.ok{background:var(--u-ok-s);color:var(--u-ok)}.ss-banner.warn{background:var(--u-warn-s);color:var(--u-warn)}
.ss-when{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:20px;background:var(--sp-surface);border:1px solid var(--sp-line)}
.ss-when-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ss-rel{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2);font-weight:600}
.ss-day{font-size:var(--fs-headline,22px);font-weight:800;line-height:1.4}
.ss-time{font-size:var(--fs-body,16px);color:var(--sp-ink-2);font-weight:600}.ss-time small{font-size:var(--fs-label,12px);font-weight:400}
.ss-join{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-top:14px;border-radius:14px;background:var(--u-ok);color:#fff;text-decoration:none;font-weight:700;font-size:var(--fs-body,15.5px)}
.ss-join svg,.ss-a svg,.ss-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ss-join.off{background:var(--ds-surface,#F0F1F5);color:var(--sp-ink-2);font-weight:600;font-size:var(--fs-body-sm,13.5px)}
.ss-pay{display:flex;flex-direction:column;gap:4px;margin:10px 0;padding:14px;border-radius:16px;background:var(--u-warn-s);color:var(--u-warn);font-size:var(--fs-body-sm,14px)}
.ss-list{margin:10px 0;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:18px;overflow:hidden}
.ss-r{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-bottom:1px solid var(--sp-line)}
.ss-r:last-child{border-bottom:0}
.ss-i{flex:none;width:34px;height:34px;border-radius:10px;background:var(--ds-surface,#F0F1F6);color:var(--sp-ink-2);display:flex;align-items:center;justify-content:center}
.bk-av.sm{width:34px;height:34px;font-size:var(--fs-body-sm,14px)}
.ss-k{flex:none;width:62px;font-size:var(--fs-caption,13px);color:var(--sp-ink-2)}
.ss-v{flex:1;min-width:0;font-size:var(--fs-body-sm,14.5px);font-weight:600;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-v small{font-weight:400;color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px)}
.ss-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 4px}
.ss-a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:76px;border-radius:16px;background:var(--sp-surface);border:1px solid var(--sp-line);color:var(--sp-ink);text-decoration:none;font:inherit;font-size:var(--fs-caption,12.5px);font-weight:600;cursor:pointer}
.ss-a svg{color:var(--sp-primary);width:22px;height:22px}
.ss-a.bad{color:var(--u-bad)}.ss-a.bad svg{color:var(--u-bad)}
.ss-acts:has(.ss-a:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.ss-note{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2);text-align:center;margin:6px 0 10px;line-height:1.8}
.ss-cx{font-size:var(--fs-body-sm,14px);line-height:1.9;margin:0 0 6px}.ss-cx.bad{color:var(--u-bad)}

/* ================= v6: booking step 2 fits one screen ================= */
body:has(#bk-form) .seg-row[aria-label="نوع رزرو"]{display:none}
#bk-form h2.sec:has(+ .cal){display:none}
.bk-thead{margin:4px 0 8px;padding:10px 12px}
#bk-form ~ .seg-row,.bk-pad .seg-row{margin:8px 0}
.cal{margin:10px 0 4px;padding:10px 10px 8px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:18px}
.cal-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 6px}
.cal-h b{font-size:var(--fs-body,15.5px)}.cal-h small{font-size:var(--fs-label,12px);color:var(--sp-ink-2)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{text-align:center;font-size:var(--fs-label,12px);font-weight:700;color:var(--sp-ink-2);padding:2px 0 4px}
.cal-d{position:relative;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;text-decoration:none;color:var(--sp-ink);line-height:1.15}
.cal-d b{font-size:var(--fs-body,15.5px);font-weight:700}
.cal-d small{font-size:var(--fs-label,12px);color:var(--sp-primary);font-weight:700}
.cal-d i{width:4px;height:4px;border-radius:50%;background:var(--u-ok);margin-top:3px}
a.cal-d{background:var(--u-ok-s)}
a.cal-d:active{filter:brightness(.95)}
.cal-d.on{background:var(--sp-primary);color:#fff}.cal-d.on i{background:#fff}.cal-d.on small{color:#fff}
.cal-d.off{color:#B9BCC7}.cal-d.off b{font-weight:500}
#bk-form h2.sec{margin:12px 2px 4px}
#bk-form .part{margin:6px 2px 4px}
#bk-form .slots .chip.slot{height:42px;min-height:42px}
.bk-note{margin:10px 2px}
/* v7 therapist block on home */
.u-div{display:flex;align-items:center;gap:10px;margin:18px 2px 10px;color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px);font-weight:700}
.u-div::after{content:"";flex:1;height:1px;background:var(--sp-line)}
.u-tb .u-row{margin-bottom:8px}
.u-ic.warn{background:#FFF4E0;color:#B26A00}
.u-wide{width:100%;justify-content:center;margin:14px 0 4px;flex-direction:row;gap:8px;min-height:48px;border:1px solid var(--sp-line);border-radius:14px;background:#fff}
.u-search{display:flex;gap:8px;margin:4px 0 12px}
.u-search input{flex:1;min-height:46px;border:1px solid var(--sp-line);border-radius:14px;padding:0 14px;background:#fff;font:inherit}
.u-search button{width:46px;border:1px solid var(--sp-line);border-radius:14px;background:#fff;color:var(--sp-ink)}
.u-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.u-av{width:38px;height:38px;border-radius:50%;background:var(--ds-primary-container,#E8EAF6);color:var(--sp-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.u-kpis.three{grid-template-columns:repeat(3,1fr)}
.u-kpis.three .u-kpi b{font-size:var(--fs-body-sm,14.5px)}
.u-kpi b.bad{color:#B3261E}.u-kpi b.ok{color:#1E7F4F}
.u-foot{text-align:center;margin:14px 0}
.u-tb .u-row,.u-list .u-row{margin-bottom:0}
.u-kpis.two{grid-template-columns:repeat(2,1fr)}
/* v10 therapist tools */
.u-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 14px}
.u-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:1px solid var(--sp-line);border-radius:14px;background:#fff;color:var(--sp-ink);text-decoration:none;font:inherit;font-size:var(--fs-caption,12.5px);font-weight:600;cursor:pointer}
.u-tile svg{width:22px;height:22px;fill:none;stroke:var(--sp-primary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.u-dot{position:absolute;top:8px;inset-inline-end:10px;width:9px;height:9px;border-radius:50%;background:#D9822B}
.u-hint{color:var(--sp-ink-2);font-size:var(--fs-caption,12.5px);line-height:1.7;margin:6px 2px}
.u-srow-act.sm{margin-top:6px}.u-srow-act.sm form{display:flex;gap:8px;flex-wrap:wrap}
.u-btn[disabled]{opacity:.45;cursor:not-allowed}
.u-mini-link{display:inline-block;margin:8px 2px 0;font-size:var(--fs-caption,13px);font-weight:600;text-decoration:none}
.u-mini-link.center{display:block;text-align:center;margin:14px 0}
.u-btnrow{width:100%;text-align:inherit;font:inherit;cursor:pointer}
.u-sms{background:var(--ds-surface-low,#F4F6FB);border:1px dashed var(--sp-line);border-radius:12px;padding:12px;font-size:var(--fs-body-sm,13.5px);line-height:1.9;margin:10px 0}
.u-hours,.u-off{display:block}
.u-dayc{background:#fff;border:1px solid var(--sp-line);border-radius:14px;padding:10px 12px;margin-bottom:8px}
.u-dayc-n{display:block;margin-bottom:6px}
.u-iv{display:flex;align-items:center;gap:8px;margin:4px 0}
.u-iv select,.u-mode select{flex:1;min-height:42px;border:1px solid var(--sp-line);border-radius:10px;background:#fff;font:inherit;padding:0 8px}
.u-more summary{font-size:var(--fs-caption,12.5px);color:var(--sp-primary);cursor:pointer;margin-top:4px}
.u-cal{background:#fff;border:1px solid var(--sp-line);border-radius:14px;padding:8px;margin:8px 0}
.u-cal-h,.u-cal-r{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.u-cal-h span{text-align:center;font-size:var(--fs-label,12px);color:var(--sp-ink-2);padding:4px 0}
.u-d{position:relative;display:block;text-align:center}
.u-d input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.u-d span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;border-radius:10px;font-size:var(--fs-body-sm,14px)}
.u-d b{font-weight:700}.u-d small{font-size:var(--fs-label,12px);color:var(--sp-ink-2);min-height:12px}
.u-d input:checked + span{background:var(--sp-primary);color:#fff}.u-d input:checked + span small{color:#fff}
.u-d.void{min-height:46px}
.u-mode{border:0;padding:0;margin:8px 0 14px}
.u-sum{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--sp-line);border-radius:14px;padding:12px 14px;margin:6px 0 12px}
.u-sum small{color:var(--sp-ink-2)}
.u-pick{cursor:pointer}.u-pick input{width:20px;height:20px;accent-color:var(--sp-primary);flex:none}
.u-pick-l{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2)}
.u-fin input{width:100%;min-height:48px;border:1px solid var(--sp-line);border-radius:12px;padding:0 12px;font:inherit;background:#fff;letter-spacing:.5px}
.u-fin input[readonly]{background:var(--ds-surface-low,#F4F6FB)}
.u-bank{margin:6px 2px;font-weight:600}
.u-lock{display:flex;gap:8px;align-items:flex-start;color:var(--sp-ink-2);font-size:var(--fs-caption,13px);line-height:1.8}
.u-lock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none;margin-top:3px}
/* way back into the running call */
.u-live{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;margin:0 -16px 10px;padding:10px 16px;background:#1E7F4F;color:#fff;text-decoration:none}
.u-live-dot{width:10px;height:10px;border-radius:50%;background:#fff;animation:ulp 1.4s infinite;flex:none}
@keyframes ulp{50%{opacity:.35}}
.u-live-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.u-live-t small{opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-live-go{background:#fff;color:#14573A;border-radius:999px;padding:6px 12px;font-weight:700;font-size:var(--fs-caption,13px);white-space:nowrap}
.u-srow-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.5}

/* v12 calm wallet: one calm colour, no signs, no red/green */
.wl-hero,.wl-hero.bad,.wl-hero.ok,.wl-hero.mute{background:linear-gradient(150deg,#3F4A9C 0%,var(--ds-primary,#2B3577) 100%)}
.wl-hero .wl-k{font-size:var(--fs-body-sm,14px);opacity:.9}
.wl-hero .wl-amt{font-size:var(--fs-display,28px)}
.wl-hero .wl-btn,.wl-hero.bad .wl-btn{color:var(--ds-primary,#2B3577)}
.wl-h{font-size:var(--fs-body,15px);margin:18px 4px 2px}
.wl-row .wl-ic,.wl-row.in .wl-ic,.wl-row.out .wl-ic{background:var(--ds-surface,#EEF0F8);color:#4A55A2}
.wl-a,.wl-a.ok,.wl-a.ink{color:var(--sp-ink);font-weight:600;font-size:var(--fs-body-sm,14px);white-space:nowrap}
.wl-b small{color:var(--sp-ink-2)}
.wallet-chip .wc-debt,.wallet-chip .wc-open{color:inherit;font-weight:600}
.hm-open{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 8px;border-radius:var(--u-r);background:var(--ds-surface,#EEF0F8);color:var(--sp-ink);text-decoration:none;border:1px solid var(--sp-line)}
.hm-open-b{flex:1;display:flex;flex-direction:column;line-height:1.6}.hm-open-b small{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2)}
.hm-open-go{font-size:var(--fs-caption,13px);font-weight:700;color:var(--sp-primary);white-space:nowrap}
.wl-more summary{text-align:center;margin:14px 0 4px;color:var(--sp-primary);font-weight:600;font-size:var(--fs-body-sm,13.5px);cursor:pointer;list-style:none}

/* v14 — colourful, calm wallet; header chip fixed for everyone */
.wl-hero,.wl-hero.bad,.wl-hero.ok,.wl-hero.mute{background:radial-gradient(90% 120% at 0% 0%,#7B6CF0 0%,transparent 60%),radial-gradient(80% 100% at 100% 100%,#2BB3C0 0%,transparent 55%),linear-gradient(150deg,var(--ds-primary,#4B4FB8),var(--ds-primary,#2E3A8C));box-shadow:0 10px 24px rgba(60,70,170,.28)}
.wl-hero:before{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12)}
.wl-hero:after{content:"";position:absolute;inset-inline-start:-20px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.08)}
.wl-hero>*{position:relative;z-index:1}
.wl-hero .wl-amt{font-size:var(--fs-display,34px)}
.wl-hero .wl-btn{box-shadow:0 4px 12px rgba(0,0,0,.15)}
.wl-h{display:flex;align-items:center;gap:8px}.wl-h:before{content:"";width:6px;height:18px;border-radius:3px;background:linear-gradient(#7B6CF0,#2BB3C0)}
.wl-month{color:var(--ds-primary,#4B4FB8)}
details.wl-row{display:block;padding:0;border-radius:0}
details.wl-row>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
details.wl-row>summary::-webkit-details-marker{display:none}
.wl-chev{flex:none;width:8px;height:8px;border-inline-end:2px solid #9AA0C4;border-bottom:2px solid #9AA0C4;transform:rotate(45deg);transition:transform .2s;margin-inline-start:2px}
details.wl-row[open] .wl-chev{transform:rotate(-135deg)}
details.wl-row[open]{background:var(--ds-surface-low,#FAFAFF)}
.k-sales .wl-ic{background:var(--ds-primary-container,#E8E6FF);color:#5B4FD6}
.k-receipts .wl-ic{background:#DDF4F6;color:#13909E}
.k-purchases .wl-ic{background:#FFEBD9;color:#D9731A}
.k-payments .wl-ic{background:#DFEBFF;color:#2F6FD6}
.wl-row.k-sales .wl-ic,.wl-row.k-receipts .wl-ic,.wl-row.k-purchases .wl-ic,.wl-row.k-payments .wl-ic{}
.wl-d{padding:2px 14px 14px 14px;margin-inline-start:50px}
.wl-d p{margin:0 0 8px;font-size:var(--fs-caption,13px);line-height:1.9;color:var(--sp-ink-2)}
.wl-d dl{margin:0;display:flex;flex-direction:column;gap:6px}
.wl-d dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:var(--ds-primary-container,#F1F2FB);font-size:var(--fs-caption,13px)}
.wl-d dt{color:var(--sp-ink-2)}.wl-d dd{margin:0;font-weight:600}
/* header wallet: always there, same place on every page */
.top .wallet-chip{background:linear-gradient(135deg,var(--ds-primary-container,#EEF0FF),#E2F6F8);border-color:#D6DAF5;color:var(--ds-primary,#2E3A8C);position:relative;flex:none}
.top .wallet-chip svg{color:var(--ds-primary,#4B4FB8)}
.top .wallet-chip .wc-open{color:#D9731A}

/* v15 — booking: no letter avatars, warmer cards; wallet gift icon */
.bk-card{position:relative;overflow:hidden;background:linear-gradient(100deg,#fff 0%,var(--ds-primary-container,#F4F3FF) 100%);border-color:var(--ds-primary-container,#E3E2F7);padding-inline-start:18px}
.bk-card:before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(#7B6CF0,#2BB3C0)}
.bk-card .bk-slot{background:linear-gradient(135deg,#DDF4F6,var(--ds-primary-container,#E8E6FF));color:var(--ds-primary,#2E3A8C)}
.bk-card .bk-slot.off{background:var(--ds-surface,#F0F1F5);color:var(--sp-ink-2)}
.bk-thead{background:linear-gradient(100deg,#fff,var(--ds-primary-container,#F4F3FF));border-color:var(--ds-primary-container,#E3E2F7);border-inline-start:4px solid #7B6CF0}
.k-payments .wl-ic{background:#FFE8F1;color:#D6407F}
.k-purchases .wl-ic{background:#FFE8F1;color:#D6407F}
.wl-hero .wl-amt{font-size:var(--fs-display,30px)}

/* booking cards: nothing is clipped; text wraps and the slot drops under the name on narrow phones */
.bk-card{height:auto;min-height:76px;padding-block:10px;box-sizing:border-box;max-width:100%}
.bk-card .bk-n,.bk-card .bk-m{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.bk-card .bk-slot{width:auto;min-width:88px;height:auto;min-height:52px;padding:4px 10px;box-sizing:border-box}
.bk-card .bk-slot small{max-width:none;white-space:normal;overflow:visible}
@media (max-width:420px){
  .bk-card{flex-wrap:wrap;row-gap:8px}
  .bk-card .bk-b{flex:1 1 100%}
  .bk-card .bk-slot{flex:1 1 100%;flex-direction:row;gap:8px;min-height:44px}
}

/* nothing clipped on narrow phones: names/e-mails in list rows wrap; the bottom bar fits 320 px */
body .u-row-b b,body .rl-b b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.sp-nav a{min-width:0}
@media (max-width:374px){.sp-nav a svg{padding:4px 10px}}
body .sx-body small,body .u-srow-who small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* round 4: top-up sheet — lead line, chip → box feedback, live message; wallet "how it works"; calendar chooser */
.tp-lead{font-size:var(--fs-caption,13px);line-height:1.75;color:var(--sp-ink-2);margin:2px 2px 4px}
.tp-grid[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.tp-grid[data-n="3"] .tp-opt b{font-size:var(--fs-body,15px)}
.tp-opt:has(input:focus-visible){outline:2px solid var(--sp-primary);outline-offset:2px}
.tp-opt:has(input:checked)::after{content:"";position:absolute;top:6px;inset-inline-start:6px;width:8px;height:8px;border-radius:50%;background:var(--sp-primary)}
.tp-in.flash{animation:tpflash .5s ease-out}
@keyframes tpflash{0%{background:var(--sp-primary-soft)}100%{background:#fff}}
@media (prefers-reduced-motion:reduce){.tp-in.flash{animation:none}}
.tp-in.bad,.tp-in.bad:focus-within{border-color:var(--u-bad);box-shadow:0 0 0 3px var(--u-bad-s)}
.tp-msg{margin:8px 2px 0;font-size:var(--fs-caption,12.5px);line-height:1.7;color:var(--u-bad)}
.wl-faq{margin:22px 0 8px}
.wl-faq details{border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-surface);margin:0 0 8px;padding:0 14px}
.wl-faq summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;font-size:var(--fs-body-sm,14px)}
.wl-faq summary::-webkit-details-marker{display:none}
.wl-faq summary::after{content:"+";margin-inline-start:auto;color:var(--sp-ink-2);font-size:var(--fs-title-sm,18px)}
.wl-faq details[open] summary::after{content:"−"}
.wl-faq p{margin:0 0 14px;font-size:var(--fs-body-sm,13.5px);line-height:1.85;color:var(--sp-ink-2)}
.cal-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.cal-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-surface);color:inherit;text-decoration:none;font-weight:600}
.cal-opt:active,.cal-opt:hover{border-color:var(--sp-primary);background:var(--sp-primary-soft)}
.cal-opt small{display:block;font-weight:400;font-size:var(--fs-label,12px);color:var(--sp-ink-2)}
.cal-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--sp-primary-soft);color:var(--sp-primary);flex:none}
.cal-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cal-note{font-size:var(--fs-label,12px);color:var(--sp-ink-2);line-height:1.7;margin:8px 2px 0}
.lg{font-size:var(--fs-body-sm,14.5px);line-height:1.95;padding-bottom:24px}
.lg h2{font-size:var(--fs-title-sm,17px);margin:26px 0 8px;scroll-margin-top:72px}
.lg h3{font-size:var(--fs-body,15px);margin:16px 0 4px}
.lg p{margin:0 0 10px}
.lg ul,.lg ol{margin:0 0 12px;padding-inline-start:20px}
.lg li{margin:0 0 6px}
.lg-ver{font-size:var(--fs-caption,12.5px);color:var(--sp-ink-2);margin:4px 0 10px}
.lg-lead{background:var(--u-info-s);border-radius:var(--u-r);padding:12px 14px}
.lg-toc{border:1px solid var(--sp-line);border-radius:var(--u-r);padding:12px 14px;margin:14px 0 6px;background:var(--sp-surface)}
.lg-toc ol{margin:6px 0 0;columns:1}
.lg-toc a{display:inline-block;min-height:32px;line-height:32px;text-decoration:none}
@media (min-width:640px){.lg-toc ol{columns:2}}
.lg-top{text-align:center;margin-top:20px;font-size:var(--fs-caption,13px)}
.lg-toc ol{list-style-type:persian}

/* page changes: cross-fade, the bottom navigation stays put (round 3) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.sp-nav{view-transition-name:sp-nav}
/* «در انتظار پرداخت»: a held booking, just above the bottom bar on every page */
.u-pend{position:fixed;inset-inline:8px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border-radius:var(--u-r);background:var(--u-warn-s);color:var(--u-warn);border:1px solid #F2D49B;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.u-pend-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45;color:inherit;text-decoration:none}
.u-pend-t small{font-size:var(--fs-caption,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-pend-t b small{font-weight:400;margin-inline-start:4px}
.u-pend-go{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--u-warn);color:#fff;font:inherit;font-weight:700;cursor:pointer}
body.has-nav:has(#pending-bar) .sp-main{padding-bottom:168px}
.ss-pay-off{margin:-4px 0 10px}
:where(html[data-theme=dark]) .u-pend{background:var(--sp-surface);border-color:var(--sp-line);color:var(--sp-ink)}
@media (min-width:821px){.u-pend{inset-inline:calc(var(--dsk-nav,220px) + 16px) 16px;bottom:16px;max-width:560px}body.has-nav:has(#pending-bar) .sp-main{padding-bottom:120px}}