/* Layout: a design viewer. A thin control bar (page, language, device) sits above a framed browser or phone. Inside the frame is the actual site, which switches between desktop and mobile layouts with container queries, so the same pages answer to the device toggle and to a real narrow screen. */
:root{
  --bg:#E9ECF2; --bar:#FFFFFF; --bar-fg:#1D2433; --bar-muted:#5B6478; --bar-line:#DCE1EA; --bar-chip:#EEF1F6;
  --cobalt:#3A5BA0; --cobalt-d:#2F4C88; --navy:#1E2F57; --sail:#8FA6D6; --cream:#FFF0CC; --sun:#F4C542;
  --ink:#1D2433; --slate:#5B6478; --mist:#E6EAF3; --paper:#FFFCF5; --line:#E3E7F0;
  --ok:#1E6B3E; --ok-bg:#E3F4EA; --warn:#8B6823; --warn-bg:#FBF4E6;
  --display:'Baloo Bhaijaan 2', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --text:'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --r:16px; --r-sm:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0F131B; --bar:#171C27; --bar-fg:#E8EBF2; --bar-muted:#A3ABBD; --bar-line:#2A3142; --bar-chip:#222838; color-scheme:dark } }
:root[data-theme="dark"]{ --bg:#0F131B; --bar:#171C27; --bar-fg:#E8EBF2; --bar-muted:#A3ABBD; --bar-line:#2A3142; --bar-chip:#222838; color-scheme:dark }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); font-family:var(--text); color:var(--bar-fg)}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px}

/* ---------- viewer bar ---------- */
.vbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--bar); border-bottom:1px solid var(--bar-line); padding:10px 16px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.vbar .ttl{font-family:var(--display); font-weight:700; font-size:16px; white-space:nowrap}
.vbar .pages{display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; flex:1 1 360px; min-width:0}
.vbar .pages button{border:0; background:transparent; color:var(--bar-muted); padding:5px 11px; border-radius:999px; white-space:nowrap; font-size:13px}
.vbar .pages button[aria-pressed="true"]{background:var(--cobalt); color:#fff}
.seg{display:inline-flex; background:var(--bar-chip); border-radius:999px; padding:3px}
.seg button{border:0; background:transparent; color:var(--bar-muted); border-radius:999px; padding:4px 12px; font-size:12.5px}
.seg button[aria-pressed="true"]{background:var(--bar); color:var(--bar-fg); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.stage{padding:20px 16px 40px; display:flex; justify-content:center}

/* frames */
.frame{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 70px -40px rgba(10,20,50,.55); width:100%; max-width:1280px; display:flex; flex-direction:column}
.frame .chrome{height:38px; background:#F1F3F7; display:flex; align-items:center; gap:8px; padding:0 14px; direction:ltr; flex:none}
.frame .chrome i{width:11px; height:11px; border-radius:50%; background:#D5DAE3}
.frame .chrome .url{flex:1; max-width:420px; margin:0 auto; background:#fff; border-radius:999px; font-size:12px; color:#5B6478; padding:4px 14px; text-align:center; font-family:var(--mono)}
.frame.phone{max-width:404px; border-radius:46px; background:#0E1014; padding:10px}
.frame.phone .chrome{display:none}
.viewport{height:min(860px, calc(100vh - 150px)); min-height:560px; overflow-y:auto; overflow-x:hidden; position:relative; transform:translateZ(0); background:var(--paper); scroll-behavior:smooth}
.frame.phone .viewport{border-radius:36px; height:min(820px, calc(100vh - 150px))}
@media (prefers-reduced-motion: reduce){ .viewport{scroll-behavior:auto} }

/* ======================= SITE ======================= */
.site{container-type:inline-size; container-name:site; color:var(--ink); font-family:var(--text); font-size:16px; line-height:1.8; background:var(--paper); min-height:100%}
.site[dir="ltr"]{font-family:'IBM Plex Sans', var(--text)}
.site h1,.site h2,.site h3,.site h4{font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; color:var(--ink)}
.site p{margin:0}
.site a{color:var(--cobalt)}
.site [dir="ltr"] .fwd, .site[dir="ltr"] .fwd{transform:scaleX(-1)}
.site[dir="ltr"] .mk-flip{transform:scaleX(-1)}
.ic{width:20px; height:20px; flex:none}
.wrapc{max-width:1160px; margin:0 auto; padding-inline:32px}
@container site (max-width: 700px){ .wrapc{padding-inline:18px} }
.sec{padding-block:72px}
@container site (max-width: 700px){ .sec{padding-block:44px} }
.sec-head{display:grid; gap:8px; margin-bottom:28px; max-width:62ch}
.sec-head .eb{font-size:13px; font-weight:600; color:var(--cobalt)}
.sec-head h2{font-size:38px; line-height:1.25}
.sec-head p{color:var(--slate); font-size:17px}
@container site (max-width: 700px){ .sec-head h2{font-size:27px} .sec-head p{font-size:15.5px} }
.muted{color:var(--slate)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:14px; padding:13px 22px; font-weight:600; font-size:15.5px; background:var(--cobalt); color:#fff; text-decoration:none; transition:background .15s}
.btn:hover{background:var(--cobalt-d)}
.btn.lg{padding:16px 28px; font-size:17px}
.btn.sec2{background:transparent; color:var(--cobalt); box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.btn.sec2:hover{background:#EEF2FA}
.btn.ghost{background:transparent; color:var(--cobalt); padding-inline:6px}
.btn.white{background:#fff; color:var(--cobalt)}
.btn.sun{background:var(--sun); color:var(--ink)}
.btn.sm{padding:9px 14px; font-size:14px; border-radius:11px}
.btn .ic{width:18px; height:18px}

/* chips & badges */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; border-radius:999px; padding:4px 12px; background:var(--mist); color:var(--ink); white-space:nowrap}
.chip .ic{width:15px; height:15px}
.chip.cream{background:var(--cream)}
.chip.outline{background:#fff; box-shadow:inset 0 0 0 1px var(--line)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
button.chip{border:0}
button.chip[aria-pressed="true"]{background:var(--cobalt); color:#fff}

/* header */
.hdr{position:sticky; top:0; z-index:20; background:rgba(255,252,245,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:20px; height:74px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; background:none; border:0; padding:0}
.brand svg{width:44px; height:44px}
.brand b{font-family:var(--display); font-weight:700; font-size:21px; line-height:1.05; display:block}
.brand small{font-size:11.5px; color:var(--slate); display:block; line-height:1.3}
.nav{display:flex; gap:2px; flex:1; justify-content:center}
.nav button{border:0; background:none; color:var(--ink); font-size:14.5px; padding:8px 11px; border-radius:10px; white-space:nowrap}
.nav button:hover{background:var(--mist)}
.nav button[aria-current="page"]{color:var(--cobalt); font-weight:600}
.tools{display:flex; align-items:center; gap:8px; flex:none}
.sel{appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; font-size:13px; color:var(--ink); font-family:inherit}
.langbtn{border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; font-size:13px; color:var(--ink); display:inline-flex; align-items:center; gap:6px}
.menubtn{display:none; border:0; background:var(--mist); border-radius:12px; width:42px; height:42px; place-items:center; color:var(--ink)}
@container site (max-width: 1060px){ .nav{display:none} .menubtn{display:grid} .hdr-in{justify-content:space-between} .tools .btn{display:none} }
@container site (max-width: 700px){ .hdr-in{height:64px; gap:10px} .brand svg{width:36px;height:36px} .brand b{font-size:17px} .brand small{font-size:10px} .tools .sel{display:none} }
.drawer{border-top:1px solid var(--line); background:var(--paper); padding:10px 0 18px}
.drawer nav{display:grid}
.drawer nav button{border:0; background:none; text-align:start; padding:12px 4px; font-size:17px; border-bottom:1px solid var(--line); color:var(--ink); display:flex; justify-content:space-between; align-items:center}
.drawer .row{display:flex; gap:8px; margin-top:14px; align-items:center}

/* quick exit */
.qexit{position:fixed; bottom:18px; inset-inline-start:18px; z-index:40; display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:10px 16px 10px 14px; font-size:14px; font-weight:600; box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.qexit .ic{width:16px; height:16px}
.qexit small{font-weight:400; opacity:.7; font-size:11px; margin-inline-start:4px}
@container site (max-width: 700px){ .qexit small{display:none} .qexit{bottom:14px; inset-inline-start:14px; padding:9px 13px} }

/* hero */
.hero{background:var(--cream); position:relative; overflow:hidden}
.hero-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:64px 84px}
.hero h1{font-size:54px; line-height:1.2; margin:14px 0 16px}
.hero p.lead{font-size:19px; color:var(--slate); max-width:46ch}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero .chips{margin-top:26px}
.hero-art{width:100%; max-width:520px; justify-self:center}
.hero .wave{position:absolute; inset-inline:0; bottom:-1px; height:44px; color:var(--paper)}
@container site (max-width: 860px){ .hero-in{grid-template-columns:1fr; padding-block:26px 64px; gap:12px} .hero-art{max-width:300px; order:-1; justify-self:start} .hero h1{font-size:34px; margin-top:8px} .hero p.lead{font-size:16px} .hero .ctas .btn{flex:1 1 100%} }

/* cards */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px}
.grid{display:grid; gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@container site (max-width: 1060px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container site (max-width: 700px){ .g3,.g2{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} }

.dcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:12px; align-content:start; text-align:start; color:var(--ink); transition:transform .15s, box-shadow .15s; border-top:4px solid var(--dc)}
.dcard:hover{transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(20,40,90,.45)}
.dcard .di{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--dt); color:var(--dc)}
.dcard .di .ic{width:26px; height:26px}
.dcard h3{font-size:19px; line-height:1.35}
.dcard p{font-size:14px; color:var(--slate); line-height:1.7}
.dcard .more{font-size:13.5px; font-weight:600; color:var(--dc); display:inline-flex; align-items:center; gap:4px}
.dcard .more .ic{width:15px; height:15px}
@container site (max-width: 700px){ .dcard{padding:14px; gap:8px} .dcard h3{font-size:15px} .dcard p{display:none} .dcard .di{width:40px; height:40px} .dcard .more{display:none} }

.who-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; align-items:center}

/* therapist */
.tcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.tphoto{aspect-ratio:4/3; background:var(--tbg, var(--mist)); position:relative; overflow:hidden; display:grid; place-items:end center; max-width:100%}
.tphoto svg.p{width:62%; height:auto}
.tphoto .ph-note{position:absolute; top:10px; inset-inline-start:10px; font-size:11px; background:rgba(255,255,255,.85); border-radius:999px; padding:1px 9px; color:var(--slate)}
.tbody{padding:16px 18px 18px; display:grid; gap:8px; flex:1; align-content:start}
.tbody h3{font-size:19px}
.tbody .role{font-size:14px; color:var(--slate)}
.meta-row{display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px}
.meta-row .chip{font-size:12px; padding:2px 10px}
.tfoot{padding:0 18px 18px; display:flex; gap:8px}
.tfoot .btn{flex:1}
.strip{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:16px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory}
.strip > *{scroll-snap-align:start}
@container site (max-width: 700px){ .strip{grid-auto-columns:78%} }

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:s}
.step{background:#fff; border-radius:var(--r); padding:24px; border:1px solid var(--line); position:relative}
.step .n{width:40px; height:40px; border-radius:50%; background:var(--cream); color:var(--navy); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:12px}
.step h3{font-size:20px; margin-bottom:6px}
.step p{color:var(--slate); font-size:15px}
@container site (max-width: 860px){ .steps{grid-template-columns:1fr; gap:10px} .step{display:grid; grid-template-columns:40px 1fr; gap:4px 14px; padding:16px} .step .n{grid-row:span 2; margin:0} .step h3{font-size:17px; margin:0} }

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@container site (max-width: 860px){ .quotes{grid-template-columns:1fr} }
.quote{background:#fff; border-radius:var(--r); padding:24px; border:1px solid var(--line); display:grid; gap:14px; align-content:space-between}
.quote q{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.55; quotes:"«" "»"}
.site[dir="ltr"] .quote q{quotes:"“" "”"}
.quote .who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--slate)}
.quote .who .av{width:34px; height:34px; border-radius:50%; background:var(--mist); display:grid; place-items:center; color:var(--slate)}
.privacy-note{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate); margin-top:16px}

/* final cta */
.final{background:var(--cobalt); color:#fff; border-radius:28px; padding:48px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; position:relative; overflow:hidden}
.final h2{color:#fff; font-size:36px; line-height:1.25}
.final p{opacity:.88; margin-top:8px; max-width:50ch}
.final .acts{display:flex; flex-direction:column; gap:10px; position:relative}
.final .bgm{position:absolute; inset-inline-end:-40px; bottom:-60px; width:260px; opacity:.1}
@container site (max-width: 860px){ .final{grid-template-columns:1fr; padding:28px 22px; border-radius:22px} .final h2{font-size:26px} }

/* footer */
.ftr{background:var(--navy); color:#C9D3EA; margin-top:24px}
.ftr-in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-block:48px 24px}
.ftr h4{color:#fff; font-size:15px; margin-bottom:10px; font-family:var(--text); font-weight:600}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px}
.ftr button{background:none; border:0; color:inherit; padding:0; text-align:start}
.ftr .brand b{color:#fff} .ftr .brand small{color:#AFC0E3}
.ftr .bottom{border-top:1px solid rgba(255,255,255,.12); padding-block:16px 80px; font-size:12.5px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
@container site (max-width: 860px){ .ftr-in{grid-template-columns:1fr 1fr} .ftr-in > :first-child{grid-column:1/-1} }

/* page hero (inner pages) */
.phero{background:var(--ph, var(--cream)); padding-block:48px 56px; position:relative; overflow:hidden}
.phero > .crumbs{max-width:1160px; margin-inline:auto; padding-inline:32px}
@container site (max-width: 700px){ .phero > .crumbs{padding-inline:18px} }
.phero .crumbs{font-size:13px; color:var(--slate); display:flex; gap:6px; align-items:center; margin-bottom:12px}
.phero .crumbs button{background:none; border:0; padding:0; color:var(--slate)}
.phero h1{font-size:46px; line-height:1.2}
.phero p.lead{font-size:18px; color:var(--slate); margin-top:12px; max-width:60ch}
.phero .wave{position:absolute; inset-inline:0; bottom:-1px; height:36px; color:var(--paper)}
@container site (max-width: 700px){ .phero{padding-block:26px 44px} .phero h1{font-size:30px} .phero p.lead{font-size:15.5px} }

/* about */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:48px; align-items:start}
@container site (max-width: 860px){ .about-grid{grid-template-columns:1fr; gap:24px} }
.portrait{border-radius:28px 28px 120px 28px; overflow:hidden; aspect-ratio:4/5; background:var(--mist); display:grid; place-items:end center; position:relative; max-width:100%}
.site[dir="ltr"] .portrait{border-radius:28px 28px 28px 120px}
.portrait .ph-note{position:absolute; top:14px; inset-inline-start:14px; font-size:12px; background:rgba(255,255,255,.88); border-radius:999px; padding:2px 10px; color:var(--slate)}
.prose{display:grid; gap:16px; font-size:17px; max-width:64ch}
.prose h3{font-size:24px; margin-top:10px}
.timeline{display:grid; gap:0; border-inline-start:2px solid var(--mist); margin-inline-start:8px}
.tl{position:relative; padding:0 22px 20px}
.tl::before{content:""; position:absolute; inset-inline-start:-7px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--cobalt); box-shadow:0 0 0 4px var(--paper)}
.tl b{display:block; font-size:16px}
.tl span{font-size:14px; color:var(--slate)}
.tl .fill{display:inline-block; background:var(--warn-bg); color:var(--warn); border-radius:6px; padding:0 6px; font-size:12px; margin-inline-start:6px}
.principles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@container site (max-width: 1060px){ .principles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container site (max-width: 560px){ .principles{grid-template-columns:1fr} }
.pr{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px}
.pr .pi{width:44px; height:44px; border-radius:14px; background:var(--cream); color:var(--navy); display:grid; place-items:center; margin-bottom:12px}
.pr h3{font-size:18px; margin-bottom:4px}
.pr p{font-size:14.5px; color:var(--slate)}

/* department page */
.dsel{display:flex; gap:8px; overflow-x:auto; padding:14px 0; scrollbar-width:thin}
.dsel button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px; font-size:13.5px; white-space:nowrap; display:inline-flex; gap:6px; align-items:center; color:var(--ink)}
.dsel button[aria-pressed="true"]{background:var(--dc); color:#fff; border-color:var(--dc)}
.dsel button .ic{width:16px; height:16px}
.dhero-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:center}
.dhero-badge{width:120px; height:120px; border-radius:36px; background:#fff; display:grid; place-items:center; color:var(--dc); justify-self:center; box-shadow:0 20px 40px -26px rgba(0,0,0,.35)}
.dhero-badge .ic{width:62px; height:62px}
@container site (max-width: 860px){ .dhero-grid{grid-template-columns:1fr; gap:14px} .dhero-badge{width:72px; height:72px; border-radius:22px; justify-self:start; order:-1} .dhero-badge .ic{width:38px;height:38px} }
.fit{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@container site (max-width: 860px){ .fit{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fitc{border-radius:14px; padding:16px; background:#fff; border:1px solid var(--line); display:grid; gap:6px}
.fitc.on{border-color:var(--dc); box-shadow:inset 0 0 0 1px var(--dc)}
.fitc.off{opacity:.45}
.fitc .ic{color:var(--dc); width:24px; height:24px}
.fitc b{font-size:15px}
.fitc small{font-size:12.5px; color:var(--slate)}
.svc{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
.svc h3{font-size:19px}
.svc p{font-size:14px; color:var(--slate); margin-top:4px}
.svc .facts{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13.5px; color:var(--ink)}
.svc .facts span{display:inline-flex; align-items:center; gap:5px}
.svc .facts .ic{width:16px; height:16px; color:var(--slate)}
.svc .price{text-align:end; display:grid; gap:8px; justify-items:end}
.svc .price b{font-family:var(--display); font-size:24px; line-height:1; font-weight:700}
.svc .price small{font-size:12px; color:var(--slate)}
@container site (max-width: 700px){ .svc{grid-template-columns:1fr; padding:16px} .svc .price{justify-items:stretch; text-align:start; grid-template-columns:1fr auto; align-items:center} .svc .price .btn{grid-column:1/-1} }
.mode{display:inline-flex; gap:4px}
.mode .chip{font-size:12px; padding:1px 9px}

/* team */
.filters{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-bottom:22px}
.filters .lab{font-size:13px; color:var(--slate)}
.tdet{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:40px; align-items:start}
@container site (max-width: 860px){ .tdet{grid-template-columns:1fr; gap:18px} }
.side{position:sticky; top:96px; display:grid; gap:14px}
@container site (max-width: 860px){ .side{position:static} }
.slots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.slot{border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px; text-align:center; font-size:13px}
.slot b{display:block; font-size:14px}
.tz{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--slate); margin-top:8px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14.5px}
.kv dt{color:var(--slate)} .kv dd{margin:0; font-weight:500}

/* courses */
.ccard{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.ccard .cv{aspect-ratio:16/8; position:relative; overflow:hidden; display:block; max-width:100%}
.ccard .cv svg{width:100%; height:100%; display:block}
.ccard .cb{padding:18px; display:grid; gap:10px; flex:1; align-content:start}
.ccard h3{font-size:20px; line-height:1.35}
.seats{display:grid; gap:6px; font-size:13px}
.seats .bar{height:8px; background:var(--mist); border-radius:999px; overflow:hidden}
.seats .bar i{display:block; height:100%; background:var(--cobalt); border-radius:999px}
.seats.low .bar i{background:#AC3950}
.seats.low b{color:#AC3950}
.ccard .cf{padding:0 18px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.ccard .cf b{font-family:var(--display); font-size:22px}
.sched{display:grid; gap:8px}
.sched .row{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px}
.sched .row .d{font-family:var(--display); font-weight:700; color:var(--cobalt); text-align:center; line-height:1.1; min-width:48px}
.sched .row .d small{display:block; font-family:var(--text); font-weight:500; font-size:11.5px; color:var(--slate)}

/* how it works */
.cmp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@container site (max-width: 700px){ .cmp{grid-template-columns:1fr} }
.cmp .card h3{display:flex; align-items:center; gap:10px; font-size:21px; margin-bottom:12px}
.cmp ul{margin:0; padding-inline-start:20px; display:grid; gap:6px; font-size:15px}
.timeline-h{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@container site (max-width: 860px){ .timeline-h{grid-template-columns:1fr} }
.tstep{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; position:relative}
.tstep .t{font-size:12.5px; font-weight:600; color:var(--cobalt)}
.tstep h3{font-size:18px; margin:6px 0 4px}
.tstep p{font-size:14.5px; color:var(--slate)}
.policy{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@container site (max-width: 860px){ .policy{grid-template-columns:1fr} }
.pol{border-radius:var(--r); padding:20px; display:grid; gap:6px; align-content:start}
.pol .big{font-family:var(--display); font-weight:800; font-size:40px; line-height:1}
.pol h3{font-size:18px}
.pol p{font-size:14.5px}
.conf{display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:center; background:var(--navy); color:#DCE3F2; border-radius:28px; padding:40px}
.conf h2{color:#fff; font-size:30px; margin-bottom:10px}
.conf ul{margin:0; padding-inline-start:20px; display:grid; gap:6px}
@container site (max-width: 700px){ .conf{grid-template-columns:1fr; padding:24px; gap:14px} .conf h2{font-size:23px} }
.cancel-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--r); overflow:hidden; font-size:15px}
.cancel-table td,.cancel-table th{padding:14px 18px; border-bottom:1px solid var(--line); text-align:start}
.cancel-table th{background:var(--mist); font-size:13px}
.cancel-table tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)}

/* faq */
.faq-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:start}
@container site (max-width: 860px){ .faq-layout{grid-template-columns:1fr; gap:14px} }
.faq-cats{display:grid; gap:4px; position:sticky; top:96px}
@container site (max-width: 860px){ .faq-cats{display:flex; overflow-x:auto; position:static} }
.faq-cats button{border:0; background:none; text-align:start; padding:9px 14px; border-radius:10px; color:var(--ink); white-space:nowrap; font-size:14.5px}
.faq-cats button[aria-pressed="true"]{background:var(--mist); color:var(--cobalt); font-weight:600}
.acc{display:grid; gap:10px}
.acc details{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.acc summary{list-style:none; cursor:pointer; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px; font-weight:600; font-size:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{width:28px; height:28px; border-radius:50%; background:var(--mist); display:grid; place-items:center; flex:none; transition:transform .2s; color:var(--cobalt); font-size:18px; line-height:1}
.acc details[open] summary .pm{transform:rotate(45deg); background:var(--cobalt); color:#fff}
.acc .ans{padding:0 20px 18px; color:var(--slate); font-size:15px; max-width:70ch}
.search{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 14px; max-width:520px; margin-top:20px}
.search input{border:0; outline:0; flex:1; font:inherit; padding:10px 0; background:transparent; color:var(--ink)}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start}
@container site (max-width: 860px){ .contact-grid{grid-template-columns:1fr} }
.map{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:4/3; max-width:100%}
.map svg{width:100%; height:100%; display:block}
.map .open{position:absolute; bottom:12px; inset-inline-start:12px}
.wa-card{background:#E8F7EE; border-radius:var(--r); padding:22px; display:grid; gap:12px}
.wa-card .num{font-family:var(--mono); font-size:20px; direction:ltr; text-align:start}
.site[dir="rtl"] .wa-card .num{text-align:right}
.hours{width:100%; border-collapse:collapse; font-size:15px}
.hours td{padding:9px 0; border-bottom:1px dashed var(--line)}
.hours td:last-child{text-align:end; font-variant-numeric:tabular-nums}
.hours tr.today td{font-weight:600; color:var(--cobalt)}
.hours tr.closed td:last-child{color:var(--slate)}
.form{display:grid; gap:14px}
.field{display:grid; gap:6px}
.field label{font-size:14px; font-weight:500}
.field input,.field select,.field textarea{font:inherit; border:1px solid #CDD4E2; border-radius:12px; padding:12px 14px; background:#fff; color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cobalt); outline-offset:0; border-color:transparent}
.field .hint{font-size:12.5px; color:var(--slate)}
.ok-msg{background:var(--ok-bg); color:var(--ok); border-radius:12px; padding:12px 14px; display:flex; gap:8px; align-items:center; font-size:14.5px}

/* toast & exit screen */
.toast{position:fixed; bottom:76px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; z-index:60; max-width:calc(100% - 32px); text-align:center}
.exit-screen{position:absolute; inset:0; background:#fff; z-index:70; display:grid; place-items:center; text-align:center; padding:24px; font-family:Arial, sans-serif; color:#202124}
.exit-screen .g{font-size:64px; font-weight:500; letter-spacing:-2px}
.exit-screen .g span:nth-child(1){color:#4285F4} .exit-screen .g span:nth-child(2){color:#EA4335} .exit-screen .g span:nth-child(3){color:#FBBC05} .exit-screen .g span:nth-child(4){color:#4285F4} .exit-screen .g span:nth-child(5){color:#34A853} .exit-screen .g span:nth-child(6){color:#EA4335}
.exit-screen .sb{width:min(480px,90%); height:44px; border:1px solid #DFE1E5; border-radius:24px; margin:20px auto}
.exit-screen .note{font-family:var(--text); font-size:13px; color:#5B6478; max-width:44ch; margin:0 auto 12px; line-height:1.7}
.exit-screen button{font-family:var(--text); border:1px solid #DFE1E5; background:#F8F9FA; border-radius:8px; padding:8px 14px; color:#202124}
/* ===== booking ===== */

/* ======================= BOOKING ======================= */
.vbar .sect{display:inline-flex}
.bk{min-height:100%; display:flex; flex-direction:column; background:var(--paper)}
.bk-hdr{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line)}
.bk-hdr-in{display:flex; align-items:center; justify-content:space-between; gap:10px; height:64px}
.bk-hdr .left{display:flex; align-items:center; gap:6px}
.iconbtn{border:0; background:var(--mist); color:var(--ink); width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none}
.iconbtn .ic{width:20px; height:20px}
.qexit.inline{position:static; box-shadow:none; padding:7px 12px; font-size:13px}
.qexit.inline small{display:none}
.bk-prog{background:#fff; border-bottom:1px solid var(--line)}
.bk-prog-in{padding-block:10px 12px; display:grid; gap:8px}
.bk-prog .lbl{display:flex; justify-content:space-between; font-size:13px; color:var(--slate)}
.bk-prog .lbl b{color:var(--ink); font-weight:600}
.bk-prog .bars{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.bk-prog .bars i{height:5px; border-radius:999px; background:var(--mist)}
.bk-prog .bars i.done{background:var(--cobalt)}
.bk-prog .bars i.now{background:linear-gradient(90deg, var(--cobalt) 50%, var(--mist) 50%)}
.site[dir="rtl"] .bk-prog .bars i.now{background:linear-gradient(270deg, var(--cobalt) 50%, var(--mist) 50%)}
.hold{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--cream); border-radius:12px; padding:8px 12px; font-size:13.5px}
.hold b{font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums; direction:ltr; display:inline-block}
.hold.low{background:#FBE6EB; color:#8A2C40}
.hold .ref{font-family:var(--mono); font-size:12.5px; color:var(--slate); direction:ltr}
.bk-body{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start; padding-block:32px 40px}
@container site (max-width: 900px){ .bk-body{grid-template-columns:1fr; padding-block:20px 24px; gap:16px} .bk-aside{display:none} }
.bk-main{display:grid; gap:18px; max-width:680px; width:100%}
.bk-main h1{font-size:32px; line-height:1.3}
.bk-main .sub{color:var(--slate); font-size:15.5px; margin-top:-8px}
@container site (max-width: 700px){ .bk-main h1{font-size:25px} .bk-main .sub{font-size:14.5px} }
.bk-aside{position:sticky; top:150px; display:grid; gap:12px}
.sum{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; display:grid; gap:10px; font-size:14px}
.sum h3{font-size:17px}
.sum .r{display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:start}
.sum .r .ic{width:18px; height:18px; color:var(--slate); margin-top:3px}
.sum .r.empty{color:#A1A8B8}
.sum .tot{border-top:1px dashed var(--line); padding-top:10px; display:flex; justify-content:space-between; font-weight:600}
.bk-bar{position:sticky; bottom:0; z-index:15; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line)}
.bk-bar-in{display:flex; align-items:center; gap:12px; padding-block:12px; justify-content:space-between}
.bk-bar .info{font-size:13px; color:var(--slate); line-height:1.4}
.bk-bar .info b{display:block; color:var(--ink); font-size:15px}
.bk-bar .btn{min-width:200px}
@container site (max-width: 700px){ .bk-bar .btn{min-width:0; flex:1} .bk-bar .info{max-width:44%} }
.btn[disabled]{background:#B9C3D8; cursor:not-allowed}

/* big choice cards */
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.choices.one{grid-template-columns:1fr}
@container site (max-width: 520px){ .choices{grid-template-columns:1fr} }
.choice{display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center; text-align:start; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:16px; color:var(--ink); min-height:84px; transition:border-color .15s, box-shadow .15s}
.choice:hover{border-color:#B9C6E2}
.choice[aria-pressed="true"]{border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(58,91,160,.15)}
.choice .ci{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--ct, var(--mist)); color:var(--cc, var(--cobalt))}
.choice .ci .ic{width:26px; height:26px}
.choice b{display:block; font-size:16.5px; line-height:1.4}
.choice small{display:block; color:var(--slate); font-size:13.5px; line-height:1.5; margin-top:2px}
.choice .tick{width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; color:#fff}
.choice[aria-pressed="true"] .tick{background:var(--cobalt); border-color:var(--cobalt)}
.choice .tick .ic{width:14px; height:14px}
.choice[disabled]{opacity:.45; cursor:not-allowed}
.choice .side{font-size:13px; text-align:end; color:var(--slate)}
.choice .side b{font-size:15px; color:var(--ink)}
.qcount{font-size:13px; font-weight:600; color:var(--cobalt)}
.wiz-dots{display:flex; gap:6px}
.wiz-dots i{width:28px; height:5px; border-radius:999px; background:var(--mist)}
.wiz-dots i.on{background:var(--cobalt)}
.result{background:var(--cobalt); color:#fff; border-radius:22px; padding:24px; display:grid; gap:12px; position:relative; overflow:hidden}
.result h2{color:#fff; font-size:26px}
.result p{opacity:.9}
.result .why{background:rgba(255,255,255,.12); border-radius:14px; padding:12px 14px; font-size:14px}
.result .bgm{position:absolute; inset-inline-end:-30px; bottom:-40px; width:170px; opacity:.12}
.alt{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; color:var(--slate)}

/* service list */
.dgroup{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.dgroup > button{width:100%; display:flex; align-items:center; gap:12px; border:0; background:none; padding:14px 16px; text-align:start; color:var(--ink)}
.dgroup > button .di{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none}
.dgroup > button .di .ic{width:22px; height:22px}
.dgroup > button b{flex:1; font-size:16px}
.dgroup > button .chev{transition:transform .2s; color:var(--slate)}
.dgroup.open > button .chev{transform:rotate(-90deg)}
.site[dir="ltr"] .dgroup > button .chev{transform:scaleX(-1)}
.site[dir="ltr"] .dgroup.open > button .chev{transform:rotate(90deg) scaleX(-1)}
.svc-opts{display:grid; gap:8px; padding:0 12px 12px}
.svc-opt{display:grid; grid-template-columns:1fr auto; gap:4px 12px; text-align:start; border:1.5px solid var(--line); background:var(--paper); border-radius:14px; padding:12px 14px; color:var(--ink)}
.svc-opt[aria-pressed="true"]{border-color:var(--cobalt); background:#F1F5FC; box-shadow:0 0 0 3px rgba(58,91,160,.12)}
.svc-opt b{font-size:15px}
.svc-opt .p{font-family:var(--display); font-weight:700; font-size:17px; text-align:end}
.svc-opt small{grid-column:1/-1; font-size:12.5px; color:var(--slate); display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center}
.svc-opt small .ic{width:14px; height:14px}

/* therapist pick */
.tpick{display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; text-align:start; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:12px 14px; color:var(--ink)}
.tpick[aria-pressed="true"]{border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(58,91,160,.15)}
.tpick .av{width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid; place-items:end center}
.tpick b{font-size:16px; display:block}
.tpick small{font-size:13px; color:var(--slate); display:block; line-height:1.5}
.tpick .next{font-size:12px; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:2px 9px; white-space:nowrap}
.tpick.any .av{background:var(--cream); place-items:center; color:var(--navy)}
.tpick.any .av .ic{width:30px; height:30px}
@container site (max-width: 520px){ .tpick{grid-template-columns:52px 1fr} .tpick .av{width:52px; height:52px} .tpick .next{grid-column:2; justify-self:start} }

/* calendar */
.tzbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px; font-size:14px}
.tzbar .ic{color:var(--cobalt)}
.tzbar b{font-weight:600}
.tzbar select{margin-inline-start:auto}
.days{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.day{flex:0 0 74px; scroll-snap-align:start; border:1.5px solid var(--line); background:#fff; border-radius:16px; padding:10px 6px; display:grid; justify-items:center; gap:2px; color:var(--ink)}
.day small{font-size:12px; color:var(--slate)}
.day b{font-family:var(--display); font-size:24px; line-height:1.1}
.day .n{font-size:11px; color:var(--ok)}
.day[aria-pressed="true"]{background:var(--cobalt); border-color:var(--cobalt); color:#fff}
.day[aria-pressed="true"] small,.day[aria-pressed="true"] .n{color:rgba(255,255,255,.85)}
.month{font-size:14px; font-weight:600; color:var(--slate)}
.slots-g{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
@container site (max-width: 520px){ .slots-g{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tslot{border:1.5px solid var(--line); background:#fff; border-radius:12px; padding:12px 4px; font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.tslot small{display:block; font-weight:400; font-size:11.5px; color:var(--slate)}
.tslot[aria-pressed="true"]{background:var(--cobalt); color:#fff; border-color:var(--cobalt)}
.tslot[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.part{font-size:13px; font-weight:600; color:var(--slate); display:flex; align-items:center; gap:6px; margin-top:6px}

/* client form */
.seg2{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.seg2 button{border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:12px 8px; display:grid; justify-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--ink)}
.seg2 button .ic{width:24px; height:24px; color:var(--cobalt)}
.seg2 button[aria-pressed="true"]{border-color:var(--cobalt); background:#F1F5FC; box-shadow:0 0 0 3px rgba(58,91,160,.12)}
.fset{background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; display:grid; gap:14px}
.fset h3{font-size:17px; display:flex; align-items:center; gap:8px}
.fset h3 .ic{color:var(--cobalt)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@container site (max-width: 520px){ .row2{grid-template-columns:1fr} }
.phone-in{display:grid; grid-template-columns:108px 1fr; gap:8px; direction:ltr}
.phone-in select,.phone-in input{direction:ltr}
.field .err{font-size:12.5px; color:#A62E47}
.field.bad input{border-color:#C9506A}
.check{display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:14px}
.check input{width:20px; height:20px; margin-top:3px; accent-color:var(--cobalt)}
.lockline{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate)}
.lockline .ic{width:16px; height:16px}

/* review */
.rev{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.rev .rr{display:grid; grid-template-columns:22px 1fr auto; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:start; font-size:15px}
.rev .rr:last-child{border-bottom:0}
.rev .rr .ic{color:var(--slate); width:20px; height:20px; margin-top:3px}
.rev .rr small{display:block; color:var(--slate); font-size:12.5px}
.rev .rr button{border:0; background:none; color:var(--cobalt); font-size:13.5px; font-weight:500}
.refbox{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--navy); color:#fff; border-radius:18px; padding:16px 18px}
.refbox small{display:block; opacity:.75; font-size:12.5px}
.refbox b{font-family:var(--mono); font-size:22px; letter-spacing:.06em; direction:ltr; display:inline-block}
.refbox .btn{background:rgba(255,255,255,.14)}

/* payment */
.amt{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.amt button{border:1.5px solid var(--line); background:#fff; border-radius:16px; padding:14px; text-align:start; display:grid; gap:2px; color:var(--ink)}
.amt button b{font-family:var(--display); font-size:22px}
.amt button small{font-size:12.5px; color:var(--slate)}
.amt button[aria-pressed="true"]{border-color:var(--cobalt); background:#F1F5FC; box-shadow:0 0 0 3px rgba(58,91,160,.12)}
.paym{display:grid; gap:10px}
.pm-logo{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; font-family:var(--latin, 'IBM Plex Sans')}
.xfer{background:#fff; border:1.5px dashed #B9C6E2; border-radius:18px; padding:16px; display:grid; gap:10px}
.xfer .xr{display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; background:var(--paper); border-radius:12px; padding:10px 12px}
.xfer .xr small{display:block; font-size:12px; color:var(--slate)}
.xfer .xr code{font-family:var(--mono); font-size:15px; direction:ltr; display:inline-block; word-break:break-all}
.copy{border:0; background:var(--mist); color:var(--cobalt); border-radius:10px; padding:7px 12px; font-size:13px; font-weight:600; display:inline-flex; gap:6px; align-items:center; white-space:nowrap}
.copy .ic{width:15px; height:15px}
.copy.done{background:var(--ok-bg); color:var(--ok)}
.drop{border:2px dashed #B9C6E2; border-radius:18px; padding:22px; display:grid; justify-items:center; gap:8px; text-align:center; background:#fff; cursor:pointer; color:var(--ink)}
.drop .ic{width:34px; height:34px; color:var(--cobalt)}
.drop small{color:var(--slate); font-size:13px}
.drop.has{border-style:solid; border-color:var(--ok); background:#F4FBF6}
.receipt{display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; text-align:start; width:100%}
.receipt .thumb{width:72px; height:90px; border-radius:10px; background:#EEF1F6; overflow:hidden; display:grid; place-items:center}
.receipt .thumb img{width:100%; height:100%; object-fit:cover}
.note-box{display:flex; gap:10px; align-items:flex-start; background:var(--warn-bg); color:#5E4718; border-radius:14px; padding:12px 14px; font-size:14px}
.note-box .ic{flex:none; margin-top:2px}

/* status */
.st{display:grid; justify-items:center; text-align:center; gap:14px; padding-block:12px 8px}
.st .halo{width:108px; height:108px; border-radius:50%; display:grid; place-items:center; position:relative}
.st .halo::after{content:""; position:absolute; inset:-12px; border-radius:50%; background:inherit; opacity:.35}
.st .halo .ic{width:50px; height:50px; position:relative; z-index:1}
.st h1{font-size:30px}
.st p{color:var(--slate); max-width:46ch; font-size:16px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; border-radius:999px; padding:4px 12px}
.badge .ic{width:14px; height:14px}
.b-review{background:var(--warn-bg); color:var(--warn)}
.b-ok{background:var(--ok-bg); color:var(--ok)}
.b-exp{background:#EEF0F4; color:#5B6478}
.b-rej{background:#FBE6EB; color:#A62E47}
.nexts{display:grid; gap:10px; text-align:start; width:100%}
.nexts .nx{display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; font-size:14.5px}
.nexts .nx .k{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--mist); color:var(--cobalt); font-weight:700; font-size:13px}
.nexts .nx .k.done{background:var(--ok-bg); color:var(--ok)}
.cal-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.mismatch{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%}
.mismatch div{border-radius:14px; padding:12px; background:#fff; border:1px solid var(--line); text-align:center}
.mismatch div small{display:block; color:var(--slate); font-size:12.5px}
.mismatch div b{font-family:var(--display); font-size:22px}
.mismatch div.bad{border-color:#E9B3C0; background:#FDF3F5}
.mismatch div.bad b{color:#A62E47}

/* ======================= CLIENT PORTAL ======================= */
.pt{min-height:100%; display:flex; flex-direction:column; background:var(--paper)}
.acct span{display:inline}
@container site (max-width: 1400px){ .acct span{display:none} }
@container site (max-width: 1320px){ .nav button{padding:8px 7px; font-size:14px} .hdr-in{gap:14px} }
@container site (max-width: 700px){ .tools{gap:6px} .hdr-in{gap:8px} }

/* login */
.pt-login{flex:1; display:grid; place-items:start center; padding:36px 16px 40px}
.pt-login .box{width:100%; max-width:440px; display:grid; gap:18px}
.pt-login .mkw{width:64px; height:64px; border-radius:20px; background:var(--cream); display:grid; place-items:center}
.pt-login .mkw svg{width:46px; height:46px}
.pt-login h1{font-size:30px; line-height:1.3}
.pt-login .sub{color:var(--slate); font-size:15.5px; margin-top:-8px}
.tabs2{display:grid; grid-template-columns:1fr 1fr; background:var(--mist); border-radius:14px; padding:4px; gap:4px}
.tabs2 button{border:0; background:none; border-radius:11px; padding:10px; font-size:14.5px; font-weight:600; color:var(--slate); display:inline-flex; gap:8px; align-items:center; justify-content:center}
.tabs2 button .ic{width:18px; height:18px}
.tabs2 button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(30,47,87,.12)}
.otp{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; direction:ltr}
.otp input{width:100%; min-width:0; box-sizing:border-box; height:60px; border:1.5px solid #CDD4E2; border-radius:14px; text-align:center; font-family:var(--mono); font-size:24px; font-weight:600; color:var(--ink); background:#fff}
.otp input:focus{outline:2px solid var(--cobalt); outline-offset:0; border-color:transparent}
.otp.bad input{border-color:#C9506A; background:#FDF3F5}
.otp .gap{display:none}
.resend{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--slate); flex-wrap:wrap; gap:6px}
.resend b{font-family:var(--mono); font-variant-numeric:tabular-nums; direction:ltr; display:inline-block}
.linkbtn{border:0; background:none; color:var(--cobalt); font-weight:600; font-size:14px; padding:0}
.linkbtn[disabled]{color:#A1A8B8; cursor:default}
.notif{display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:18px; padding:10px 12px; box-shadow:0 8px 24px rgba(30,47,87,.08); font-size:13.5px}
.notif .ap{width:40px; height:40px; border-radius:11px; background:#25A35A; display:grid; place-items:center; color:#fff}
.notif .ap .ic{width:22px; height:22px}
.notif small{display:block; color:var(--slate); font-size:12px}
.notif code{font-family:var(--mono); font-weight:600; direction:ltr; display:inline-block; letter-spacing:.08em}
.demo-hint{font-size:12.5px; color:var(--slate); background:var(--mist); border-radius:10px; padding:6px 10px; justify-self:start}
.errline{display:flex; gap:8px; align-items:center; color:#A62E47; font-size:14px}
.errline .ic{width:18px; height:18px; flex:none}

/* shell */
.pt-shell{flex:1; display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start}
.pt-side{position:sticky; top:65px; padding:24px 16px; display:grid; gap:4px; border-inline-end:1px solid var(--line); min-height:calc(100% - 0px); align-content:start}
.pt-side .who{display:flex; gap:10px; align-items:center; padding:4px 10px 16px}
.pt-side .who .av{width:42px; height:42px; border-radius:50%; background:var(--cream); color:var(--navy); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:18px}
.pt-side .who small{display:block; color:var(--slate); font-size:12px; direction:ltr; text-align:start}
.pt-nav button{width:100%; border:0; background:none; display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:12px; font-size:15px; color:var(--ink); text-align:start}
.pt-nav button .ic{width:20px; height:20px; color:var(--slate)}
.pt-nav button[aria-current="page"]{background:#EEF2FA; color:var(--cobalt); font-weight:600}
.pt-nav button[aria-current="page"] .ic{color:var(--cobalt)}
.pt-nav .cnt{margin-inline-start:auto; font-size:12px; background:var(--cobalt); color:#fff; border-radius:999px; padding:0 8px; font-weight:600}
.pt-main{padding:28px 32px 48px; display:grid; gap:20px; max-width:860px; width:100%; box-sizing:border-box}
.pt-main h1{font-size:30px; line-height:1.3}
.pt-main .sub{color:var(--slate); font-size:15px; margin-top:-12px}
.pt-tabbar{display:none}
@container site (max-width: 860px){
  .pt-shell{grid-template-columns:minmax(0,1fr)}
  .pt-side{display:none}
  .pt-main{padding:20px 16px 24px; gap:16px}
  .pt-main h1{font-size:25px}
  .pt-tabbar{display:grid; grid-template-columns:repeat(4,1fr); position:sticky; bottom:0; z-index:15; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:6px 4px 8px}
  .pt-tabbar button{border:0; background:none; display:grid; justify-items:center; gap:3px; font-size:11.5px; color:var(--slate); padding:6px 2px; position:relative}
  .pt-tabbar button .ic{width:22px; height:22px}
  .pt-tabbar button[aria-current="page"]{color:var(--cobalt); font-weight:600}
  .pt-tabbar button[aria-current="page"]::before{content:""; position:absolute; top:-7px; width:28px; height:3px; border-radius:0 0 3px 3px; background:var(--cobalt)}
  .pt-tabbar .dot{position:absolute; top:4px; inset-inline-start:calc(50% + 6px); width:8px; height:8px; border-radius:50%; background:#C9506A}
}

/* next-appointment hero */
.nexthero{background:var(--navy); color:#fff; border-radius:22px; padding:20px; display:grid; gap:14px; position:relative; overflow:hidden}
.nexthero .bgm{position:absolute; inset-inline-end:-26px; bottom:-34px; width:150px; opacity:.1}
.nexthero .top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.nexthero .when{font-size:13px; opacity:.8}
.nexthero .big{font-family:var(--display); font-weight:700; font-size:30px; line-height:1.2}
.nexthero .big small{font-size:16px; font-weight:500; opacity:.85}
.nexthero .meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; opacity:.92}
.nexthero .meta span{display:inline-flex; gap:6px; align-items:center}
.nexthero .meta .ic{width:16px; height:16px}
.nexthero .join{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.1); border-radius:14px; padding:10px 12px; font-size:13.5px}
.nexthero .join .ic{width:20px; height:20px; flex:none}
.nexthero .badge{background:rgba(255,255,255,.14); color:#fff}

/* list */
.seg-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line)}
.seg-tabs button{border:0; background:none; padding:10px 12px; font-size:15px; font-weight:600; color:var(--slate); border-bottom:2.5px solid transparent; margin-bottom:-1px; display:inline-flex; gap:6px; align-items:center}
.seg-tabs button .n{font-size:12px; background:var(--mist); border-radius:999px; padding:0 7px; color:var(--slate)}
.seg-tabs button[aria-selected="true"]{color:var(--cobalt); border-color:var(--cobalt)}
.seg-tabs button[aria-selected="true"] .n{background:#EEF2FA; color:var(--cobalt)}
.ap-list{display:grid; gap:12px}
.ap{background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; display:grid; gap:12px}
.ap .hd{display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:12px; align-items:start}
.ap .dt{width:58px; border-radius:14px; background:var(--tint,#EEF2FA); color:var(--dc,var(--cobalt)); display:grid; justify-items:center; padding:6px 0; line-height:1.15}
.ap .dt small{font-size:11.5px}
.ap .dt b{font-family:var(--display); font-size:24px}
.ap h3{font-size:16.5px; line-height:1.4}
.ap .meta{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--slate); margin-top:4px}
.ap .meta span{display:inline-flex; gap:5px; align-items:center}
.ap .meta .ic{width:14px; height:14px}
.ap .foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center; border-top:1px dashed var(--line); padding-top:12px}
.ap .foot .ref{font-family:var(--mono); font-size:12px; color:var(--slate); direction:ltr; margin-inline-end:auto}
.ap .money{font-size:13px; color:var(--slate)}
.ap .money b{color:var(--ink)}
.ap.past{background:#FFFEFB}
.ap.dim .hd, .ap.dim .money{opacity:.62}
@container site (max-width: 520px){ .ap .hd{grid-template-columns:52px minmax(0,1fr)} .ap .hd .badge{grid-column:2; justify-self:start} .ap .dt{width:52px} .ap .foot .ref{width:100%} .ap .foot .btn{flex:1} }
.btn.quiet{background:var(--mist); color:var(--ink)}
.btn.quiet:hover{background:#DCE2EE}
.btn.danger-o{background:transparent; color:#A62E47; box-shadow:inset 0 0 0 1.5px #E3A9B6}
.btn.danger{background:#A62E47; color:#fff}
.btn.locked{background:#F2F4F8; color:#9AA2B4; cursor:not-allowed}
.btn.locked .ic{width:15px; height:15px}
.lockmsg{display:flex; gap:10px; align-items:flex-start; background:#F4F6FA; border-radius:14px; padding:12px 14px; font-size:13.5px; color:var(--ink); line-height:1.6}
.lockmsg > .ic{width:18px; height:18px; color:var(--slate); flex:none; margin-top:3px}
.lockmsg .linkbtn{font-size:13.5px}
.nexthero .lockmsg{background:rgba(255,255,255,.1); color:#fff}
.nexthero .lockmsg > .ic{color:#fff}
.nexthero .lockmsg .linkbtn{color:var(--sun)}
.nexthero .btn.locked{background:rgba(255,255,255,.08); color:rgba(255,255,255,.55)}

/* status badges (full set) */
.b-tent{background:var(--cream); color:#6B5310}
.b-done{background:#EEF2FA; color:var(--cobalt)}
.b-no{background:#FBEDE6; color:#8A4322}
.b-can{background:#EEF0F4; color:#5B6478}

/* due alert */
.due{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; background:var(--warn-bg); border-radius:16px; padding:12px 14px; font-size:14px; color:#5E4718}
.due > .ic{width:22px; height:22px; color:var(--warn)}
.due b{color:var(--ink)}
@container site (max-width: 520px){ .due{grid-template-columns:auto 1fr} .due .btn{grid-column:1/-1} }

/* account */
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; display:grid; gap:4px}
.kpi small{font-size:13px; color:var(--slate); display:flex; gap:6px; align-items:center}
.kpi small .ic{width:16px; height:16px}
.kpi b{font-family:var(--display); font-size:24px; line-height:1.2}
.kpi .s{font-size:12.5px; color:var(--slate)}
.kpi.warn b{color:#8A4322}
.kpi.ok b{color:var(--ok)}
@container site (max-width: 620px){ .kpis{grid-template-columns:1fr 1fr} .kpi.wide{grid-column:1/-1} }
.panel{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.panel > h3{font-size:16.5px; padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:8px}
.panel > h3 .linkbtn{font-size:13.5px; display:inline-flex; gap:6px; align-items:center}
.panel > h3 .linkbtn .ic{width:16px; height:16px}
.tx{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14.5px}
.tx:last-child{border-bottom:0}
.tx .ti{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--mist); color:var(--cobalt)}
.tx .ti .ic{width:20px; height:20px}
.tx .ti.in{background:var(--ok-bg); color:var(--ok)}
.tx .ti.cr{background:var(--cream); color:#6B5310}
.tx .ti.rv{background:var(--warn-bg); color:var(--warn)}
.tx small{display:block; color:var(--slate); font-size:12.5px}
.tx small .ref{font-family:var(--mono); direction:ltr; display:inline-block}
.tx .am{text-align:end; font-weight:600; white-space:nowrap}
.tx .am small{font-weight:400}
.tx .am.cr{color:var(--ok)}
.duerow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14.5px}
.duerow:last-child{border-bottom:0}
.duerow small{display:block; color:var(--slate); font-size:12.5px}
.duerow .r{display:flex; gap:10px; align-items:center}
.duerow .r b{white-space:nowrap}
@container site (max-width: 520px){ .duerow{grid-template-columns:1fr} .duerow .r{justify-content:space-between} }
.credit{display:flex; gap:12px; align-items:center; background:var(--ok-bg); color:#174F2F; border-radius:16px; padding:12px 14px; font-size:14px}
.credit > .ic{width:22px; height:22px; flex:none}

/* packages */
.pkg{background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden}
.pkg .ph{background:var(--tint); padding:18px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center}
.pkg .ph .di{width:52px; height:52px; border-radius:16px; background:#fff; color:var(--dc); display:grid; place-items:center}
.pkg .ph .di .ic{width:28px; height:28px}
.pkg .ph h3{font-size:18px}
.pkg .ph small{color:var(--slate); font-size:13px}
.pkg .pb{padding:18px; display:grid; gap:16px}
.pkg .count{display:flex; align-items:baseline; gap:8px}
.pkg .count b{font-family:var(--display); font-size:40px; line-height:1; color:var(--dc)}
.pkg .count span{font-size:15px; color:var(--slate)}
.sess{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px}
.sess i{height:34px; border-radius:9px; background:var(--mist); display:grid; place-items:center; font-style:normal; font-size:12px; color:var(--slate); font-weight:600}
.sess i.used{background:var(--dc); color:#fff}
.sess i.miss{background:repeating-linear-gradient(135deg, var(--dc) 0 4px, color-mix(in srgb, var(--dc) 70%, #fff) 4px 8px); color:#fff}
.sess i.booked{background:#fff; box-shadow:inset 0 0 0 2px var(--dc); color:var(--dc)}
@container site (max-width: 520px){ .sess{grid-template-columns:repeat(5,minmax(0,1fr))} }
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--slate)}
.legend span{display:inline-flex; gap:6px; align-items:center}
.legend i{width:12px; height:12px; border-radius:4px; display:inline-block}
.pkg .facts2{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.pkg .facts2 div{background:var(--paper); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--slate)}
.pkg .facts2 b{display:block; color:var(--ink); font-size:14.5px}
@container site (max-width: 520px){ .pkg .facts2{grid-template-columns:1fr 1fr} .pkg .facts2 div:last-child{grid-column:1/-1} .pkg .ph{grid-template-columns:44px minmax(0,1fr)} .pkg .ph .badge{grid-column:2; justify-self:start} .pkg .ph .di{width:44px;height:44px} }
.pkg.old{opacity:.8}
.empty{display:grid; justify-items:center; text-align:center; gap:10px; padding:28px 16px; background:#fff; border:1.5px dashed var(--line); border-radius:18px}
.empty .ei{width:64px; height:64px; border-radius:50%; background:var(--cream); color:var(--navy); display:grid; place-items:center}
.empty .ei .ic{width:30px; height:30px}
.empty p{color:var(--slate); font-size:14.5px; max-width:36ch}

/* profile */
.prow{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); font-size:14.5px}
.prow:last-child{border-bottom:0}
.prow > .ic{width:20px; height:20px; color:var(--slate)}
.prow small{display:block; color:var(--slate); font-size:12.5px}
.prow .v{direction:ltr; display:inline-block}
.prow .ok{font-size:12px; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:1px 8px; margin-inline-start:6px}
.switch{width:46px; height:28px; border-radius:999px; background:#CDD4E2; border:0; position:relative; flex:none; padding:0}
.switch::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:inset-inline-start .15s}
.switch[aria-checked="true"]{background:var(--cobalt)}
.switch[aria-checked="true"]::after{inset-inline-start:21px}
.prow select.sel{font-size:13.5px}
.msgprev{background:#E7F7EC; border-radius:14px 14px 14px 4px; padding:10px 12px; font-size:13.5px; max-width:320px; line-height:1.6; color:#1D2433; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.site[dir="rtl"] .msgprev{border-radius:14px 14px 4px 14px}
.msgprev small{display:block; text-align:end; color:#6C7A72; font-size:11px}

/* sheet / modal */
.sheet-wrap{position:fixed; inset:0; z-index:60; background:rgba(16,22,38,.45); display:grid; place-items:center; padding:24px}
.sheet{background:var(--paper); width:100%; max-width:560px; max-height:calc(100% - 20px); overflow:auto; border-radius:24px; display:grid; gap:16px; padding:20px; box-shadow:0 24px 60px rgba(16,22,38,.3); box-sizing:border-box}
.sheet .sh{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sheet .sh h2{font-size:22px}
.sheet .mini{display:grid; grid-template-columns:22px 1fr; gap:4px 10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:14px}
.sheet .mini .ic{width:18px; height:18px; color:var(--slate); margin-top:2px}
.sheet .mini s{color:var(--slate)}
.sheet .acts{display:flex; gap:10px; flex-wrap:wrap}
.sheet .acts .btn{flex:1}
.sheet .grab{display:none}
@container site (max-width: 700px){
  .sheet-wrap{place-items:end stretch; padding:0}
  .sheet{max-width:none; border-radius:24px 24px 0 0; padding:10px 16px 20px; max-height:92%}
  .sheet .grab{display:block; width:40px; height:5px; border-radius:999px; background:#CDD4E2; justify-self:center}
  .sheet .acts{flex-direction:column-reverse}
}
.opt-list{display:grid; gap:8px}
.opt{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:start; text-align:start; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; color:var(--ink); font-size:14.5px}
.opt small{display:block; color:var(--slate); font-size:12.5px}
.opt .rd{width:20px; height:20px; border-radius:50%; border:2px solid #B9C3D8; margin-top:2px}
.opt[aria-pressed="true"]{border-color:var(--cobalt); background:#F1F5FC}
.opt[aria-pressed="true"] .rd{border:6px solid var(--cobalt)}
.opt b.am{font-family:var(--display); white-space:nowrap}
.done-st{display:grid; justify-items:center; text-align:center; gap:10px; padding:10px 0}
.done-st .halo{width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--ok-bg); color:var(--ok)}
.done-st .halo .ic{width:40px; height:40px}
.done-st p{color:var(--slate); font-size:14.5px; max-width:40ch}

.seg-tabs button.btn{background:var(--cobalt); color:#fff; border-bottom:0; margin-bottom:0; padding:7px 14px; border-radius:11px; font-size:14px}
.ap .money.free{margin-inline-start:auto; display:inline-flex; gap:5px; align-items:center; font-size:12.5px}
.ap .money.free .ic{width:15px; height:15px}
@container site (max-width: 520px){ .ap .money.free{margin-inline-start:0; width:100%} }
/* ======================= ADMIN ======================= */
.frame.tablet{max-width:834px; border-radius:30px; background:#0E1014; padding:12px}
.frame.tablet .chrome{display:none}
.frame.tablet .viewport{border-radius:20px}
.ad, .ds{--st-tent:#7A5AB8; --st-tent-bg:#F1ECFA; --st-review:#B06D0E; --st-review-bg:#FBF1E1; --st-ok:#3A5BA0; --st-ok-bg:#E8EEF9; --st-done:#2E7D4F; --st-done-bg:#E5F4EB; --st-no:#B23A52; --st-no-bg:#FBE8EC; --st-can:#6E7891; --st-can-bg:#EEF0F4}
.ad{
  min-height:100%; display:grid; grid-template-columns:232px minmax(0,1fr); background:#F5F6F9; font-size:14.5px; line-height:1.6}
.ad-side{background:var(--navy); color:#fff; position:sticky; top:0; height:var(--vph, 100vh); max-height:100%; display:flex; flex-direction:column; padding:16px 12px; gap:4px; align-self:start; min-height:calc(var(--vph,860px))}
.ad-side .brand2{display:flex; gap:10px; align-items:center; padding:4px 8px 16px; color:#fff; border:0; background:none; text-align:start}
.ad-side .brand2 svg{width:36px; height:36px; flex:none}
.ad-side .brand2 b{font-family:var(--display); font-size:16px; display:block; line-height:1.2}
.ad-side .brand2 small{font-size:11.5px; opacity:.7}
.ad-nav{display:grid; gap:2px}
.ad-nav button{border:0; background:none; color:rgba(255,255,255,.78); display:flex; gap:12px; align-items:center; padding:9px 12px; border-radius:11px; font-size:14.5px; text-align:start; position:relative}
.ad-nav button .ic{width:20px; height:20px; flex:none}
.ad-nav button:hover{background:rgba(255,255,255,.06)}
.ad-nav button[aria-current="page"]{background:rgba(255,255,255,.12); color:#fff; font-weight:600}
.ad-nav button[aria-current="page"]::before{content:""; position:absolute; inset-inline-start:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--sun)}
.site[dir="rtl"] .ad-nav button[aria-current="page"]::before{border-radius:3px 0 0 3px}
.ad-nav .cnt{margin-inline-start:auto; background:var(--sun); color:var(--ink); font-size:11.5px; font-weight:700; border-radius:999px; padding:0 7px; line-height:1.6}
.ad-side .me{margin-top:auto; display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; background:rgba(255,255,255,.06); font-size:13px}
.ad-side .me .av{width:34px; height:34px; border-radius:50%; background:var(--cream); color:var(--navy); display:grid; place-items:center; font-weight:700; font-family:var(--display); flex:none}
.ad-side .me small{display:block; opacity:.7; font-size:11.5px}
.ad-body{min-width:0; display:flex; flex-direction:column}
.ad-top{position:sticky; top:0; z-index:20; background:rgba(245,246,249,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 24px; min-height:60px; flex-wrap:wrap}
.ad-top h1{font-size:21px; margin-inline-end:auto; font-family:var(--display)}
.ad-top h1 small{font-family:var(--text); font-weight:400; font-size:13px; color:var(--slate); margin-inline-start:8px}
.ad-search{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:7px 12px; font-size:13.5px; color:var(--slate); min-width:220px}
.ad-search .ic{width:16px; height:16px}
.ad-search kbd{margin-inline-start:auto; font-family:var(--mono); font-size:11px; background:var(--mist); border-radius:5px; padding:0 5px}
.role{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px}
.role button{border:0; background:none; border-radius:8px; padding:4px 10px; font-size:12.5px; color:var(--slate)}
.role button[aria-pressed="true"]{background:var(--navy); color:#fff}
.ad-main{padding:20px 24px 40px; display:grid; gap:18px; align-content:start}
.ad .card2{background:#fff; border:1px solid var(--line); border-radius:16px; min-width:0}
.ad .card2 > .ch{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.ad .card2 > .ch h2{font-size:16px; font-family:var(--display); margin-inline-end:auto; display:flex; gap:8px; align-items:center}
.ad .card2 > .ch h2 .n{font-family:var(--text); font-size:12px; background:var(--mist); color:var(--slate); border-radius:999px; padding:0 8px; font-weight:600}
.ad .card2 > .cb{padding:14px 16px}
.ad .btn{font-size:14px; padding:9px 16px; border-radius:11px}
.ad .btn.sm{padding:6px 11px; font-size:13px; border-radius:9px}
.ad .btn .ic{width:16px; height:16px}
.ad .btn.ok{background:var(--st-done)}
.ad .btn.no{background:#A62E47}
.ad .btn.ghost2{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.ad .btn.ghost2:hover{background:#F5F6F9}
.ad .muted{color:var(--slate)}
.ad .mono{font-family:var(--mono); direction:ltr; display:inline-block; font-size:12.5px}
.g-2{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start}
.g-2e{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start}
.stack{display:grid; gap:18px; align-content:start; min-width:0}

/* KPI row */
.akpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.akpi{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:grid; gap:2px; text-align:start; color:var(--ink)}
button.akpi{cursor:pointer}
button.akpi:hover{border-color:#B9C6E2}
.akpi small{font-size:12.5px; color:var(--slate); display:flex; align-items:center; gap:6px}
.akpi small .ic{width:16px; height:16px}
.akpi b{font-family:var(--display); font-size:26px; line-height:1.25}
.akpi .s{font-size:12px; color:var(--slate)}
.akpi.warn{border-color:#EBD2A6; background:#FFFBF2}
.akpi.alert{border-color:#EBB8C4; background:#FFF7F9}

/* status pill + legend */
.sp{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:999px; padding:1px 9px 1px 8px; white-space:nowrap; color:var(--c); background:var(--b)}
.sp .ic{width:13px; height:13px}
.st-tent{--c:var(--st-tent); --b:var(--st-tent-bg)} .st-review{--c:var(--st-review); --b:var(--st-review-bg)} .st-ok{--c:var(--st-ok); --b:var(--st-ok-bg)}
.st-done{--c:var(--st-done); --b:var(--st-done-bg)} .st-no{--c:var(--st-no); --b:var(--st-no-bg)} .st-can{--c:var(--st-can); --b:var(--st-can-bg)}
.legend2{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--slate)}
.legend2 span{display:inline-flex; gap:6px; align-items:center}
.legend2 i{width:12px; height:12px; border-radius:4px; background:var(--c)}

/* today list */
.tl2{display:grid}
.tl2 .row{display:grid; grid-template-columns:76px 6px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line)}
.tl2 .row:last-child{border-bottom:0}
.tl2 .row.now{background:#F7F9FE}
.tl2 .tm{font-weight:600; font-variant-numeric:tabular-nums; font-size:14px}
.tl2 .tm small{display:block; font-weight:400; color:var(--slate); font-size:11.5px}
.tl2 .bar{width:6px; align-self:stretch; border-radius:3px; background:var(--c)}
.tl2 .who b{font-size:14.5px}
.tl2 .who small{display:block; color:var(--slate); font-size:12.5px}
.tl2 .acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nowline{display:flex; align-items:center; gap:8px; padding:2px 16px; font-size:11.5px; color:#B23A52; font-weight:600}
.nowline::after{content:""; flex:1; height:1.5px; background:#E59AAB}
.qrow{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow .qi{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--st-review-bg); color:var(--st-review)}
.qrow .qi .ic{width:20px; height:20px}
.qrow b{font-size:14px}
.qrow small{display:block; color:var(--slate); font-size:12.5px}
.qrow .r{text-align:end; display:grid; gap:4px; justify-items:end}
.flag{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; border-radius:6px; padding:0 7px}
.flag .ic{width:12px; height:12px}
.flag.ok{background:var(--st-done-bg); color:var(--st-done)}
.flag.chk{background:var(--st-no-bg); color:var(--st-no)}
.alertbar{display:flex; gap:10px; align-items:center; background:#FFF6E6; border:1px solid #EBD2A6; border-radius:14px; padding:10px 14px; font-size:13.5px; color:#5E4718}
.alertbar > .ic{width:20px; height:20px; color:var(--st-review); flex:none}
.alertbar .btn{margin-inline-start:auto}

/* calendar */
.calbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.calbar .dnav{display:inline-flex; gap:4px; align-items:center}
.calbar .dnav b{font-size:15px; min-width:180px; text-align:center}
.iconbtn2{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--ink)}
.iconbtn2 .ic{width:16px; height:16px}
.site[dir="ltr"] .iconbtn2 .flipme{transform:scaleX(-1)}
.segm{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px}
.segm button{border:0; background:none; border-radius:7px; padding:4px 12px; font-size:13px; color:var(--slate); font-weight:600}
.segm button[aria-pressed="true"]{background:var(--cobalt); color:#fff}
.dayg{display:grid; grid-template-columns:56px repeat(var(--cols),minmax(150px,1fr)); overflow-x:auto; position:relative}
.dayg .hh{position:sticky; top:0; z-index:3; background:#fff; border-bottom:1px solid var(--line); padding:10px 8px; display:flex; gap:8px; align-items:center; font-size:13px; border-inline-start:1px solid var(--line); min-width:0}
.dayg .hh .av{width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:end center}
.dayg .hh b{display:block; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dayg .hh small{display:block; color:var(--slate); font-size:11px}
.dayg .corner{position:sticky; top:0; z-index:3; background:#fff; border-bottom:1px solid var(--line)}
.dayg .times{position:relative}
.dayg .times span{position:absolute; inset-inline-end:8px; font-size:11px; color:var(--slate); transform:translateY(-50%); font-variant-numeric:tabular-nums; white-space:nowrap}
.dayg .col{position:relative; border-inline-start:1px solid var(--line); background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--hpx) - 1px), #EEF0F4 calc(var(--hpx) - 1px) var(--hpx)), #fff}
.dayg .col .off{position:absolute; inset-inline:0; background:repeating-linear-gradient(135deg,#F4F5F8 0 6px,#ECEEF3 6px 12px)}
.ev{z-index:2; position:absolute; inset-inline:4px; border-radius:8px; background:var(--b); border:0; border-inline-start:4px solid var(--c); padding:4px 8px; font-size:12px; line-height:1.35; overflow:hidden; text-align:start; color:var(--ink); cursor:pointer}
.ev b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev small{display:flex; gap:4px; align-items:center; color:var(--slate); font-size:11px; white-space:nowrap}
.ev small .ic{width:11px; height:11px}
.ev .stl{color:var(--c); font-weight:600}
.ev.st-tent{border:1.5px dashed var(--c); border-inline-start:4px solid var(--c)}
.ev.st-no{background:repeating-linear-gradient(135deg, var(--b) 0 6px, #F6D7DE 6px 9px)}
.ev.st-can b{text-decoration:line-through; color:var(--slate)}
.ev:hover,.ev:focus-visible{box-shadow:0 4px 14px rgba(30,47,87,.18); z-index:3; outline:2px solid var(--c); outline-offset:1px}
.ev.sel{outline:2.5px solid var(--ink); outline-offset:1px; z-index:2}
.nowbar{position:absolute; inset-inline:0; height:2px; background:#B23A52; z-index:1; pointer-events:none}
.nowbar::before{content:""; position:absolute; inset-inline-start:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:#B23A52}
.weekg{display:grid; grid-template-columns:150px repeat(6,minmax(110px,1fr)); overflow-x:auto}
.weekg > div{border-bottom:1px solid var(--line); border-inline-start:1px solid var(--line); padding:8px; min-width:0}
.weekg .wh{background:#fff; position:sticky; top:0; font-size:12.5px; text-align:center; color:var(--slate)}
.weekg .wh b{display:block; color:var(--ink); font-size:15px; font-family:var(--display)}
.weekg .wh.today{background:#EEF2FA; color:var(--cobalt)}
.weekg .wh.today b{color:var(--cobalt)}
.weekg .wt{display:flex; gap:8px; align-items:center; font-size:13px; background:#fff}
.weekg .wt .av{width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:end center}
.weekg .wt b{font-size:12.5px; line-height:1.3; display:block}
.weekg .wt small{color:var(--slate); font-size:11px}
.weekg .wc{display:grid; gap:4px; align-content:start; background:#fff}
.weekg .wc.todayc{background:#FAFBFE}
.weekg .wc.offd{background:repeating-linear-gradient(135deg,#F7F8FA 0 6px,#EFF1F5 6px 12px); font-size:11.5px; color:var(--slate); text-align:center; align-content:center}
.mini-ev{display:flex; gap:5px; align-items:center; font-size:11.5px; border-radius:6px; padding:2px 6px; background:var(--b); border-inline-start:3px solid var(--c); white-space:nowrap; overflow:hidden; border-block:0; border-inline-end:0; text-align:start; color:var(--ink); cursor:pointer}
.mini-ev b{font-variant-numeric:tabular-nums; font-weight:600}
.mini-ev.st-can span{text-decoration:line-through; color:var(--slate)}
.mini-ev.st-no{background:repeating-linear-gradient(135deg, var(--b) 0 5px, #F6D7DE 5px 8px)}
.mini-ev.st-tent{outline:1px dashed var(--c); outline-offset:-1px}
.weekg .load{font-size:11px; color:var(--slate)}

/* drawer (session detail) */
.drw-wrap{position:fixed; inset:0; z-index:50; background:rgba(16,22,38,.35); display:flex; justify-content:flex-end}
.site[dir="rtl"] .drw-wrap{justify-content:flex-start}
.drw{width:min(400px, 92%); background:#fff; height:100%; overflow:auto; padding:18px; display:grid; gap:14px; align-content:start; box-shadow:0 0 40px rgba(16,22,38,.25); box-sizing:border-box}
.drw .dh{display:flex; justify-content:space-between; align-items:center; gap:10px}
.drw .dh h2{font-size:19px; font-family:var(--display)}
.kv{display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px 12px; font-size:13.5px}
.kv dt{color:var(--slate)}
.kv dd{margin:0}
.drw .acts2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.drw .msg{background:#E7F7EC; border-radius:12px; padding:10px 12px; font-size:13px}
.drw .msg small{display:block; color:#55665C; font-size:11.5px; margin-bottom:2px}

/* payment review */
.pr{display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; align-items:start}
.prq{display:grid}
.prq button{border:0; background:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; text-align:start; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink); font-size:13.5px}
.prq button:last-child{border-bottom:0}
.prq button small{color:var(--slate); font-size:12px; grid-column:1/-1; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.prq button[aria-current="true"]{background:#EEF2FA; box-shadow:inset 3px 0 0 var(--cobalt)}
.site[dir="rtl"] .prq button[aria-current="true"]{box-shadow:inset -3px 0 0 var(--cobalt)}
.prq button.doneq{opacity:.55}
.prw{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
.rcpt{background:#EEF0F4; border-radius:14px; padding:18px; display:grid; place-items:center; min-height:420px; position:relative}
.rcpt .shot{width:min(260px,100%); background:#fff; border-radius:22px; box-shadow:0 10px 30px rgba(16,22,38,.15); padding:18px 16px; display:grid; gap:10px; font-size:12.5px; direction:ltr; text-align:left; font-family:var(--latin, 'IBM Plex Sans'), sans-serif}
.rcpt .shot .ok{width:46px; height:46px; border-radius:50%; background:#E5F4EB; color:#2E7D4F; display:grid; place-items:center; justify-self:center}
.rcpt .shot .ok .ic{width:24px; height:24px}
.rcpt .shot h4{text-align:center; font-size:14px; margin:0; font-family:inherit; color:#1D2433}
.rcpt .shot .amt2{text-align:center; font-size:26px; font-weight:700; color:#1D2433}
.rcpt .shot dl{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; margin:0}
.rcpt .shot dt{color:#7B8496}
.rcpt .shot dd{margin:0; text-align:right; font-weight:600; color:#1D2433; word-break:break-all}
.rcpt .tools2{position:absolute; top:10px; inset-inline-end:10px; display:flex; gap:6px}
.rcpt .fname{position:absolute; bottom:10px; inset-inline-start:12px; font-size:11.5px; color:var(--slate); font-family:var(--mono)}
.need{display:grid; gap:12px; align-content:start}
.cmp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.cmp > div{padding:12px 14px; display:grid; gap:2px}
.cmp > div + div{border-inline-start:1px solid var(--line)}
.cmp small{font-size:12px; color:var(--slate)}
.cmp b{font-family:var(--display); font-size:24px; line-height:1.3}
.cmp .hit{background:#F3FAF5}
.cmp .miss{background:#FFF5F7}
.cmp .miss b{color:var(--st-no)}
.verdict{display:flex; gap:10px; align-items:center; border-radius:14px; padding:12px 14px; font-size:14px; font-weight:600}
.verdict .ic{width:22px; height:22px; flex:none}
.verdict.ok{background:var(--st-done-bg); color:#1E5C38}
.verdict.chk{background:var(--st-no-bg); color:#8A2C40}
.verdict small{display:block; font-weight:400; font-size:12.5px}
.checks{display:grid; gap:6px; font-size:13.5px}
.checks div{display:flex; gap:8px; align-items:center}
.checks .ic{width:16px; height:16px; flex:none}
.checks .y{color:var(--st-done)} .checks .x{color:var(--st-no)}
.decide{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rejbox{display:grid; gap:8px; background:#FFF7F9; border:1px solid #EBB8C4; border-radius:14px; padding:12px}
.rejbox .opts{display:flex; flex-wrap:wrap; gap:6px}
.rejbox .opts button{border:1px solid #E3A9B6; background:#fff; color:#8A2C40; border-radius:999px; padding:3px 11px; font-size:12.5px}
.rejbox .opts button[aria-pressed="true"]{background:#A62E47; color:#fff; border-color:#A62E47}
.decided{display:flex; gap:10px; align-items:center; border-radius:14px; padding:12px 14px; font-size:14px}

/* client file */
.cfh{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.cfh .av{width:60px; height:60px; border-radius:50%; background:var(--cream); color:var(--navy); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:26px}
.cfh h2{font-size:22px; font-family:var(--display)}
.cfh .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.tag{font-size:12px; border-radius:999px; padding:1px 10px; background:var(--mist); color:var(--ink)}
.cfh .acts{margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap}
.tabs3{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto}
.tabs3 button{border:0; background:none; padding:10px 14px; font-weight:600; font-size:14px; color:var(--slate); border-bottom:2.5px solid transparent; margin-bottom:-1px; display:inline-flex; gap:6px; align-items:center; white-space:nowrap}
.tabs3 button .ic{width:16px; height:16px}
.tabs3 button[aria-selected="true"]{color:var(--cobalt); border-color:var(--cobalt)}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{font-weight:600; color:var(--slate); font-size:12px; text-align:start; padding:9px 12px; border-bottom:1px solid var(--line); background:#FAFBFC; white-space:nowrap}
.tbl td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl tfoot td{font-weight:700; background:#FAFBFC; border-top:1px solid var(--line)}
.tblw{overflow-x:auto}
.notes{display:grid; gap:10px}
.note2{border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; gap:4px; background:#FFFEFA}
.note2 .nh{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--slate); flex-wrap:wrap}
.note2 .nh b{color:var(--ink)}
.note2 p{font-size:14px; line-height:1.75}
.locked2{display:grid; justify-items:center; text-align:center; gap:8px; padding:28px 16px; background:repeating-linear-gradient(135deg,#FAFBFC 0 8px,#F4F5F8 8px 16px); border-radius:12px; border:1px dashed #CDD4E2}
.locked2 .li{width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--slate); box-shadow:0 2px 8px rgba(16,22,38,.08)}
.locked2 .li .ic{width:24px; height:24px}
.locked2 p{color:var(--slate); font-size:13.5px; max-width:42ch}
.secure{display:flex; gap:8px; align-items:center; font-size:12px; color:var(--slate)}
.secure .ic{width:14px; height:14px}
.ad textarea{width:100%; box-sizing:border-box; font:inherit; border:1px solid #CDD4E2; border-radius:12px; padding:10px 12px; min-height:84px; resize:vertical}
.ad input.inp, .ad select.inp{font:inherit; font-size:13.5px; border:1px solid #CDD4E2; border-radius:9px; padding:6px 10px; background:#fff; color:var(--ink); min-width:0; box-sizing:border-box}

/* therapist schedule */
.tpicks{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px}
.tpicks button{display:flex; gap:8px; align-items:center; border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 14px 4px 4px; font-size:13.5px; color:var(--ink); white-space:nowrap}
.site[dir="rtl"] .tpicks button{padding:4px 4px 4px 14px}
.tpicks button .av{width:30px; height:30px; border-radius:50%; overflow:hidden; display:grid; place-items:end center}
.tpicks button[aria-pressed="true"]{border-color:var(--cobalt); background:#EEF2FA; color:var(--cobalt); font-weight:600}
.wk{display:grid}
.wk .wr{display:grid; grid-template-columns:110px 56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line)}
.wk .wr:last-child{border-bottom:0}
.wk .wr.off .ranges{color:var(--slate)}
.ranges{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.rng{display:inline-flex; gap:6px; align-items:center; background:#EEF2FA; color:var(--navy); border-radius:9px; padding:3px 6px 3px 10px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.site[dir="rtl"] .rng{padding:3px 10px 3px 6px}
.rng button{border:0; background:none; color:var(--slate); padding:0; display:grid}
.rng button .ic{width:13px; height:13px}
.addr{border:1px dashed #B9C6E2; background:none; color:var(--cobalt); border-radius:9px; padding:3px 10px; font-size:12.5px; font-weight:600}
.hours-bar{position:relative; height:8px; background:var(--mist); border-radius:999px; margin-top:6px}
.hours-bar i{position:absolute; top:0; bottom:0; background:var(--cobalt); border-radius:999px}
.lv{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line)}
.lv:last-child{border-bottom:0}
.lv .li2{width:40px; height:40px; border-radius:11px; display:grid; place-items:center}
.lv .li2 .ic{width:20px; height:20px}
.lv small{display:block; color:var(--slate); font-size:12.5px}
.lv .warnline{color:var(--st-no); font-size:12.5px; display:flex; gap:6px; align-items:center; font-weight:600}
.lv .warnline .ic{width:14px; height:14px}
.formrow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:10px; align-items:end; padding:12px 16px; background:#FAFBFC; border-top:1px solid var(--line)}
.formrow label{display:grid; gap:4px; font-size:12.5px; color:var(--slate)}
.ad .switch{width:40px; height:24px}
.ad .switch::after{width:18px; height:18px}
.ad .switch[aria-checked="true"]::after{inset-inline-start:19px}

/* accounts & charts */
.chart{position:relative}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .gl{stroke:#E6E9F0; stroke-width:1}
.chart .ax{font-size:11px; fill:var(--slate); font-family:var(--text)}
.chart .vl{font-size:11.5px; fill:var(--ink); font-weight:600; font-family:var(--text)}
.chart .hit{fill:transparent; cursor:pointer}
.chart .hit:hover + .bar-g rect, .chart .bar-g:hover rect{opacity:.85}
.tip{position:absolute; pointer-events:none; background:var(--ink); color:#fff; border-radius:9px; padding:6px 10px; font-size:12px; line-height:1.5; white-space:nowrap; transform:translate(-50%, calc(-100% - 8px)); z-index:5; display:none}
.tip b{font-weight:600}
.tip i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-inline-end:5px}
.legend3{display:flex; gap:14px; font-size:12.5px; color:var(--slate); flex-wrap:wrap}
.legend3 span{display:inline-flex; gap:6px; align-items:center}
.legend3 i{width:10px; height:10px; border-radius:3px}
.hbars{display:grid; gap:10px}
.hb{display:grid; grid-template-columns:130px minmax(0,1fr) 90px; gap:10px; align-items:center; font-size:13px}
.hb .tr{height:14px; background:#F1F3F7; border-radius:4px; position:relative}
.hb .tr i{position:absolute; inset-block:0; inset-inline-start:0; border-radius:0 4px 4px 0; background:var(--cobalt)}
.site[dir="rtl"] .hb .tr i{border-radius:4px 0 0 4px}
.hb .v{text-align:end; font-variant-numeric:tabular-nums; font-weight:600}
.pl{display:grid; gap:0; font-size:14px}
.pl > div{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line)}
.pl > div:last-child{border-bottom:0}
.pl .neg{color:#8A2C40}
.pl .tot{font-weight:700; font-size:16px; border-top:2px solid var(--ink); border-bottom:0; padding-top:12px; margin-top:4px}
.prog{height:6px; background:var(--mist); border-radius:999px; overflow:hidden; min-width:70px}
.prog i{display:block; height:100%; background:var(--st-done)}
.cat-ic{width:30px; height:30px; border-radius:9px; display:inline-grid; place-items:center; background:var(--mist); color:var(--cobalt); vertical-align:middle; margin-inline-end:8px}
.cat-ic .ic{width:16px; height:16px}

/* settings */
.set-grid{display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; align-items:start}
.set-nav{display:grid; gap:2px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px}
.set-nav button{border:0; background:none; text-align:start; padding:9px 12px; border-radius:9px; font-size:14px; color:var(--ink); display:flex; gap:10px; align-items:center}
.set-nav button .ic{width:18px; height:18px; color:var(--slate)}
.set-nav button[aria-current="true"]{background:#EEF2FA; color:var(--cobalt); font-weight:600}
.set-nav button[aria-current="true"] .ic{color:var(--cobalt)}
.dsel2{display:flex; gap:6px; flex-wrap:wrap}
.dsel2 button{border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 12px; font-size:13px; display:inline-flex; gap:6px; align-items:center; color:var(--ink)}
.dsel2 button .ic{width:15px; height:15px; color:var(--dc)}
.dsel2 button[aria-pressed="true"]{border-color:var(--dc); background:var(--dt); font-weight:600}
.pm{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:start; padding:14px 16px; border-bottom:1px solid var(--line)}
.pm:last-child{border-bottom:0}
.pm .fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px}
.pm .fields label{display:grid; gap:3px; font-size:12px; color:var(--slate)}
.ph-chip{font-size:11px; background:var(--cream); color:#6B5310; border-radius:6px; padding:0 6px; font-weight:600}
.tmpl{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; padding:14px 16px; border-bottom:1px solid var(--line)}
.tmpl:last-child{border-bottom:0}
.tmpl .msgprev{max-width:none}

/* responsive: tablet & below */
@container site (max-width: 1180px){
  .ad{grid-template-columns:76px minmax(0,1fr)}
  .ad-side{padding:14px 8px}
  .ad-side .brand2{justify-content:center; padding:4px 0 14px}
  .ad-side .brand2 span, .ad-side .me span{display:none}
  .ad-nav button{flex-direction:column; gap:3px; font-size:10.5px; padding:8px 2px; text-align:center; line-height:1.25}
  .ad-nav .cnt{position:absolute; top:3px; inset-inline-end:9px; margin:0; font-size:10px; padding:0 5px}
  .ad-nav button[aria-current="page"]::before{inset-inline-start:-8px}
  .ad-side .me{justify-content:center; padding:6px}
  .akpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2, .g-2e{grid-template-columns:minmax(0,1fr)}
  .pr{grid-template-columns:minmax(0,1fr)}
  .prq{display:flex; overflow-x:auto}
  .prq button{border-bottom:0; border-inline-end:1px solid var(--line); min-width:210px}
  .ad-search{min-width:0; flex:1}
  .ad-search kbd{display:none}
  .set-grid{grid-template-columns:minmax(0,1fr)}
  .set-nav{display:flex; overflow-x:auto}
  .set-nav button{white-space:nowrap}
  .ad-main{padding:16px 16px 32px}
  .ad-top{padding:10px 16px}
}
@container site (max-width: 760px){
  .ad{grid-template-columns:minmax(0,1fr)}
  .ad-side{position:static; height:auto; min-height:0; flex-direction:row; overflow-x:auto; padding:6px}
  .ad-side .brand2, .ad-side .me{display:none}
  .ad-nav{display:flex}
  .ad-nav button{min-width:68px}
  .ad-nav button[aria-current="page"]::before{display:none}
  .prw{grid-template-columns:minmax(0,1fr)}
  .tl2 .row{grid-template-columns:62px 5px minmax(0,1fr)}
  .tl2 .acts{grid-column:3; justify-content:flex-start}
  .wk .wr{grid-template-columns:90px 46px minmax(0,1fr)}
  .wk .wr > :last-child{grid-column:3}
  .formrow{grid-template-columns:1fr 1fr}
  .tmpl{grid-template-columns:minmax(0,1fr)}
  .pm .fields{grid-template-columns:minmax(0,1fr)}
  .hb{grid-template-columns:96px minmax(0,1fr) 76px}
}

/* ======================= UI DESIGN SYSTEM ======================= */
.ds{min-height:100%; background:#F7F8FB; font-size:15px; line-height:1.7}
.ds-hdr{position:sticky; top:0; z-index:70; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.ds-hdr-in{display:flex; align-items:center; gap:12px; height:62px}
.ds-hdr .brand b{font-size:17px}
.ds-hdr .ver{font-family:var(--mono); font-size:12px; color:var(--slate); background:var(--mist); border-radius:6px; padding:1px 8px}
.ds-wrap{display:grid; grid-template-columns:210px minmax(0,1fr); gap:28px; align-items:start; padding-block:28px 60px}
.ds-nav{position:sticky; top:84px; display:grid; gap:2px}
.ds-nav button{border:0; background:none; text-align:start; padding:7px 12px; border-radius:9px; font-size:14px; color:var(--slate); display:flex; gap:10px; align-items:center}
.ds-nav button .k{font-family:var(--mono); font-size:11px; color:#A1A8B8; width:18px}
.ds-nav button:hover{background:#fff; color:var(--ink)}
.ds-nav button[aria-current="true"]{background:#fff; color:var(--cobalt); font-weight:600; box-shadow:0 1px 3px rgba(30,47,87,.08)}
.ds-main{display:grid; gap:40px; min-width:0}
.ds-intro h1{font-size:40px; line-height:1.2}
.ds-intro p{color:var(--slate); font-size:16.5px; max-width:62ch; margin-top:8px}
.ds-intro .pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.ds-sec{scroll-margin-top:84px; display:grid; gap:16px}
.ds-sec > header{display:grid; gap:4px}
.ds-sec > header .k{font-family:var(--mono); font-size:12px; color:var(--cobalt); font-weight:600}
.ds-sec > header h2{font-size:28px; line-height:1.3}
.ds-sec > header p{color:var(--slate); max-width:66ch; font-size:15px}
.spec{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; min-width:0}
.spec > .sh{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); background:#FCFCFD; flex-wrap:wrap}
.spec > .sh b{font-size:14px}
.spec > .sh code, .tok{font-family:var(--mono); font-size:12px; color:var(--slate); direction:ltr; display:inline-block}
.spec > .sb{padding:20px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.spec > .sb.col{display:grid; gap:14px; align-items:start}
.spec > .sb.paper{background:var(--paper)}
.spec > .sb.dark{background:var(--navy)}
.spec > .rule{padding:10px 16px; border-top:1px dashed var(--line); font-size:13px; color:var(--slate); display:flex; gap:8px; align-items:flex-start; background:#FCFCFD}
.spec > .rule .ic{width:16px; height:16px; flex:none; margin-top:3px; color:var(--cobalt)}
.spec > .rule.dont .ic{color:#A62E47}
.ds-g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.ds-g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.lbl-s{font-size:11.5px; color:var(--slate); display:block; margin-top:6px; text-align:center; font-family:var(--mono); direction:ltr}
.cell{display:grid; justify-items:center; gap:4px}

/* tokens */
.swg{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; width:100%}
.sw{border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff}
.sw i{display:block; height:58px}
.sw div{padding:8px 10px; font-size:12.5px; line-height:1.45}
.sw div b{display:block; font-size:13px}
.sw div code{font-family:var(--mono); font-size:11.5px; color:var(--slate); direction:ltr; display:inline-block}
.sw .use{color:var(--slate); font-size:11.5px}
.typeg{display:grid; gap:0; width:100%}
.typeg > div{display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px dashed var(--line)}
.typeg > div:last-child{border-bottom:0}
.typeg small{font-family:var(--mono); font-size:11.5px; color:var(--slate); direction:ltr; text-align:start}
.sp-row{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap}
.sp-row .blk{background:#C9D5EE; border-radius:4px}
.rad-row{display:flex; gap:14px; flex-wrap:wrap}
.rad-row div{width:72px; height:56px; background:#EEF2FA; border:1.5px solid #B9C6E2}
.elev-row{display:flex; gap:18px; flex-wrap:wrap}
.elev-row div{width:120px; height:72px; background:#fff; border-radius:14px; display:grid; place-items:center; font-size:12px; color:var(--slate)}
.icog{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; width:100%}
.icog div{display:grid; justify-items:center; gap:6px; padding:12px 4px; border-radius:12px; background:#FAFBFC; border:1px solid var(--line)}
.icog .ic{width:24px; height:24px; color:var(--ink)}
.icog code{font-family:var(--mono); font-size:10.5px; color:var(--slate); direction:ltr}

/* button states */
.btn.is-hover{background:#2F4D8C}
.btn.sec2.is-hover{background:#EEF2FA}
.btn.is-focus{outline:3px solid #F4C542; outline-offset:2px}
.btn.loading{position:relative; color:transparent !important; pointer-events:none}
.btn.loading::after{content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .8s linear infinite}
.btn.sec2.loading::after{border-color:rgba(58,91,160,.25); border-top-color:var(--cobalt)}
@keyframes spin{to{transform:rotate(360deg)}}
.icbtn{width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; color:var(--ink)}
.icbtn .ic{width:20px; height:20px}
.focus-demo{outline:3px solid #F4C542; outline-offset:2px}

/* generic alerts */
.al{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:start; border-radius:14px; padding:12px 14px; font-size:14px; width:100%; box-sizing:border-box; border:1px solid transparent}
.al > .ic{width:20px; height:20px; margin-top:2px}
.al b{display:block; font-size:14.5px}
.al p{margin:0; font-size:13.5px}
.al .x{border:0; background:none; color:inherit; opacity:.6; padding:2px; display:grid}
.al .x .ic{width:16px; height:16px}
.al.info{background:#EEF2FA; color:#253B6B; border-color:#D4DDF0}
.al.ok{background:#E5F4EB; color:#1E5C38; border-color:#C7E6D3}
.al.warn{background:#FBF4E6; color:#5E4718; border-color:#EBD9B4}
.al.err{background:#FBE8EC; color:#8A2C40; border-color:#F0C7D1}
.al .acts{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.ds-tbl-nw .badge, .ds-tbl-nw .sp{white-space:nowrap} .ds-tbl-nw td.muted{min-width:220px}
.toast.static{position:static; transform:none; display:inline-flex; gap:8px; align-items:center}
.toast.static .ic{width:16px; height:16px}

/* skeleton & loaders */
.skel{background:linear-gradient(90deg,#EEF0F4 0%,#F7F8FA 50%,#EEF0F4 100%); background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skcard{background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; display:grid; grid-template-columns:58px 1fr; gap:12px; width:100%; box-sizing:border-box}
.skcard .a{height:64px; border-radius:14px}
.skcard .l{display:grid; gap:8px; align-content:start}
.loader{display:grid; justify-items:center; gap:12px; padding:20px; text-align:center; color:var(--slate); font-size:14px}
.loader .sailbox{width:76px; height:76px; border-radius:24px; background:var(--cream); display:grid; place-items:center; overflow:hidden}
.loader .sailbox svg{width:54px; height:54px; animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.site[dir="ltr"] .loader .sailbox svg{animation-name:bobl}
@keyframes bobl{0%,100%{transform:scaleX(-1) translateY(2px) rotate(-2deg)}50%{transform:scaleX(-1) translateY(-3px) rotate(2deg)}}
.spin{width:28px; height:28px; border-radius:50%; border:3px solid #DCE3F1; border-top-color:var(--cobalt); animation:spin .8s linear infinite}
.upl{width:100%; display:grid; gap:6px; font-size:13px}
.upl .bar{height:8px; border-radius:999px; background:var(--mist); overflow:hidden}
.upl .bar i{display:block; height:100%; width:64%; background:var(--cobalt); border-radius:999px}
.upl .row{display:flex; justify-content:space-between; color:var(--slate)}
@media (prefers-reduced-motion: reduce){ .skel, .loader .sailbox svg, .spin, .btn.loading::after{animation:none} }

/* misc */
.dodont{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.dd{border-radius:14px; padding:12px 14px; font-size:13.5px; display:grid; gap:6px}
.dd b{display:flex; gap:6px; align-items:center; font-size:13px}
.dd b .ic{width:16px; height:16px}
.dd.do{background:#F2FAF5; border:1px solid #C7E6D3}
.dd.do b{color:#1E5C38}
.dd.dont{background:#FDF5F7; border:1px solid #F0C7D1}
.dd.dont b{color:#8A2C40}
.mail{width:100%; max-width:520px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14px}
.mail .mh{padding:10px 14px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--slate); display:grid; gap:2px; background:#FCFCFD}
.mail .mh b{color:var(--ink)}
.mail .mb{padding:18px; display:grid; gap:12px}
.mail .mb .brandrow{display:flex; gap:8px; align-items:center}
.mail .mb .brandrow svg{width:30px; height:30px}
.mail .mb h3{font-size:20px}
.mail .mb .box{background:var(--paper); border-radius:12px; padding:12px 14px; display:grid; gap:4px}
.mail .mf{padding:10px 18px; font-size:11.5px; color:var(--slate); border-top:1px solid var(--line)}
.sms{background:#E9E9EB; color:#111; border-radius:18px; padding:9px 13px; font-size:13.5px; max-width:300px; line-height:1.5}
.qx-demo{position:static !important}
.a11y{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.a11y div{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; display:grid; gap:4px; font-size:13.5px; color:var(--slate)}
.a11y div b{color:var(--ink); font-size:14.5px; display:flex; gap:8px; align-items:center}
.a11y div b .ic{width:18px; height:18px; color:var(--cobalt)}

@container site (max-width: 900px){
  .ds-wrap{grid-template-columns:minmax(0,1fr); gap:18px; padding-block:16px 40px}
  .ds-nav{position:sticky; top:62px; z-index:10; display:flex; overflow-x:auto; background:#F7F8FB; padding:6px 0; margin-inline:-4px}
  .ds-nav button{white-space:nowrap; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:13px}
  .ds-nav button .k{display:none}
  .ds-g2, .ds-g3, .dodont, .a11y{grid-template-columns:minmax(0,1fr)}
  .ds-intro h1{font-size:30px}
  .ds-sec > header h2{font-size:23px}
  .typeg > div{grid-template-columns:minmax(0,1fr); gap:2px}
}

/* ---- articles ---- */
.art-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
.acard{all:unset; box-sizing:border-box; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:12px; align-content:start; text-align:start; transition:border-color .15s, transform .15s}
.acard:hover{border-color:var(--dc); transform:translateY(-2px)}
.acard:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px}
.acard h3{font-family:var(--display); font-size:20px; line-height:1.4; color:var(--navy)}
.acard p{color:var(--slate); font-size:15px; line-height:1.7}
.acard.big{grid-column:span 2; background:var(--dt); border-color:transparent; padding:28px; gap:16px}
.acard.big h3{font-size:28px}
.atop{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; flex-wrap:wrap}
.atop .chip{font-size:12px; padding:2px 10px}
.atop .chip .ic{width:14px; height:14px}
.aby{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; margin-top:auto}
.aby small{display:block; font-weight:400; color:var(--slate); font-size:12px}
.av{width:32px; height:32px; border-radius:50%; overflow:hidden; display:grid; place-items:end center; flex:none}
.av svg{display:block}
@container site (max-width: 1060px){ .art-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container site (max-width: 640px){ .art-grid{grid-template-columns:minmax(0,1fr)} .acard.big{grid-column:auto; grid-row:auto; padding:22px} .acard.big h3{font-size:22px} }

.art-hero h1{max-width:24ch}
.byline{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-top:18px; font-size:14px}
.byline .av{width:40px; height:40px}
.byline small{display:block; color:var(--slate); font-size:12.5px}
.byline .rv{display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:999px; padding:4px 12px; font-size:13px; color:var(--ok, #1E6B3E)}
.byline .rv .ic{width:15px; height:15px}
.byline .rv b{color:var(--ink)}
.art-layout{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:48px; align-items:start}
.art-body{max-width:68ch}
.art-body h2{font-size:26px; margin-top:12px}
.tldr{background:var(--cream); border-radius:16px; padding:20px 22px; display:grid; gap:6px; border-inline-start:5px solid var(--sun)}
.tldr .eb{font-size:13px; font-weight:700; color:var(--navy)}
.tldr p{font-size:18px; line-height:1.75; color:var(--ink)}
.help-box{display:grid; grid-template-columns:auto 1fr; gap:12px; background:var(--mist); border-radius:14px; padding:16px; font-size:15px}
.help-box .ic{width:22px; height:22px; color:var(--cobalt)}
.help-box p{color:var(--slate); font-size:14.5px}
.soft-cta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:16px; padding:18px 20px; background:#fff}
.soft-cta > div{flex:1 1 260px}
.soft-cta p{color:var(--slate); font-size:14.5px}
.art-side{top:96px}
.toc{display:grid; gap:8px; padding:18px}
.toc b{font-size:14px}
.toc a{color:var(--slate); font-size:14px; text-decoration:none; padding-inline-start:10px; border-inline-start:2px solid var(--line)}
.toc a:hover{color:var(--cobalt); border-color:var(--cobalt)}
.who{display:grid; grid-template-columns:56px 1fr; gap:10px 12px; align-items:center; padding:18px}
.who .av{width:56px; height:56px}
.who small{display:block; color:var(--slate); font-size:12.5px}
.who .btn{grid-column:1/-1}
@container site (max-width: 900px){ .art-layout{grid-template-columns:minmax(0,1fr); gap:24px} .art-side{position:static} .toc{display:none} }
@container site (max-width: 700px){ .tldr p{font-size:16px} .art-body h2{font-size:22px} }

/* ---- admin: search & AI visibility ---- */
.seo-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:0}
.seo-pages{display:grid; align-content:start; border-inline-end:1px solid var(--line); padding:8px}
.seo-pages button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-family:var(--mono, monospace); font-size:12.5px; direction:ltr; color:var(--slate)}
.seo-pages button span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.seo-pages button[aria-current="true"]{background:var(--mist); color:var(--navy); font-weight:600}
.seo-pages button:focus-visible{outline:2px solid var(--cobalt)}
.dot{width:8px; height:8px; border-radius:50%; flex:none}
.dot.ok{background:var(--st-done, #2E7D4F)} .dot.off{background:transparent; box-shadow:inset 0 0 0 1.5px var(--slate)}
.seo-ed{padding:16px; display:grid; gap:14px; min-width:0}
.lbl2{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; font-weight:600}
.seo-ed .inp{width:100%; box-sizing:border-box; font:inherit; font-size:14px}
.seo-ed textarea.inp{resize:vertical; min-height:70px; line-height:1.6}
.cnt{font-family:var(--mono, monospace); font-size:11.5px; font-weight:500; border-radius:6px; padding:1px 7px}
.cnt.ok{background:#E5F4EB; color:#1E6B3E} .cnt.warn{background:#FBF1E1; color:#8B5A0B} .cnt.bad{background:#FBE8EC; color:#A62E47}
.gprev{margin-top:6px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-family:Arial, "IBM Plex Sans Arabic", sans-serif; display:grid; gap:4px; max-width:600px}
.gsite{display:flex; align-items:center; gap:10px; font-size:13px; color:#202124}
.gsite small{display:block; color:#4d5156; font-size:12px}
.gfav{width:26px; height:26px; border-radius:50%; background:#F1F3F4; display:grid; place-items:center}
.gfav svg{width:18px; height:18px}
.gt{color:#1a0dab; font-size:19px; line-height:1.35}
.gd{color:#4d5156; font-size:13.5px; line-height:1.6}
.seo-row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; border-top:1px solid var(--line); padding-top:10px}
.seo-row .tag{display:inline-flex; align-items:center; gap:4px; margin-inline-start:6px}
.seo-row .tag .ic{width:12px; height:12px}
.seo-files{display:grid; gap:0}
.sf{display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.sf:last-child{border-bottom:0}
.bn{font-family:var(--mono, monospace); font-size:12.5px; background:none; padding:0}
.sf .mono, .seo-row .mono{font-family:var(--mono, monospace); font-size:12.5px}
@container site (max-width: 900px){ .seo-grid{grid-template-columns:minmax(0,1fr)} .seo-pages{border-inline-end:0; border-bottom:1px solid var(--line); grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto} .sf{grid-template-columns:minmax(0,1fr) auto} .sf .muted{grid-column:1/-1; grid-row:2} }

/* booking grid min-width fixes */
.bk-main,.fset,.field{grid-template-columns:minmax(0,1fr)}
.field input,.field select,.field textarea{width:100%; min-width:0; box-sizing:border-box}
.row2{grid-template-columns:repeat(2,minmax(0,1fr))}
@container site (max-width: 520px){ .row2{grid-template-columns:minmax(0,1fr)} }
@container site (max-width: 900px){ .bk-body{grid-template-columns:minmax(0,1fr)} }