/* XPRTO app styles — from the XPRTO Physio Edition design. */
:root{
  --paper:#ffffff; --wash:#f3f6fc; --wash2:#e8eefa;
  --navy:#001233; --navy2:#062a63; --navy3:#0e4bb0; --blue:#2f6ff0; --sky:#dbe8ff;
  --gold:#f3c518; --gold2:#ffe27a; --gold3:#b8890a;
  --ink:#08152c; --ink2:#33456a; --mute:#6d7e9e; --faint:#9dabc4;
  --line:rgba(8,21,44,.08); --line2:rgba(8,21,44,.15);
  --sh:0 18px 40px -24px rgba(6,28,72,.4); --sh2:0 6px 18px -12px rgba(6,28,72,.3);
  --f:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --n:'Space Grotesk',ui-monospace,Menlo,monospace;
  --d:1; --sat:0px; --sab:0px;
}
@media (prefers-reduced-motion:reduce){ :root{ --d:.001 } }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html,body{ height:100% }
body{ font-family:var(--f); background:#dfe6f4; color:var(--ink); font-size:16px;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; overflow:hidden;
  overscroll-behavior:none; user-select:none; -webkit-user-select:none }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; touch-action:manipulation }
svg{ display:block; flex:none }
#stage{ position:fixed; inset:0; overflow:hidden; background:#dfe6f4 }
.device{ position:absolute; top:0; left:0; transform-origin:top left; width:390px; height:844px;
  background:#eef3fc; overflow:hidden }
.app{ position:relative; width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column }

/* ---------- ambient equipment layer ---------- */
.amb{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.amb i{ position:absolute; display:block; color:var(--navy); opacity:.055 }
.amb i svg{ width:100%; height:auto }
.amb .f1{ animation:af1 calc(13s*var(--d)) ease-in-out infinite }
.amb .f2{ animation:af2 calc(17s*var(--d)) ease-in-out infinite }
.amb .f3{ animation:af3 calc(21s*var(--d)) linear infinite }
.amb .f4{ animation:af4 calc(9s*var(--d)) ease-in-out infinite }
@keyframes af1{ 0%,100%{ transform:translateY(0) rotate(-8deg) } 50%{ transform:translateY(-26px) rotate(6deg) } }
@keyframes af2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(18px,-16px) scale(1.14) } }
@keyframes af3{ to{ transform:rotate(360deg) } }
@keyframes af4{ 0%,100%{ transform:scale(1); opacity:.05 } 50%{ transform:scale(.82); opacity:.09 } }
.amb .g1{ opacity:.07; color:var(--gold) }

