/* Tabib Desk theme: light */
:root { --bg: #f3f8f8; --bg-2: #ffffff; --surface: #ffffff; --stroke: rgba(13, 52, 60, .1); --fg: #0d2a31; --muted: #5d7479; --acc: #0ea5a4; --acc-2: #2563eb; --ok: #12a675; }
body { background: var(--bg); }
.hero::before, .hero::after { opacity: .18; }
.card, .stat, .steps li, .faq details { box-shadow: 0 20px 40px -32px rgba(13, 52, 60, .4); }
.btn--ghost { background: #fff; }
.btn--ghost:hover { background: #eef6f6; }
.window { background: #fff; box-shadow: 0 50px 100px -40px rgba(13, 52, 60, .45); }
.window__bar i { background: #dbe7e8; }
.form input, .form select, .form textarea { background: #f6fbfb; color: var(--fg); }
.toggle button[aria-pressed="true"] { background: var(--fg); color: #fff; }
.strip { background: #fff; }

h1 { font-size: clamp(2.4rem, 8.4vw, 4.1rem); }

/* Hero desk */
.deskhero { position: relative; padding: 0 0 60px; }
.diary__body { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 12px 14px; }
.diary__times { display: grid; grid-template-rows: repeat(5, 1fr); height: 300px; font-size: .72rem; color: var(--muted); }
.diary__col { position: relative; height: 300px; border-radius: 12px; background: repeating-linear-gradient(180deg, #f3f8f8 0 1px, transparent 1px 60px), repeating-linear-gradient(180deg, transparent 0 29px, #f7fbfb 29px 30px); }
.appt { position: absolute; left: 6px; right: 6px; top: calc(var(--t) * 1px); height: calc(var(--h) * 1px - 4px); padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 4px solid var(--c); font-size: .74rem; line-height: 1.25; overflow: hidden; animation: apptIn .55s var(--spring) both; }
.appt { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.appt b { font-size: .8rem; color: var(--fg); }
.appt span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.appt.is-new { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 40%, transparent); }
.appt.is-gone { animation: apptOut .4s var(--ease) forwards; }
@keyframes apptIn { from { opacity: 0; transform: scale(.85) translateY(6px); } }
@keyframes apptOut { to { opacity: 0; transform: scale(.9); } }
.diary__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 16px; border-top: 1px solid var(--stroke); color: var(--muted); font-size: .82rem; }
.diary__foot > b { color: var(--fg); font-size: 1.1rem; }
.diary__fill { margin-left: auto; }
.diary__fill b { color: var(--acc); font-size: 1rem; }
.call { position: absolute; left: -4%; bottom: 0; width: min(280px, 78%); padding: 12px 14px; border-radius: 18px; background: #0d2a31; color: #e8f4f4; box-shadow: 0 30px 60px -24px rgba(13, 52, 60, .7); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--spring); }
.call.is-on { opacity: 1; transform: none; }
.call__top { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.call__top span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .7; }
.call__dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: ping 1.6s infinite; }
.wave { display: flex; align-items: center; gap: 3px; height: 30px; margin: 10px 0 6px; }
.wave i { flex: 1; height: 20%; border-radius: 3px; background: linear-gradient(#5eead4, #60a5fa); transition: height .12s; }
.call__lines { display: grid; gap: 4px; min-height: 64px; font-size: .78rem; }
.call__lines p { animation: lineIn .35s var(--ease) both; }
.call__lines p[dir="rtl"] { font-family: var(--arabic); }
.call__lines em { font-style: normal; font-weight: 700; color: #5eead4; }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); } }
.remind { position: absolute; right: -3%; top: 26%; width: min(240px, 70%); padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: #dcf8e8; color: #0d3b26; font-size: .78rem; box-shadow: 0 24px 50px -24px rgba(13, 52, 60, .6); opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .5s var(--ease), transform .6s var(--spring); }
.remind.is-on { opacity: 1; transform: none; }
.remind b { display: block; margin-bottom: 4px; font-size: .74rem; color: #1f7a4d; }
.remind__reply { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 10px; background: #fff; font-weight: 800; color: #1f7a4d; opacity: 0; transition: opacity .4s; }
.remind.is-replied .remind__reply { opacity: 1; }

/* Receptionist */
.callchart { display: flex; align-items: end; gap: 4px; height: 140px; margin: 18px 0 12px; }
.callchart div { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; gap: 2px; }
.callchart i { display: block; border-radius: 3px; transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease) calc(var(--i) * 30ms); }
.callchart .ok { height: calc(var(--a) * 1%); background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 50%, #fff)); }
.callchart .miss { height: calc(var(--m) * 1%); background: repeating-linear-gradient(135deg, #f3b3b3 0 3px, #fde3e3 3px 6px); }
.is-in .callchart i { transform: none; }
.is-in .callchart .miss { animation: answered .5s forwards; animation-delay: calc(1.8s + var(--i) * 70ms); }
@keyframes answered { to { background: color-mix(in srgb, var(--acc) 70%, #fff); } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; }
.lg { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.lg--miss { background: repeating-linear-gradient(135deg, #f3b3b3 0 3px, #fde3e3 3px 6px); }
.lg--ok { background: var(--acc); }
.big { margin: 8px 0; }
.big b { font-size: clamp(3rem, 10vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.said { display: grid; gap: 8px; margin-top: 14px; }
.said p { padding: 10px 12px; border-radius: 12px; background: #f1f8f8; color: var(--fg); font-size: .9rem; }
.said p[dir="rtl"] { font-family: var(--arabic); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tags li { padding: 7px 13px; border-radius: 99px; background: color-mix(in srgb, var(--acc) 12%, #fff); color: #0b6e6d; font-size: .85rem; font-weight: 600; }

/* No-show calculator */
.calc { max-width: 1000px; margin: 0 auto; display: grid; gap: 26px; }
.calc__in { display: grid; gap: 18px; }
.sl { display: grid; gap: 8px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.sl span { display: flex; justify-content: space-between; gap: 10px; }
.sl output { color: var(--fg); font-weight: 800; }
.sl input { --fill: 50%; width: 100%; height: 30px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sl input::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--acc) var(--fill), #dfeaea var(--fill)); }
.sl input::-moz-range-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--acc) var(--fill), #dfeaea var(--fill)); }
.sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--acc); box-shadow: 0 4px 12px rgba(13,52,60,.25); }
.sl input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--acc); }
.cmp { display: grid; gap: 14px; }
.cmp__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: .9rem; color: var(--muted); }
.cmp__row b { color: #c2410c; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cmp__row--ok b { color: var(--fg); }
.cmp__bar { grid-column: 1 / -1; height: 14px; border-radius: 14px; background: #eef4f4; overflow: hidden; }
.cmp__bar i { display: block; height: 100%; width: 0; border-radius: 14px; background: linear-gradient(90deg, #fb923c, #ef4444); transition: width .8s var(--ease); }
.cmp__row--ok .cmp__bar i { background: linear-gradient(90deg, #fdba74, #fb923c); opacity: .6; }
.win { display: grid; gap: 2px; margin-top: 18px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 14%, #fff), color-mix(in srgb, var(--acc-2) 10%, #fff)); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.win > span { color: var(--muted); font-size: .9rem; }
.win > b { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #0b6e6d; font-variant-numeric: tabular-nums; }
.calc__note { margin-top: 10px; color: var(--muted); font-size: .8rem; }

/* Trend */
.trendcard { margin-top: 14px; }
.trendcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.drop { padding: 5px 12px; border-radius: 99px; background: #dcf8e8; color: #12804f; font-weight: 800; }
#nschart svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.ns__grid { stroke: #e3eded; }
.ns__lbl { fill: var(--muted); font: 11px var(--font); }
.ns__line { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease) .2s; }
.ns__area { opacity: 0; transition: opacity 1s 1s; }
.ns__dot { fill: #fff; stroke: var(--acc); stroke-width: 3; transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .4s var(--spring); transition-delay: calc(.3s + var(--i) * .22s); }
.is-in .ns__line { stroke-dashoffset: 0; }
.is-in .ns__area { opacity: 1; }
.is-in .ns__dot { scale: 1; }

@media (min-width: 700px) {
  .calc { grid-template-columns: 1fr 1.1fr; align-items: start; padding: 32px; }
}
@media (max-width: 699px) {
  .call { left: 0; }
  .remind { right: 0; top: 18%; }
}