/* status + bar */
.sb{ position:relative; z-index:20; flex:none; height:calc(var(--sat) + 28px); padding-top:var(--sat);
  display:flex; align-items:center; justify-content:space-between; padding-left:24px; padding-right:20px;
  font-size:12.5px; font-weight:700; color:#fff; background:var(--navy) }
.ab{ position:relative; z-index:15; flex:none; padding:6px 18px 18px; background:var(--navy); color:#fff;
  border-radius:0 0 26px 26px }
.ab .r{ display:flex; align-items:center; gap:10px }
.ab .lc{ flex:1; min-width:0 }
.ab .lc .k{ font-size:10.5px; color:#8ea6d4 }
.ab .lc .v{ display:flex; align-items:center; gap:5px; margin-top:3px; font-size:15px; font-weight:800;
  letter-spacing:-.03em }
.ab .ib{ position:relative; width:38px; height:38px; flex:none; border-radius:13px; display:flex;
  align-items:center; justify-content:center; background:rgba(255,255,255,.11) }
.ab .ib .nd{ position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--gold); border:1.5px solid var(--navy) }
.ab .av{ position:relative; width:38px; height:38px; flex:none; border-radius:13px; overflow:hidden;
  box-shadow:0 0 0 1.5px var(--gold) }
.ab .ask{ display:block; margin-top:15px; font-size:13px; font-weight:650; color:#a9c0e8;
  letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ab .ask b{ color:#fff; font-weight:750 }
.ab .ask .typ{ color:var(--gold); font-weight:800; white-space:pre }
.ab .ask .qmk{ color:var(--gold); font-weight:800; margin-left:0 }
.ab .ask .car{ display:inline-block; width:2px; height:13px; background:var(--gold);
  margin:0 2px 0 1px; vertical-align:-1px; animation:cbl 1s steps(1) infinite }
@keyframes cbl{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.ab .sr{ display:flex; width:100%; box-sizing:border-box; align-items:center; gap:11px; height:50px;
  margin-top:11px; padding:0 6px 0 15px; border-radius:16px; background:#fff; color:var(--faint);
  text-align:left; box-shadow:0 10px 22px -14px rgba(0,0,0,.6) }
.ab .sr .ph{ flex:1; min-width:0; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis }
.ab .sr .kbd{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:6px 9px;
  border-radius:9px; background:var(--wash); color:var(--navy); font-family:var(--n); font-size:8.5px;
  letter-spacing:.06em }
.ab .sr .b{ width:38px; height:38px; border-radius:13px; flex:none; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(150deg,#ffe27a,#f9cb1c 46%,#e2a406); color:#2b1d00 }

/* language sheet */
.lsheet{ position:absolute; inset:0; z-index:90; display:flex; align-items:flex-end;
  background:rgba(6,16,34,.46); opacity:0; pointer-events:none; transition:opacity .28s }
.lsheet.open{ opacity:1; pointer-events:auto }
.lsheet .pn2{ width:100%; border-radius:28px 28px 0 0; background:var(--paper);
  padding:12px 18px calc(var(--sab) + 20px); transform:translateY(100%);
  transition:transform .4s cubic-bezier(.2,.9,.25,1) }
.lsheet.open .pn2{ transform:none }
.lsheet .gb2{ width:38px; height:4px; border-radius:4px; background:var(--line2); margin:0 auto 16px }
.lsheet h4{ font-size:17px; font-weight:800; letter-spacing:-.035em }
.lsheet p{ font-size:11.5px; color:var(--mute); margin-top:5px }
.lgrid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px }
.lgrid2 button{ display:flex; align-items:center; gap:11px; padding:14px 13px; border-radius:18px;
  background:var(--paper); border:1.5px solid var(--line); box-shadow:var(--sh2); text-align:left;
  transition:.2s }
.lgrid2 button.on{ border-color:var(--navy); background:var(--wash) }
.lgrid2 .gl2{ width:36px; height:36px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); font-size:16px; font-weight:800; color:var(--navy) }
.lgrid2 button.on .gl2{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.lgrid2 .tx5{ flex:1; min-width:0 }
.lgrid2 .tx5 b{ display:block; font-size:13px; font-weight:750 }
.lgrid2 .tx5 span{ display:block; font-size:10px; color:var(--mute); margin-top:2px }
.lgrid2 .ck3{ color:var(--navy); opacity:0; flex:none }
.lgrid2 button.on .ck3{ opacity:1 }

/* scroller */
.sc{ position:relative; z-index:5; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding-bottom:calc(var(--sab) + 118px);
  background:linear-gradient(180deg,#f6f9ff 0%,#eef3fc 30%,#f4f7fd 62%,#e9eff9 100%) }
.sc::-webkit-scrollbar{ display:none }
.s{ padding:0 18px; margin-top:30px }
.s.fl{ padding:0 }
.hd{ margin-bottom:14px }
.hd .kk{ display:inline-flex; align-items:center; gap:6px; font-family:var(--n); font-size:8.5px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue) }
.hd h2{ font-size:21px; font-weight:800; letter-spacing:-.04em; line-height:1.14; margin-top:8px }
.hd p{ font-size:12px; color:var(--mute); margin-top:6px; line-height:1.45 }
.hd.rw{ display:flex; align-items:flex-end; gap:10px }
.hd.rw .t{ flex:1 }
.hd .see{ font-size:12px; font-weight:750; color:var(--blue); flex:none }
.mk{ position:relative; display:inline-block; z-index:1;
  clip-path:inset(0 100% -12% 0); transition:clip-path 1.15s cubic-bezier(.5,.05,.2,1) .18s }
.v .mk{ clip-path:inset(0 -2% -12% 0) }
.mk::after{ content:''; position:absolute; left:-3px; right:-3px; bottom:1px; height:9px; z-index:-1;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.9,.3,1) .5s }
.v .mk::after{ transform:scaleX(1) }
.mk .pen{ position:absolute; right:-9px; top:6%; bottom:24%; width:2px; border-radius:2px;
  background:var(--navy); opacity:0 }
.v .mk .pen{ animation:pen calc(1.5s*var(--d)) steps(1) .18s }
@keyframes pen{ 0%,90%{opacity:1} 12%,32%,52%,72%{opacity:.2} 100%{opacity:0} }
.rail{ display:flex; gap:12px; overflow-x:auto; padding:2px 18px 6px; scroll-snap-type:x mandatory }
.rail::-webkit-scrollbar{ display:none }
.rail>*{ flex:none; scroll-snap-align:center }
.rv{ opacity:0; transform:translateY(20px) }
.rv.v{ animation:up calc(.62s*var(--d)) cubic-bezier(.2,.9,.3,1) forwards }
@keyframes up{ to{ opacity:1; transform:none } }

/* plate */
.pt{ position:relative; overflow:hidden; background:linear-gradient(150deg,#dae4f8,#eef2fb);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px }
.pt::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(76deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  transform:translateX(-140%); animation:sh calc(3s*var(--d)) ease-in-out infinite }
@keyframes sh{ 0%{transform:translateX(-140%)} 58%,100%{transform:translateX(140%)} }
.pt .i{ position:relative; z-index:2; color:var(--blue); opacity:.5 }
.pt .d{ position:relative; z-index:2; font-family:var(--n); font-size:7px; letter-spacing:.08em; color:var(--faint) }
.pt.sm .i{ display:none }

/* ink block */
.ink{ background:var(--navy); color:#fff; border-radius:30px; padding:24px 20px; position:relative;
  overflow:hidden; box-shadow:var(--sh) }
.ink .gl{ position:absolute; right:-60px; top:-70px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.34),transparent 66%) }
.ink .kk{ font-family:var(--n); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold) }
.ink h3{ font-size:23px; font-weight:800; letter-spacing:-.04em; line-height:1.12; margin-top:9px }
.ink p{ font-size:12px; color:#a9bfe6; margin-top:9px; line-height:1.5 }
.ink .go{ display:inline-flex; align-items:center; gap:7px; margin-top:15px; padding:11px 17px;
  border-radius:14px; font-size:12.5px; font-weight:800; background:var(--gold); color:var(--navy) }

/* ---------- results panel (light) ---------- */
.rslt{ position:relative; overflow:hidden; padding:18px; border-radius:28px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.rslt .gl3{ position:absolute; right:-70px; top:-78px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.16),transparent 68%) }
.rslt .hd6{ position:relative; z-index:2; display:flex; align-items:center; gap:10px }
.rslt .hd6 b{ flex:1; font-size:14px; font-weight:800; letter-spacing:-.03em }
.rslt .hd6 .pill2{ padding:5px 10px; border-radius:99px; font-family:var(--n); font-size:8px;
  letter-spacing:.1em; background:var(--wash); color:var(--mute) }
.rslt .hero2{ position:relative; z-index:2; display:flex; align-items:center; gap:16px; margin-top:16px }
.rslt .ring2{ position:relative; width:100px; height:100px; flex:none }
.rslt .ring2 svg{ transform:rotate(-90deg) }
.rslt .ring2 circle{ fill:none; stroke-width:9; stroke-linecap:round }
.rslt .ring2 .fg2{ stroke-dasharray:264; stroke-dashoffset:264;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.9,.3,1) }
.rslt .ring2 .lb5{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center }
.rslt .ring2 .lb5 b{ font-size:27px; font-weight:800; letter-spacing:-.05em; color:var(--navy);
  line-height:1 }
.rslt .ring2 .lb5 b span{ font-size:inherit; font-weight:inherit; letter-spacing:inherit;
  font-family:inherit; color:inherit; margin:0 }
.rslt .ring2 .lb5 > span{ font-family:var(--n); font-size:7px; letter-spacing:.14em; color:var(--faint);
  margin-top:4px }
.rslt .hero2 .tx8 b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.035em; line-height:1.22 }
.rslt .hero2 .tx8 p{ font-size:11px; color:var(--mute); margin-top:7px; line-height:1.5 }
.rslt .rows2{ position:relative; z-index:2; margin-top:16px; padding-top:15px; border-top:1px solid var(--line) }
.rslt .r5{ display:flex; align-items:center; gap:11px; padding:8px 0 }
.rslt .r5 .k4{ width:94px; flex:none; font-size:11px; color:var(--mute) }
.rslt .r5 .t3{ flex:1; height:7px; border-radius:5px; background:var(--wash2); overflow:hidden }
.rslt .r5 .t3 i{ display:block; height:100%; width:0; border-radius:5px;
  background:linear-gradient(90deg,var(--navy),#0e4bb0); transition:width 1.1s cubic-bezier(.2,.9,.3,1) }
.rslt .r5 .v5{ font-family:var(--n); font-size:12.5px; font-weight:700; width:56px; text-align:right;
  color:var(--navy) }
.rslt .note2{ position:relative; z-index:2; display:flex; align-items:center; gap:9px; margin-top:15px;
  padding:12px 13px; border-radius:16px; background:var(--wash) }
.rslt .note2 > svg{ color:var(--gold3); flex:none }
.rslt .note2 span{ flex:1; font-size:10.5px; color:var(--mute); line-height:1.45 }
.rslt .note2 b{ color:var(--ink); font-weight:750 }

/* real images — base sizing lives here so component sizes can override it */
.pimg{ display:block; width:100%; height:100%; background-size:cover; background-position:center;
  background-repeat:no-repeat }


/* trust ribbon */
/* trust ribbon */
/* trust ribbon */
.rib{ overflow:hidden; white-space:nowrap; padding:11px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line) }
.rib .tk2{ display:inline-flex; gap:22px; animation:mar calc(22s*var(--d)) linear infinite }
.rib span{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  color:var(--ink2); letter-spacing:-.01em }
.rib span .ck2{ width:17px; height:17px; border-radius:50%; background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex:none }

/* ---------- HERO · brand intro ---------- */
.hero{ position:relative; overflow:hidden; border-radius:30px; padding:20px 20px 18px; color:#fff;
  background:linear-gradient(150deg,#001233 0%,#052458 54%,#00102c 100%);
  box-shadow:0 26px 48px -26px rgba(0,18,51,.85) }
.hero .dots{ position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:16px 16px;
  -webkit-mask-image:radial-gradient(90% 80% at 18% 14%,#000,transparent 70%);
  mask-image:radial-gradient(90% 80% at 18% 14%,#000,transparent 70%) }
.hero .arcs{ position:absolute; right:-78px; top:-84px; width:236px; height:236px }
.hero .arcs i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(243,197,24,.2) }
.hero .arcs i:nth-child(2){ inset:30px; border-color:rgba(243,197,24,.14) }
.hero .arcs i:nth-child(3){ inset:60px; border-color:rgba(243,197,24,.28); border-style:dashed;
  animation:spin calc(30s*var(--d)) linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.hero .streak{ position:absolute; left:-40%; top:0; width:60%; height:100%;
  background:linear-gradient(78deg,transparent 42%,rgba(243,197,24,.13) 50%,transparent 58%);
  animation:strk calc(8s*var(--d)) ease-in-out infinite }
@keyframes strk{ 0%,60%{ transform:translateX(0) } 88%,100%{ transform:translateX(320%) } }

.hero .brand{ position:relative; z-index:3; display:flex; align-items:center; gap:8px }
.hero .brand .mk2{ width:32px; height:32px; border-radius:10px; overflow:hidden; flex:none;
  box-shadow:0 0 0 1px rgba(243,197,24,.34), 0 6px 14px -8px rgba(0,0,0,.8) }
.hero .brand .mk2 img{ width:100%; height:100%; display:block }
.hero .brand .wm2{ font-size:13.5px; font-weight:800; letter-spacing:.24em }
.hero .brand .tl{ margin-left:auto; font-family:var(--n); font-size:7px; letter-spacing:.16em;
  color:#7e99c8; text-align:right; line-height:1.6 }

.hero h3{ position:relative; z-index:3; font-size:31px; font-weight:800; letter-spacing:-.05em;
  line-height:1.08; margin-top:20px }
.hero h3 em{ font-style:normal; color:var(--gold) }
.hero .sub2{ position:relative; z-index:3; font-size:12px; color:#9fb6de; margin-top:11px;
  line-height:1.5; max-width:28ch }

.hero .ways{ position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:20px }
.hero .wy{ position:relative; padding:13px 10px 12px; border-radius:18px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13); text-align:left; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,1.4,.4,1) }
.hero .wy:active{ transform:scale(.95) }
.hero .wy .ic2{ width:26px; height:26px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:rgba(243,197,24,.16); color:var(--gold) }
.hero .wy .l4{ display:block; font-size:9.5px; color:#9fb6de; margin-top:11px; font-weight:650 }
.hero .wy .p4{ display:block; font-size:18px; font-weight:800; letter-spacing:-.045em; margin-top:3px }
.hero .wy .p4 small{ font-size:8.5px; font-weight:650; color:#9fb6de; margin-left:2px }
.hero .wy .ar2{ position:absolute; right:10px; top:13px; color:rgba(255,255,255,.3) }
.hero .wy.hot{ border-color:transparent; color:#2b1d00;
  background:linear-gradient(152deg,#ffe display,#ffd84a 0%,#f7c516 38%,#e9a908 72%,#ffdf6b 100%);
  background:linear-gradient(152deg,#ffe27a 0%,#f9cb1c 34%,#e2a406 70%,#ffd95e 100%);
  box-shadow:0 16px 30px -12px rgba(233,164,8,.95), inset 0 1px 0 rgba(255,255,255,.55) }
.hero .wy.hot .ic2{ background:rgba(43,29,0,.16); color:#2b1d00 }
.hero .wy.hot .l4{ color:rgba(43,29,0,.66) } .hero .wy.hot .p4 small{ color:rgba(43,29,0,.6) }
.hero .wy.hot .ar2{ color:rgba(43,29,0,.45) }
.hero .wy.hot::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(78deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-130%); animation:btsh calc(5.4s*var(--d)) ease-in-out infinite }
@keyframes btsh{ 0%,68%{transform:translateX(-130%)} 90%,100%{transform:translateX(130%)} }

.hero .prf{ position:relative; z-index:3; display:flex; align-items:center; gap:8px; margin-top:16px }
.hero .prf .pin2{ width:24px; height:24px; border-radius:8px; flex:none; display:flex; align-items:center;
  justify-content:center; background:rgba(243,197,24,.16); border:1px solid rgba(243,197,24,.3);
  color:var(--gold) }
.hero .prf b{ font-size:11.5px; font-weight:750; letter-spacing:-.02em }
.hero .prf .go4{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:750; color:var(--gold) }

/* ---------- A · explore showcase ---------- */
.shw{ position:relative; height:312px; border-radius:32px; overflow:hidden; box-shadow:var(--sh);
  background:var(--navy); touch-action:pan-y }
.shw .slide{ position:absolute; inset:0; opacity:0; transition:opacity .55s ease }
.shw .slide.on{ opacity:1 }
.shw .slide .pt{ position:absolute; inset:0; transform:scale(1.06); transition:transform 7s linear }
.shw .slide.on .pt{ transform:scale(1.18) }
.shw .slide .sc2{ position:absolute; inset:0;
  background:linear-gradient(118deg,rgba(0,18,51,.86) 2%,rgba(0,18,51,.5) 40%,rgba(0,18,51,.06) 72%) }
.shw .slide .ring{ position:absolute; right:-58px; top:-64px; width:200px; height:200px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16) }
.shw .body{ position:absolute; left:20px; right:66px; top:0; bottom:0; display:flex; flex-direction:column;
  justify-content:center; color:#fff; z-index:3 }
.shw .idx{ font-family:var(--n); font-size:9px; letter-spacing:.18em; color:var(--gold) }
.shw h3{ font-size:29px; font-weight:800; letter-spacing:-.045em; line-height:1.06; margin-top:10px }
.shw .dk{ font-size:12px; color:#b3c8ec; margin-top:9px; line-height:1.45; max-width:25ch }
.shw .chips{ display:flex; gap:7px; margin-top:14px; flex-wrap:wrap }
.shw .chips span{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px;
  font-family:var(--n); font-size:9px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2);
  color:#e2ecff; backdrop-filter:blur(6px) }
.shw .chips span svg{ color:var(--gold) }
.shw .go{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:16px;
  padding:12px 18px; border-radius:15px; font-size:12.5px; font-weight:800; background:var(--gold);
  color:var(--navy); box-shadow:0 14px 26px -12px rgba(243,197,24,.95) }
.shw .go .pv{ font-family:var(--n); font-size:12px }
.shw .steps{ position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:4;
  display:flex; flex-direction:column; gap:6px }
.shw .steps i{ width:3px; height:16px; border-radius:3px; background:rgba(255,255,255,.24); transition:.35s }
.shw .steps i.on{ height:30px; background:var(--gold) }
.shw .prog{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.14); z-index:4 }
.shw .prog i{ display:block; height:100%; width:0; background:var(--gold) }
.shw .prog i.run{ animation:pgr calc(5s*var(--d)) linear forwards }
@keyframes pgr{ to{ width:100% } }

/* selector rail */
.selr{ display:flex; gap:9px; overflow-x:auto; padding:14px 18px 4px }
.selr::-webkit-scrollbar{ display:none }
.selr button{ flex:none; width:76px; padding:13px 6px 11px; border-radius:22px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); display:flex; flex-direction:column;
  align-items:center; gap:9px; transition:.28s cubic-bezier(.2,.9,.3,1) }
.selr button .ic{ width:38px; height:38px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy); transition:.28s }
.selr button b{ font-size:10px; font-weight:750; color:var(--ink2); letter-spacing:-.01em; text-align:center;
  line-height:1.2 }
.selr button.on{ background:var(--navy); border-color:var(--navy); transform:translateY(-3px);
  box-shadow:0 16px 28px -14px rgba(0,18,51,.75) }
.selr button.on .ic{ background:var(--gold); color:var(--navy) }
.selr button.on b{ color:#fff }

/* ---------- B · specialisation cards ---------- */
.spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px }
.sp{ position:relative; overflow:hidden; padding:15px 14px 13px; border-radius:24px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); opacity:0; transform:translateY(16px) }
.v .sp{ animation:btIn calc(.6s*var(--d)) cubic-bezier(.2,.9,.3,1) forwards }
.sp.dark{ background:linear-gradient(150deg,var(--navy),var(--navy2)); border-color:transparent; color:#fff }
.sp .rr2{ position:absolute; right:-34px; top:-40px; width:110px; height:110px; border-radius:50%;
  background:rgba(47,111,240,.07) }
.sp.dark .rr2{ background:rgba(243,197,24,.16) }
.sp .ic{ position:relative; z-index:2; width:40px; height:40px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; background:var(--wash); color:var(--navy) }
.sp.dark .ic{ background:var(--gold); color:var(--navy) }
.sp b{ position:relative; z-index:2; display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em;
  margin-top:12px }
.sp .cnt{ position:relative; z-index:2; display:block; font-family:var(--n); font-size:9px; color:var(--mute);
  margin-top:5px }
.sp.dark .cnt{ color:#9fb6de }
.sp .spb{ position:relative; z-index:2; margin-top:12px }.sp .spw{ display:block; height:4px; border-radius:3px; background:var(--wash2); overflow:hidden }.sp.dark .spw{ background:rgba(255,255,255,.15) }.sp .spw i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#ffe27a,#e2a406); transform:scaleX(0); transform-origin:left }.v .sp .spw i{ animation:spGrow calc(.9s*var(--d)) cubic-bezier(.2,.9,.3,1) .3s forwards }@keyframes spGrow{ to{ transform:scaleX(1) } }.sp .spl{ display:block; margin-top:8px; font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }.sp.dark .spl{ color:#9fb6de }
.sp .ft{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-top:12px;
  padding-top:11px; border-top:1px solid var(--line) }
.sp.dark .ft{ border-color:rgba(255,255,255,.14) }
.sp .ft .pr{ flex:1; font-size:13px; font-weight:800; letter-spacing:-.03em }
.sp .ft .pr small{ font-size:9px; font-weight:600; color:var(--mute) }
.sp.dark .ft .pr small{ color:#9fb6de }
.sp .ft .go{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--navy); color:#fff; transition:transform .25s }
.sp.dark .ft .go{ background:var(--gold); color:var(--navy) }
.sp:active .ft .go{ transform:translateX(3px) }

/* hub card *//* hub card */
.hub{ width:270px; border-radius:26px; overflow:hidden; background:var(--paper); box-shadow:var(--sh2);
  border:1px solid var(--line) }
.hub .im{ position:relative; height:150px } .hub .im .pt{ position:absolute; inset:0 }
.hub .im .gr{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,18,51,.4) 0,transparent 40%,rgba(0,18,51,.8)) }
.hub .hk{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:8px; font-size:9.5px; font-weight:800; background:var(--gold); color:var(--navy) }
.hub .fv{ position:absolute; top:9px; right:9px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; color:#dc4a3d }
.hub .nm{ position:absolute; left:13px; right:13px; bottom:11px; color:#fff }
.hub .nm b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.03em }
.hub .nm .mt{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:10.5px; color:#c6d6f2 }
.hub .bd{ padding:12px 13px 14px; display:flex; align-items:center; gap:10px }
.hub .bd .pr{ flex:1 }
.hub .bd .pr .v{ font-size:19px; font-weight:800; letter-spacing:-.04em }
.hub .bd .pr .u{ font-size:10px; color:var(--mute); font-weight:600 }
.hub .bd .bk{ padding:10px 15px; border-radius:12px; font-size:12px; font-weight:800; background:var(--navy);
  color:#fff }
.hub .tg{ display:flex; gap:5px; padding:0 13px 13px }
.hub .tg span{ padding:4px 8px; border-radius:7px; font-size:8.5px; font-weight:700; background:var(--wash);
  color:var(--ink2) }

/* xpert carousel */
.car{ position:relative }
.car .track{ display:flex; gap:13px; overflow-x:auto; padding:4px 18px 12px; scroll-snap-type:x mandatory }
.car .track::-webkit-scrollbar{ display:none }
.xc{ flex:none; width:292px; scroll-snap-align:center; border-radius:28px; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2) }
.xc .top{ position:relative; height:184px }
.xc .top .pt{ position:absolute; inset:0 }
.xc .top .gr{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,18,51,.34) 0,transparent 40%,rgba(0,18,51,.94)) }
.xc .top .bd{ position:absolute; left:15px; right:15px; bottom:14px; color:#fff }
.xc .top .bd b{ display:block; font-size:18px; font-weight:800; letter-spacing:-.035em }
.xc .top .bd span{ display:block; font-size:11px; color:#bcd0f0; margin-top:4px }
.xc .top .as{ position:absolute; top:11px; left:11px; display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:99px; font-size:9.5px; font-weight:800; background:rgba(0,18,51,.62);
  border:1px solid rgba(243,197,24,.45); color:var(--gold); backdrop-filter:blur(8px) }
.xc .top .rt{ position:absolute; top:11px; right:11px; display:inline-flex; align-items:center; gap:4px;
  padding:6px 10px; border-radius:99px; font-size:11px; font-weight:800; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 46%,#e2a406);
  box-shadow:0 8px 16px -8px rgba(233,164,8,.9) }
.xc .hooks2{ display:flex; gap:7px; padding:16px 15px 0 }
.xc .hooks2 span{ display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:99px;
  font-size:9.5px; font-weight:750; background:var(--wash); color:var(--navy) }
.xc .hooks2 span svg{ color:var(--gold3) }
.xc .rows{ margin:15px 15px 0; border-radius:18px; background:var(--wash); overflow:hidden }
.xc .rw{ display:flex; align-items:center; gap:11px; padding:13px 14px }
.xc .rw+.rw{ border-top:1px solid rgba(8,21,44,.07) }
.xc .rw .ic{ width:28px; height:28px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:#fff; color:var(--navy); box-shadow:var(--sh2) }
.xc .rw .tx{ flex:1; font-size:11.5px; font-weight:650; color:var(--ink2) }
.xc .rw .pv{ font-size:14.5px; font-weight:800; letter-spacing:-.03em; color:var(--navy) }
.xc .rw.gold .ic{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 46%,#e2a406); color:#2b1d00;
  box-shadow:0 6px 12px -6px rgba(233,164,8,.9) }
.xc .rw.gold .pv{ color:var(--gold3) }
.xc .cta{ display:table; width:calc(100% - 10px); table-layout:auto; border-collapse:separate;
  border-spacing:10px 0; margin:16px 5px 18px }
.xc .cta .cl{ display:table-cell; vertical-align:middle; padding:0 }
.xc .cta .cl.ic{ width:48px }
.xc .cta button{ display:block; width:100%; height:46px; border-radius:14px; text-align:center;
  font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.015em; line-height:46px; padding:0 }
.xc .cta .p{ background:linear-gradient(150deg,var(--navy),#0a3272); color:#fff;
  box-shadow:0 12px 22px -12px rgba(0,18,51,.85) }
.xc .cta .p svg{ display:inline-block; vertical-align:-3px; margin-right:7px }
.xc .cta .ib3{ background:var(--wash); color:var(--navy); border:1.5px solid rgba(8,21,44,.09) }
.xc .cta .ib3 svg{ display:inline-block; vertical-align:-4px }
.dots{ display:flex; justify-content:center; gap:5px; margin-top:6px }
.dots i{ width:6px; height:6px; border-radius:99px; background:var(--line2); transition:.3s }
.dots i.on{ width:20px; background:var(--navy) }

/* trust · photo-led pillars */
.tw2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.twc{ position:relative; padding:9px 9px 2px; border-radius:24px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); opacity:0; transform:translateY(14px) }
.v .twc{ animation:btIn calc(.6s*var(--d)) cubic-bezier(.2,.9,.3,1) forwards }
@keyframes btIn{ to{ opacity:1; transform:none } }
.twc .im{ position:relative; aspect-ratio:4/3; border-radius:17px; overflow:hidden }
.twc .im .pt{ position:absolute; inset:0 }
.twc .bg{ position:absolute; left:8px; bottom:8px; width:30px; height:30px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 46%,#e2a406); color:#2b1d00 }
.twc .bd{ padding:13px 5px 12px }
.twc .bd b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.03em; line-height:1.15 }
.twc .bd p{ font-size:10.5px; color:var(--mute); margin-top:6px; line-height:1.45; min-height:45px }
.twc .bd .st{ display:block; font-family:var(--n); font-size:8.5px; color:var(--faint); margin-top:9px;
  padding-top:9px; border-top:1px solid var(--line) }
.pol{ display:flex; align-items:center; gap:11px; margin-top:12px; padding:14px 15px; border-radius:20px;
  background:var(--wash) }
.pol .fl{ display:flex; gap:4px; flex:none }
.pol .fl i{ width:8px; height:11px; border-radius:2px; background:var(--line2) }
.pol .fl i.on{ background:#d8503f }
.pol .tx{ flex:1; font-size:11px; color:var(--mute); line-height:1.45 }
.pol .tx b{ color:var(--ink); font-weight:750 }

/* facility tiles */
.fac{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px }
.fc2{ position:relative; aspect-ratio:5/4; border-radius:22px; overflow:hidden; box-shadow:var(--sh2);
  opacity:0; transform:translateY(14px) }
.v .fc2{ animation:btIn calc(.6s*var(--d)) cubic-bezier(.2,.9,.3,1) forwards }
.fc2 .pt{ position:absolute; inset:0 }
.fc2 .sc6{ position:absolute; inset:0;
  background:linear-gradient(170deg,rgba(0,18,51,.12) 0,rgba(0,18,51,.55) 52%,rgba(0,18,51,.92)) }
.fc2 .ic3{ position:absolute; left:11px; top:11px; width:30px; height:30px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.24); color:var(--gold); backdrop-filter:blur(6px) }
.fc2 .tx2{ position:absolute; left:12px; right:12px; bottom:11px; color:#fff }
.fc2 .tx2 b{ display:block; font-size:13px; font-weight:800; letter-spacing:-.028em }
.fc2 .tx2 span{ display:block; font-family:var(--n); font-size:8.5px; color:var(--gold); margin-top:4px }

/* simple assurance row (support + payments strip) */
.asr{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:24px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.asr .ic{ width:50px; height:50px; flex:none; border-radius:18px; display:flex; align-items:center;
  justify-content:center; background:var(--navy); color:var(--gold) }
.asr .tx b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em }
.asr .tx p{ font-size:11.5px; color:var(--mute); margin-top:5px; line-height:1.45 }

/* parents cta *//* simple assurance row (support + payments strip) */
.asr{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:24px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.asr .ic{ width:50px; height:50px; flex:none; border-radius:18px; display:flex; align-items:center;
  justify-content:center; background:var(--navy); color:var(--gold) }
.asr .tx b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em }
.asr .tx p{ font-size:11.5px; color:var(--mute); margin-top:5px; line-height:1.45 }

/* parents cta */
.par{ position:relative; overflow:hidden; border-radius:30px; display:flex; box-shadow:var(--sh2);
  border:1px solid var(--line) }
.par .img{ width:126px; flex:none; position:relative }
.par .img .pt{ position:absolute; inset:0 }
.par .tx{ flex:1; padding:16px 15px }
.par .kk{ font-family:var(--n); font-size:8px; letter-spacing:.14em; color:var(--blue) }
.par b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.035em; margin-top:7px; line-height:1.15 }
.par p{ font-size:11px; color:var(--mute); margin-top:6px; line-height:1.45 }
.par .go{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; padding:9px 14px;
  border-radius:12px; font-size:11.5px; font-weight:800; background:var(--navy); color:#fff }

/* ---------- doorstep vs online · switcher ---------- */
.dsw{ position:relative; display:flex; padding:5px; border-radius:99px; background:var(--wash);
  border:1px solid var(--line) }
.dsw .pill{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:99px;
  background:var(--navy); transition:transform .42s cubic-bezier(.3,1.3,.4,1) }
.dsw.b .pill{ transform:translateX(100%) }
.dsw button{ position:relative; z-index:2; flex:1; height:44px; border-radius:99px; display:flex;
  align-items:center; justify-content:center; gap:7px; font-size:12.5px; font-weight:750; color:var(--mute);
  transition:color .3s }
.dsw button.on{ color:#fff }
.dsw button .pr{ font-family:var(--n); font-size:11.5px; opacity:.75 }

.dpan{ position:relative; margin-top:13px; border-radius:28px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.dpan .im{ position:relative; height:150px }
.dpan .im .pt{ position:absolute; inset:0; opacity:0; transition:opacity .45s }
.dpan .im .pt.on{ opacity:1 }
.dpan .im .sc4{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,18,51,.15) 0,transparent 42%,rgba(0,18,51,.86)) }
.dpan .im .tag{ position:absolute; left:14px; top:13px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:99px; font-family:var(--n); font-size:8.5px; letter-spacing:.12em;
  background:rgba(255,255,255,.92); color:var(--navy) }
.dpan .im .pz{ position:absolute; left:14px; bottom:12px; color:#fff; display:flex; align-items:flex-end; gap:7px }
.dpan .im .pz .v{ font-size:38px; font-weight:800; letter-spacing:-.055em; line-height:.9 }
.dpan .im .pz .u{ font-size:11px; color:#c3d6f5; font-weight:650; padding-bottom:4px }
.dpan .im .save{ position:absolute; right:14px; bottom:14px; padding:6px 11px; border-radius:99px;
  font-size:11px; font-weight:800; background:var(--gold); color:var(--navy) }
.dpan .bd{ padding:15px }
.dpan .ft{ display:flex; flex-direction:column; gap:0 }
.dpan .ft .r{ display:flex; align-items:center; gap:10px; padding:9px 0; opacity:0;
  transform:translateX(-8px) }
.dpan .ft .r.in{ animation:ftin calc(.45s*var(--d)) cubic-bezier(.2,.9,.3,1) forwards }
@keyframes ftin{ to{ opacity:1; transform:none } }
.dpan .ft .r+.r{ border-top:1px solid var(--line) }
.dpan .ft .r .ck{ width:20px; height:20px; flex:none; border-radius:7px; background:var(--gold);
  color:var(--navy); display:flex; align-items:center; justify-content:center }
.dpan .ft .r span{ flex:1; font-size:12px; font-weight:600; color:var(--ink2) }
.dpan .meta{ display:flex; gap:8px; margin-top:13px }
.dpan .meta div{ flex:1; padding:10px 8px; border-radius:14px; background:var(--wash); text-align:center }
.dpan .meta .l{ font-family:var(--n); font-size:7.5px; letter-spacing:.1em; color:var(--faint) }
.dpan .meta .v2{ font-size:12px; font-weight:800; margin-top:4px; letter-spacing:-.02em }
.dpan .go2{ width:100%; height:46px; margin-top:14px; border-radius:15px; display:flex; align-items:center;
  justify-content:center; gap:8px; font-size:13px; font-weight:800; background:var(--navy); color:#fff }

.ddiff{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:13px 15px; border-radius:20px;
  background:var(--wash) }
.ddiff .ic{ width:32px; height:32px; flex:none; border-radius:11px; background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center }
.ddiff .tx{ flex:1; font-size:11px; color:var(--mute); line-height:1.45 }
.ddiff .tx b{ color:var(--ink); font-weight:750 }

/* 3D simulator — extruded stack */
.sim{ border-radius:30px; background:linear-gradient(165deg,#0a1d42,#0e3a86 55%,#071534); overflow:hidden;
  box-shadow:var(--sh) }
.sim .stage{ position:relative; height:290px; perspective:1000px; display:flex; align-items:center;
  justify-content:center; overflow:hidden; touch-action:pan-y }
.sim .stage .grid{ position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(120,170,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,170,255,.16) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(64% 66% at 50% 46%,#000,transparent 80%);
  mask-image:radial-gradient(64% 66% at 50% 46%,#000,transparent 80%) }
.sim .stage .glow{ position:absolute; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.22),transparent 66%); animation:pl calc(4.6s*var(--d)) ease-in-out infinite }
@keyframes pl{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.16) } }
.sim .floor{ position:absolute; bottom:56px; width:200px; height:56px; border-radius:50%;
  border:1px dashed rgba(140,185,255,.4); transform:rotateX(76deg);
  animation:spin calc(11s*var(--d)) linear infinite }
.sim .wrap{ position:relative; transform-style:preserve-3d; will-change:transform }
.sim .lay{ position:absolute; left:50%; top:50%; width:132px; height:214px; margin:-107px 0 0 -66px }
.sim .lay svg{ width:100%; height:100% }
.sim .lay .sil{ fill:#1f5fd0 }
.sim .lay .mus{ fill:#f3c518; opacity:0; transition:opacity .35s }
.sim .lay.front .sil{ fill:#4c93ff }
.sim .lay.front .mus.on{ opacity:1 }
.sim .lay .mus.on{ opacity:.55 }
.sim .wrap.rep .arm{ animation:press calc(1.4s*var(--d)) ease-in-out infinite }
.sim .wrap.rep .leg{ animation:dip calc(1.4s*var(--d)) ease-in-out infinite }
@keyframes press{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }
@keyframes dip{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.94) } }
.sim .hud{ position:absolute; left:14px; top:14px; display:flex; flex-direction:column; gap:6px }
.sim .hud span{ padding:5px 9px; border-radius:9px; font-family:var(--n); font-size:8.5px;
  background:rgba(255,255,255,.13); color:#dbe8ff; border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px) }
.sim .rot{ position:absolute; right:14px; top:14px; padding:6px 10px; border-radius:9px;
  font-family:var(--n); font-size:8.5px; color:#dbe8ff; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18) }
.sim .bar{ position:absolute; left:14px; right:14px; bottom:12px; display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:16px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px) }
.sim .bar .nm{ flex:1; min-width:0 }
.sim .bar .nm b{ display:block; font-size:12.5px; font-weight:800; color:#fff; letter-spacing:-.02em }
.sim .bar .nm span{ display:block; font-family:var(--n); font-size:9px; color:#a8c4f0; margin-top:3px }
.sim .bar .rp{ font-family:var(--n); font-size:14px; color:var(--gold) }
.sim .bar .pl2{ width:38px; height:38px; border-radius:50%; background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex:none }
.sim .parts{ display:flex; gap:7px; overflow-x:auto; padding:13px 14px 15px;
  background:rgba(0,0,0,.18) }
.sim .parts::-webkit-scrollbar{ display:none }
.sim .parts button{ flex:none; padding:9px 14px; border-radius:12px; font-size:11.5px; font-weight:750;
  background:rgba(255,255,255,.1); color:#c9dcfb; border:1px solid rgba(255,255,255,.14) }
.sim .parts button.on{ background:var(--gold); color:var(--navy); border-color:var(--gold) }

/* home-programme steps */
.wk{ border-radius:26px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2);
  overflow:hidden }
.wk .r{ display:flex; align-items:center; gap:12px; padding:13px 14px; width:100% }
.wk .r+.r{ border-top:1px solid var(--line) }
.wk .r .n{ width:30px; height:30px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); font-family:var(--n); font-size:11px; color:var(--navy) }
.wk .r .tx{ flex:1; text-align:left }
.wk .r .tx b{ display:block; font-size:12.5px; font-weight:750 }
.wk .r .tx span{ display:block; font-family:var(--n); font-size:9px; color:var(--mute); margin-top:3px }
.wk .r .go{ width:32px; height:32px; flex:none; border-radius:50%; background:var(--wash); color:var(--navy);
  display:flex; align-items:center; justify-content:center }
.wk .r.dn .n{ background:var(--gold); color:var(--navy) }

/* before after video */
.ba{ width:264px; border-radius:26px; overflow:hidden; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.ba .vw{ position:relative; height:186px; overflow:hidden }
.ba .vw .half{ position:absolute; inset:0 }
.ba .vw .half .pt{ position:absolute; inset:0 }
.ba .vw .aft{ clip-path:inset(0 0 0 50%) }
.ba .vw .hdl{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.35) }
.ba .vw .hdl::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.3) }
.ba .vw .lb{ position:absolute; bottom:9px; padding:3px 8px; border-radius:6px; font-size:8.5px;
  font-weight:800; background:rgba(0,18,51,.8); color:#fff }
.ba .vw .lb.l{ left:9px } .ba .vw .lb.r{ right:9px }
.ba .vw .pl{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; color:var(--navy) }
.ba .vw .pl::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.8);
  animation:rip 2.2s ease-out infinite }
@keyframes rip{ 0%{transform:scale(1);opacity:.9} 100%{transform:scale(1.7);opacity:0} }
.ba .bd{ padding:13px }
.ba .bd b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.03em }
.ba .bd span{ display:block; font-size:11px; color:var(--mute); margin-top:4px }
.ba .kp{ display:flex; gap:7px; margin-top:11px }
.ba .kp div{ flex:1; padding:8px; border-radius:11px; background:var(--wash); text-align:center }
.ba .kp .n{ font-family:var(--n); font-size:13px; font-weight:700; color:var(--navy) }
.ba .kp .l{ font-size:8px; color:var(--mute); margin-top:2px }

/* ---------- ratings summary ---------- */
.rsum{ display:flex; align-items:center; gap:16px; padding:17px; border-radius:24px; background:var(--paper);
  border:1px solid var(--line); box-shadow:0 14px 30px -18px rgba(6,28,72,.5), 0 2px 6px -3px rgba(6,28,72,.18) }
.rsum .big2{ text-align:center; flex:none; width:96px }
.rsum .big2 .sc8{ font-size:38px; font-weight:800; letter-spacing:-.05em; line-height:1 }
.rsum .big2 .st5{ display:flex; gap:2.5px; justify-content:center; margin-top:9px; color:#f0b71a }
.rsum .big2 .ct2{ font-family:var(--n); font-size:8.5px; color:var(--faint); margin-top:7px }
.rsum .brk{ flex:1; min-width:0 }
.rsum .brk .r6{ display:flex; align-items:center; gap:8px; padding:2.5px 0 }
.rsum .brk .r6 .n6{ font-family:var(--n); font-size:8.5px; color:var(--mute); width:12px; flex:none }
.rsum .brk .r6 .t4{ flex:1; height:6px; border-radius:4px; background:var(--wash2); overflow:hidden }
.rsum .brk .r6 .t4 i{ display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#f9cb1c,#e2a406); transition:width .9s cubic-bezier(.2,.9,.3,1) }
.rsum .brk .r6 .p5{ font-family:var(--n); font-size:8px; color:var(--faint); width:26px; text-align:right }

/* ---------- review card ---------- */
.rev{ width:280px; padding:16px; border-radius:24px; background:var(--paper); border:1px solid var(--line);
  box-shadow:0 16px 32px -20px rgba(6,28,72,.55), 0 2px 6px -3px rgba(6,28,72,.18) }
.revrail{ padding-top:16px !important }
.rev .hd7{ display:flex; align-items:center; gap:10px }
.rev .hd7 .av2{ position:relative; width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none }
.rev .hd7 .nm4{ flex:1; min-width:0 }
.rev .hd7 .nm4 b{ display:flex; align-items:center; gap:5px; font-size:13px; font-weight:800;
  letter-spacing:-.02em }
.rev .hd7 .nm4 b svg{ color:var(--navy3) }
.rev .hd7 .nm4 span{ display:block; font-size:10px; color:var(--mute); margin-top:3px }
.rev .hd7 .dt3{ font-family:var(--n); font-size:8px; color:var(--faint); flex:none }
.rev .st6{ display:flex; align-items:center; gap:3px; margin-top:13px; color:#f0b71a }
.rev .st6 b{ margin-left:5px; font-size:11px; font-weight:800; color:var(--ink) }
.rev p{ font-size:12.5px; line-height:1.55; color:var(--ink2); margin-top:9px }
.rev .tags2{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line) }
.rev .tags2 span{ display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:99px;
  font-size:9px; font-weight:750; background:var(--wash); color:var(--ink2) }
.rev .tags2 .vf2{ background:rgba(13,155,116,.12); color:#0d9b74 }

/* ---------- session strip ---------- */
.strp{ padding:20px 16px 18px; border-radius:26px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.strp .row2{ position:relative; display:flex; justify-content:space-between; align-items:flex-start }
.strp .line{ position:absolute; left:14%; right:14%; top:23px; height:2px; background:var(--line2);
  border-radius:2px }
.strp .line i{ display:block; height:100%; width:0; border-radius:2px; background:var(--gold);
  transition:width 1.5s cubic-bezier(.3,.9,.3,1) }
.strp .st2{ position:relative; z-index:2; width:22%; display:flex; flex-direction:column; align-items:center;
  gap:10px }
.strp .st2 .cr2{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--faint); border:3px solid var(--paper);
  transition:.45s cubic-bezier(.3,1.4,.4,1) }
.strp .st2.on .cr2{ background:var(--navy); color:var(--gold); transform:scale(1.08);
  box-shadow:0 10px 20px -10px rgba(0,18,51,.7) }
.strp .st2 b{ font-size:11px; font-weight:750; letter-spacing:-.02em; color:var(--faint); text-align:center;
  line-height:1.25; transition:color .4s }
.strp .st2.on b{ color:var(--ink) }
.strp .foot2{ display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line) }
.strp .foot2 .k2{ width:34px; height:34px; flex:none; border-radius:12px; background:var(--gold);
  color:var(--navy); display:flex; align-items:center; justify-content:center }
.strp .foot2 p{ flex:1; font-size:11.5px; color:var(--mute); line-height:1.45 }
.strp .foot2 p b{ color:var(--ink); font-weight:750 }

/* ---------- membership selector ---------- */
.bill{ position:relative; display:flex; padding:5px; border-radius:99px; background:var(--wash);
  border:1px solid var(--line) }
.bill .pl3{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:99px;
  background:var(--navy); transition:transform .4s cubic-bezier(.3,1.25,.4,1) }
.bill.y .pl3{ transform:translateX(100%) }
.bill button{ position:relative; z-index:2; flex:1; height:42px; border-radius:99px; font-size:12.5px;
  font-weight:750; color:var(--mute); transition:color .3s; display:flex; align-items:center;
  justify-content:center; gap:7px }
.bill button.on{ color:#fff }
.bill button .sv{ padding:3px 7px; border-radius:99px; font-family:var(--n); font-size:8px;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }

.plans2{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px }
.pcard{ position:relative; padding:14px 9px 13px; border-radius:22px; background:var(--paper);
  border:1.5px solid var(--line); box-shadow:var(--sh2); text-align:center; transition:.28s cubic-bezier(.2,.9,.3,1) }
.pcard .tag3{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:3px 9px;
  border-radius:99px; font-family:var(--n); font-size:7.5px; letter-spacing:.06em; white-space:nowrap;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.pcard .nm3{ font-family:var(--n); font-size:8.5px; letter-spacing:.12em; color:var(--mute) }
.pcard .pr3{ font-size:19px; font-weight:800; letter-spacing:-.045em; margin-top:8px }
.pcard .pv2{ font-variant-numeric:tabular-nums }
.pcard .pr3 small{ font-size:9px; font-weight:650; color:var(--mute) }
.pcard .sb3{ font-size:9.5px; color:var(--mute); margin-top:5px; line-height:1.3 }
.pcard.on{ background:linear-gradient(155deg,var(--navy),#06285e); border-color:transparent; color:#fff;
  transform:translateY(-4px); box-shadow:0 20px 32px -18px rgba(0,18,51,.85) }
.pcard.on .nm3{ color:var(--gold) } .pcard.on .sb3{ color:#9fb6de }
.pcard.on .pr3 small{ color:#9fb6de }

.pdet{ margin-top:14px; padding:16px; border-radius:24px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.pdet .hd5{ display:flex; align-items:baseline; gap:8px }
.pdet .hd5 b{ flex:1; font-size:15px; font-weight:800; letter-spacing:-.03em }
.pdet .hd5 .amt2{ font-size:22px; font-weight:800; letter-spacing:-.045em }
.pdet .hd5 .amt2 small{ font-size:10px; font-weight:650; color:var(--mute) }
.pdet .inc{ margin-top:14px }
.pdet .inc .r4{ display:flex; align-items:center; gap:11px; padding:9px 0; opacity:0;
  transform:translateX(-8px) }
.pdet .inc .r4.in{ animation:ftin calc(.42s*var(--d)) cubic-bezier(.2,.9,.3,1) forwards }
@keyframes ftin{ to{ opacity:1; transform:none } }
.pdet .inc .r4+.r4{ border-top:1px solid var(--line) }
.pdet .inc .ic7{ width:30px; height:30px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.pdet .inc .tx6{ flex:1; font-size:12px; font-weight:650; color:var(--ink2) }
.pdet .inc .qt2{ font-family:var(--n); font-size:11px; font-weight:700; color:var(--navy) }

.sav{ margin-top:15px; padding:14px; border-radius:18px; background:var(--wash) }
.sav .lb3{ display:flex; align-items:baseline; gap:8px; font-size:10.5px; color:var(--mute) }
.sav .lb3 b{ flex:1; font-weight:750; color:var(--ink) }
.sav .brs{ margin-top:11px }
.sav .br2{ display:flex; align-items:center; gap:9px; padding:4px 0 }
.sav .br2 .k3{ font-family:var(--n); font-size:8px; color:var(--mute); width:62px; flex:none }
.sav .br2 .t2{ flex:1; height:8px; border-radius:5px; background:rgba(8,21,44,.08); overflow:hidden }
.sav .br2 .t2 i{ display:block; height:100%; width:0; border-radius:5px;
  transition:width 1s cubic-bezier(.2,.9,.3,1) }
.sav .br2 .v4{ font-family:var(--n); font-size:9.5px; font-weight:700; width:52px; text-align:right }
.sav .out{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px;
  border-top:1px solid rgba(8,21,44,.09) }
.sav .out .ic8{ width:26px; height:26px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.sav .out b{ flex:1; font-size:12px; font-weight:800; letter-spacing:-.02em }
.sav .out b em{ font-style:normal; color:var(--gold3) }

.pdet .go5{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:50px;
  margin-top:15px; border-radius:16px; font-size:13.5px; font-weight:800; color:#fff;
  background:linear-gradient(150deg,var(--navy),#0a3272); box-shadow:0 16px 28px -14px rgba(0,18,51,.85) }
.pdet .fine{ display:block; text-align:center; font-size:10px; color:var(--faint); margin-top:11px }

/* ---------- faq ---------- */
.faq{ border-radius:24px; background:var(--paper); border:1px solid var(--line);
  box-shadow:0 14px 30px -20px rgba(6,28,72,.45); overflow:hidden }
.faq .it+.it{ border-top:1px solid var(--line) }
.faq .it.open{ background:linear-gradient(180deg,var(--wash),transparent) }
.faq .q{ display:flex; align-items:center; gap:12px; width:100%; padding:14px; text-align:left }
.faq .q .ico2{ width:34px; height:34px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy); transition:.3s }
.faq .it.open .q .ico2{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.faq .q .qt3{ flex:1; min-width:0; font-size:12.5px; font-weight:750; line-height:1.35;
  letter-spacing:-.02em }
.faq .q .pm{ width:26px; height:26px; flex:none; border-radius:50%; background:var(--wash);
  color:var(--navy); display:flex; align-items:center; justify-content:center;
  transition:transform .32s cubic-bezier(.2,.9,.3,1), background .3s }
.faq .it.open .q .pm{ transform:rotate(135deg); background:var(--navy); color:#fff }
.faq .a{ max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.2,.9,.3,1) }
.faq .it.open .a{ max-height:260px }
.faq .a p{ padding:0 14px 15px 60px; font-size:11.5px; line-height:1.6; color:var(--mute) }
.faq .a .lnk2{ display:inline-flex; align-items:center; gap:6px; margin:0 0 15px 60px; padding:8px 12px;
  border-radius:99px; font-size:11px; font-weight:750; background:var(--wash); color:var(--navy) }
.faq .help{ display:flex; align-items:center; gap:11px; padding:14px; background:var(--navy); color:#fff }
.faq .help .ic10{ width:32px; height:32px; flex:none; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.13); color:var(--gold) }
.faq .help .tx9{ flex:1 }
.faq .help .tx9 b{ display:block; font-size:12.5px; font-weight:750 }
.faq .help .tx9 span{ display:block; font-size:10.5px; color:#a9c0e8; margin-top:2px }
.faq .help .go7{ padding:8px 13px; border-radius:99px; font-size:11px; font-weight:800; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }

/* ---------- client story stack ---------- */
.tstk{ position:relative; padding-bottom:6px }
.tstk .pk{ position:absolute; left:14px; right:14px; top:10px; height:60px; border-radius:26px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2); z-index:1 }
.tstk .pk.p2{ left:26px; right:26px; top:4px; opacity:.6 }
.tst{ position:relative; z-index:2; padding:20px 18px 18px; border-radius:28px; background:var(--paper);
  border:1px solid var(--line); box-shadow:0 20px 40px -22px rgba(6,28,72,.5), 0 2px 6px -3px rgba(6,28,72,.16) }
.tst .acc{ position:absolute; left:18px; right:18px; top:0; height:4px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#f9cb1c,#e2a406) }
.tst .qm{ position:absolute; right:18px; top:14px; font-size:52px; font-weight:800; color:var(--gold);
  opacity:.22; line-height:1 }
.tst .st{ display:flex; gap:3px; color:#f0b71a }
.tst p{ font-size:14.5px; line-height:1.6; font-weight:600; letter-spacing:-.015em; margin-top:12px }
.tst .chips4{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px }
.tst .chips4 span{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px;
  font-size:9.5px; font-weight:750; background:var(--wash); color:var(--ink2) }
.tst .chips4 .vf3{ background:rgba(13,155,116,.12); color:#0d9b74 }
.tst .by{ display:flex; align-items:center; gap:11px; margin-top:15px; padding-top:14px;
  border-top:1px solid var(--line) }
.tst .by .av{ position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
  box-shadow:0 0 0 2px var(--wash) }
.tst .by b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.025em }
.tst .by span{ display:block; font-size:11px; color:var(--mute); margin-top:3px }
.tst .by .tag{ margin-left:auto; padding:7px 11px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:var(--navy); color:#fff }
.tdots{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:14px }
.tdots i{ width:7px; height:7px; border-radius:99px; background:var(--line2); transition:.35s }
.tdots i.on{ width:26px; background:var(--navy) }

/* misc *//* misc */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.gal .g{ position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden }
.gal .g .pt{ position:absolute; inset:0 }
.marq{ overflow:hidden; white-space:nowrap; padding:12px 0; background:var(--navy); color:#fff }
.marq .tk{ display:inline-flex; gap:26px; animation:mar calc(24s*var(--d)) linear infinite }
@keyframes mar{ to{ transform:translateX(-50%) } }
.marq span{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700 }
.marq svg{ color:var(--gold) }
.refr{ position:relative; overflow:hidden; border-radius:30px; padding:22px 20px; background:var(--gold);
  color:var(--navy) }
.refr .rr{ position:absolute; right:-50px; bottom:-64px; width:180px; height:180px; border-radius:50%;
  background:rgba(0,18,51,.09) }
.refr .kk{ font-family:var(--n); font-size:8.5px; letter-spacing:.16em; opacity:.66 }
.refr h3{ font-size:26px; font-weight:800; letter-spacing:-.045em; margin-top:8px }
.refr p{ font-size:11.5px; margin-top:7px; opacity:.75; line-height:1.45 }
.refr .cd{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:11px 15px;
  border-radius:13px; background:var(--navy); color:#fff; font-family:var(--n); font-size:12px; letter-spacing:.1em }
.foot{ position:relative; margin-top:38px; padding:34px 20px calc(var(--sab) + 128px);
  text-align:center; overflow:hidden }
.foot::before{ content:''; position:absolute; left:20%; right:20%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent) }
.foot .aur3{ position:absolute; left:50%; top:-40px; width:220px; height:220px; margin-left:-110px;
  border-radius:50%; background:radial-gradient(circle,rgba(243,197,24,.16),transparent 66%);
  pointer-events:none }
.foot .mkx{ position:relative; z-index:2; width:52px; height:52px; margin:0 auto; border-radius:17px;
  overflow:hidden; box-shadow:0 0 0 1px rgba(8,21,44,.08), 0 14px 28px -14px rgba(6,28,72,.55) }
.foot .mkx img{ width:100%; height:100%; display:block }
.foot .wmf{ position:relative; z-index:2; margin-top:14px; font-size:17px; font-weight:800;
  letter-spacing:.24em; color:var(--navy) }
.foot .tagf{ position:relative; z-index:2; margin-top:9px; font-family:var(--n); font-size:8px;
  letter-spacing:.18em; color:var(--faint) }
.foot .invite{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px;
  margin-top:20px; padding:11px 18px; border-radius:99px; font-size:12px; font-weight:800;
  color:var(--navy); background:var(--paper); border:1.5px solid var(--line2);
  box-shadow:0 8px 18px -12px rgba(6,28,72,.4) }
.foot .invite svg{ color:var(--gold3) }
.foot .lnks{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 0; margin-top:24px }
.foot .lnks a{ position:relative; padding:0 11px; font-size:11px; font-weight:600; color:var(--mute);
  text-decoration:none }
.foot .lnks a+a::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px;
  background:var(--line2) }
.foot .legal{ position:relative; z-index:2; margin-top:22px; font-size:9.5px; color:var(--faint);
  line-height:1.9 }
.foot .legal b{ display:block; font-weight:700; color:var(--mute); letter-spacing:.02em }
.foot .legal .ver3{ font-family:var(--n); font-size:8px; letter-spacing:.12em; margin-top:8px;
  color:#b3bfd4 }

/* tab bar — floating capsule */
.tb{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--sab) + 14px); z-index:95;
  transition:transform .34s cubic-bezier(.2,.9,.25,1), opacity .26s;
  display:flex; align-items:center; gap:3px; padding:6px; border-radius:99px; background:var(--navy);
  box-shadow:0 18px 34px -14px rgba(0,18,51,.8), 0 0 0 4px rgba(255,255,255,.55) }
.tb button{ position:relative; width:52px; height:52px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; color:#8ea6d4; font-size:0; transition:.26s }
.tb button.on{ background:#fff; color:var(--navy) }
.tb button .lb{ position:absolute; bottom:-19px; font-size:8.5px; font-weight:750; color:var(--navy);
  opacity:0; transition:.26s; white-space:nowrap }
.tb button.on .lb{ opacity:1 }
.tb button .nd{ position:absolute; top:9px; right:11px; width:7px; height:7px; border-radius:50%;
  background:var(--gold) }

#xpToast.tt{ position:fixed; left:50%; bottom:100px; transform:translate(-50%,14px); padding:11px 17px;
  border-radius:12px; background:var(--navy); color:#fff; font-size:12px; font-weight:700; opacity:0;
  pointer-events:none; transition:.25s; z-index:200 }
#xpToast.tt.on{ opacity:1; transform:translate(-50%,0) }
body.desk #stage{ background:radial-gradient(900px 600px at 50% -10%,#eef2fb 0,transparent 60%),#dfe6f4 }
body.desk .device{ border-radius:52px; padding:11px; box-sizing:border-box;
  background:linear-gradient(160deg,#2b3141,#0a0d16 40%,#20242f);
  box-shadow:0 40px 90px -30px rgba(20,30,60,.8),0 0 0 1px rgba(255,255,255,.1) }
body.desk .app{ border-radius:42px }

/* ---------- secure payments ---------- */
.wal{ position:relative; overflow:hidden; border-radius:30px; padding:20px; color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy3) 62%,#3a2c05); box-shadow:var(--sh) }
.wal .gl{ position:absolute; right:-54px; top:-60px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.4),transparent 66%) }
.wal .k{ font-family:var(--n); font-size:8.5px; letter-spacing:.16em; color:var(--gold) }
.wal .v{ font-size:36px; font-weight:800; letter-spacing:-.05em; margin-top:6px }
.wal .k{ position:relative; z-index:2 }
.wal .amts{ display:flex; gap:8px; margin-top:14px; position:relative; z-index:2 }
.wal .amts span{ flex:1; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; font-size:12.5px; font-weight:800; background:rgba(255,255,255,.14); color:#fff }
.wal .use{ margin-top:15px; padding-top:8px; border-top:1px solid rgba(255,255,255,.16); position:relative; z-index:2 }
.wal .use .r{ display:flex; align-items:center; gap:11px; padding:9px 0 }
.wal .use .r .ic{ width:30px; height:30px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.13); color:var(--gold) }
.wal .use .r .t{ flex:1; font-size:10.5px; line-height:1.4; color:#a9bfe6 }
.wal .use .r .t b{ display:block; font-size:12.5px; font-weight:750; color:#fff; margin-bottom:2px }
.wal .use .r .p{ flex:none; font-family:var(--n); font-size:7.5px; letter-spacing:.1em; color:var(--gold) }

/* ---------- dual-cta hub row ---------- */
.hrow{ position:relative; padding:14px 14px 16px; border-radius:26px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); overflow:hidden }
.hrow+.hrow{ margin-top:14px }
.hrow .hd3{ display:flex; gap:14px; align-items:center }
.hrow .im{ position:relative; width:94px; height:94px; flex:none; border-radius:20px; overflow:hidden }
.hrow .im .pt{ position:absolute; inset:0 }
.hrow .im .sc7{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(0,18,51,.82)) }
.hrow .im .pz2{ position:absolute; left:7px; bottom:6px; display:inline-flex; align-items:baseline; gap:2px; color:#fff }
.hrow .im .pz2 b{ font-size:15px; font-weight:800; letter-spacing:-.04em }
.hrow .im .pz2 span{ font-size:8px; font-weight:700; color:#c3d6f5 }
.hrow .tx{ flex:1; min-width:0 }
.hrow .tx b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.035em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.hrow .chips3{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.hrow .chips3 span{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px;
  font-size:9.5px; font-weight:750; background:var(--wash); color:var(--ink2) }
.hrow .chips3 .gd{ color:#2b1d00; background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e9b40b) }
.hrow .fac2{ display:block; font-size:10.5px; color:var(--mute); margin-top:10px; line-height:1.4 }
.hrow .btns{ display:table; width:calc(100% + 20px); table-layout:auto; border-collapse:separate;
  border-spacing:10px 0; margin:16px -10px 2px }
.hrow .btns .cl{ display:table-cell; vertical-align:middle; padding:0 }
.hrow .btns .cl.ic{ width:48px }
.hrow .btns button{ display:block; width:100%; height:46px; border-radius:14px; text-align:center;
  font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.015em; line-height:46px; padding:0 }
.hrow .btns .p{ background:linear-gradient(150deg,var(--navy),#0a3272); color:#fff;
  box-shadow:0 12px 20px -12px rgba(0,18,51,.85) }
.hrow .btns .p svg{ display:inline-block; vertical-align:-3px; margin-right:7px }
.hrow .btns .ib3{ background:var(--wash); color:var(--navy); border:1.5px solid rgba(8,21,44,.09) }
.hrow .btns .ib3 svg{ display:inline-block; vertical-align:-4px }

/* ---------- weekly progress ---------- */
.prog2{ padding:16px; border-radius:26px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.prog2 .tp2{ display:flex; align-items:center; gap:10px }
.prog2 .tp2 .wk2{ flex:1 }
.prog2 .tp2 .wk2 b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.03em }
.prog2 .tp2 .wk2 span{ display:block; font-family:var(--n); font-size:8.5px; color:var(--faint); margin-top:4px }
.prog2 .flame{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:99px;
  font-size:11.5px; font-weight:800; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.prog2 .goal2{ margin-top:15px }
.prog2 .goal2 .lb4{ display:flex; align-items:baseline; gap:8px; font-size:11.5px; color:var(--mute) }
.prog2 .goal2 .lb4 b{ flex:1; font-size:12.5px; font-weight:750; color:var(--ink) }
.prog2 .goal2 .trk{ height:8px; border-radius:5px; background:var(--wash2); margin-top:9px; overflow:hidden }
.prog2 .goal2 .trk i{ display:block; height:100%; width:0; border-radius:5px;
  background:linear-gradient(90deg,var(--navy),#0e4bb0); transition:width 1.1s cubic-bezier(.2,.9,.3,1) }
.prog2 .chart{ display:flex; align-items:flex-end; gap:6px; height:126px; margin-top:18px }
.prog2 .col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100% }
.prog2 .col .vv3{ font-family:var(--n); font-size:8.5px; color:var(--mute); margin-bottom:6px; opacity:0;
  transition:opacity .4s .5s }
.prog2 .col.on .vv3{ opacity:1; color:var(--navy); font-weight:700 }
.prog2 .col .bar3{ width:100%; flex:1; display:flex; align-items:flex-end }
.prog2 .col .bar3 i{ display:block; width:100%; height:0; border-radius:9px; background:var(--wash2);
  transition:height .8s cubic-bezier(.2,.9,.3,1) }
.prog2 .col.f1 .bar3 i{ background:linear-gradient(180deg,#0e4bb0,var(--navy)) }
.prog2 .col.f2 .bar3 i{ background:linear-gradient(180deg,#ffe27a,#f9cb1c 55%,#e2a406) }
.prog2 .col .dy2{ font-size:10.5px; font-weight:700; color:var(--faint); margin-top:9px }
.prog2 .col.tdy .dy2{ color:var(--navy) }
.prog2 .col.tdy .dy2::after{ content:''; display:block; width:4px; height:4px; border-radius:50%;
  background:var(--gold); margin:4px auto 0 }
.prog2 .col.sel .bar3 i{ box-shadow:0 0 0 3px rgba(243,197,24,.35) }
.prog2 .det2{ display:flex; align-items:center; gap:11px; margin-top:14px; padding:12px 13px;
  border-radius:16px; background:var(--wash) }
.prog2 .det2 .ic9{ width:32px; height:32px; flex:none; border-radius:11px; display:flex;
  align-items:center; justify-content:center; background:#fff; color:var(--navy); box-shadow:var(--sh2) }
.prog2 .det2 .tx7{ flex:1; min-width:0 }
.prog2 .det2 .tx7 b{ display:block; font-size:12.5px; font-weight:750 }
.prog2 .det2 .tx7 span{ display:block; font-size:10.5px; color:var(--mute); margin-top:3px }
.prog2 .det2 .mn{ font-family:var(--n); font-size:13px; font-weight:700; color:var(--navy) }
.prog2 .mets2{ display:flex; margin-top:14px; padding-top:14px; border-top:1px solid var(--line) }
.prog2 .mets2 div{ flex:1; text-align:center; position:relative }
.prog2 .mets2 div+div::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:var(--line) }
.prog2 .mets2 .n4{ font-size:17px; font-weight:800; letter-spacing:-.04em }
.prog2 .mets2 .n4 small{ font-size:9.5px; font-weight:650; color:var(--mute) }
.prog2 .mets2 .l5{ font-family:var(--n); font-size:7.5px; letter-spacing:.08em; color:var(--faint); margin-top:5px }
.prog2 .mets2 .dl{ display:block; font-size:9.5px; font-weight:750; color:#0d9b74; margin-top:4px }
.prog2 .go6{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px;
  margin-top:14px; border-radius:15px; font-size:12.5px; font-weight:800; color:#fff;
  background:linear-gradient(150deg,var(--navy),#0a3272) }

/* a full-screen pane owns the bottom of the screen */
body.pane-open .tb,body.xp-pane .tb{ opacity:0; pointer-events:none;
  transform:translate(-50%, calc(100% + var(--sab) + 24px)) }

/* ==========================================================
   SEARCH OVERLAY
   ========================================================== */
.srch{ position:absolute; inset:0; z-index:80; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.9,.25,1), opacity .3s }
.srch.open{ transform:none; opacity:1; pointer-events:auto }

.srch .top3{ flex:none; padding:calc(var(--sat) + 12px) 16px 14px; background:var(--navy); color:#fff;
  border-radius:0 0 24px 24px }
.srch .bar2{ display:flex; align-items:center; gap:10px }
.srch .bk2{ width:38px; height:38px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.12) }
.srch .fld{ flex:1; display:flex; align-items:center; gap:9px; height:44px; padding:0 8px 0 14px;
  border-radius:14px; background:#fff }
.srch .fld input{ flex:1; min-width:0; border:0; outline:0; background:none; font-size:14px;
  font-weight:600; color:var(--ink) }
.srch .fld input::placeholder{ color:var(--faint); font-weight:500 }
.srch .fld .clr{ width:22px; height:22px; border-radius:50%; background:var(--wash2); color:var(--mute);
  display:none; align-items:center; justify-content:center; flex:none }
.srch .fld .clr.on{ display:flex }
.srch .fld .mic2{ width:32px; height:32px; border-radius:11px; flex:none; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(150deg,#ffe27a,#f9cb1c 46%,#e2a406); color:#2b1d00 }
.srch .segs{ display:flex; gap:7px; margin-top:13px; overflow-x:auto }
.srch .segs::-webkit-scrollbar{ display:none }
.srch .segs button{ flex:none; padding:8px 14px; border-radius:99px; font-size:11.5px; font-weight:750;
  color:#9fb6de; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14) }
.srch .segs button.on{ background:#fff; color:var(--navy); border-color:#fff }

.srch .body2{ flex:1; min-height:0; overflow-y:auto; padding:18px 16px 20px }
.srch .body2::-webkit-scrollbar{ display:none }
.srch .blk2{ margin-bottom:22px }
.srch .lb2{ display:flex; align-items:center; gap:8px; margin-bottom:11px }
.srch .lb2 b{ flex:1; font-size:13px; font-weight:800; letter-spacing:-.025em }
.srch .lb2 button{ font-size:11px; font-weight:750; color:var(--blue) }
.srch .lb2 .vv2{ font-family:var(--n); font-size:10px; color:var(--mute) }

/* suggestions */
.sug{ border-radius:20px; background:var(--paper); border:1px solid var(--line); overflow:hidden }
.sug button{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; text-align:left }
.sug button+button{ border-top:1px solid var(--line) }
.sug .ic4{ width:34px; height:34px; flex:none; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.sug .ic4.g2{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.sug .tx3{ flex:1; min-width:0 }
.sug .tx3 b{ display:block; font-size:13px; font-weight:700 }
.sug .tx3 b em{ font-style:normal; color:var(--blue) }
.sug .tx3 span{ display:block; font-size:10.5px; color:var(--mute); margin-top:3px }
.sug .rt2{ font-size:12px; font-weight:800; color:var(--navy); flex:none }
.sug .x2{ color:var(--faint); flex:none }

/* chips */
.chp{ display:flex; flex-wrap:wrap; gap:8px }
.chp button{ display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:99px;
  font-size:11.5px; font-weight:700; color:var(--ink2); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); transition:.2s }
.chp button.on{ background:var(--navy); color:#fff; border-color:var(--navy) }
.chp button.on svg{ color:var(--gold) }

/* category grid */
.cgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
.cgrid button{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 4px;
  border-radius:18px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2);
  transition:.2s }
.cgrid button.on{ background:var(--navy); border-color:var(--navy) }
.cgrid .ic5{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.cgrid button.on .ic5{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.cgrid b{ font-size:9.5px; font-weight:750; color:var(--ink2) }
.cgrid button.on b{ color:#fff }

/* sliders */
.sld{ padding:15px; border-radius:20px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.sld+.sld{ margin-top:11px }
.sld .hd4{ display:flex; align-items:baseline; gap:8px }
.sld .hd4 b{ flex:1; font-size:12.5px; font-weight:750 }
.sld .hd4 span{ font-family:var(--n); font-size:11px; color:var(--navy); font-weight:700 }
.sld input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; margin-top:14px;
  border-radius:5px; background:var(--wash2); outline:0 }
.sld input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--navy); border:3px solid #fff;
  box-shadow:0 3px 8px -2px rgba(6,28,72,.55); cursor:pointer }
.sld input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--navy);
  border:3px solid #fff; box-shadow:0 3px 8px -2px rgba(6,28,72,.55); cursor:pointer }
.sld .ends{ display:flex; justify-content:space-between; margin-top:9px; font-family:var(--n);
  font-size:8.5px; color:var(--faint) }

/* stars filter */
.strf{ display:flex; gap:7px }
.strf button{ flex:1; padding:11px 4px; border-radius:15px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); display:flex; align-items:center;
  justify-content:center; gap:4px; font-size:11.5px; font-weight:800 }
.strf button svg{ color:var(--gold) }
.strf button.on{ background:var(--navy); color:#fff; border-color:var(--navy) }

/* toggles */
.tgr{ border-radius:20px; background:var(--paper); border:1px solid var(--line); overflow:hidden }
.tgr .r3{ display:flex; align-items:center; gap:12px; padding:13px 14px; width:100% }
.tgr .r3+.r3{ border-top:1px solid var(--line) }
.tgr .r3 .ic6{ width:32px; height:32px; flex:none; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.tgr .r3 .tx4{ flex:1; text-align:left }
.tgr .r3 .tx4 b{ display:block; font-size:12.5px; font-weight:700 }
.tgr .r3 .tx4 span{ display:block; font-size:10.5px; color:var(--mute); margin-top:2px }
.sw2{ width:44px; height:26px; border-radius:99px; background:var(--wash2); position:relative; flex:none;
  transition:background .25s }
.sw2::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .25s }
.sw2.on{ background:var(--navy) } .sw2.on::after{ transform:translateX(18px) }

/* radio sort */
.srt{ border-radius:20px; background:var(--paper); border:1px solid var(--line); overflow:hidden }
.srt button{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; text-align:left }
.srt button+button{ border-top:1px solid var(--line) }
.srt .rdo{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid var(--line2);
  display:flex; align-items:center; justify-content:center }
.srt button.on .rdo{ border-color:var(--navy) }
.srt button.on .rdo::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--navy) }
.srt span{ flex:1; font-size:12.5px; font-weight:650 }

/* footer */
.srch .ftr{ flex:none; display:flex; align-items:center; gap:10px; padding:12px 16px calc(var(--sab) + 14px);
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(16px) }
.srch .ftr .rst{ padding:0 16px; height:48px; border-radius:15px; font-size:12.5px; font-weight:750;
  color:var(--navy); background:var(--wash); flex:none }
.srch .ftr .app{ flex:1; height:48px; border-radius:15px; font-size:13.5px; font-weight:800; color:#fff;
  background:linear-gradient(150deg,var(--navy),#0a3272); display:flex; align-items:center;
  justify-content:center; gap:8px; box-shadow:0 14px 26px -14px rgba(0,18,51,.85) }
.srch .ftr .app b{ font-family:var(--n); font-size:11px; opacity:.75 }

/* ==========================================================
   NOTIFICATIONS
   ========================================================== */
.ab .ib .nd{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:99px; background:#e2503f; border:2px solid var(--navy); color:#fff;
  font-family:var(--n); font-size:8.5px; font-weight:700; display:flex; align-items:center;
  justify-content:center; line-height:1 }
.nsheet{ position:absolute; inset:0; z-index:92; display:flex; align-items:flex-end;
  background:rgba(6,16,34,.46); opacity:0; pointer-events:none; transition:opacity .28s }
.nsheet.open{ opacity:1; pointer-events:auto }
.nsheet .pn3{ width:100%; max-height:82%; display:flex; flex-direction:column;
  border-radius:28px 28px 0 0; background:var(--paper); padding:12px 0 calc(var(--sab) + 12px);
  transform:translateY(100%); transition:transform .4s cubic-bezier(.2,.9,.25,1) }
.nsheet.open .pn3{ transform:none }
.nsheet .gb3{ width:38px; height:4px; border-radius:4px; background:var(--line2); margin:0 auto 14px }
.nsheet .nhd{ display:flex; align-items:center; gap:10px; padding:0 18px }
.nsheet .nhd b{ flex:1; font-size:17px; font-weight:800; letter-spacing:-.035em }
.nsheet .nhd button{ font-size:11.5px; font-weight:750; color:var(--blue) }
.nsheet .nsegs{ display:flex; gap:7px; padding:14px 18px 4px; overflow-x:auto }
.nsheet .nsegs::-webkit-scrollbar{ display:none }
.nsheet .nsegs button{ flex:none; padding:8px 14px; border-radius:99px; font-size:11.5px; font-weight:750;
  color:var(--ink2); background:var(--wash); border:1px solid var(--line) }
.nsheet .nsegs button.on{ background:var(--navy); color:#fff; border-color:var(--navy) }
.nlist{ flex:1; min-height:0; overflow-y:auto; padding:8px 18px 6px }
.nlist::-webkit-scrollbar{ display:none }
.nrow{ position:relative; display:flex; align-items:flex-start; gap:12px; width:100%; padding:13px 0;
  text-align:left }
.nrow+.nrow{ border-top:1px solid var(--line) }
.nrow .nic{ width:38px; height:38px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center }
.nrow .nic.gold{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.nrow .nic.navy{ background:var(--navy); color:var(--gold) }
.nrow .nic.plain{ background:var(--wash); color:var(--navy) }
.nrow .ntx{ flex:1; min-width:0 }
.nrow .ntx b{ display:block; font-size:12.5px; font-weight:750; letter-spacing:-.02em; line-height:1.3 }
.nrow .ntx > span{ display:block; font-size:11px; color:var(--mute); margin-top:4px; line-height:1.4 }
.nrow .ntx .nwh{ font-family:var(--n); font-size:8px; color:var(--faint); margin-top:6px }
.nrow .ndot{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; margin-top:6px }
.nrow.rd .ntx b{ font-weight:650; color:var(--ink2) }
.nrow.rd .ndot{ display:none }

/* ==========================================================
   REHAB LIBRARY — entry card + full-screen page
   ========================================================== */
.exentry{ position:relative; display:flex; width:100%; overflow:hidden; border-radius:28px;
  padding:20px; text-align:left; color:#fff;
  background:linear-gradient(150deg,#06214e,#0a3272 54%,#04173a);
  box-shadow:0 22px 42px -24px rgba(0,18,51,.85) }
.exentry .glow2{ position:absolute; right:-50px; top:-60px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.3),transparent 66%) }
.exentry .lft{ position:relative; z-index:2; flex:1; min-width:0 }
.exentry .kk2{ font-family:var(--n); font-size:8.5px; letter-spacing:.16em; color:var(--gold) }
.exentry b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.04em; line-height:1.16;
  margin-top:9px; max-width:15ch }
.exentry .sub3{ display:block; font-size:11px; color:#a9c0e8; margin-top:8px }
.exentry .cta3{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:10px 15px;
  border-radius:13px; font-size:12px; font-weight:800; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.exentry .rgt{ position:relative; z-index:2; width:92px; flex:none; display:flex; align-items:center;
  justify-content:center }
.exentry .orb2,.exentry .orb3{ position:absolute; border-radius:50%; border:1px solid rgba(243,197,24,.34) }
.exentry .orb2{ width:88px; height:88px; animation:spin calc(24s*var(--d)) linear infinite }
.exentry .orb3{ width:62px; height:62px; border-style:dashed;
  animation:spin calc(16s*var(--d)) linear infinite reverse }
.exentry .ic11{ position:relative; color:var(--gold) }

/* full-screen page */
.expane{ position:absolute; inset:0; z-index:88; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#04122e,#071c42 46%,#03102a);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.expane.open{ transform:none; opacity:1; pointer-events:auto }

/* loader */
.exload{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0; background:linear-gradient(180deg,#04122e,#071c42 50%,#03102a);
  transition:opacity .45s }
.exload.gone{ opacity:0; pointer-events:none }
.exload .lmark{ width:78px; height:78px; border-radius:24px; overflow:hidden; position:relative;
  box-shadow:0 0 0 1px rgba(243,197,24,.35), 0 18px 36px -16px rgba(0,0,0,.9);
  animation:lpulse calc(1.8s*var(--d)) ease-in-out infinite }
.exload .lmark img{ width:100%; height:100%; display:block }
.exload .lmark::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(76deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:translateX(-140%); animation:lsheen calc(2.2s*var(--d)) ease-in-out infinite }
@keyframes lpulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
@keyframes lsheen{ 0%,55%{ transform:translateX(-140%) } 85%,100%{ transform:translateX(140%) } }
.exload .lname{ margin-top:20px; font-size:15px; font-weight:800; letter-spacing:.26em; color:#fff }
.exload .lbar{ width:126px; height:3px; border-radius:3px; margin-top:18px; overflow:hidden;
  background:rgba(255,255,255,.14) }
.exload .lbar i{ display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#ffe27a,#e2a406) }
.exload.run .lbar i{ animation:lfill calc(1.5s*var(--d)) cubic-bezier(.3,.8,.4,1) forwards }
@keyframes lfill{ to{ width:100% } }
.exload .lmsg{ margin-top:14px; font-family:var(--n); font-size:8.5px; letter-spacing:.14em;
  color:#7e99c8 }

/* page header */
.extop{ flex:none; display:flex; align-items:center; gap:12px;
  padding:calc(var(--sat) + 14px) 16px 14px; border-bottom:1px solid rgba(255,255,255,.1) }
.extop .bk3{ width:38px; height:38px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.12); color:#fff }
.extop .ttl{ flex:1; min-width:0 }
.extop .ttl b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.035em; color:#fff }
.extop .ttl span{ display:block; font-family:var(--n); font-size:8.5px; color:#8ea6d4; margin-top:4px }
.extop .cnt3{ padding:7px 12px; border-radius:99px; font-family:var(--n); font-size:11px; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.exbody{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; touch-action:pan-y; padding:0 0 calc(var(--sab) + 20px) }
.exbody::-webkit-scrollbar{ display:none }
.expane .sim{ border-radius:0; box-shadow:none; background:transparent }
.expane .stage{ height:330px }
.expane .tut{ background:rgba(0,0,0,.26) }

/* ==========================================================
   EXERCISE SIMULATOR  (navy + gold, theme-consistent)
   ========================================================== */
.sim{ border-radius:28px; overflow:hidden;
  background:linear-gradient(165deg,#06214e,#0a3272 52%,#04173a) }

/* part chips */
.sim .parts{ display:flex; gap:7px; overflow-x:auto; padding:14px 14px 0 }
.sim .parts::-webkit-scrollbar{ display:none }
.sim .parts button{ flex:none; padding:9px 14px; border-radius:12px; font-size:11.5px; font-weight:750;
  background:rgba(255,255,255,.1); color:#c9dcfb; border:1px solid rgba(255,255,255,.14); transition:.2s }
.sim .parts button.on{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00;
  border-color:transparent }

/* exercise pills */
.sim .exlist{ display:flex; gap:7px; overflow-x:auto; padding:11px 14px 0 }
.sim .exlist::-webkit-scrollbar{ display:none }
.sim .exlist button{ flex:none; display:flex; align-items:center; gap:7px; padding:8px 12px 8px 8px;
  border-radius:99px; font-size:11px; font-weight:700; background:rgba(255,255,255,.07); color:#a8c4f0;
  border:1px solid rgba(255,255,255,.1); transition:.2s }
.sim .exlist button .nn{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.12); font-family:var(--n); font-size:9px }
.sim .exlist button.on{ background:#fff; color:var(--navy); border-color:#fff }
.sim .exlist button.on .nn{ background:var(--navy); color:var(--gold) }
.sim .exlist button .rdy{ width:6px; height:6px; border-radius:50%; background:var(--gold) }

/* stage */
.sim .stage{ position:relative; height:280px; margin-top:12px; display:flex; align-items:center;
  justify-content:center; overflow:hidden }
.sim .stage .grid{ position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(140,185,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,185,255,.16) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(64% 66% at 50% 48%,#000,transparent 84%);
  mask-image:radial-gradient(64% 66% at 50% 48%,#000,transparent 84%) }
.sim .glow{ position:absolute; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.14),transparent 68%) }
.sim .rig3d{ position:absolute; inset:0; z-index:2 }
.sim .rig3d canvas{ display:block; width:100%; height:100%; touch-action:pan-y }
.sim .d3tag{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:5;
  padding:5px 10px; border-radius:99px; font-family:var(--n); font-size:7.5px; letter-spacing:.1em;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#c9dcfb;
  pointer-events:none; opacity:0; transition:opacity .4s }
.sim .d3tag.on{ opacity:1 }
.sim .rig{ position:relative; z-index:2; width:238px; height:290px }
body.has3d .sim .rig{ display:none }
.sim .rig svg{ width:100%; height:100%; overflow:visible }
.sim .floor{ position:absolute; bottom:40px; width:180px; height:14px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 72%); z-index:1 }

/* anatomical figure */
.fg{ --sp:2.6s;
  --shL1:0deg; --shL2:0deg; --shR1:0deg; --shR2:0deg;
  --elL1:0deg; --elL2:0deg; --elR1:0deg; --elR2:0deg;
  --toA:0deg; --toB:0deg;
  --thL1:0deg; --thL2:0deg; --thR1:0deg; --thR2:0deg;
  --knL1:0deg; --knL2:0deg; --knR1:0deg; --knR2:0deg;
  --dyA:0px; --dyB:0px }
.fg *{ transform-box:view-box }
.fg .skin{ fill:url(#sk); stroke:#7d5029; stroke-width:1.3; stroke-linejoin:round }
.fg .hand{ fill:url(#skD) }
.fg .kit{ fill:url(#kit); stroke:#0d2a5c; stroke-width:1.2 }
.fg .kitd{ fill:url(#kitD); stroke:#08183a; stroke-width:1.2 }
.fg .kitl,.fg .kitl2{ fill:none; stroke:rgba(255,255,255,.4); stroke-width:1.6; stroke-linecap:round }
.fg .hair{ fill:#2b2119; stroke:#1a130d; stroke-width:1 }
.fg .face{ fill:none; stroke:#7d5029; stroke-width:1.4; stroke-linecap:round }
.fg .shoe{ fill:#1c2230; stroke:#0c1018; stroke-width:1.2 }
.fg .shoel{ fill:none; stroke:#cfd9ea; stroke-width:1.8; stroke-linecap:round }
.fg .pec,.fg .delt,.fg .bicep,.fg .lat{ fill:url(#skD); stroke:#7d5029; stroke-width:1.1;
  transition:fill .35s }
.fg .abs path{ fill:url(#skD); opacity:.75; transition:fill .35s, opacity .35s }
.fg .sepl,.fg .calfl,.fg .obl,.fg .foreL2{ fill:none; stroke:rgba(110,66,28,.55); stroke-width:1.5;
  stroke-linecap:round }
.fg .knuck{ fill:none; stroke:rgba(110,66,28,.6); stroke-width:1.3; stroke-linecap:round }
.fg .hl{ fill:url(#fire) !important; stroke:#8f2314 !important; opacity:1 !important;
  filter:drop-shadow(0 0 6px rgba(242,80,58,.7)); animation:mhl calc(var(--sp)) ease-in-out infinite }
.fg .abs.hl path{ fill:url(#fire) !important; opacity:1 !important }
@keyframes mhl{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
.fg .plate{ fill:url(#iron); stroke:#0a0e14; stroke-width:1 }
.fg .barsm,.fg .barlong{ fill:url(#steel); stroke:#6b7d99; stroke-width:.9 }
.fg .collar{ fill:#2b3243 }
.fg .kbh{ fill:none; stroke:#232a38; stroke-width:5.5; stroke-linecap:round }
.fg .kbb{ fill:url(#iron); stroke:#0a0e14; stroke-width:1 }
.fg .bench{ fill:#2b3243; stroke:#141a24; stroke-width:1.2 }
.fg .benchleg{ fill:none; stroke:#8fa8cc; stroke-width:6; stroke-linecap:round }
.fg .frame{ fill:#2b3243 } .fg .pulleyc{ fill:url(#steel) }
.fg .cableline{ fill:none; stroke:#9db4d6; stroke-width:2.6 }
.fg .mat{ fill:#2b3243 }
.fg .eq{ opacity:0; transition:opacity .3s }
.fg .eq.on{ opacity:1 }
.fg.paused *{ animation-play-state:paused !important }

/* joint rig */
.fg .shL{ transform-origin:88px 94px } .fg .shR{ transform-origin:132px 94px }
.fg .elL{ transform-origin:74px 134px } .fg .elR{ transform-origin:146px 134px }
.fg .thL{ transform-origin:103px 170px } .fg .thR{ transform-origin:117px 170px }
.fg .kneeL{ transform-origin:97px 226px } .fg .kneeR{ transform-origin:123px 226px }
.fg .torso{ transform-origin:110px 172px }
.fg .whole{ transform-origin:110px 292px }
@keyframes kShL{ 0%,100%{transform:rotate(var(--shL1))} 50%{transform:rotate(var(--shL2))} }
@keyframes kShR{ 0%,100%{transform:rotate(var(--shR1))} 50%{transform:rotate(var(--shR2))} }
@keyframes kElL{ 0%,100%{transform:rotate(var(--elL1))} 50%{transform:rotate(var(--elL2))} }
@keyframes kElR{ 0%,100%{transform:rotate(var(--elR1))} 50%{transform:rotate(var(--elR2))} }
@keyframes kTo{ 0%,100%{transform:rotate(var(--toA))} 50%{transform:rotate(var(--toB))} }
@keyframes kThL{ 0%,100%{transform:rotate(var(--thL1))} 50%{transform:rotate(var(--thL2))} }
@keyframes kThR{ 0%,100%{transform:rotate(var(--thR1))} 50%{transform:rotate(var(--thR2))} }
@keyframes kKnL{ 0%,100%{transform:rotate(var(--knL1))} 50%{transform:rotate(var(--knL2))} }
@keyframes kKnR{ 0%,100%{transform:rotate(var(--knR1))} 50%{transform:rotate(var(--knR2))} }
@keyframes kDy{ 0%,100%{transform:translateY(var(--dyA))} 50%{transform:translateY(var(--dyB))} }
.fg .shL{ animation:kShL var(--sp) ease-in-out infinite }
.fg .shR{ animation:kShR var(--sp) ease-in-out infinite }
.fg .elL{ animation:kElL var(--sp) ease-in-out infinite }
.fg .elR{ animation:kElR var(--sp) ease-in-out infinite }
.fg .torso{ animation:kTo var(--sp) ease-in-out infinite }
.fg .thL{ animation:kThL var(--sp) ease-in-out infinite }
.fg .thR{ animation:kThR var(--sp) ease-in-out infinite }
.fg .kneeL{ animation:kKnL var(--sp) ease-in-out infinite }
.fg .kneeR{ animation:kKnR var(--sp) ease-in-out infinite }
.fg .whole{ animation:kDy var(--sp) ease-in-out infinite }

/* per-exercise poses */
.p-fly{ --shL1:-72deg;--shL2:-18deg; --shR1:72deg;--shR2:18deg; --elL1:14deg;--elL2:10deg;
  --elR1:-14deg;--elR2:-10deg; --knL1:-6deg;--knR1:6deg }
.p-press{ --shL1:-8deg;--shL2:-62deg; --shR1:8deg;--shR2:62deg; --elL1:-96deg;--elL2:-16deg;
  --elR1:96deg;--elR2:16deg; --knL1:-5deg;--knR1:5deg }
.p-pressdb{ --shL1:-24deg;--shL2:-58deg; --shR1:24deg;--shR2:58deg; --elL1:-88deg;--elL2:-14deg;
  --elR1:88deg;--elR2:14deg; --toA:-16deg;--toB:-16deg; --thL1:-58deg;--thR1:-58deg;
  --knL1:36deg;--knR1:36deg; --dyA:6px;--dyB:6px }
.p-push{ --toA:-84deg;--toB:-84deg; --shL1:-46deg;--shL2:-22deg; --shR1:46deg;--shR2:22deg;
  --elL1:-16deg;--elL2:-72deg; --elR1:16deg;--elR2:72deg; --thL1:-78deg;--thR1:-78deg;
  --dyA:34px;--dyB:34px }
.p-row{ --toA:52deg;--toB:52deg; --shL1:-14deg;--shL2:-26deg; --shR1:14deg;--shR2:26deg;
  --elL1:-6deg;--elL2:-84deg; --elR1:6deg;--elR2:84deg; --thL1:-18deg;--thR1:-18deg;
  --knL1:14deg;--knR1:14deg }
.p-pull{ --shL1:-96deg;--shL2:-34deg; --shR1:96deg;--shR2:34deg; --elL1:-10deg;--elL2:-72deg;
  --elR1:10deg;--elR2:72deg; --thL1:-52deg;--thR1:-52deg; --knL1:48deg;--knR1:48deg;
  --dyA:10px;--dyB:10px }
.p-curl{ --shL1:-4deg;--shL2:-4deg; --shR1:4deg;--shR2:4deg; --elL1:0deg;--elL2:-128deg;
  --elR1:0deg;--elR2:128deg; --knL1:-5deg;--knR1:5deg }
.p-over{ --shL1:-152deg;--shL2:-152deg; --shR1:152deg;--shR2:152deg; --elL1:14deg;--elL2:120deg;
  --elR1:-14deg;--elR2:-120deg; --knL1:-5deg;--knR1:5deg }
.p-kick{ --toA:44deg;--toB:44deg; --shL1:-52deg;--shL2:-52deg; --shR1:52deg;--shR2:52deg;
  --elL1:-92deg;--elL2:-8deg; --elR1:92deg;--elR2:8deg; --thL1:-16deg;--thR1:-16deg;
  --knL1:12deg;--knR1:12deg }
.p-hinge{ --toA:4deg;--toB:58deg; --shL1:-2deg;--shL2:-16deg; --shR1:2deg;--shR2:16deg;
  --thL1:0deg;--thL2:-12deg; --thR1:0deg;--thR2:-12deg; --knL1:-8deg;--knL2:24deg;
  --knR1:8deg;--knR2:-24deg; --dyA:0px;--dyB:14px }
.p-hinge2{ --toA:2deg;--toB:38deg; --shL1:-2deg;--shL2:-10deg; --shR1:2deg;--shR2:10deg;
  --knL1:-6deg;--knL2:10deg; --knR1:6deg;--knR2:-10deg; --dyA:0px;--dyB:6px }
.p-squat{ --toA:8deg;--toB:22deg; --shL1:-118deg;--shL2:-118deg; --shR1:118deg;--shR2:118deg;
  --elL1:82deg;--elL2:82deg; --elR1:-82deg;--elR2:-82deg; --thL1:-4deg;--thL2:44deg;
  --thR1:4deg;--thR2:-44deg; --knL1:6deg;--knL2:-72deg; --knR1:-6deg;--knR2:72deg;
  --dyA:0px;--dyB:34px }
.p-lunge{ --toA:4deg;--toB:8deg; --shL1:-3deg;--shR1:3deg; --thL1:-4deg;--thL2:40deg;
  --thR1:4deg;--thR2:-38deg; --knL1:6deg;--knL2:-62deg; --knR1:-6deg;--knR2:76deg;
  --dyA:0px;--dyB:24px }
.p-calf{ --shL1:-4deg;--shR1:4deg; --knL1:-3deg;--knR1:3deg; --dyA:0px;--dyB:-16px }
.p-ext{ --toA:-10deg;--toB:-10deg; --shL1:-38deg;--shR1:38deg; --thL1:-62deg;--thR1:-62deg;
  --knL1:64deg;--knL2:2deg; --knR1:-64deg;--knR2:-2deg; --dyA:8px;--dyB:8px }
.p-crunch{ --toA:-64deg;--toB:-88deg; --shL1:-118deg;--shR1:118deg; --elL1:96deg;--elR1:-96deg;
  --thL1:-62deg;--thR1:-62deg; --knL1:66deg;--knR1:-66deg; --dyA:30px;--dyB:30px }
.p-twist{ --toA:-56deg;--toB:-56deg; --shL1:-72deg;--shL2:-30deg; --shR1:72deg;--shR2:30deg;
  --elL1:-52deg;--elR1:52deg; --thL1:-50deg;--thR1:-50deg; --knL1:58deg;--knR1:-58deg;
  --dyA:26px;--dyB:26px }
.p-raise{ --toA:-88deg;--toB:-88deg; --shL1:-96deg;--shR1:96deg; --thL1:0deg;--thL2:76deg;
  --thR1:0deg;--thR2:76deg; --dyA:34px;--dyB:34px }
.p-climb{ --toA:-84deg;--toB:-84deg; --shL1:-46deg;--shR1:46deg; --thL1:-72deg;--thL2:-16deg;
  --thR1:-16deg;--thR2:-72deg; --knL1:52deg;--knL2:12deg; --knR1:12deg;--knR2:52deg;
  --dyA:34px;--dyB:34px }
.p-roll{ --toA:-58deg;--toB:-82deg; --shL1:-62deg;--shL2:-96deg; --shR1:62deg;--shR2:96deg;
  --elL1:-14deg;--elL2:-4deg; --elR1:14deg;--elR2:4deg; --thL1:-70deg;--thR1:-70deg;
  --knL1:74deg;--knR1:-74deg; --dyA:28px;--dyB:34px }
.p-hold{ --toA:-84deg;--toB:-84deg; --shL1:-52deg;--shR1:52deg; --elL1:-34deg;--elR1:34deg;
  --thL1:-78deg;--thR1:-78deg; --dyA:36px;--dyB:36px; --sp:6s }

.sim .hud{ position:absolute; left:13px; top:13px; display:flex; flex-direction:column; gap:6px; z-index:4 }
.sim .hud span{ padding:5px 9px; border-radius:9px; font-family:var(--n); font-size:8px;
  background:rgba(255,255,255,.12); color:#dbe8ff; border:1px solid rgba(255,255,255,.16) }
.sim .eqtag{ position:absolute; right:13px; top:13px; z-index:4; display:inline-flex; align-items:center;
  gap:5px; padding:6px 10px; border-radius:99px; font-family:var(--n); font-size:8px;
  background:rgba(243,197,24,.16); border:1px solid rgba(243,197,24,.35); color:var(--gold) }

/* controls */
.simctl{ padding:13px 14px 15px; background:rgba(0,0,0,.2) }
.simctl .nmrow{ display:flex; align-items:center; gap:11px }
.simctl .nmrow .nm{ flex:1; min-width:0 }
.simctl .nmrow .nm b{ display:block; font-size:14.5px; font-weight:800; color:#fff; letter-spacing:-.025em }
.simctl .nmrow .nm span{ display:block; font-family:var(--n); font-size:9px; color:#a8c4f0; margin-top:4px }
.simctl .nmrow .pl2{ width:40px; height:40px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.simctl .grid2{ display:flex; gap:10px; margin-top:12px }
.simctl .card2{ flex:1; padding:12px; border-radius:18px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13) }
.simctl .card2 .k5{ font-family:var(--n); font-size:7.5px; letter-spacing:.12em; color:#8ea6d4 }
.simctl .clk2{ font-family:var(--n); font-size:24px; color:#fff; margin-top:7px; letter-spacing:-.02em }
.simctl .btns2{ display:flex; gap:7px; margin-top:10px }
.simctl .btns2 button{ flex:1; height:32px; border-radius:10px; font-size:10.5px; font-weight:800;
  background:rgba(255,255,255,.12); color:#dbe8ff; display:flex; align-items:center;
  justify-content:center; gap:5px }
.simctl .btns2 button.pri{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.simctl .repn{ display:flex; align-items:baseline; gap:4px; margin-top:7px }
.simctl .repn b{ font-family:var(--n); font-size:24px; color:var(--gold); letter-spacing:-.02em }
.simctl .repn span{ font-family:var(--n); font-size:11px; color:#8ea6d4 }
.simctl .rtrk{ height:6px; border-radius:4px; background:rgba(255,255,255,.13); margin-top:9px;
  overflow:hidden }
.simctl .rtrk i{ display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#ffe27a,#e2a406); transition:width .3s cubic-bezier(.2,.9,.3,1) }
.simctl .setrow{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 12px;
  border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1) }
.simctl .setrow .dots2{ display:flex; gap:5px; flex:1 }
.simctl .setrow .dots2 i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18);
  transition:.3s }
.simctl .setrow .dots2 i.dn{ background:var(--gold) }
.simctl .setrow b{ font-family:var(--n); font-size:9px; color:#a8c4f0 }

/* tutorial */
.tut{ padding:15px 14px 16px; background:rgba(0,0,0,.24) }
.tut .th{ display:flex; align-items:center; gap:9px }
.tut .th b{ flex:1; font-size:12.5px; font-weight:800; color:#fff; letter-spacing:-.02em }
.tut .th .lvl{ padding:5px 9px; border-radius:99px; font-family:var(--n); font-size:7.5px;
  background:rgba(255,255,255,.12); color:#c9dcfb }
.tut ol{ list-style:none; margin-top:12px }
.tut li{ display:flex; gap:11px; padding:7px 0 }
.tut li .sn{ width:22px; height:22px; flex:none; border-radius:8px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.12); color:var(--gold); font-family:var(--n);
  font-size:9.5px }
.tut li span{ flex:1; font-size:11.5px; line-height:1.5; color:#c9dcfb }
.tut .tip{ display:flex; gap:9px; margin-top:12px; padding:11px 12px; border-radius:14px;
  background:rgba(243,197,24,.12); border:1px solid rgba(243,197,24,.28) }
.tut .tip svg{ color:var(--gold); flex:none }
.tut .tip span{ flex:1; font-size:10.5px; line-height:1.5; color:#e8dcb6 }
.tut .tip b{ color:#fff; font-weight:750 }
.tut .mus2{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.tut .mus2 span{ padding:5px 9px; border-radius:99px; font-size:9px; font-weight:700;
  background:rgba(255,255,255,.09); color:#a8c4f0; border:1px solid rgba(255,255,255,.12) }
.tut .mus2 .pr6{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00;
  border-color:transparent }

/* ==========================================================
   SUB PAGES — X-HUBS · XPERTS
   ========================================================== */
.subpane{ position:absolute; inset:0; z-index:86; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.subpane.open{ transform:none; opacity:1; pointer-events:auto }
.subpane .extop{ background:var(--navy); border-bottom:0; border-radius:0 0 24px 24px }
.subpane .exbody{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  touch-action:pan-y; padding:0 0 calc(var(--sab) + 118px) }
.subpane .psearch{ flex:none }

.fchips{ flex:none; display:flex; gap:8px; overflow-x:auto; padding:14px 18px 12px }
.fchips::-webkit-scrollbar{ display:none }
.fchips button{ flex:none; padding:9px 14px; border-radius:99px; font-size:11.5px; font-weight:750;
  color:var(--ink2); background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2);
  transition:.2s }
.fchips button.on{ background:var(--navy); color:#fff; border-color:var(--navy) }

.sortr{ display:flex; align-items:center; gap:10px; padding:2px 18px 14px }
.sortr span{ flex:1; font-size:11.5px; color:var(--mute) }
.sortr span b{ color:var(--ink); font-weight:750 }
.sortr .srt2{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:99px;
  font-size:11px; font-weight:750; color:var(--navy); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.plist{ padding:0 18px }

/* ---------- search field doubles as the filter entry ---------- */
.pfld{ cursor:pointer }
.pfld input{ cursor:pointer }
.pcount{ font-family:var(--n); font-size:10px; font-weight:700; color:#2b1d00; flex:none;
  padding:0 2px }
.pcount:empty{ display:none }
.pfilt{ position:relative; width:34px; height:34px; border-radius:11px; flex:none; display:flex;
  align-items:center; justify-content:center; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.pfilt .fdot{ position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%;
  background:var(--navy); border:1.5px solid #f9cb1c; display:none }
.pfld.act .pfilt .fdot{ display:block }
.pfld.act{ border-color:var(--navy) }

/* ==========================================================
   X-HUBS — immersive dark
   ========================================================== */
.subpane.hubx{ background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9) }
.subpane.hubx.hubdark{ background:linear-gradient(180deg,#04122e,#071c42 44%,#03102a) }

/* theme switch */
.thsw{ position:relative; width:38px; height:38px; flex:none; border-radius:13px; overflow:hidden;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff }
.thsw .thi{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition:opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1) }
.thsw .moon{ opacity:0; transform:rotate(-40deg) scale(.7) }
.hubdark .thsw{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00;
  border-color:transparent }
.hubdark .thsw .sun{ opacity:0; transform:rotate(40deg) scale(.7) }
.hubdark .thsw .moon{ opacity:1; transform:none }
.hubx.hubdark .pfld{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14);
  box-shadow:none; color:#8ea6d4 }
.hubx.hubdark .pfld input{ color:#fff }
.hubx.hubdark .pfld input::placeholder{ color:#7e99c8 }
.hubx.hubdark .pfld.act{ border-color:var(--gold) }
.hubx.hubdark .pcount{ color:var(--gold) }

/* ---------- live summary bar ---------- */
.hsum{ position:relative; display:flex; align-items:center; gap:13px; margin:14px 16px 18px;
  padding:14px 15px; border-radius:22px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 14px 30px -20px rgba(6,28,72,.5), 0 1px 3px -1px rgba(6,28,72,.14) }
.hsum::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,#ffe27a,#e2a406) }
.hsi{ width:40px; height:40px; flex:none; border-radius:14px; display:flex; align-items:center;
  justify-content:center; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 8px 16px -8px rgba(233,164,8,.8) }
.hst{ flex:1; min-width:0 }
.hst b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.035em; color:var(--ink) }
.hsl{ display:flex; align-items:center; gap:7px; margin-top:5px; font-size:10.5px; color:var(--mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hsl i{ width:6px; height:6px; flex:none; border-radius:50%; background:#0d9b74;
  box-shadow:0 0 0 3px rgba(13,155,116,.16); animation:lpul calc(2.2s*var(--d)) ease-in-out infinite }
@keyframes lpul{ 0%,100%{ box-shadow:0 0 0 3px rgba(13,155,116,.16) }
                 50%{ box-shadow:0 0 0 6px rgba(13,155,116,.06) } }
.hsp{ flex:none; text-align:right; padding-left:13px; position:relative }
.hsp::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:var(--line) }
.hsp span{ display:block; font-family:var(--n); font-size:7px; letter-spacing:.12em; color:var(--faint) }
.hsp b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.05em; color:var(--navy);
  margin-top:3px; line-height:1 }
/* dark variant */
.hubdark .hsum{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.8) }
.hubdark .hst b{ color:#fff }
.hubdark .hsl{ color:#a9c0e8 }
.hubdark .hsp span{ color:#7e99c8 }
.hubdark .hsp b{ color:var(--gold) }
.hubdark .hsp::before{ background:rgba(255,255,255,.16) }

/* tile */
.hlist{ padding:0 16px }
.htile{ position:relative; display:flex; flex-direction:column; min-height:302px; border-radius:30px;
  overflow:hidden; box-shadow:0 26px 46px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .3s cubic-bezier(.2,.9,.3,1) }
.htile+.htile{ margin-top:16px }
.htile:active{ transform:scale(.985) }
.tbg{ position:absolute; inset:0; transform:scale(1.04);
  transition:transform 1.2s cubic-bezier(.2,.9,.3,1) }
.htile:active .tbg{ transform:scale(1.09) }
.tveil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(2,10,26,.52) 0,rgba(2,10,26,.1) 26%,rgba(2,10,26,.78) 58%,
    rgba(2,10,26,.96) 100%) }

/* gold foil assured */
.tfoil{ position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center;
  gap:7px; padding:6px 12px 6px 6px; border-radius:99px; color:#2b1d00; overflow:hidden;
  background:linear-gradient(120deg,#fff0b8,#f9cb1c 38%,#e2a406 62%,#ffe27a);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7) }
.tfoil::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(76deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  transform:translateX(-140%); animation:foil calc(5s*var(--d)) ease-in-out infinite }
@keyframes foil{ 0%,62%{ transform:translateX(-140%) } 88%,100%{ transform:translateX(140%) } }
.tfoil .fmk{ position:relative; z-index:2; width:20px; height:20px; border-radius:7px; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(43,29,0,.25) }
.tfoil .fmk img{ width:100%; height:100%; display:block }
.tfoil b{ position:relative; z-index:2; font-size:9px; font-weight:800; letter-spacing:.06em }

.tfav{ position:absolute; top:14px; right:14px; z-index:3; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(6,18,40,.45); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px) }
.tdist{ position:absolute; top:60px; left:14px; z-index:3; display:inline-flex; align-items:center;
  gap:5px; padding:5px 10px; border-radius:99px; font-family:var(--n); font-size:8px;
  letter-spacing:.08em; color:#dbe8ff; background:rgba(6,18,40,.42);
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px) }

/* body */
.tcap{ flex:none; height:104px }          /* keeps the body clear of the top chips */
.tbody{ position:relative; z-index:3; margin-top:auto; padding:0 18px 18px }
.thead{ display:flex; align-items:flex-end; gap:12px }
.tname{ flex:1; min-width:0; font-size:23px; font-weight:800; letter-spacing:-.045em; color:#fff;
  line-height:1.1 }
.tdisc{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 10px 22px -10px rgba(233,164,8,.95) }
.tdisc b{ font-size:14px; font-weight:800; letter-spacing:-.03em; margin-top:1px }
.tdisc i{ font-style:normal; font-family:var(--n); font-size:6px; letter-spacing:.06em; opacity:.66 }
.tmeta{ display:flex; flex-wrap:wrap; gap:7px 13px; margin-top:11px }
.tmeta span{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:#b7cbf0 }
.tmeta span svg{ color:rgba(243,197,24,.8) }
.tmeta .tlive{ color:#7fe0b4 }
.tmeta .tlive i{ width:5px; height:5px; border-radius:50%; background:#4ade9b;
  box-shadow:0 0 0 3px rgba(74,222,155,.2) }
.tpills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.tpills span{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px;
  font-size:9px; font-weight:700; color:#dbe8ff; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px) }
.tpills .tcatp{ color:#2b1d00; border-color:transparent; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 52%,#e9b40b) }
.tpills .tcatp svg{ color:#2b1d00 }

.tbar{ display:flex; align-items:center; gap:12px; margin-top:15px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16) }
.tpr{ flex:1; min-width:0 }
.tpr b{ display:block; font-size:23px; font-weight:800; letter-spacing:-.05em; color:#fff;
  line-height:1 }
.tpr span{ display:block; font-family:var(--n); font-size:7.5px; letter-spacing:.08em; color:#8ea6d4;
  margin-top:6px; white-space:nowrap }
.tacts{ display:flex; align-items:center; gap:9px; flex:none; min-width:0 }
.tib{ width:44px; height:44px; flex:none; border-radius:15px; display:flex; align-items:center;
  justify-content:center; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px) }
.tgo{ display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 16px; border-radius:15px;
  font-size:12.5px; font-weight:800; white-space:nowrap; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 12px 24px -12px rgba(233,164,8,.95) }

/* dark variants of shared bits */
.hubdark .loadm{ color:#dbe8ff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18) }
/* ---------- map card ---------- */
.mapx{ position:relative; display:block; width:calc(100% - 32px); margin:18px 16px 4px; height:230px;
  border-radius:28px; overflow:hidden; text-align:left;
  box-shadow:0 22px 42px -24px rgba(6,28,72,.6), 0 0 0 1px rgba(8,21,44,.06) }
.mbg{ position:absolute; inset:0; filter:saturate(.72) contrast(1.04) }
.mveil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(2,10,26,.42) 0,rgba(2,10,26,.2) 30%,rgba(2,10,26,.9) 78%,
    rgba(2,10,26,.97) 100%) }
/* faux markers */
.mpin{ position:absolute; z-index:2; width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(243,197,24,.2), 0 2px 6px rgba(0,0,0,.5) }
.mpin.p1{ top:38px; left:22% } .mpin.p2{ top:64px; left:58% }
.mpin.p3{ top:30px; left:78% }
.mpin.p4{ top:82px; left:38%; width:13px; height:13px; background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.55) }
.mpin.p4 i{ position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(255,255,255,.8);
  animation:mping calc(2.4s*var(--d)) ease-out infinite }
@keyframes mping{ 0%{ transform:scale(1); opacity:.85 } 100%{ transform:scale(2.4); opacity:0 } }
.mbody{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 18px 18px; color:#fff }
.mkk{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px;
  font-family:var(--n); font-size:7.5px; letter-spacing:.14em; color:var(--gold);
  background:rgba(6,18,40,.5); border:1px solid rgba(243,197,24,.35); backdrop-filter:blur(8px) }
.mbody b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.04em; margin-top:11px }
.mareas{ display:block; font-size:11px; color:#b7cbf0; margin-top:7px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.mfoot{ display:flex; align-items:center; gap:16px; margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.16) }
.mstat{ flex:none } .mstat b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.035em }
.mstat i{ display:block; font-style:normal; font-family:var(--n); font-size:6.5px; letter-spacing:.12em;
  color:#8ea6d4; margin-top:4px }
.mgo{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px;
  border-radius:14px; font-size:12px; font-weight:800; white-space:nowrap; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 10px 20px -10px rgba(233,164,8,.9) }
.hubdark .mapx{ box-shadow:0 24px 44px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08) }

/* ---------- Xperts assurance strip (restored) ---------- */
.assure{ display:flex; align-items:center; gap:12px; margin:0 18px 14px; padding:14px;
  border-radius:20px; background:var(--navy); color:#fff }
.assure .ic14{ width:38px; height:38px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:rgba(243,197,24,.18); color:var(--gold) }
.assure .atx b{ display:block; font-size:12.5px; font-weight:800; letter-spacing:-.02em }
.assure .atx span{ display:block; font-size:10.5px; color:#a9c0e8; margin-top:4px; line-height:1.45 }
/* tiles keep their own contrast, but the shadow reads differently on light */
.hubx .htile{ box-shadow:0 22px 40px -22px rgba(6,28,72,.55), 0 0 0 1px rgba(8,21,44,.06) }
.hubx.hubdark .htile{ box-shadow:0 26px 46px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07) }

/* ==========================================================
   XPERTS — profile cards
   ========================================================== */
.subpane.xpx{ background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9) }
.subpane.xpx.xpdark{ background:linear-gradient(180deg,#04122e,#071c42 44%,#03102a) }
.xpx.xpdark .pfld{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14);
  box-shadow:none; color:#8ea6d4 }
.xpx.xpdark .pfld input{ color:#fff }
.xpx.xpdark .pfld input::placeholder{ color:#7e99c8 }
.xpx.xpdark .pfld.act{ border-color:var(--gold) }
.xpx.xpdark .pcount{ color:var(--gold) }
.xpdark .thsw{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00;
  border-color:transparent }
.xpdark .thsw .sun{ opacity:0; transform:rotate(40deg) scale(.7) }
.xpdark .thsw .moon{ opacity:1; transform:none }
/* summary bar reused */
.xpdark .hsum{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.8) }
.xpdark .hst b{ color:#fff } .xpdark .hsl{ color:#a9c0e8 }
.xpdark .hsp span{ color:#7e99c8 } .xpdark .hsp b{ color:var(--gold) }
.xpdark .hsp::before{ background:rgba(255,255,255,.16) }
.xpdark .loadm{ color:#dbe8ff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18) }

/* ---------- portrait tile ---------- */
.xtile{ position:relative; display:flex; flex-direction:column; min-height:352px; border-radius:30px;
  overflow:hidden; box-shadow:0 22px 42px -24px rgba(6,28,72,.6), 0 0 0 1px rgba(8,21,44,.06);
  transition:transform .3s cubic-bezier(.2,.9,.3,1) }
.xtile+.xtile{ margin-top:16px }
.xtile:active{ transform:scale(.985) }
.xpdark .xtile{ box-shadow:0 26px 46px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07) }
.xbg{ position:absolute; inset:0; background-position:center 18%; transform:scale(1.03);
  transition:transform 1.2s cubic-bezier(.2,.9,.3,1) }
.xtile:active .xbg{ transform:scale(1.08) }
.xveil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(2,10,26,.5) 0,rgba(2,10,26,.06) 24%,rgba(2,10,26,.72) 52%,
    rgba(2,10,26,.96) 100%) }
.xfoil{ position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center;
  gap:7px; padding:6px 12px 6px 6px; border-radius:99px; color:#2b1d00; overflow:hidden;
  background:linear-gradient(120deg,#fff0b8,#f9cb1c 38%,#e2a406 62%,#ffe27a);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.7) }
.xfoil::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(76deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  transform:translateX(-140%); animation:foil calc(5s*var(--d)) ease-in-out infinite }
.xfoil .fmk{ position:relative; z-index:2; width:20px; height:20px; border-radius:7px; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(43,29,0,.25) }
.xfoil .fmk img{ width:100%; height:100%; display:block }
.xfoil b{ position:relative; z-index:2; font-size:9px; font-weight:800; letter-spacing:.06em }
.xfav{ position:absolute; top:14px; right:14px; z-index:3; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(6,18,40,.45); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px) }
.xdist{ position:absolute; top:60px; left:14px; z-index:3; display:inline-flex; align-items:center;
  gap:5px; padding:5px 10px; border-radius:99px; font-family:var(--n); font-size:8px;
  letter-spacing:.06em; color:#dbe8ff; background:rgba(6,18,40,.42);
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px) }
.xcap{ flex:none; height:126px }
.xbody{ position:relative; z-index:3; margin-top:auto; padding:0 18px 18px }
.xhead{ display:flex; align-items:flex-end; gap:12px }
.xname{ flex:1; min-width:0; font-size:24px; font-weight:800; letter-spacing:-.045em; color:#fff;
  line-height:1.1 }
.xdisc{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 10px 22px -10px rgba(233,164,8,.95) }
.xdisc b{ font-size:14px; font-weight:800; letter-spacing:-.03em; margin-top:1px }
.xdisc i{ font-style:normal; font-family:var(--n); font-size:6px; letter-spacing:.05em; opacity:.68 }
.xspec{ display:block; font-family:var(--n); font-size:8.5px; letter-spacing:.14em; color:var(--gold);
  margin-top:10px; text-transform:uppercase }
.xline{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px }
.xline span{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:#b7cbf0 }
.xline span svg{ color:rgba(243,197,24,.85) }
.xchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.xchips span{ padding:5px 10px; border-radius:99px; font-size:9px; font-weight:700; color:#dbe8ff;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px) }
.xchips .xnext{ display:inline-flex; align-items:center; gap:5px; color:#2b1d00; border-color:transparent;
  font-weight:800; background:linear-gradient(150deg,#ffe27a,#f9cb1c 52%,#e9b40b) }
.xrail{ display:flex; align-items:center; gap:0; margin-top:15px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16) }
.xpz{ flex:none; padding-right:15px; position:relative }
.xpz+.xpz{ padding-left:15px }
.xpz+.xpz::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:rgba(255,255,255,.2) }
.xpz i{ display:block; font-style:normal; font-family:var(--n); font-size:6.5px; letter-spacing:.11em;
  color:#8ea6d4 }
.xpz b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.048em; color:#fff;
  margin-top:5px; line-height:1 }
.xcta{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 16px;
  border-radius:15px; font-size:12.5px; font-weight:800; white-space:nowrap; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 12px 24px -12px rgba(233,164,8,.95) }

/* ---------- load more ---------- */
.loadm{ display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 36px);
  height:50px; margin:16px 18px 0; border-radius:16px; font-size:12.5px; font-weight:800;
  color:var(--navy); background:var(--paper); border:1.5px dashed var(--line2);
  box-shadow:var(--sh2); transition:.2s }
.loadm.busy{ color:var(--mute); border-style:solid }
.loadm.busy svg{ animation:rot2 .9s linear infinite }
.loadm.done{ display:none }

/* ---------- filter sheet ---------- */
.fsheet{ position:absolute; inset:0; z-index:96; display:flex; align-items:flex-end;
  background:rgba(6,16,34,.5); opacity:0; pointer-events:none; transition:opacity .3s }
.fsheet.open{ opacity:1; pointer-events:auto }
.fpan{ width:100%; max-height:86%; display:flex; flex-direction:column;
  border-radius:28px 28px 0 0; background:var(--paper); transform:translateY(100%);
  transition:transform .42s cubic-bezier(.2,.9,.25,1) }
.fsheet.open .fpan{ transform:none }
.fgrab{ width:38px; height:4px; border-radius:4px; background:var(--line2); margin:12px auto 0 }
.fhd{ display:flex; align-items:center; gap:10px; padding:14px 18px 4px }
.fhd b{ flex:1; font-size:18px; font-weight:800; letter-spacing:-.04em }
.fhd button{ font-size:11.5px; font-weight:750; color:var(--blue) }
.fbody{ flex:1; min-height:0; overflow-y:auto; padding:12px 18px 6px }
.fbody::-webkit-scrollbar{ display:none }
.fgrp{ margin-bottom:20px }
.fgrp .fl2{ display:flex; align-items:baseline; gap:8px; margin-bottom:11px }
.fgrp .fl2 b{ flex:1; font-size:13px; font-weight:800; letter-spacing:-.03em }
.fgrp .fl2 span{ font-family:var(--n); font-size:10px; color:var(--navy) }
.fpills{ display:flex; flex-wrap:wrap; gap:8px }
.fpills button{ padding:9px 13px; border-radius:99px; font-size:11.5px; font-weight:700;
  color:var(--ink2); background:var(--paper); border:1.5px solid var(--line); box-shadow:var(--sh2) }
.fpills button.on{ background:var(--navy); color:#fff; border-color:var(--navy) }
.frange input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:5px; background:var(--wash2); outline:0; margin-top:4px }
.frange input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--navy); border:3px solid #fff;
  box-shadow:0 3px 8px -2px rgba(6,28,72,.55) }
.frange .fends{ display:flex; justify-content:space-between; margin-top:9px; font-family:var(--n);
  font-size:8px; color:var(--faint) }
.ftog{ display:flex; align-items:center; gap:12px; padding:12px 0 }
.ftog+.ftog{ border-top:1px solid var(--line) }
.ftog .ti{ width:32px; height:32px; flex:none; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.ftog .tt{ flex:1 } .ftog .tt b{ display:block; font-size:12.5px; font-weight:750 }
.ftog .tt span{ display:block; font-size:10.5px; color:var(--mute); margin-top:3px }
.ffoot{ flex:none; display:flex; gap:10px; padding:14px 18px calc(var(--sab) + 16px);
  border-top:1px solid var(--line) }
.ffoot .fclose{ padding:0 20px; height:50px; border-radius:16px; font-size:12.5px; font-weight:750;
  color:var(--navy); background:var(--wash) }
.ffoot .fapply{ flex:1; height:50px; border-radius:16px; font-size:13px; font-weight:800; color:#fff;
  background:linear-gradient(150deg,var(--navy),#0a3272);
  box-shadow:0 14px 26px -14px rgba(0,18,51,.85) }


/* ---------- button row on sub-page cards ---------- */
.subpane .btns{ display:table; width:calc(100% + 20px); table-layout:auto; border-collapse:separate;
  border-spacing:10px 0; margin:15px -10px 0 }
.subpane .btns .cl{ display:table-cell; vertical-align:middle; padding:0 }
.subpane .btns .cl.ic{ width:48px }
.subpane .btns button{ display:block; width:100%; height:46px; border-radius:14px; text-align:center;
  font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.015em; line-height:46px; padding:0 }
.subpane .btns .p{ background:linear-gradient(150deg,var(--navy),#0a3272); color:#fff;
  box-shadow:0 12px 20px -12px rgba(0,18,51,.85) }
.subpane .btns .p svg{ display:inline-block; vertical-align:-3px; margin-right:7px }
.subpane .btns .ib3{ background:var(--wash); color:var(--navy); border:1.5px solid rgba(8,21,44,.09) }
.subpane .btns .ib3 svg{ display:inline-block; vertical-align:-4px }

/* scroll containers must own vertical gestures */
.subpane,.detpane,.bookpane,.expane{ touch-action:pan-y }
.exbody,.detbody,.fbody{ touch-action:pan-y }
.rail,.cal,.dgal,.fchips,.exlist,.parts,.track,.hooks,.segs,.nsegs,.selr{ touch-action:pan-x pan-y }

/* ==========================================================
   SEARCH ON LIST PAGES
   ========================================================== */
.psearch{ flex:none; padding:14px 18px 0 }
.pfld{ display:flex; align-items:center; gap:10px; height:46px; padding:0 6px 0 14px;
  border-radius:15px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2);
  color:var(--faint) }
.pfld input{ flex:1; min-width:0; border:0; outline:0; background:none; font-size:13px; font-weight:600;
  color:var(--ink); font-family:inherit }
.pfld input::placeholder{ color:var(--faint); font-weight:500 }
.psearch{ flex:none; padding:14px 18px 4px }

/* ==========================================================
   DETAIL PAGE
   ========================================================== */
.detpane{ position:absolute; inset:0; z-index:90; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.detpane.open{ transform:none; opacity:1; pointer-events:auto }
.dethero{ position:relative; flex:none; height:270px }
.dgr{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,18,51,.5) 0,transparent 34%,rgba(0,18,51,.92)) }
.dback,.dshare{ position:absolute; top:calc(var(--sat) + 12px); width:38px; height:38px; z-index:3;
  border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,18,51,.5); color:#fff; border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px) }
.dback{ left:16px } .dshare{ right:16px }
.dtitle{ position:absolute; left:18px; right:18px; bottom:16px; z-index:3; color:#fff }
.dbadge{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px;
  font-size:9.5px; font-weight:800; background:rgba(0,18,51,.6); color:var(--gold);
  border:1px solid rgba(243,197,24,.45); backdrop-filter:blur(8px) }
.dtitle b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.045em; margin-top:10px }
.dtitle span{ display:block; font-size:12px; color:#bcd0f0; margin-top:6px }
.detbody{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; touch-action:pan-y; padding:16px 18px calc(var(--sab) + 124px) }
.detbody::-webkit-scrollbar{ display:none }

.dstat{ display:flex; padding:14px 4px; border-radius:20px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.dstat div{ flex:1; text-align:center; position:relative }
.dstat div+div::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:1px;
  background:var(--line) }
.dstat .n7{ font-size:16px; font-weight:800; letter-spacing:-.035em; display:flex; align-items:center;
  justify-content:center; gap:4px }
.dstat .n7 svg{ color:#f0b71a }
.dstat .l7{ font-family:var(--n); font-size:7.5px; letter-spacing:.1em; color:var(--faint); margin-top:5px }

.dsec{ margin-top:18px }
.dsec .dh{ display:flex; align-items:center; gap:8px; margin-bottom:11px }
.dsec .dh b{ flex:1; font-size:14px; font-weight:800; letter-spacing:-.03em }
.dsec .dh .more{ font-size:11px; font-weight:750; color:var(--blue) }
.dcard{ padding:15px; border-radius:22px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.dline{ display:flex; align-items:flex-start; gap:12px; padding:11px 0 }
.dline+.dline{ border-top:1px solid var(--line) }
.dline .dic{ width:32px; height:32px; flex:none; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.dline .dtx{ flex:1; min-width:0 }
.dline .dtx b{ display:block; font-size:12.5px; font-weight:750 }
.dline .dtx span{ display:block; font-size:11px; color:var(--mute); margin-top:3px; line-height:1.45 }
.dline .dact{ font-size:11px; font-weight:800; color:var(--blue); flex:none }
.dlock{ filter:blur(4px); user-select:none }

.dchips{ display:flex; flex-wrap:wrap; gap:7px }
.dchips span{ display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:99px;
  font-size:10px; font-weight:750; background:var(--paper); border:1px solid var(--line);
  color:var(--ink2); box-shadow:var(--sh2) }
.dchips span svg{ color:var(--gold3) }
.dchips .gd2{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e9b40b); color:#2b1d00;
  border-color:transparent }

.dgal{ display:flex; gap:9px; overflow-x:auto; padding-bottom:4px }
.dgal::-webkit-scrollbar{ display:none }
.dgal .gi{ flex:none; width:124px; height:96px; border-radius:16px; overflow:hidden }

.drev{ padding:14px; border-radius:20px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.drev+.drev{ margin-top:10px }
.drev .rh{ display:flex; align-items:center; gap:10px }
.drev .rav{ width:34px; height:34px; border-radius:50%; overflow:hidden; flex:none }
.drev .rn{ flex:1 } .drev .rn b{ display:block; font-size:12px; font-weight:800 }
.drev .rn span{ display:block; font-size:10px; color:var(--mute); margin-top:2px }
.drev .rst{ display:flex; gap:2px; color:#f0b71a }
.drev p{ font-size:11.5px; line-height:1.55; color:var(--ink2); margin-top:10px }

.detbar{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center;
  gap:12px; padding:12px 16px calc(var(--sab) + 14px); background:rgba(255,255,255,.96);
  border-top:1px solid var(--line); backdrop-filter:blur(16px) }
.detbar .dpr{ flex:none }
.detbar .dpr span{ display:block; font-family:var(--n); font-size:7.5px; letter-spacing:.1em;
  color:var(--faint) }
.detbar .dpr b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.04em; margin-top:3px }
.detbar .dgo{ flex:1; height:50px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; gap:8px; font-size:13.5px; font-weight:800; color:#fff;
  background:linear-gradient(150deg,var(--navy),#0a3272);
  box-shadow:0 14px 26px -14px rgba(0,18,51,.85) }

/* ==========================================================
   BOOKING FLOW
   ========================================================== */
.bookpane{ position:absolute; inset:0; z-index:92; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.bookpane.open{ transform:none; opacity:1; pointer-events:auto }
.bookpane .extop{ background:var(--navy); border-radius:0 }
.bkprog{ flex:none; height:3px; background:var(--wash2) }
.bkprog i{ display:block; height:100%; width:33%; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#ffe27a,#e2a406); transition:width .45s cubic-bezier(.2,.9,.3,1) }
.bookpane .exbody{ padding:16px 18px calc(var(--sab) + 124px) }

.bkh{ font-size:16px; font-weight:800; letter-spacing:-.035em; margin-bottom:4px }
.bkp{ font-size:11.5px; color:var(--mute); margin-bottom:14px; line-height:1.45 }
.seg2{ display:flex; padding:5px; border-radius:99px; background:var(--wash); border:1px solid var(--line);
  margin-bottom:14px }
.seg2 button{ flex:1; height:40px; border-radius:99px; font-size:12.5px; font-weight:750;
  color:var(--mute); transition:.25s }
.seg2 button.on{ background:var(--navy); color:#fff }

.cal{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px }
.cal::-webkit-scrollbar{ display:none }
.cal button{ flex:none; width:60px; padding:12px 0 11px; border-radius:18px; background:var(--paper);
  border:1.5px solid var(--line); box-shadow:var(--sh2); text-align:center; transition:.2s }
.cal button{ display:flex; flex-direction:column; align-items:center; gap:0 }
.cal .cd{ display:block; font-family:var(--n); font-size:8px; letter-spacing:.08em; color:var(--faint);
  line-height:1 }
.cal .cn{ display:block; font-size:18px; font-weight:800; letter-spacing:-.04em; margin-top:6px;
  line-height:1 }
.cal .cm{ display:block; font-size:8.5px; color:var(--mute); margin-top:4px; line-height:1 }
.cal .cav{ display:block; margin:7px auto 0; width:22px; height:4px; border-radius:3px;
  background:#0d9b74 }
.cal .cav.mid{ background:#e0a106 } .cal .cav.low{ background:#d8503f }
.cal button.on{ border-color:var(--navy); background:var(--navy); color:#fff }
.cal button.on .cd,.cal button.on .cm{ color:#9fb6de }
.cal button.off{ opacity:.4 }

.slotg{ margin-top:16px }
.slotg .sg{ font-family:var(--n); font-size:8px; letter-spacing:.12em; color:var(--faint);
  margin:14px 0 9px }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.slots button{ padding:12px 4px; border-radius:15px; background:var(--paper); border:1.5px solid var(--line);
  box-shadow:var(--sh2); font-size:12px; font-weight:750; transition:.2s }
.slots button{ display:flex; flex-direction:column; align-items:center; gap:0 }
.slots button .sl2{ display:block; font-family:var(--n); font-size:7.5px; color:var(--faint); margin-top:5px }
.slots button.on{ background:var(--navy); color:#fff; border-color:var(--navy) }
.slots button.on .sl2{ color:var(--gold) }
.slots button.full{ opacity:.42; text-decoration:line-through }

.wbal .wtx{ flex:1 } .wbal .wtx b{ display:block; font-size:12.5px; font-weight:750 }


.wsec{ margin-top:22px }
.wlb{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px }
.wlb b{ flex:1; font-size:14px; font-weight:800; letter-spacing:-.03em }
.wlb span{ font-size:10.5px; color:var(--mute) }
.wmeth button{ display:flex; align-items:center; gap:12px; width:100%; padding:15px; border-radius:20px;
  background:var(--paper); border:1.5px solid var(--line); box-shadow:var(--sh2); text-align:left;
  transition:.2s }
.wmeth button+button{ margin-top:10px }
.wmeth button.on{ border-color:var(--navy); background:var(--wash) }
.wmeth .mic2{ width:40px; height:40px; flex:none; border-radius:14px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.wmeth button.on .mic2{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.wmeth .mtx{ flex:1 } .wmeth .mtx b{ display:block; font-size:13px; font-weight:750 }
.wmeth .mtx span{ display:block; font-size:10.5px; color:var(--mute); margin-top:3px }
.wmeth .rdo2{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line2); flex:none;
  display:flex; align-items:center; justify-content:center }
.wmeth button.on .rdo2{ border-color:var(--navy) }
.wmeth button.on .rdo2::after{ content:''; width:11px; height:11px; border-radius:50%;
  background:var(--navy) }
.rzpline{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px;
  padding:12px; border-radius:14px; background:var(--paper); border:1px solid var(--line) }
.rzpline span{ font-size:10px; color:var(--faint) }
.rzpline svg{ color:#0d9b74 }
.rzpw{ height:16px; width:auto; display:block; opacity:.92 }
.wmeth{ margin-top:2px }

/* ==========================================================
   RAZORPAY SHEET
   ========================================================== */
.rzp{ position:absolute; inset:0; z-index:98; display:flex; align-items:flex-end;
  background:rgba(4,12,26,.72); opacity:0; pointer-events:none; transition:opacity .3s;
  backdrop-filter:blur(3px) }
.rzp.open{ opacity:1; pointer-events:auto }
.rzpc{ width:100%; border-radius:28px 28px 0 0; overflow:hidden; background:#fff;
  transform:translateY(100%); transition:transform .42s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.6) }
.rzp.open .rzpc{ transform:none }
.rzph{ position:relative; display:flex; align-items:center; gap:12px; padding:18px;
  background:linear-gradient(140deg,#0b2540,#123b63 60%,#0a1f38); color:#fff; overflow:hidden }
.rzph::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(76deg,transparent 40%,rgba(47,111,240,.35) 50%,transparent 60%);
  transform:translateX(-140%); animation:rzsh 3.2s ease-in-out infinite }
@keyframes rzsh{ 0%,58%{ transform:translateX(-140%) } 88%,100%{ transform:translateX(140%) } }
.rzpwrap{ position:relative; z-index:2; width:38px; height:38px; border-radius:12px; flex:none;
  background:#fff; display:flex; align-items:center; justify-content:center }
.rzpm{ height:20px; width:auto; display:block }
.rzpt{ position:relative; z-index:2; flex:1 }
.rzpt b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.02em }
.rzpt span{ display:block; font-family:var(--n); font-size:8px; letter-spacing:.12em; color:#7fa6d4;
  margin-top:4px }
.rzpamt{ position:relative; z-index:2; text-align:right; flex:none }
.rzpamt b{ display:block; font-family:var(--n); font-size:17px; font-weight:700 }
.rzpamt span{ display:block; font-family:var(--n); font-size:7px; letter-spacing:.12em; color:#7fa6d4;
  margin-top:3px }
.rzpx{ position:relative; z-index:2; width:30px; height:30px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); color:#fff }
.rzpb{ padding:28px 20px calc(var(--sab) + 22px) }
.rzpstage{ display:flex; flex-direction:column; align-items:center; text-align:center }
.rzpspin{ position:relative; width:92px; height:92px }
.rzpspin .rr4{ position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(47,111,240,.16) }
.rzpspin svg{ position:absolute; inset:0; width:92px; height:92px; animation:rot2 1.15s linear infinite }
.rzpspin circle{ fill:none; stroke:url(#none); stroke:#2f6ff0; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:170; stroke-dashoffset:120 }
@keyframes rot2{ to{ transform:rotate(360deg) } }
.rzpspin .rzpm2{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px;
  height:auto; animation:rpul 1.8s ease-in-out infinite }
@keyframes rpul{ 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-50%,-50%) scale(1.1) } }
.rzpstage > b{ font-size:16px; font-weight:800; letter-spacing:-.03em; margin-top:20px; color:#0b2540 }
.rzpstage > span{ font-size:11.5px; color:var(--mute); margin-top:6px }
.rzpsteps{ width:100%; margin-top:22px; padding:6px 0 }
.rzpsteps .rs{ position:relative; display:flex; align-items:center; gap:12px; padding:10px 0;
  opacity:.32; transition:opacity .35s }
.rzpsteps .rs.on{ opacity:1 }
.rzpsteps .rs+.rs::before{ content:''; position:absolute; left:9px; top:-8px; height:16px; width:2px;
  background:var(--line2) }
.rzpsteps .rs.on+.rs.on::before{ background:#0d9b74 }
.rzpsteps .rs .rc{ width:20px; height:20px; flex:none; border-radius:50%; border:2px solid var(--line2);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.3s }
.rzpsteps .rs.on .rc{ background:#0d9b74; border-color:#0d9b74 }
.rzpsteps .rs span{ flex:1; font-size:12px; font-weight:650; color:var(--ink2); text-align:left }
.rzpsteps .rs .rzpsec{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--line) }
.rzpsec span{ font-size:10px; color:var(--faint) }
.rzpsec svg{ color:#0d9b74 }
.rzpsec .rzpw{ height:15px; width:auto; opacity:.85 }

/* ==========================================================
   SUCCESS
   ========================================================== */
.donep{ position:absolute; inset:0; z-index:99; display:flex; align-items:center; justify-content:center;
  padding:22px; background:linear-gradient(180deg,#04122e,#071c42 50%,#03102a);
  opacity:0; pointer-events:none; transition:opacity .35s }
.donep.open{ opacity:1; pointer-events:auto }
.donec{ width:100%; max-height:100%; overflow-y:auto; text-align:center; color:#fff }
.donec::-webkit-scrollbar{ display:none }
.dring{ position:relative; width:120px; height:120px; margin:0 auto }
.dring > svg{ transform:rotate(-90deg) }
.dring > svg circle{ fill:none; stroke-width:6; stroke-linecap:round }
.dring > svg .dr1{ stroke:rgba(255,255,255,.14) }
.dring > svg .dr2{ stroke:url(#dg); stroke:#f9cb1c; stroke-dasharray:327; stroke-dashoffset:327;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1) .2s }
.donep.open .dring > svg .dr2{ stroke-dashoffset:0 }
.dtick{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--gold); opacity:0; transform:scale(.5) }
.donep.open .dtick{ animation:tickin .5s cubic-bezier(.2,1.6,.4,1) .8s forwards }
@keyframes tickin{ to{ opacity:1; transform:none } }
.donec > b{ display:block; font-size:23px; font-weight:800; letter-spacing:-.04em; margin-top:22px }
.donec > span{ display:block; font-size:12.5px; color:#a9c0e8; margin-top:8px }
.dsum{ margin-top:22px; padding:16px; border-radius:22px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13); text-align:left }
.dsum .ds{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:12px }
.dsum .ds+.ds{ border-top:1px solid rgba(255,255,255,.1) }
.dsum .ds span{ flex:1; color:#a9c0e8 } .dsum .ds b{ font-weight:750 }
.dcontact{ margin-top:12px; padding:16px; border-radius:22px; text-align:left;
  background:rgba(243,197,24,.12); border:1px solid rgba(243,197,24,.3) }
.dcontact .dcl{ font-family:var(--n); font-size:8px; letter-spacing:.12em; color:var(--gold) }
.dcontact .dc2{ display:flex; align-items:center; gap:11px; padding:10px 0 }
.dcontact .dc2+.dc2{ border-top:1px solid rgba(243,197,24,.2) }
.dcontact .dc2 .di{ width:30px; height:30px; flex:none; border-radius:10px; display:flex;
  align-items:center; justify-content:center; background:rgba(243,197,24,.18); color:var(--gold) }
.dcontact .dc2 .dt{ flex:1; min-width:0 }
.dcontact .dc2 .dt b{ display:block; font-size:12px; font-weight:750 }
.dcontact .dc2 .dt span{ display:block; font-size:10.5px; color:#e8dcb6; margin-top:3px }
.ddone{ width:100%; height:50px; margin-top:20px; border-radius:16px; font-size:13.5px; font-weight:800;
  color:#2b1d00; background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }

/* assured card on hub detail */
.hassd{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:20px; margin-bottom:14px;
  background:linear-gradient(140deg,#ffe27a,#f9cb1c 46%,#e2a406); color:#2b1d00;
  box-shadow:0 14px 28px -14px rgba(233,164,8,.85) }
.hassd .amark.big3{ width:38px; height:38px; border-radius:12px; overflow:hidden; flex:none;
  box-shadow:0 0 0 1.5px rgba(43,29,0,.2) }
.hassd .amark.big3 img{ width:100%; height:100%; display:block }
.hassd .hasx{ flex:1; min-width:0 }
.hassd .hasx b{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.01em }
.hassd .hasx span{ display:block; font-size:10.5px; margin-top:4px; line-height:1.4;
  color:rgba(43,29,0,.72) }
.hassd .hasv{ width:26px; height:26px; flex:none; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:rgba(43,29,0,.16) }

/* ==========================================================
   XPERT DETAIL — trust, actions, comparison, ratings
   ========================================================== */


.xlangs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; padding-top:12px;
  border-top:1px solid var(--line) }
.xlangs span{ padding:5px 10px; border-radius:99px; font-size:9.5px; font-weight:700;
  background:var(--wash); color:var(--ink2) }


.xcmp{ border-radius:20px; overflow:hidden; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2); margin-bottom:14px }
.xcmpr{ display:flex; align-items:center; padding:11px 14px }
.xcmpr+.xcmpr{ border-top:1px solid var(--line) }
.xcmpr span{ flex:1.2; font-size:11px; color:var(--mute) }
.xcmpr b{ flex:1; font-size:12px; font-weight:750; text-align:center }
.xcmph{ background:var(--navy) }
.xcmph b{ font-family:var(--n); font-size:9px; letter-spacing:.1em; color:var(--gold) }
.xcmpr:nth-child(2) b:nth-of-type(1){ color:var(--gold3) }

.xavail{ display:flex; gap:9px }
.xavail .xav{ flex:1; padding:12px 8px; border-radius:16px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2); text-align:center }
.xavail .xav b{ display:block; font-size:11.5px; font-weight:800 }
.xavail .xav span{ display:block; font-family:var(--n); font-size:8px; color:var(--navy); margin-top:6px }
.xavail .xav i{ display:block; font-style:normal; font-size:8.5px; color:var(--faint); margin-top:5px }
.xavail .xav.hot{ background:var(--navy); border-color:var(--navy) }
.xavail .xav.hot b{ color:#fff } .xavail .xav.hot span{ color:var(--gold) }
.xavail .xav.hot i{ color:#9fb6de }

.xrb{ display:flex; gap:16px; align-items:center }
.xrbig{ text-align:center; flex:none; width:84px }
.xrbig b{ display:block; font-size:34px; font-weight:800; letter-spacing:-.05em; line-height:1 }
.xrst{ display:flex; gap:2px; justify-content:center; margin-top:7px; color:#f0b71a }
.xrc{ display:block; font-family:var(--n); font-size:7.5px; color:var(--faint); margin-top:6px }
.xrbars{ flex:1; min-width:0 }
.xrbar{ display:flex; align-items:center; gap:8px; padding:2.5px 0 }
.xrbar span{ font-family:var(--n); font-size:8.5px; color:var(--mute); width:8px }
.xrbar i{ flex:1; height:6px; border-radius:4px; background:var(--wash2); overflow:hidden }
.xrbar i b{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#f9cb1c,#e2a406) }
.xrbar em{ font-family:var(--n); font-size:8px; font-style:normal; color:var(--faint); width:28px;
  text-align:right }

.xlockc{ position:relative }
.xlockn{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:11px 12px;
  border-radius:14px; font-size:10.5px; line-height:1.45; color:var(--gold3);
  background:rgba(243,197,24,.12); border:1px dashed rgba(243,197,24,.4) }

/* ==========================================================
   PACKAGE CARD — premium
   ========================================================== */
.pkc{ position:relative; display:block; width:100%; text-align:left; padding:16px 16px 15px 19px;
  border-radius:22px; background:var(--paper); border:1.5px solid var(--line);
  box-shadow:0 12px 26px -18px rgba(6,28,72,.45); overflow:hidden; transition:.25s }
.pkc+.pkc{ margin-top:11px }
.pkl{ position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line2); transition:.25s }
.pkc.on{ border-color:var(--navy); background:linear-gradient(150deg,#fff,var(--wash));
  box-shadow:0 18px 34px -18px rgba(6,28,72,.5) }
.pkc.on .pkl{ background:linear-gradient(180deg,#ffe27a,#e2a406) }
.pkrib{ position:absolute; top:0; right:0; padding:5px 12px 5px 14px;
  border-radius:0 22px 0 14px; font-family:var(--n); font-size:7px; letter-spacing:.1em; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.pkhd{ display:flex; align-items:flex-start; gap:11px }
.pkrad{ width:20px; height:20px; flex:none; margin-top:2px; border-radius:50%;
  border:2px solid var(--line2); display:flex; align-items:center; justify-content:center; transition:.2s }
.pkc.on .pkrad{ border-color:var(--navy) }
.pkc.on .pkrad::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--navy) }
.pknm{ flex:1; min-width:0 }
.pknm b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.032em; line-height:1.2 }
.pknm span{ display:block; font-size:10.5px; color:var(--mute); margin-top:5px }
.pkam{ flex:none; text-align:right }
.pkam b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.045em; color:var(--navy);
  line-height:1 }
.pkam i{ display:block; font-style:normal; font-family:var(--n); font-size:8px; color:var(--faint);
  margin-top:5px; white-space:nowrap }
.pkds{ display:block; font-size:11.5px; color:var(--ink2); line-height:1.5; margin-top:12px }
.pkft{ display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--line2) }
.pkft span{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:650;
  color:var(--ink2) }
.pkft span svg{ color:#0d9b74 }
.pksv{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; padding:6px 11px;
  border-radius:99px; font-size:10px; font-weight:800; background:rgba(13,155,116,.12); color:#0d9b74 }
.pknote{ display:flex; align-items:center; gap:9px; margin-top:13px; padding:12px 13px;
  border-radius:16px; font-size:10.5px; line-height:1.45; color:var(--gold3);
  background:rgba(243,197,24,.1); border:1px dashed rgba(243,197,24,.38) }
.pknote svg{ flex:none }

/* ==========================================================
   X-HUB DETAIL — extra sections
   ========================================================== */
.qact{ display:flex; gap:9px; margin-top:14px }
.qact .qa{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 4px;
  border-radius:18px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2) }
.qact .qi2{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.qact .qa b{ font-size:9.5px; font-weight:750; color:var(--ink2) }


.hlite{ display:flex; margin-top:14px; padding-top:13px; border-top:1px solid var(--line) }
.hlite span{ flex:1; text-align:center; position:relative }
.hlite span+span::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:var(--line) }
.hlite b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.035em }
.hlite i{ display:block; font-style:normal; font-family:var(--n); font-size:7px; letter-spacing:.1em;
  color:var(--faint); margin-top:5px }

.peak{ display:flex; align-items:flex-end; gap:5px; height:82px }
.peak .pk{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%;
  justify-content:flex-end }
.peak .pk i{ display:block; width:100%; border-radius:5px; background:var(--wash2) }
.peak .pk.lo i{ background:#cfe3f7 } .peak .pk.md i{ background:#9dbdf0 }
.peak .pk.hi i{ background:linear-gradient(180deg,#f9cb1c,#e2a406) }
.peak .pk em{ font-style:normal; font-family:var(--n); font-size:7px; color:var(--faint); margin-top:7px }
.peak .pk.nowb i{ box-shadow:0 0 0 2px var(--navy) }
.peakl{ display:flex; gap:14px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line) }
.peakl span{ display:inline-flex; align-items:center; gap:6px; font-size:9.5px; color:var(--mute) }
.peakl i{ width:9px; height:9px; border-radius:3px }
.peakl i.lo{ background:#cfe3f7 } .peakl i.md{ background:#9dbdf0 }
.peakl i.hi{ background:linear-gradient(180deg,#f9cb1c,#e2a406) }

.hr.tdy2 span{ color:var(--navy) } .hr.tdy2 b{ color:var(--ink); font-weight:800 }

.fgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px }
.fg2{ display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:15px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2);
  font-size:11px; font-weight:650; color:var(--ink2) }
.fgi{ width:22px; height:22px; flex:none; border-radius:7px; display:flex; align-items:center;
  justify-content:center; background:rgba(13,155,116,.12); color:#0d9b74 }

/* ---------- today strip ---------- */
.tdstrip{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:14px;
  border-radius:20px; background:var(--navy); color:#fff;
  box-shadow:0 16px 30px -20px rgba(0,18,51,.8) }
.tdstrip .tdi{ width:38px; height:38px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center; color:#2b1d00;
  background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.tdstrip .tdt{ flex:1; min-width:0 }
.tdstrip .tdt b{ display:block; font-size:12.5px; font-weight:800; letter-spacing:-.02em }
.tdstrip .tdt span{ display:block; font-size:10.5px; color:#a9c0e8; margin-top:4px }
.tdstrip .tdb{ flex:none; padding:6px 10px; border-radius:99px; font-family:var(--n); font-size:7.5px;
  letter-spacing:.12em; color:#7fe0b4; background:rgba(13,155,116,.18);
  border:1px solid rgba(13,155,116,.36) }

/* ---------- opening hours card ---------- */
.hrc{ padding:15px; border-radius:22px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.hrdays{ display:flex; gap:6px }
.hrdays .hd2{ flex:1; height:36px; border-radius:11px; font-family:var(--n); font-size:9px;
  letter-spacing:.04em; color:var(--mute); background:var(--wash); transition:.2s }
.hrdays .hd2.on{ background:var(--navy); color:#fff }
.hrmain{ margin-top:16px }
.hrl{ display:inline-block; font-family:var(--n); font-size:7.5px; letter-spacing:.14em;
  color:var(--gold3); padding:4px 9px; border-radius:99px; background:rgba(243,197,24,.14) }
.hrmain b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.045em; margin-top:10px;
  color:var(--ink) }
.hrsub{ display:block; font-size:10.5px; color:var(--mute); margin-top:7px }
.hrbarw{ position:relative; margin-top:16px; height:8px; border-radius:5px; background:var(--wash2) }
.hrbar{ position:absolute; top:0; bottom:0; border-radius:5px;
  background:linear-gradient(90deg,#ffe27a,#e2a406); transition:left .35s, right .35s }
.hrends{ display:flex; justify-content:space-between; margin-top:9px }
.hrends span{ font-family:var(--n); font-size:7.5px; color:var(--faint) }

/* ==========================================================
   REVIEW STEP
   ========================================================== */
.rvhero{ display:flex; align-items:center; gap:13px; padding:13px; border-radius:22px; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2) }
.rvim{ width:64px; height:64px; min-width:64px; flex:0 0 64px; border-radius:18px; overflow:hidden }
.rvtx{ flex:1; min-width:0 }
.rvtx b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.04em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.rvtx > span{ display:block; font-size:11px; color:var(--mute); margin-top:4px }
.rvpk{ display:inline-flex !important; align-items:center; gap:5px; width:auto !important;
  margin-top:8px; padding:5px 10px; border-radius:99px; font-size:9.5px; font-weight:800;
  color:#0a7a5b !important; background:rgba(13,155,116,.12) }

.rvsec{ font-family:var(--n); font-size:7.5px; letter-spacing:.16em; color:var(--faint);
  margin:20px 0 10px 3px }

.rvgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.rvg{ padding:13px; border-radius:18px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.rgi{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.rvg b{ display:block; font-size:13px; font-weight:800; letter-spacing:-.03em; margin-top:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rvg i{ display:block; font-style:normal; font-family:var(--n); font-size:7px; letter-spacing:.12em;
  color:var(--faint); margin-top:6px }

.rvbill{ padding:5px 16px 16px; border-radius:22px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.rb{ display:flex; align-items:center; gap:12px; padding:12px 0 }
.rb+.rb{ border-top:1px solid var(--line) }
.rb span{ flex:1; font-size:12px; color:var(--mute) }
.rb b{ font-size:13px; font-weight:750 }
.rb b.free{ font-family:var(--n); font-size:9px; letter-spacing:.1em; color:#0a7a5b;
  padding:4px 9px; border-radius:99px; background:rgba(13,155,116,.12) }
.rbt{ display:flex; align-items:flex-end; gap:12px; margin-top:6px; padding-top:14px;
  border-top:1.5px dashed var(--line2) }
.rbt span{ flex:1; font-size:13px; font-weight:800 }
.rbt b{ font-size:26px; font-weight:800; letter-spacing:-.05em; color:var(--navy); line-height:1 }


.rs2+.rt2{ flex:1 } .rt2 b{ display:block; font-size:12.5px; font-weight:750; line-height:1.35 }


/* ---------- protection timeline ---------- */
.tline{ position:relative; padding:18px 16px 6px; border-radius:22px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.tl2{ position:relative; display:flex; gap:14px; padding:0 0 20px 0 }
.tl2::before{ content:''; position:absolute; left:13px; top:26px; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(243,197,24,.15)) }
.tl2:last-child{ padding-bottom:14px }
.tl2:last-child::before{ display:none }
.tld{ position:relative; z-index:2; width:28px; height:28px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-family:var(--n); font-size:11px;
  color:#2b1d00; background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 6px 14px -6px rgba(233,164,8,.85) }
.tlt{ flex:1; padding-top:3px }
.tlt b{ display:block; font-size:13px; font-weight:800; letter-spacing:-.028em; line-height:1.3 }
.tlt span{ display:block; font-size:10.5px; color:var(--mute); margin-top:6px; line-height:1.5 }

/* ---------- assurance pair ---------- */
.assr{ display:flex; gap:10px; margin-top:12px }
.as3{ flex:1; padding:14px 13px; border-radius:18px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.as3 .asi{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:rgba(13,155,116,.12); color:#0d9b74 }
.as3 b{ display:block; font-size:12px; font-weight:800; letter-spacing:-.025em; margin-top:11px }
.as3 i{ display:block; font-style:normal; font-size:10px; color:var(--mute); margin-top:5px }
.rvfoot{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:12px 13px;
  border-radius:16px; font-size:10.5px; line-height:1.45; color:var(--mute); background:var(--wash);
  border:1px solid var(--line) }
.rvfoot svg{ flex:none; color:var(--navy) }

/* ---------- confirmation motion ---------- */
.donep .donec > b,.donep .donec > span,.donep .dsum,.donep .dcontact,.donep .ddone{
  opacity:0; transform:translateY(16px) }
.donep.go .donec > b{ animation:rise .55s cubic-bezier(.2,.9,.3,1) .55s forwards }
.donep.go .donec > span{ animation:rise .55s cubic-bezier(.2,.9,.3,1) .68s forwards }
.donep.go .dsum{ animation:rise .55s cubic-bezier(.2,.9,.3,1) .82s forwards }
.donep.go .dcontact{ animation:rise .55s cubic-bezier(.2,.9,.3,1) .96s forwards }
.donep.go .ddone{ animation:rise .55s cubic-bezier(.2,.9,.3,1) 1.12s forwards }
@keyframes rise{ to{ opacity:1; transform:none } }
.donep .dsum .ds,.donep .dcontact .dc2{ opacity:0; transform:translateX(-10px) }
.donep.go .dsum .ds{ animation:slidein .45s ease-out calc(.92s + var(--i)*.07s) forwards }
.donep.go .dcontact .dc2{ animation:slidein .45s ease-out calc(1.06s + var(--i)*.07s) forwards }
@keyframes slidein{ to{ opacity:1; transform:none } }
/* gold burst behind the ring */
.dring::before{ content:''; position:absolute; left:50%; top:50%; width:150px; height:150px;
  margin:-75px 0 0 -75px; border-radius:50%; background:radial-gradient(circle,rgba(243,197,24,.4),transparent 62%);
  opacity:0; transform:scale(.5) }
.donep.go .dring::before{ animation:burst 1s cubic-bezier(.2,.9,.3,1) .7s forwards }
@keyframes burst{ 40%{ opacity:1; transform:scale(1.1) } 100%{ opacity:.35; transform:scale(1) } }
/* rings ripple outward */
.dring::after{ content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(243,197,24,.55); opacity:0 }
.donep.go .dring::after{ animation:ripple2 1.6s ease-out .9s 2 }
@keyframes ripple2{ 0%{ opacity:.7; transform:scale(1) } 100%{ opacity:0; transform:scale(1.5) } }

/* ==========================================================
   XPERT DETAIL — mode chooser + inclusions
   ========================================================== */
.modes{ display:flex; gap:11px }
.md3{ flex:1; padding:15px 13px; border-radius:22px; text-align:left; background:var(--paper);
  border:1.5px solid var(--line); box-shadow:var(--sh2); transition:.25s }
.md3 .mdi{ width:38px; height:38px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy); transition:.25s }
.md3 b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.03em; margin-top:12px }
.md3 .mdp{ display:block; font-size:21px; font-weight:800; letter-spacing:-.05em; color:var(--navy);
  margin-top:7px; line-height:1 }
.md3 i{ display:block; font-style:normal; font-size:10px; color:var(--mute); margin-top:7px;
  line-height:1.4 }
.md3.on{ border-color:var(--navy); background:linear-gradient(155deg,var(--navy),#0a3272);
  box-shadow:0 18px 32px -18px rgba(0,18,51,.85) }
.md3.on .mdi{ background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.md3.on b{ color:#fff }
.md3.on .mdp{ color:var(--gold) }
.md3.on i{ color:#a9c0e8 }

.incl{ margin-top:13px; padding:5px 15px; border-radius:22px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.inr{ display:flex; gap:12px; padding:12px 0 }
.inr+.inr{ border-top:1px solid var(--line) }
.ini{ width:32px; height:32px; flex:none; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:rgba(13,155,116,.12); color:#0d9b74 }
.int{ flex:1 } .int b{ display:block; font-size:12.5px; font-weight:750; line-height:1.3 }
.int span{ display:block; font-size:10.5px; color:var(--mute); margin-top:5px; line-height:1.45 }

/* credentials reuse the protection timeline, with a tick token */
.tline .tld svg{ display:block }

.ba .vw .half .pimg{ position:absolute; inset:0 }
.fc2 .pimg{ position:absolute; inset:0 }

.hrow .im .pimg{ position:absolute; inset:0 }
.tst .by .av .pimg{ position:absolute; inset:0 }
.hub .im .pimg{ position:absolute; inset:0 }







/* ═══════════ BATCH 1 · PROFILE + BOOKINGS PANES ═══════════ */

.profpane,.bkgpane{ position:absolute; inset:0; z-index:94; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.profpane.open,.bkgpane.open{ transform:none; opacity:1; pointer-events:auto }
.profpane .extop,.bkgpane .extop{ background:var(--navy); border-radius:0 }
.profpane .exbody,.bkgpane .exbody{ padding:16px 18px calc(var(--sab) + 124px) }

/* ---- profile identity ---- */
.pfid{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:22px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2) }
.pfid .av5{ width:54px; height:54px; flex:none; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-family:var(--n); font-size:17px; font-weight:700;
  color:#2b1d00; background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.pfid .nm5{ flex:1; min-width:0 }
.pfid .nm5 b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.03em }
.pfid .nm5 span{ display:block; font-size:11.5px; color:var(--mute); margin-top:3px }
.pfid .vchip{ display:inline-flex; align-items:center; gap:4px; margin-top:7px; padding:4px 8px;
  border-radius:8px; background:var(--wash); font-family:var(--n); font-size:7.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold3) }

/* ---- escrow and refund strip ---- */
.pfw{ display:flex; gap:10px; margin-top:12px }
.pfw button{ flex:1; text-align:left; padding:13px 14px; border-radius:20px; background:var(--navy);
  color:#fff; box-shadow:var(--sh2); position:relative; overflow:hidden }
.pfw button:last-child{ background:var(--paper); color:var(--navy); border:1px solid var(--line) }
.pfw .l9{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#8ea6d4 }
.pfw button:last-child .l9{ color:var(--faint) }
.pfw .v9{ display:block; font-size:19px; font-weight:800; letter-spacing:-.035em; margin-top:6px }

/* ---- menu groups ---- */
.pfgrp{ margin-top:20px }
.pfk{ display:block; font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 9px 4px }
.pflist{ border-radius:20px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.pfrow{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 15px; text-align:left;
  background:transparent; border-bottom:1px solid var(--line); transition:background .18s }
.pfrow:last-child{ border-bottom:0 }
.pfrow:active{ background:var(--wash) }
.pfrow .ic5{ width:34px; height:34px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.pfrow .tx5{ flex:1; min-width:0 }
.pfrow .tx5 b{ display:block; font-size:14px; font-weight:700; letter-spacing:-.02em }
.pfrow .tx5 span{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.pfrow .ch5{ color:var(--faint); flex:none }
.pfrow .bdg5{ padding:4px 8px; border-radius:8px; background:var(--wash2); font-family:var(--n);
  font-size:8px; font-weight:700; letter-spacing:.08em; color:var(--navy); flex:none }
.pfrow.danger .ic5{ background:#fdeaea; color:#c0392b }
.pfrow.danger .tx5 b{ color:#c0392b }
.pfver{ text-align:center; font-family:var(--n); font-size:8px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-top:22px }

/* ---- bookings segments ---- */
.bkgseg{ display:flex; gap:4px; padding:4px; border-radius:99px; background:var(--wash2); margin-bottom:15px }
.bkgseg button{ flex:1; padding:9px 6px; border-radius:99px; font-family:var(--n); font-size:9px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
  background:transparent; transition:.22s }
.bkgseg button.on{ background:var(--navy); color:#fff }
.bkgseg button .n0{ opacity:.65; margin-left:3px }

/* ---- booking card ---- */
.bkgcard{ position:relative; display:block; width:100%; text-align:left; padding:14px;
  border-radius:22px; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2); margin-bottom:11px; transition:background .18s }
.bkgcard:active{ background:var(--wash) }
.bkgcard .top5{ display:flex; align-items:center; gap:11px }
.bkgcard .av6{ position:relative; width:46px; height:46px; flex:none; border-radius:15px;
  overflow:hidden; background:var(--wash2) }
.bkgcard .who6{ flex:1; min-width:0 }
.bkgcard .who6 b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bkgcard .who6 span{ display:block; font-size:11px; color:var(--mute); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bkgcard .pr6{ font-size:14.5px; font-weight:800; letter-spacing:-.03em; flex:none }
.bkgcard .meta6{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line) }
.bkgchip{ display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border-radius:9px;
  background:var(--wash); font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy); white-space:nowrap }
.bkgchip.gold{ background:rgba(243,197,24,.18); color:var(--gold3) }
.bkgchip.live{ background:#fdeaea; color:#c0392b }
.bkgchip.good{ background:rgba(13,155,116,.13); color:#0a7d5d }
.bkgchip.mute{ color:var(--mute) }
.bkgcd{ margin-left:auto; font-family:var(--n); font-size:9.5px; font-weight:700;
  letter-spacing:.04em; color:var(--navy); white-space:nowrap }
.bkgcd.warn{ color:#c0392b }
.bkgempty{ padding:46px 22px; text-align:center }
.bkgempty .ei{ width:56px; height:56px; margin:0 auto 14px; border-radius:20px; display:flex;
  align-items:center; justify-content:center; background:var(--wash2); color:var(--faint) }
.bkgempty b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.03em }
.bkgempty span{ display:block; font-size:12px; color:var(--mute); margin-top:6px; line-height:1.55 }

/* ═══════════ BATCH 1.5 · BOOKINGS — CATEGORY, HERO, DAY GROUPS ═══════════ */

/* ---- category filter row ---- */
.bkgfil{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  margin:0 -18px 16px; padding:0 18px 2px }
.bkgfil::-webkit-scrollbar{ display:none }
.bkgfil button{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:99px; background:var(--paper); border:1px solid var(--line);
  font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute); transition:.2s; white-space:nowrap }
.bkgfil button.on{ background:var(--navy); border-color:var(--navy); color:#fff }
.bkgfil button .c0{ padding:2px 6px; border-radius:99px; background:var(--wash2);
  color:var(--navy); font-size:8px; line-height:1.35 }
.bkgfil button.on .c0{ background:rgba(255,255,255,.18); color:#fff }
.bkgfil button svg{ opacity:.85 }

/* ---- next-up hero ---- */
.bkghero{ position:relative; overflow:hidden; border-radius:26px; padding:18px; color:#fff;
  margin-bottom:20px; background:linear-gradient(135deg,#001233 0%,#0a3272 54%,#3a2c05 100%);
  box-shadow:0 24px 44px -22px rgba(0,18,51,.85) }
.bkghero .gl{ position:absolute; right:-60px; top:-70px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.34),transparent 66%) }
.bkghero .hk0{ position:relative; z-index:2; display:flex; align-items:center; gap:7px }
.bkghero .hk0 .k0{ font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold2) }
.bkghero .hk0 .dot0{ width:5px; height:5px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(243,197,24,.2) }
.bkghero .row0{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; margin-top:14px }
.bkghero .av0{ position:relative; width:52px; height:52px; flex:none; border-radius:17px;
  overflow:hidden; background:rgba(255,255,255,.1) }
.bkghero .nm0{ flex:1; min-width:0 }
.bkghero .nm0 b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.035em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bkghero .nm0 span{ display:block; font-size:11.5px; color:#a9bfe6; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bkghero .cd0{ position:relative; z-index:2; display:flex; align-items:flex-end;
  justify-content:space-between; gap:12px; margin-top:16px; padding-top:15px;
  border-top:1px solid rgba(255,255,255,.14) }
.bkghero .cd0 .big0{ font-family:var(--n); font-size:26px; font-weight:700; letter-spacing:-.03em;
  line-height:1; color:#fff }
.bkghero .cd0 .sub0{ display:block; font-family:var(--n); font-size:8px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#8ea6d4; margin-top:7px }
.bkghero .cd0 .rf0{ text-align:right; flex:none }
.bkghero .cd0 .rf0 b{ display:block; font-size:14px; font-weight:800; letter-spacing:-.02em }
.bkghero .cd0 .rf0 span{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#8ea6d4; margin-top:5px }
.bkghero .go0{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:8px; width:100%; height:46px; margin-top:16px; border-radius:15px; font-size:13.5px;
  font-weight:800; letter-spacing:-.01em; color:#2b1d00;
  background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 14px 26px -14px rgba(243,197,24,.75) }
.bkghero .go0.ghost{ background:rgba(255,255,255,.13); color:#fff; box-shadow:none }

/* ---- day grouping ---- */
.bkgday{ display:flex; align-items:center; gap:9px; margin:2px 0 11px }
.bkgday b{ font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint) }
.bkgday i{ flex:1; height:1px; background:var(--line) }
.bkgday.tdy b{ color:var(--gold3) }

/* ---- card additions ---- */
.bkgcard.urgent{ border-color:rgba(192,57,43,.3); box-shadow:0 12px 26px -16px rgba(192,57,43,.45) }
.bkgcard .cat6{ position:absolute; top:0; left:18px; width:34px; height:3px; border-radius:0 0 3px 3px }
.bkgcard .cat6.trial{ background:var(--gold) }
.bkgcard .cat6.door{ background:#0a3272 }
.bkgcard .cat6.online{ background:#0d9b74 }
.bkgact{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:38px;
  margin-top:11px; border-radius:13px; font-family:var(--f); font-size:12px; font-weight:800;
  letter-spacing:-.01em; background:var(--wash); color:var(--navy); transition:.18s }
.bkgact.primary{ background:linear-gradient(150deg,var(--navy),#0a3272); color:#fff }
.bkgact.gold{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.bkgact:active{ transform:translateY(1px) }

/* ---- profile info sheet ---- */
.pfslist{ margin-top:16px; border-radius:18px; overflow:hidden; border:1px solid var(--line) }
.pfsrow{ display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--paper) }
.pfsrow:last-child{ border-bottom:0 }
.pfspct{ width:46px; flex:none; text-align:center; padding:6px 0; border-radius:10px;
  font-family:var(--n); font-size:10px; font-weight:700; letter-spacing:-.01em }
.pfspct.full{ background:rgba(13,155,116,.14); color:#0a7d5d }
.pfspct.half{ background:rgba(243,197,24,.2); color:var(--gold3) }
.pfspct.quarter{ background:rgba(243,197,24,.2); color:var(--gold3) }
.pfspct.none{ background:#fdeaea; color:#c0392b }
.pfstx b{ display:block; font-size:13px; font-weight:700; letter-spacing:-.02em }
.pfstx span{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.pfsnote{ margin-top:12px; padding:12px 14px; border-radius:16px; background:var(--wash);
  font-size:11.5px; line-height:1.6; color:var(--mute) }
.pfsnote b{ color:var(--navy); font-weight:700 }

/* ═══════════ BATCH 2 · BOOKING DETAIL ═══════════ */

.bkdpane{ position:absolute; inset:0; z-index:96; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.bkdpane.open{ transform:none; opacity:1; pointer-events:auto }
.bkdpane .extop{ background:var(--navy); border-radius:0 }
.bkdpane .exbody{ padding:16px 18px calc(var(--sab) + 34px) }

.bkdsec{ margin-top:18px }
.bkdk{ display:block; font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 9px 4px }
.bkdcard{ padding:16px; border-radius:22px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }

/* ---- status banner ---- */
.bkdst{ position:relative; overflow:hidden; padding:17px; border-radius:24px; color:#fff;
  background:linear-gradient(135deg,#001233,#0a3272 60%,#12406f);
  box-shadow:0 22px 40px -22px rgba(0,18,51,.8) }
.bkdst.warn{ background:linear-gradient(135deg,#3d0f0a,#7a2018 62%,#a2311f) }
.bkdst.done{ background:linear-gradient(135deg,#08281f,#0d5c46 62%,#0d9b74) }
.bkdst.dead{ background:linear-gradient(135deg,#20293a,#39445c) }
.bkdst .gl{ position:absolute; right:-60px; top:-70px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.3),transparent 66%) }
.bkdst .r1{ position:relative; z-index:2; display:flex; align-items:center; gap:8px }
.bkdst .r1 b{ font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold2) }
.bkdst .dt1{ width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(243,197,24,.22) }
.bkdst .big1{ position:relative; z-index:2; display:block; font-family:var(--n); font-size:30px;
  font-weight:700; letter-spacing:-.035em; line-height:1; margin-top:13px }
.bkdst .sub1{ position:relative; z-index:2; display:block; font-size:11.5px; color:#a9bfe6; margin-top:9px }

/* ---- who ---- */
.bkdwho{ display:flex; align-items:center; gap:12px }
.bkdwho .av7{ position:relative; width:56px; height:56px; flex:none; border-radius:19px;
  overflow:hidden; background:var(--wash2) }
.bkdwho .t7{ flex:1; min-width:0 }
.bkdwho .t7 b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.035em }
.bkdwho .t7 span{ display:block; font-size:11.5px; color:var(--mute); margin-top:3px }
.bkdwho .rt7{ flex:none; text-align:right; font-family:var(--n); font-size:13px; font-weight:700 }

/* ---- contact, locked and unlocked ---- */
.bkdlock{ position:relative; padding:18px 16px; border-radius:22px; text-align:center;
  background:var(--wash); border:1px dashed var(--line2) }
.bkdlock .li{ width:40px; height:40px; margin:0 auto 11px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; background:var(--paper); color:var(--gold3) }
.bkdlock b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.025em }
.bkdlock span{ display:block; font-size:11.5px; color:var(--mute); margin-top:6px; line-height:1.55 }
.bkdc{ display:flex; align-items:center; gap:12px; padding:12px 0 }
.bkdc + .bkdc{ border-top:1px solid var(--line) }
.bkdc .ci{ width:34px; height:34px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.bkdc .ct{ flex:1; min-width:0 }
.bkdc .ct b{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint) }
.bkdc .ct span{ display:block; font-size:13px; font-weight:600; margin-top:3px; word-break:break-word }
.bkdc .cgo{ flex:none; width:34px; height:34px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--navy); color:#fff }

/* ---- map ---- */
.bkdmap{ position:relative; height:132px; border-radius:18px; overflow:hidden; margin-bottom:13px;
  background:#e8eefa; border:1px solid var(--line) }
.bkdmap svg{ display:block; width:100%; height:100% }
.bkdmap .mtag{ position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:10px;
  background:rgba(0,18,51,.86); color:#fff; font-family:var(--n); font-size:8px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase }

/* ---- refund ladder ---- */
.bkdlad{ border-radius:18px; overflow:hidden; border:1px solid var(--line) }
.bkdband{ display:flex; align-items:center; gap:12px; padding:12px 13px; background:var(--paper);
  border-bottom:1px solid var(--line); transition:background .2s }
.bkdband:last-child{ border-bottom:0 }
.bkdband.on{ background:linear-gradient(90deg,rgba(243,197,24,.16),rgba(243,197,24,.05)) }
.bkdband.gone{ opacity:.42 }
.bkdband .bp{ width:48px; flex:none; text-align:center; padding:6px 0; border-radius:10px;
  font-family:var(--n); font-size:10px; font-weight:700 }
.bkdband.on .bp{ background:var(--navy); color:#fff }
.bkdband .bt{ flex:1; min-width:0 }
.bkdband .bt b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.02em }
.bkdband .bt span{ display:block; font-size:10.5px; color:var(--mute); margin-top:2px }
.bkdband .bv{ flex:none; font-size:13.5px; font-weight:800; letter-spacing:-.025em }
.bkdband.on .bv{ color:var(--gold3) }
.bkddrop{ margin-top:11px; padding:12px 14px; border-radius:16px; background:var(--navy);
  color:#fff; display:flex; align-items:center; gap:10px }
.bkddrop .dl{ flex:1; font-size:11.5px; line-height:1.5; color:#c3d4f0 }
.bkddrop .dl b{ color:#fff; font-weight:700 }
.bkddrop .dv{ font-family:var(--n); font-size:14px; font-weight:700; color:var(--gold2); flex:none }

/* ---- timeline ---- */
.bkdtl{ position:relative; padding-left:6px }
.bkdev{ position:relative; display:flex; gap:13px; padding-bottom:17px }
.bkdev:last-child{ padding-bottom:0 }
.bkdev::before{ content:''; position:absolute; left:6px; top:15px; bottom:-2px; width:1.5px;
  background:var(--line2) }
.bkdev:last-child::before{ display:none }
.bkdev .ed{ position:relative; z-index:2; width:13px; height:13px; flex:none; margin-top:3px;
  border-radius:50%; background:var(--wash2); border:2.5px solid var(--paper);
  box-shadow:0 0 0 1.5px var(--line2) }
.bkdev.hot .ed{ background:var(--gold); box-shadow:0 0 0 1.5px var(--gold) }
.bkdev .et{ flex:1; min-width:0 }
.bkdev .et b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.02em }
.bkdev .et span{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.bkdev .ew{ flex:none; font-family:var(--n); font-size:8.5px; color:var(--faint); white-space:nowrap }

/* ---- money rows + footer ---- */
.bkdrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0;
  font-size:12.5px }
.bkdrow + .bkdrow{ border-top:1px solid var(--line) }
.bkdrow span{ color:var(--mute) }
.bkdrow b{ font-weight:800; letter-spacing:-.02em }
.bkdrow.tot b{ font-size:15px }
.bkdfoot{ display:flex; gap:10px; margin-top:20px }
.bkdfoot button{ flex:1; height:50px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; gap:8px; font-size:13.5px; font-weight:800 }
.bkdfoot .prim{ color:#2b1d00; background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 14px 26px -14px rgba(243,197,24,.7) }
.bkdfoot .prim[disabled]{ background:var(--wash2); color:var(--faint); box-shadow:none }
.bkdfoot .canc{ flex:none; width:50px; background:#fdeaea; color:#c0392b }
.bkdnote{ margin-top:13px; padding:12px 14px; border-radius:16px; background:var(--wash);
  font-size:11.5px; line-height:1.6; color:var(--mute) }
.bkdnote b{ color:var(--navy); font-weight:700 }
.bkdcopy{ display:flex; align-items:center; gap:10px; margin-top:11px; padding:11px 13px;
  border-radius:14px; background:var(--wash); font-family:var(--n); font-size:10px;
  color:var(--navy); word-break:break-all }
.bkdcopy button{ flex:none; padding:6px 10px; border-radius:9px; background:var(--navy); color:#fff;
  font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.1em }

.bkdsw{ position:relative; width:42px; height:24px; flex:none; border-radius:99px;
  background:var(--wash2); transition:background .24s; cursor:pointer }
.bkdsw i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--paper); box-shadow:0 2px 6px rgba(0,18,51,.28); transition:transform .24s }
.bkdsw.on{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.bkdsw.on i{ transform:translateX(18px) }

/* ---- demo / Xpert-side panel ---- */
.devrow{ display:flex; gap:7px }
.devrow button{ flex:1; height:38px; border-radius:12px; background:var(--wash);
  font-family:var(--n); font-size:9px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy) }
.devrow button.wide{ background:var(--navy); color:#fff }
.devbk{ display:flex; align-items:center; gap:8px; padding:11px 12px; margin-top:8px;
  border-radius:15px; background:var(--paper); border:1px solid var(--line) }
.devbk .dbt{ flex:1; min-width:0 }
.devbk .dbt b{ display:block; font-size:13px; font-weight:700; letter-spacing:-.02em }
.devbk .dbt span{ display:block; font-family:var(--n); font-size:9px; color:var(--mute); margin-top:2px }
.devbk button{ flex:none; padding:8px 11px; border-radius:11px; font-family:var(--n);
  font-size:8.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase }
.devbk .acc{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.devbk .rej{ background:#fdeaea; color:#c0392b }

/* ---- cancel sheet ---- */
.cxq{ display:flex; align-items:flex-start; gap:14px; margin-top:18px; padding:16px;
  border-radius:20px; background:var(--navy); color:#fff }
.cxqr{ flex:1; min-width:0 }
.cxqr.right{ flex:none; text-align:right }
.cxl{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#8ea6d4 }
.cxbig{ display:block; font-size:30px; font-weight:800; letter-spacing:-.04em; margin-top:8px;
  color:var(--gold2) }
.cxsm{ display:block; font-size:17px; font-weight:800; letter-spacing:-.03em; margin-top:11px;
  color:#c3d4f0 }
.cxband{ margin-top:11px; padding:12px 14px; border-radius:16px; background:var(--wash) }
.cxband b{ display:block; font-size:13px; font-weight:800; letter-spacing:-.02em }
.cxband span{ display:block; font-size:11px; color:var(--mute); margin-top:3px }
.cxband.full b{ color:#0a7d5d } .cxband.part b{ color:var(--gold3) } .cxband.none b{ color:#c0392b }
.cxdrop{ margin-top:10px; padding:12px 14px; border-radius:16px;
  background:rgba(243,197,24,.15); font-size:11.5px; line-height:1.55; color:var(--navy) }
.cxdrop.final{ background:#fdeaea; color:#8e2a1f }
.cxdrop b{ font-weight:800 }
.cxund{ display:flex; gap:11px; margin-top:15px; padding:13px 14px; border-radius:16px;
  background:var(--paper); border:1px solid var(--line); cursor:pointer; text-align:left }
.cxbox{ width:22px; height:22px; flex:none; border-radius:7px; background:var(--wash2);
  display:flex; align-items:center; justify-content:center; color:transparent; transition:.2s }
.cxbox.on{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.cxtx{ flex:1; font-size:11.5px; line-height:1.6; color:var(--mute) }
.cxtx b{ color:var(--navy); font-weight:800 }
.cxact{ display:flex; gap:10px; margin-top:15px }
.cxact button{ flex:1; height:50px; border-radius:16px; font-size:13.5px; font-weight:800 }
.cxact .keep{ background:var(--wash); color:var(--navy) }
.cxact .go{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00;
  box-shadow:0 14px 26px -14px rgba(243,197,24,.7) }
.cxact .go[disabled]{ background:var(--wash2); color:var(--faint); box-shadow:none }
.cxfine{ margin-top:12px; text-align:center; font-size:10.5px; color:var(--faint) }
.cxfine .lk{ color:var(--gold3); font-weight:700; text-decoration:underline }

/* ---- receipt ---- */
.rcp{ margin-top:16px; padding:6px 15px; border-radius:20px; background:var(--paper);
  border:1px solid var(--line) }
.rcr{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0;
  font-size:12.5px; color:var(--mute) }
.rcr + .rcr{ border-top:1px solid var(--line) }
.rcr b{ color:var(--navy); font-weight:800; letter-spacing:-.02em }
.rcr b.pos{ color:#0a7d5d } .rcr b.neg{ color:#c0392b }
.rcr.tot b{ font-size:16px }

/* ═══════════ BATCH 5 · LIVE SESSION ═══════════ */
.lspane{ position:absolute; inset:0; z-index:97; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.lspane.open{ transform:none; opacity:1; pointer-events:auto }
.lspane .extop{ background:var(--navy); border-radius:0 }
.lspane .exbody{ padding:16px 18px calc(var(--sab) + 34px) }

.lsmap{ position:relative; height:120px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:#e3eaf7 }
.lsmap.big{ height:190px }
.lsmap svg{ display:block; width:100%; height:100% }
.lsleg{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px; background:rgba(0,18,51,.86); color:#fff;
  font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.lsleg i{ width:7px; height:7px; border-radius:50%; display:inline-block }
.lsleg .d1{ background:#0d9b74 } .lsleg .d2{ background:var(--gold); margin-left:5px }

.lshead{ margin-top:15px; padding:15px 16px; border-radius:20px; background:var(--navy); color:#fff }
.lshead.ok{ background:linear-gradient(135deg,#08281f,#0d5c46 70%,#0d9b74) }
.lshead b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.035em }
.lshead span{ display:block; font-family:var(--n); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold2); margin-top:7px }

.lscode{ margin-top:14px; padding:14px 16px; border-radius:18px; background:var(--wash); text-align:center }
.lscode .ck{ display:block; font-size:14px; font-weight:800; letter-spacing:-.025em }
.lscode .cv{ display:block; font-size:11.5px; color:var(--mute); margin-top:5px }

.lskey{ margin-top:16px }
.lsdots{ display:flex; justify-content:center; gap:13px; margin-bottom:16px }
.lsdots i{ width:15px; height:15px; border-radius:50%; background:var(--wash2); transition:.2s }
.lsdots i.f{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); transform:scale(1.12) }
.lsgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.lsgrid button{ height:52px; border-radius:16px; background:var(--paper); border:1px solid var(--line);
  font-family:var(--n); font-size:20px; font-weight:700; color:var(--navy) }
.lsgrid button:active{ background:var(--wash) }
.lsgrid button.gh{ background:var(--wash2); font-size:10px; letter-spacing:.08em; text-transform:uppercase }
.lserr{ min-height:17px; margin-top:11px; text-align:center; font-size:11.5px;
  font-weight:700; color:#c0392b }
.lsgo{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px;
  margin-top:14px; border-radius:17px; font-size:14px; font-weight:800; color:#2b1d00;
  background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 14px 26px -14px rgba(243,197,24,.7) }
.lsgo.off,.lsgo[disabled]{ background:var(--wash2); color:var(--faint); box-shadow:none }
.lsback{ width:100%; height:46px; margin-top:10px; border-radius:15px; background:var(--wash);
  color:var(--navy); font-size:13px; font-weight:700 }
.lssos{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:44px;
  margin-top:12px; border-radius:15px; background:#fdeaea; color:#c0392b;
  font-size:12.5px; font-weight:800 }

.lstimer{ padding:20px 16px; border-radius:24px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#001233,#0a3272 62%,#12406f);
  box-shadow:0 22px 40px -22px rgba(0,18,51,.8); margin-bottom:15px }
.lstimer .tl{ display:block; font-family:var(--n); font-size:8px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold2) }
.lstimer .tv{ display:block; font-family:var(--n); font-size:42px; font-weight:700;
  letter-spacing:-.04em; line-height:1; margin-top:11px }
.lstimer .ts{ display:block; font-size:11px; color:#a9bfe6; margin-top:10px }

.lsprog{ display:flex; align-items:center; gap:11px; margin-bottom:11px }
.lspb{ flex:1; height:6px; border-radius:4px; background:var(--wash2); overflow:hidden }
.lspb i{ display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#ffe27a,#e2a406); transition:width .3s }
.lsprog span{ font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); flex:none }
.lstasks{ border-radius:20px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.lstask{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; text-align:left;
  background:transparent; border-bottom:1px solid var(--line); transition:background .18s }
.lstask:last-child{ border-bottom:0 }
.lstask .tk{ width:26px; height:26px; flex:none; border-radius:9px; background:var(--wash2);
  display:flex; align-items:center; justify-content:center; color:transparent; transition:.2s }
.lstask.on .tk{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.lstask .tt{ flex:1; min-width:0 }
.lstask .tt b{ display:block; font-size:13.5px; font-weight:700; letter-spacing:-.02em }
.lstask .tt span{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.lstask.on .tt b{ color:var(--mute); text-decoration:line-through }
.lstask .tw{ flex:none; font-family:var(--n); font-size:8.5px; color:var(--faint) }

.lsdone{ padding:28px 20px; border-radius:26px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#08281f,#0d5c46 62%,#0d9b74);
  box-shadow:0 22px 40px -22px rgba(13,155,116,.7) }
.lsdone .di2{ width:58px; height:58px; margin:0 auto 14px; border-radius:20px; display:flex;
  align-items:center; justify-content:center; background:rgba(255,255,255,.16) }
.lsdone b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.04em }
.lsdone span{ display:block; font-size:12px; color:#b6e4d4; margin-top:8px }
.lsstars{ display:flex; justify-content:center; gap:10px; padding:6px 0 }
.lsstars button{ width:50px; height:50px; border-radius:16px; background:var(--paper);
  border:1px solid var(--line); color:var(--wash2); display:flex; align-items:center;
  justify-content:center; transition:.18s }
.lsstars button:active{ background:var(--wash) }

/* ---- live session banner ---- */
.lvban{ position:relative; overflow:hidden; padding:16px; border-radius:24px; color:#fff;
  margin-bottom:16px; background:linear-gradient(135deg,#3d0f0a,#7a2018 58%,#a2311f);
  box-shadow:0 22px 40px -22px rgba(162,49,31,.8) }
.lvban.pz{ background:linear-gradient(135deg,#20293a,#39445c) }
.lvglow{ position:absolute; right:-56px; top:-64px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 66%) }
.lvtop{ position:relative; z-index:2; display:flex; align-items:center; gap:7px }
.lvdot{ width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.26); animation:lvp 1.6s ease-in-out infinite }
.lvban.pz .lvdot{ animation:none; background:#c3d4f0 }
@keyframes lvp{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.7); opacity:.55 } }
.lvk{ font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase }
.lvpct{ margin-left:auto; font-family:var(--n); font-size:8.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72) }
.lvmid{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; margin-top:14px }
.lvav{ position:relative; width:46px; height:46px; flex:none; border-radius:15px; overflow:hidden;
  background:rgba(255,255,255,.14) }
.lvnm{ flex:1; min-width:0 }
.lvnm b{ display:block; font-size:15.5px; font-weight:800; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lvnm span{ display:block; font-size:11px; color:rgba(255,255,255,.7); margin-top:2px }
.lvw{ flex:none; font-family:var(--n); font-size:25px; font-weight:700; letter-spacing:-.035em }
.lvw.over{ color:#ffd8a8 }
.lvbar{ position:relative; z-index:2; height:4px; border-radius:3px; margin-top:14px;
  background:rgba(255,255,255,.22); overflow:hidden }
.lvbar i{ display:block; height:100%; border-radius:3px; background:#fff; transition:width .4s }
.lvgo{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:8px; width:100%; height:44px; margin-top:14px; border-radius:14px;
  background:rgba(255,255,255,.15); color:#fff; font-size:13px; font-weight:800 }
.bkgseg .lvseg[hidden]{ display:none }
.bkgseg .lvseg.on{ background:#a2311f }

/* ---- session console ---- */
.lswatch{ position:relative; height:214px; border-radius:26px; color:#ff8a6b;
  background:linear-gradient(135deg,#3d0f0a,#7a2018 58%,#a2311f);
  box-shadow:0 22px 40px -22px rgba(162,49,31,.8); margin-bottom:13px }
.lswatch.pz{ color:#9fb6de; background:linear-gradient(135deg,#20293a,#39445c) }
.lswatch.ot{ color:#ffd8a8 }
.lsring{ position:absolute; inset:0; margin:auto; width:174px; height:174px; top:20px }
.lsring .rg{ transition:stroke-dashoffset .5s linear }
.lswin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:#fff }
.lswin .wk{ font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.66) }
.lswin .wv{ font-family:var(--n); font-size:42px; font-weight:700; letter-spacing:-.045em;
  line-height:1; margin-top:9px }
.lswin .ws{ font-family:var(--n); font-size:9px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:10px }
.lsctl{ display:flex; gap:8px; margin-bottom:14px }
.lsctl button{ flex:1; height:44px; border-radius:15px; display:flex; align-items:center;
  justify-content:center; gap:7px; background:var(--paper); border:1px solid var(--line);
  font-size:12.5px; font-weight:800; color:var(--navy) }
.lsctl button.go{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  border-color:transparent; color:#2b1d00 }
.lsctl button:active{ background:var(--wash) }
.lsstats{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px }
.lsst{ padding:12px 13px; border-radius:16px; background:var(--paper); border:1px solid var(--line) }
.lsst span{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint) }
.lsst b{ display:block; font-family:var(--n); font-size:15px; font-weight:700;
  letter-spacing:-.02em; margin-top:6px }

/* ═══════════ LOCATION PICKER ═══════════ */
.locpn{ max-height:88vh; display:flex; flex-direction:column }
.lochd{ display:flex; align-items:flex-start; gap:12px }
.lochd h4{ flex:1 }
.locx{ flex:none; width:32px; height:32px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--mute) }

.locfld{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:0 13px; height:48px;
  border-radius:16px; background:var(--wash); border:1px solid var(--line); color:var(--faint) }
.locfld input{ flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family:var(--f); font-size:14px; font-weight:600; color:var(--navy) }
.locfld input::placeholder{ color:var(--faint); font-weight:500 }
.locclr{ flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--wash2); color:var(--mute) }

.locgps{ display:flex; align-items:center; gap:11px; width:100%; margin-top:11px; padding:13px 14px;
  border-radius:16px; text-align:left; color:#fff;
  background:linear-gradient(135deg,var(--navy),#0a3272) }
.locgps > span{ flex:1; min-width:0 }
.locgps b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.02em }
.locgps span span{ display:block; font-family:var(--n); font-size:8.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#8ea6d4; margin-top:4px }

#locBody{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; touch-action:pan-y; margin:0 -18px; padding:4px 18px 2px }
#locBody::-webkit-scrollbar{ display:none }

.locgrp{ margin-top:18px }
.lock{ display:block; font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 9px 4px }
.locrow{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; text-align:left;
  border-radius:15px; background:var(--paper); border:1px solid var(--line); margin-bottom:7px;
  transition:background .16s }
.locrow:active{ background:var(--wash) }
.loci{ width:34px; height:34px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--navy) }
.loci.city{ background:rgba(47,111,240,.1); color:var(--navy3) }
.loci.dist{ background:rgba(243,197,24,.18); color:var(--gold3) }
.loci.state{ background:rgba(13,155,116,.12); color:#0a7d5d }
.loct{ flex:1; min-width:0 }
.loct b{ display:block; font-size:14px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.loct b em{ font-style:normal; background:rgba(243,197,24,.34); border-radius:3px; padding:0 1px }
.loct span{ display:block; font-size:11px; color:var(--mute); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.locm{ flex:none; font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap }

.locchips{ display:flex; flex-wrap:wrap; gap:7px }
.locchips button{ display:inline-flex; align-items:center; gap:5px; padding:8px 12px; border-radius:99px;
  background:var(--paper); border:1px solid var(--line); font-size:12px; font-weight:700;
  color:var(--navy) }
.locchips button:active{ background:var(--wash) }

.locempty{ padding:40px 20px; text-align:center; color:var(--faint) }
.locempty b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em;
  color:var(--navy); margin-top:12px }
.locempty span{ display:block; font-size:11.5px; color:var(--mute); margin-top:6px; line-height:1.55 }
.locnote{ margin:18px 0 4px; padding:12px 14px; border-radius:16px; background:var(--wash);
  font-size:11.5px; line-height:1.6; color:var(--mute) }
.locnote b{ color:var(--navy); font-weight:700 }

/* a location hit inside the main search list */
.sug .ic4.g3{ background:rgba(243,197,24,.18); color:var(--gold3) }

.srchloc{ display:flex; align-items:center; gap:12px; width:100%; margin-bottom:4px; padding:13px 14px;
  border-radius:18px; text-align:left; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh2) }
.srchloc:active{ background:var(--wash) }
.srchloc .sli{ width:36px; height:36px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00 }
.srchloc .slt{ flex:1; min-width:0 }
.srchloc .slt b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:-.025em }
.srchloc .slt b i{ font-style:normal; color:var(--gold3) }
.srchloc .slt span{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.srchloc .slc{ flex:none; padding:6px 11px; border-radius:10px; background:var(--navy); color:#fff;
  font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }

/* ---- filter dropdowns ---- */
.fsels{ display:grid; gap:10px; margin-top:4px }
.fsel{ display:block }
.fsel.off{ opacity:.55 }
.fsl{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px }
.fsw{ position:relative; display:block }
.fsw select{ width:100%; height:46px; padding:0 38px 0 13px; border-radius:14px;
  background:var(--paper); border:1px solid var(--line); color:var(--navy);
  font-family:var(--f); font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  -webkit-appearance:none; appearance:none; outline:none }
.fsw select:focus{ border-color:var(--navy3); box-shadow:0 0 0 3px rgba(47,111,240,.12) }
.fsw select:disabled{ background:var(--wash2); color:var(--faint) }
.fsc{ position:absolute; right:14px; top:50%; width:9px; height:9px; pointer-events:none;
  border-right:2px solid var(--mute); border-bottom:2px solid var(--mute); border-radius:1px;
  transform:translateY(-70%) rotate(45deg) }
.fsh{ display:block; font-size:10.5px; color:var(--faint); margin-top:6px }
.fclr{ font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); cursor:pointer }
.fgeon{ margin-top:12px; padding:11px 13px; border-radius:14px; background:var(--wash);
  font-size:11.5px; line-height:1.55; color:var(--mute) }
.fgeon.on{ background:rgba(243,197,24,.15); color:var(--navy) }
.fgeon b{ font-weight:800 }

/* ═══════════ SIMPLIFIED SEARCH ═══════════ */
.srch .top3{ padding-bottom:12px }
#srchBody{ padding:18px 18px calc(var(--sab) + 28px) }

/* what are you looking for */
.skind{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.skind button{ display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding:15px 14px; border-radius:20px; text-align:left; background:var(--paper);
  border:1.5px solid var(--line); color:var(--mute); transition:.2s }
.skind button.on{ background:linear-gradient(150deg,var(--navy),#0a3272); border-color:transparent;
  color:#fff; box-shadow:0 16px 30px -18px rgba(0,18,51,.85) }
.skind button b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.03em; color:var(--navy) }
.skind button.on b{ color:#fff }
.skind button i{ display:block; font-style:normal; font-size:10.5px; margin-top:3px; color:var(--faint) }
.skind button.on i{ color:#a9bfe6 }

/* where */
.swhere{ margin-top:22px }
.swk{ display:block; font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 10px 4px }
.srow{ display:flex; align-items:center; gap:12px; width:100%; height:54px; padding:0 14px;
  border-radius:16px; background:var(--paper); border:1px solid var(--line); margin-bottom:9px;
  text-align:left; transition:.18s }
.srow:active{ background:var(--wash) }
.srow.off{ opacity:.5 }
.srow.set{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,18,51,.06) }
.srl{ flex:none; width:62px; font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint) }
.srv{ flex:1; min-width:0; font-size:14.5px; font-weight:700; letter-spacing:-.025em; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.srow.set .srv{ color:var(--navy) }
.src{ flex:none; color:var(--faint) }

.sgps{ display:flex; align-items:center; gap:11px; width:100%; height:50px; padding:0 15px;
  margin-top:4px; border-radius:16px; background:var(--wash); color:var(--navy);
  font-size:13.5px; font-weight:700 }
.sgps span{ flex:1; text-align:left }
.sgps:active{ background:var(--wash2) }

.ssum{ margin-top:18px; padding:13px 15px; border-radius:16px;
  background:rgba(243,197,24,.16); font-size:12.5px; line-height:1.55; color:var(--navy) }
.ssum b{ font-weight:800 }
.ssum.off{ background:var(--wash); color:var(--mute) }

.sgo{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:54px;
  margin-top:16px; border-radius:17px; font-size:15px; font-weight:800; letter-spacing:-.02em;
  color:#2b1d00; background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 16px 30px -16px rgba(243,197,24,.75) }
.sgo:active{ transform:translateY(1px) }
.sclr{ width:100%; height:44px; margin-top:10px; border-radius:14px; background:transparent;
  color:var(--mute); font-size:12.5px; font-weight:700 }

/* ═══════════ THEMED PICKER ═══════════ */
.pickpn{ max-height:86vh; display:flex; flex-direction:column }
.pickhd{ display:flex; align-items:center; gap:12px }
.pickhd h4{ flex:1 }
.pickx{ flex:none; width:32px; height:32px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; background:var(--wash); color:var(--mute) }
.pickfld{ display:flex; align-items:center; gap:9px; margin-top:13px; padding:0 13px; height:46px;
  border-radius:15px; background:var(--wash); border:1px solid var(--line); color:var(--faint) }
.pickfld input{ flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family:var(--f); font-size:14px; font-weight:600; color:var(--navy) }
.pickfld input::placeholder{ color:var(--faint); font-weight:500 }
.picklist{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; touch-action:pan-y; margin:12px -18px 0; padding:0 18px 6px }
.picklist::-webkit-scrollbar{ display:none }
.pickrow{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px; text-align:left;
  border-radius:14px; background:var(--paper); border:1px solid var(--line); margin-bottom:7px;
  font-size:14px; font-weight:600; color:var(--navy); transition:.16s }
.pickrow span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pickrow em{ font-style:normal; background:rgba(243,197,24,.36); border-radius:3px; padding:0 1px }
.pickrow i{ flex:none; display:flex; color:var(--gold3) }
.pickrow:active{ background:var(--wash) }
.pickrow.on{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:800 }
.pickrow.on i{ color:var(--gold) }
.pickrow.any{ background:var(--wash); font-weight:700; color:var(--mute) }
.pickrow.any.on{ background:var(--navy); color:#fff }
.pickempty{ padding:34px 18px; text-align:center; font-size:12.5px; color:var(--faint) }

.srchttl{ flex:1; min-width:0 }
.srchttl b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.035em; color:#fff }
.srchttl span{ display:block; font-family:var(--n); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8ea6d4; margin-top:4px }

/* ---- Where & what: the primary group, so it gets a card of its own ---- */
.fgrp.geo{ padding:15px 14px 14px; border-radius:20px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.fgrp.geo .fl2{ align-items:center; margin-bottom:13px }
.fgrp.geo .fl2 b{ position:relative; padding-left:11px; font-size:14.5px; color:var(--navy) }
.fgrp.geo .fl2 b::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:3px;
  border-radius:2px; background:linear-gradient(180deg,#ffe27a,#e2a406) }

/* a field you can act on */
.fsel{ display:flex; align-items:center; gap:11px; width:100%; min-height:54px; padding:9px 12px 9px 13px;
  border-radius:15px; background:var(--paper); border:1.5px solid var(--line2); text-align:left;
  margin-bottom:9px; transition:.18s }
.fsel:last-of-type{ margin-bottom:0 }
.fsel:active{ background:var(--wash); border-color:var(--navy) }
.fsl{ flex:none; width:70px; margin:0; font-family:var(--n); font-size:7.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.fsv{ flex:1; min-width:0; font-size:14px; font-weight:700; letter-spacing:-.025em; color:var(--navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fsc{ position:static; flex:none; width:26px; height:26px; border:0; border-radius:50%;
  background:var(--wash); color:var(--navy); display:flex; align-items:center; justify-content:center;
  transform:none }
.fsc::after{ content:''; width:7px; height:7px; border-right:2.2px solid currentColor;
  border-bottom:2.2px solid currentColor; border-radius:1px; transform:rotate(-45deg);
  margin-left:-2px }

/* a field you have already answered */
.fsel.set{ border-color:var(--navy); background:#fbfcff;
  box-shadow:0 0 0 3px rgba(0,18,51,.05) }
.fsel.set .fsl{ color:var(--gold3) }
.fsel.set .fsv{ font-weight:800 }
.fsel.set .fsc{ background:var(--navy); color:#fff }

/* a field that is not open yet — unmistakably different, not just faded */
.fsel.off{ opacity:1; background:var(--wash); border-style:dashed; border-color:var(--line2) }
.fsel.off .fsl{ color:var(--faint) }
.fsel.off .fsv{ color:var(--faint); font-weight:600 }
.fsel.off .fsc{ background:transparent; color:var(--faint) }
.fsel.off .fsc::after{ border-width:1.6px }

.fclr{ font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); cursor:pointer }
.fgeon{ margin-top:13px; padding:12px 13px; border-radius:14px; background:var(--wash);
  font-size:11.5px; line-height:1.55; color:var(--mute) }
.fgeon.on{ background:rgba(243,197,24,.18); color:var(--navy) }
.fgeon b{ font-weight:800 }

/* ---- the same treatment on the home search rows ---- */
.swk{ display:flex; align-items:center; gap:9px; font-family:var(--n); font-size:8.5px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  margin:0 0 11px 2px }
.swk::before{ content:''; width:3px; height:13px; border-radius:2px;
  background:linear-gradient(180deg,#ffe27a,#e2a406) }
.srow{ display:flex; align-items:center; gap:12px; width:100%; height:56px; padding:0 12px 0 14px;
  border-radius:16px; background:var(--paper); border:1.5px solid var(--line2); margin-bottom:9px;
  text-align:left; transition:.18s }
.srow:active{ background:var(--wash); border-color:var(--navy) }
.srl{ flex:none; width:64px; font-family:var(--n); font-size:8px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.srv{ flex:1; min-width:0; font-size:15px; font-weight:700; letter-spacing:-.025em; color:var(--navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.src{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--wash);
  color:var(--navy); display:flex; align-items:center; justify-content:center }
.srow.set{ border-color:var(--navy); background:#fbfcff; box-shadow:0 0 0 3px rgba(0,18,51,.05) }
.srow.set .srl{ color:var(--gold3) }
.srow.set .srv{ font-weight:800 }
.srow.set .src{ background:var(--navy); color:#fff }
.srow.off{ opacity:1; background:var(--wash); border-style:dashed }
.srow.off .srl{ color:var(--faint) }
.srow.off .srv{ color:var(--faint); font-weight:600 }
.srow.off .src{ background:transparent; color:var(--faint) }

/* ═══════════ PROFILE SUB-SCREENS ═══════════ */
.subpane2{ position:absolute; inset:0; z-index:96; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#f6f9ff,#eef3fc 40%,#e9eff9);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .44s cubic-bezier(.2,.9,.25,1), opacity .3s }
.subpane2.open{ transform:none; opacity:1; pointer-events:auto }
.subpane2 .extop{ background:var(--navy); border-radius:0 }
.subpane2 .exbody{ padding:16px 18px calc(var(--sab) + 34px) }

.subcta{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px;
  margin-top:16px; border-radius:16px; background:var(--navy); color:#fff;
  font-size:14px; font-weight:800; letter-spacing:-.02em }
.subcta.gold{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406); color:#2b1d00;
  box-shadow:0 14px 26px -14px rgba(243,197,24,.7) }
.subcta:active{ transform:translateY(1px) }

/* saved */
.svrow{ display:flex; align-items:center; gap:12px; padding:12px 13px; margin-bottom:9px;
  border-radius:18px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2) }
.svav{ position:relative; width:52px; height:52px; flex:none; border-radius:17px; overflow:hidden;
  background:var(--wash2) }
.svt{ flex:1; min-width:0 }
.svt b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.svt > span{ display:block; font-size:11px; color:var(--mute); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.svm{ font-family:var(--n); font-size:9px; font-weight:700; letter-spacing:.05em;
  color:var(--gold3); margin-top:5px }
.svx{ flex:none; width:38px; height:38px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:#fdeaea; color:#c0392b }

/* addresses */
.adrow{ padding:15px; margin-bottom:11px; border-radius:20px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.adrow.def{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,18,51,.05) }
.adtop{ display:flex; align-items:center; gap:9px; margin-bottom:9px }
.adlbl{ flex:1; font-size:14.5px; font-weight:800; letter-spacing:-.03em }
.addef{ padding:5px 9px; border-radius:9px; background:var(--navy); color:#fff;
  font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.adset{ padding:5px 9px; border-radius:9px; background:var(--wash); color:var(--blue);
  font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.adln{ font-size:13.5px; font-weight:700; letter-spacing:-.02em }
.adar{ font-size:12px; color:var(--mute); margin-top:3px }
.adnote{ display:flex; align-items:center; gap:6px; margin-top:9px; padding:8px 10px;
  border-radius:11px; background:var(--wash); font-size:11px; color:var(--mute) }
.adact{ display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line) }
.adact button{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:38px;
  border-radius:12px; background:var(--wash); color:var(--navy); font-size:12px; font-weight:700 }
.adact .del{ background:#fdeaea; color:#c0392b }

/* personal details */
.meid{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:22px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh2) }
.meid .met{ flex:1; min-width:0 }
.meid .met b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.03em }
.meid .met span{ display:block; font-family:var(--n); font-size:8px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-top:5px }

/* notification toggles */
.ntrow{ display:flex; align-items:center; gap:12px; padding:13px 15px;
  border-bottom:1px solid var(--line) }
.ntrow:last-child{ border-bottom:0 }
.ntt{ flex:1; min-width:0 }
.ntt b{ display:block; font-size:13.5px; font-weight:700; letter-spacing:-.02em }
.ntt span{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.ntlock{ flex:none; font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint) }
.ntrow.lock{ background:var(--wash) }

/* refer */
.refcard{ position:relative; overflow:hidden; padding:20px 18px; border-radius:24px; color:#fff;
  background:linear-gradient(135deg,#001233,#0a3272 56%,#3a2c05);
  box-shadow:0 22px 40px -22px rgba(0,18,51,.8) }
.refcard .gl{ position:absolute; right:-56px; top:-66px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,197,24,.34),transparent 66%) }
.refk{ position:relative; z-index:2; display:block; font-family:var(--n); font-size:8px;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold2) }
.refc{ position:relative; z-index:2; display:block; font-family:var(--n); font-size:23px;
  font-weight:700; letter-spacing:-.02em; margin-top:11px }
.refbtn{ position:relative; z-index:2; display:flex; gap:9px; margin-top:16px }
.refbtn button{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; height:44px;
  border-radius:14px; background:rgba(255,255,255,.15); color:#fff; font-size:13px; font-weight:800 }
.refbtn button:first-child{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  color:#2b1d00 }
.refstat{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px }
.refstat div{ padding:13px 10px; border-radius:16px; background:var(--paper);
  border:1px solid var(--line); text-align:center }
.refstat b{ display:block; font-family:var(--n); font-size:19px; font-weight:700;
  letter-spacing:-.03em }
.refstat span{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700;
  letter-spacing:.12em; color:var(--faint); margin-top:5px }

/* partner pitches */
.pitchhd{ padding:16px; border-radius:20px; background:var(--navy); color:#fff; margin-bottom:14px }
.pitchhd b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.035em }
.pitchhd p{ font-size:12px; line-height:1.6; color:#a9bfe6; margin-top:8px }
.chklist{ display:grid; gap:10px }
.chkrow{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--navy) }
.chkrow span{ flex:none; width:24px; height:24px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; background:rgba(13,155,116,.13); color:#0a7d5d }

/* A sheet is always opened from on top of something. Panes reach z 99, so
   sheets must clear that or they open hidden underneath whatever called them. */
.lsheet{ z-index:120 }

/* ═══════════ APPLICATION FORMS ═══════════ */
.fmprog{ padding:14px 15px; border-radius:18px; background:var(--navy); color:#fff }
.fmpt{ display:flex; align-items:baseline; gap:9px }
.fmpt b{ font-family:var(--n); font-size:9px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold2) }
.fmpt span{ font-size:13px; font-weight:700; color:#c3d4f0 }
.fmbar{ display:flex; gap:6px; margin-top:11px }
.fmbar i{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.16) }
.fmbar i.done{ background:var(--gold) }
.fmbar i.now{ background:linear-gradient(90deg,#ffe27a,#e2a406) }
.fmhead{ margin:18px 2px 12px }
.fmhead b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.04em }
.fmhead span{ display:block; font-size:12px; color:var(--mute); margin-top:4px }
.fmcard{ padding:16px 14px 4px; border-radius:22px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.fmf{ margin-bottom:17px }
.fmlab{ display:flex; align-items:baseline; gap:5px; margin:0 0 7px 2px; font-size:12.5px;
  font-weight:800; letter-spacing:-.015em; color:var(--navy) }
.fmreq{ font-style:normal; color:#c0392b }
.fmopt{ font-style:normal; font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-left:2px }
.fmin{ display:block; width:100%; height:48px; padding:0 14px; border-radius:14px; box-sizing:border-box;
  background:#fbfcff; border:1.5px solid var(--line2); outline:none; font-family:var(--f);
  font-size:14.5px; font-weight:600; color:var(--navy); -webkit-appearance:none; appearance:none }
.fmin::placeholder{ color:var(--faint); font-weight:500 }
.fmin:focus{ border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(0,18,51,.07) }
.fmarea{ height:auto; min-height:86px; padding:12px 14px; line-height:1.5; resize:vertical }
.fmpre{ display:flex; align-items:stretch; border-radius:14px; overflow:hidden;
  border:1.5px solid var(--line2); background:#fbfcff }
.fmpre:focus-within{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,18,51,.07) }
.fmpre span{ flex:none; display:flex; align-items:center; padding:0 12px; background:var(--wash);
  font-family:var(--n); font-size:13px; font-weight:700; color:var(--mute);
  border-right:1.5px solid var(--line2) }
.fmpre .fmin{ border:0; border-radius:0; box-shadow:none }
.fmhint{ display:block; font-size:10.5px; color:var(--mute); margin:6px 0 0 2px }
.fmerr{ display:block; font-size:11px; font-weight:700; color:#c0392b; margin:5px 0 0 2px }
.fmerr:empty{ display:none }
.fmf.bad .fmin,.fmf.bad .fmpre,.fmf.bad .fmpick,.fmf.bad .fmdrop{ border-color:#c0392b;
  background:#fffafa }
.fmf.bad .fmchips button{ border-color:rgba(192,57,43,.45) }
.fmchips{ display:flex; flex-wrap:wrap; gap:7px }
.fmchips button{ padding:10px 14px; border-radius:12px; background:#fbfcff; border:1.5px solid var(--line2);
  font-size:13px; font-weight:700; color:var(--navy); transition:.15s }
.fmchips button.on{ background:var(--navy); border-color:var(--navy); color:#fff }
.fmpick{ display:flex; align-items:center; gap:10px; width:100%; height:48px; padding:0 14px;
  border-radius:14px; background:#fbfcff; border:1.5px solid var(--line2); text-align:left }
.fmpick span{ flex:1; min-width:0; font-size:14.5px; font-weight:600; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fmpick.set span{ color:var(--navy); font-weight:700 }
.fmpick.set{ border-color:var(--navy) }
.fmpick i{ flex:none; width:8px; height:8px; border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy); transform:rotate(-45deg); margin-right:3px }
.fmpick.off{ background:var(--wash); border-style:dashed }
.fmpick.off i{ border-color:var(--faint) }
.fmdrop{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px; cursor:pointer;
  background:#fbfcff; border:1.5px dashed var(--line2); position:relative }
.fmdrop input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.fmdi{ width:40px; height:40px; flex:none; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:rgba(243,197,24,.18); color:var(--gold3) }
.fmdt b{ display:block; font-size:13.5px; font-weight:800; color:var(--navy) }
.fmdt span{ display:block; font-size:10.5px; color:var(--mute); margin-top:2px }
.fmfiles{ display:grid; gap:7px; margin-bottom:8px }
.fmfile{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:13px;
  background:rgba(13,155,116,.07); border:1px solid rgba(13,155,116,.25) }
.fmfi{ width:32px; height:32px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:#fff; color:#0a7d5d }
.fmfn{ flex:1; min-width:0 }
.fmfn b{ display:block; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis }
.fmfn span{ display:block; font-family:var(--n); font-size:9px; color:var(--mute); margin-top:2px }
.fmfx{ flex:none; width:28px; height:28px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:#fff; color:#c0392b }
.fmchk{ display:flex; gap:11px; width:100%; padding:13px; border-radius:15px; text-align:left;
  background:var(--wash); border:1.5px solid transparent }
.fmf.bad .fmchk{ border-color:#c0392b; background:#fffafa }
.fmbox{ width:22px; height:22px; flex:none; border-radius:7px; display:flex; align-items:center;
  justify-content:center; background:#fff; border:1.5px solid var(--line2); color:transparent }
.fmchk.on .fmbox{ background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  border-color:transparent; color:#2b1d00 }
.fmct{ flex:1; font-size:11.5px; line-height:1.55; color:var(--navy) }
.fmnav{ display:flex; gap:10px; margin-top:16px }
.fmnav button{ height:52px; border-radius:16px; font-size:14.5px; font-weight:800 }
.fmback{ flex:none; width:96px; background:var(--wash); color:var(--navy) }
.fmnext{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; color:#2b1d00;
  background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 14px 26px -14px rgba(243,197,24,.7) }
.fmsafe{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px;
  font-size:10.5px; color:var(--mute) }

/* thank you */
.tyhero{ padding:28px 20px 24px; border-radius:26px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#001233,#0a3272 58%,#3a2c05);
  box-shadow:0 22px 40px -22px rgba(0,18,51,.8) }
.tyring{ width:66px; height:66px; margin:0 auto 16px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#2b1d00;
  background:linear-gradient(135deg,#ffe27a,#f9cb1c 50%,#e2a406);
  box-shadow:0 0 0 8px rgba(243,197,24,.16); animation:typop .5s cubic-bezier(.2,.9,.3,1.4) }
@keyframes typop{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
.tyhero b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.035em; line-height:1.3 }
.tyhero > span:last-child{ display:block; font-size:12.5px; color:#a9bfe6; margin-top:9px; line-height:1.5 }
.tyref{ display:flex; align-items:center; justify-content:space-between; margin-top:12px;
  padding:14px 15px; border-radius:16px; background:rgba(243,197,24,.16) }
.tyref span{ font-family:var(--n); font-size:8.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold3) }
.tyref b{ font-family:var(--n); font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--navy) }

/* admin inbox */
.devenq{ display:flex; align-items:center; gap:10px; padding:11px 12px; margin-top:8px;
  border-radius:15px; background:var(--paper); border:1px solid var(--line) }
.dei{ width:32px; height:32px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:rgba(47,111,240,.1); color:var(--navy3) }
.dei.clinic{ background:rgba(243,197,24,.18); color:var(--gold3) }
.deem{ display:block; font-size:10px; color:var(--faint); margin-top:2px }
.dest{ flex:none; padding:4px 8px; border-radius:8px; background:rgba(13,155,116,.13); color:#0a7d5d;
  font-family:var(--n); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }

.fmsuf{ flex:none; display:flex; align-items:center; padding:0 12px; font-family:var(--n);
  font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  background:#fbfcff }
.fmgeo{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border-radius:15px;
  text-align:left; background:var(--navy); color:#fff; border:1.5px solid var(--navy) }
.fmgeo .fmgi{ width:38px; height:38px; flex:none; border-radius:12px; display:flex; align-items:center;
  justify-content:center; background:rgba(243,197,24,.2); color:var(--gold) }
.fmgeo .fmgt{ flex:1; min-width:0 }
.fmgeo .fmgt b{ display:block; font-size:13.5px; font-weight:800 }
.fmgeo .fmgt span{ display:block; font-family:var(--n); font-size:9px; letter-spacing:.04em;
  color:#a9bfe6; margin-top:3px }
.fmgeo i{ flex:none; width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg); margin-right:3px }
.fmgeo.busy{ opacity:.7 }
.fmgeo.set{ background:rgba(13,155,116,.08); border-color:rgba(13,155,116,.35); color:var(--navy) }
.fmgeo.set .fmgi{ background:rgba(13,155,116,.16); color:#0a7d5d }
.fmgeo.set .fmgt span{ color:#0a7d5d }
.fmgx{ flex:none; padding:7px 11px; border-radius:10px; background:#fff; color:var(--navy);
  font-size:11.5px; font-weight:800; border:1px solid var(--line2) }
.defee{ display:block; font-family:var(--n); font-size:9px; font-weight:700; color:var(--gold3); margin-top:4px }

/* ---------- payments & refunds ---------- */
.paysum{ display:flex; gap:10px }
.paysum > div{ flex:1; padding:13px 14px; border-radius:20px; background:var(--navy); color:#fff;
  box-shadow:var(--sh2) }
.paysum > div:last-child{ background:var(--paper); color:var(--navy); border:1px solid var(--line) }
.paysum .l9{ display:block; font-family:var(--n); font-size:7.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#8ea6d4 }
.paysum > div:last-child .l9{ color:var(--faint) }
.paysum .v9{ display:block; font-size:19px; font-weight:800; letter-spacing:-.035em; margin-top:6px }
.paycard{ margin-top:10px; padding:14px 15px; border-radius:20px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh2) }
.payhd{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.payhd b{ flex:1; min-width:0; font-size:13px; font-weight:800; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.paychip{ flex:none; padding:4px 9px; border-radius:99px; font-family:var(--n); font-size:7.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.paychip.held{ background:rgba(243,197,24,.16); color:var(--gold3) }
.paychip.ref{ background:rgba(13,155,116,.12); color:#0d9b74 }
.paychip.out{ background:var(--wash); color:var(--navy) }
.payrow{ display:flex; align-items:baseline; gap:10px; padding:4px 0 }
.payrow span{ flex:1; min-width:0; font-size:11.5px; color:var(--ink2) }
.payrow b{ flex:none; font-family:var(--n); font-size:13px; font-weight:700 }
.payrow.sm span{ font-size:10.5px; color:var(--mute) }
.payrow i{ flex:none; font-style:normal; font-family:var(--n); font-size:9px; color:var(--faint) }
.payrow.rf{ margin-top:6px; padding-top:9px; border-top:1px dashed var(--line) }
.payrow.rf span{ color:#0d9b74; font-weight:700 } .payrow.rf b{ color:#0d9b74 }
.bkdid{ font-family:var(--n); font-size:9.5px !important; font-weight:600 !important; color:var(--mute) }
.dsid{ font-family:var(--n); font-size:10px !important }
.rzpfail{ display:flex; flex-direction:column; gap:10px; padding-top:4px }
.rzpfail button{ height:48px; border-radius:15px; font-size:13.5px; font-weight:800; color:var(--navy);
  background:var(--wash); border:1px solid var(--line) }
.rzpfail button.go{ color:#2b1d00; border:0; background:linear-gradient(150deg,#ffe27a,#f9cb1c 50%,#e2a406) }
.rzp.fail .rzpspin svg{ animation:none; opacity:0 }
.rzp.fail .rzpspin .rr4{ background:rgba(192,57,43,.1) }
.rzp.fail .rzpstage > b{ color:#c0392b }