:root{
  --scaffold:#ffffff;--surface:#ffffff;--surface-soft:#f7f7fa;--surface-raised:#ffffff;
  --text:#1c1c1e;--muted:#8e8e93;--border:#eaeaef;--accent:#7c4dff;--accent-soft:#f0edff;
  --danger:#e05252;--success:#34a853;--radius-lg:28px;--radius-md:18px;
  --safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);--tap:rgba(124,77,255,.08)
}
html[data-theme="dark"]{
  --scaffold:#000000;--surface:#111113;--surface-soft:#1a1a1e;--surface-raised:#1c1c20;
  --text:#f5f5f7;--muted:#98989f;--border:#2a2a2f;--accent:#9a7cff;--accent-soft:#241c3e;
  --danger:#ff6b6b;--success:#58d07b;--tap:rgba(154,124,255,.12)
}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--scaffold);color:var(--text);font-family:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}
body{min-height:100vh;overflow:hidden;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button,input,select,textarea{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--scaffold);max-width:100%;margin:0 auto}
.app-bar{padding:calc(10px + var(--safe-top)) 18px 9px;min-height:56px;display:flex;justify-content:space-between;align-items:center;background:var(--scaffold);
  border-bottom:1px solid rgba(120,120,128,.10);color:var(--text);z-index:20;flex:0 0 auto}
.brand-button{border:0;background:transparent;padding:4px 0;color:inherit}.brand-word{font-size:20px;font-weight:700;letter-spacing:-.55px;line-height:1}.brand-word span{color:var(--accent)}
.app-bar-actions{display:flex;align-items:center;gap:7px}.appbar-action{border:0;background:var(--surface-soft);color:var(--muted);border-radius:13px;padding:8px 10px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px;transition:transform .1s ease,background .15s ease}.appbar-action:active{transform:scale(.94);background:var(--tap)}.appbar-action-icon{font-size:14px}
.profile-button{width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-soft);color:var(--text);display:grid;place-items:center;font-size:18px;transition:transform .1s ease}.profile-button:active{transform:scale(.92)}
.page-host{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;background:var(--scaffold)}
.bottom-nav{display:flex;justify-content:space-around;align-items:center;background:var(--scaffold);color:var(--text);padding:7px 0 max(9px,var(--safe-bottom));flex:0 0 auto;border-top:0}
.nav-item{border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;padding:5px 10px;min-width:62px;position:relative;border-radius:18px;transition:transform .1s ease,color .15s ease,background .15s ease}.nav-item.active{color:var(--accent)}.nav-item:active{transform:scale(.9);background:var(--tap)}.nav-item.active:after{content:"";position:absolute;top:-1px;width:16px;height:3px;background:var(--accent);border-radius:999px}.nav-icon{font-size:22px;line-height:1.1}
.boot-loader{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted)}.boot-loader>div:last-child{display:grid;gap:4px}.boot-loader strong{color:var(--text);font-size:13px;font-weight:600}.boot-loader span{font-size:11px}.boot-spinner,.inline-spinner{width:24px;height:24px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;margin:0 auto 12px}
.page-loading{min-height:180px;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}.page-loading strong{display:block;color:var(--text);font-size:13px;font-weight:600;margin-bottom:3px}.page-loading span{font-size:11px}
.sheet-layer{position:fixed;inset:0;z-index:120}.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(5px)}.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface-raised);color:var(--text);border-radius:28px 28px 0 0;padding:10px 20px calc(22px + var(--safe-bottom));max-height:82vh;overflow:auto;box-shadow:0 -20px 60px rgba(0,0,0,.18);animation:sheetUp .25s ease-out}.sheet-handle{width:42px;height:5px;border-radius:999px;background:var(--border);margin:2px auto 16px}.sheet-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.sheet-head h2{margin:0;font-size:22px;letter-spacing:-.4px}.sheet-head p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}.sheet-close{width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-soft);color:var(--text);font-size:20px}.sheet-steps{display:grid;gap:10px;margin-top:18px}.sheet-step{background:var(--surface-soft);border:1px solid var(--border);border-radius:16px;padding:14px;font-size:13px;line-height:1.45}.sheet-step strong{display:block;margin-bottom:3px}.sheet-primary{width:100%;border:0;border-radius:15px;padding:14px;background:var(--text);color:var(--scaffold);font-weight:600;margin-top:18px}
.toast{position:fixed;z-index:150;left:50%;bottom:calc(78px + var(--safe-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 15px;border-radius:13px;background:var(--text);color:var(--scaffold);font-size:12px;transition:.22s ease;max-width:calc(100% - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes sheetUp{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
@media(min-width:601px){body{background:var(--scaffold);padding:20px;display:grid;place-items:center}.app-shell{width:min(420px,100%);height:min(820px,95vh);border-radius:42px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.14),0 8px 20px rgba(0,0,0,.05)}.sheet{left:50%;right:auto;width:min(420px,calc(100% - 40px));transform:translateX(-50%);border-radius:28px;bottom:20px;animation:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


html[data-theme="dark"] .app-bar{
  border-bottom-color:rgba(255,255,255,.075);
}

/* Delayed fallback loader — shown only if an operation exceeds 4 seconds */
.global-loader{
  position:fixed;
  inset:0;
  z-index:110;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  pointer-events:auto;
}
html[data-theme="dark"] .global-loader{
  background:rgba(0,0,0,.18);
}
.loader-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:238px;
  max-width:calc(100% - 40px);
  padding:13px 15px;
  border-radius:17px;
  background:var(--surface-raised);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 16px 48px rgba(0,0,0,.12);
}
.loader-card strong{
  display:block;
  font-size:12px;
  font-weight:600;
}
.loader-card span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.loader-spinner{
  width:23px;
  height:23px;
  flex:0 0 auto;
  border:2.5px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .72s linear infinite;
}


/* ===== Shared consumer primitives only; page visuals remain inside each page HTML ===== */
.ct-page{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:var(--scaffold);color:var(--text)}
.ct-page-pad{padding:18px 18px 28px}
.ct-page-title{font-size:28px;line-height:1.05;letter-spacing:-.7px;margin:4px 0 7px;font-weight:700}
.ct-page-sub{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.ct-button{border:0;border-radius:15px;min-height:46px;padding:12px 16px;background:var(--text);color:var(--scaffold);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ct-button:active{transform:scale(.98)}
.ct-button.secondary{background:var(--surface-soft);color:var(--text);border:1px solid var(--border)}
.ct-button.danger{background:#fff0f0;color:#c23d3d}
html[data-theme="dark"] .ct-button.danger{background:#321b1b;color:#ff8585}
.ct-input,.ct-select,.ct-textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;padding:13px 14px;outline:none;font:inherit}
.ct-textarea{min-height:105px;resize:vertical}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%, transparent)}
.ct-label{display:grid;gap:7px;font-size:12px;color:var(--muted);font-weight:600}
.ct-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:16px}
.ct-empty{text-align:center;padding:38px 20px;color:var(--muted);font-size:13px}
.ct-error{padding:13px 14px;border-radius:15px;background:#fff3f3;color:#b44646;font-size:12px;line-height:1.45}
html[data-theme="dark"] .ct-error{background:#321b1b;color:#ff8c8c}
.ct-success{padding:13px 14px;border-radius:15px;background:#eef8f1;color:#34794a;font-size:12px;line-height:1.45}
html[data-theme="dark"] .ct-success{background:#183021;color:#75d793}
.ct-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600}
.ct-status{display:inline-flex;padding:6px 9px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:10px;font-weight:700;text-transform:capitalize}
.ct-status.confirmed,.ct-status.completed,.ct-status.ready,.ct-status.active,.ct-status.approved{background:#eaf8ef;color:#2f8d4c}
.ct-status.requested,.ct-status.awaiting_payment,.ct-status.submitted,.ct-status.under_review{background:#fff5db;color:#9a6a00}
.ct-status.declined,.ct-status.cancelled,.ct-status.failed,.ct-status.disputed,.ct-status.rejected{background:#fff0f0;color:#bc4444}
html[data-theme="dark"] .ct-status.confirmed,html[data-theme="dark"] .ct-status.completed,html[data-theme="dark"] .ct-status.ready,html[data-theme="dark"] .ct-status.active,html[data-theme="dark"] .ct-status.approved{background:#173421;color:#69d68a}
html[data-theme="dark"] .ct-status.requested,html[data-theme="dark"] .ct-status.awaiting_payment,html[data-theme="dark"] .ct-status.submitted,html[data-theme="dark"] .ct-status.under_review{background:#342b12;color:#e8c166}
html[data-theme="dark"] .ct-status.declined,html[data-theme="dark"] .ct-status.cancelled,html[data-theme="dark"] .ct-status.failed,html[data-theme="dark"] .ct-status.disputed,html[data-theme="dark"] .ct-status.rejected{background:#351c1c;color:#ee8585}
.ct-back{border:0;background:var(--surface-soft);color:var(--text);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px}
.ct-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 12px}
.ct-section-head h2{font-size:18px;letter-spacing:-.3px;margin:0}
.ct-link{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:13px;padding:6px}
.ct-row{display:flex;align-items:center;gap:12px}
.ct-row.between{justify-content:space-between}
.ct-divider{height:1px;background:var(--border);margin:13px 0}
.ct-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--surface-soft);display:grid;place-items:center;font-weight:700;color:var(--muted);overflow:hidden}
.ct-avatar img{width:100%;height:100%;object-fit:cover}
.ct-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ct-stack{display:grid;gap:11px}
.ct-native-sheet-actions{display:grid;gap:10px;margin-top:18px}
@media(max-width:360px){.ct-grid-2{grid-template-columns:1fr}}

/* V1.1 real-product refinements */
.nav-icon{width:23px;height:23px;display:grid;place-items:center}
.nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appbar-action-icon{width:15px;height:15px;display:grid;place-items:center}
.appbar-action-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.appbar-action{min-height:36px}
.profile-button{font-weight:700}
button:disabled{opacity:.45;pointer-events:none}
.ct-button.loading{position:relative;color:transparent!important;pointer-events:none}
.ct-button.loading:after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.ct-button.secondary.loading:after{border-color:var(--border);border-top-color:var(--accent)}
.ct-field-error{font-size:10px;color:var(--danger);margin-top:-2px}
.ct-inline-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.ct-skeleton{position:relative;overflow:hidden;background:var(--surface-soft);border-radius:12px}
.ct-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 80%,transparent),transparent);animation:ctShimmer 1.15s infinite}
@keyframes ctShimmer{100%{transform:translateX(100%)}}

/* ===== HARD WIDTH / OVERFLOW SAFETY ===== */
html,body,#app,.app-shell,.main,.page-host{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden !important;
}
body{position:relative}
.app-shell{position:relative}
.page-host>*{
  width:100%;
  max-width:100%;
  min-width:0;
}
.ct-page,.ct-page-pad,.ct-card,.ct-row,.ct-grid-2,
.app-bar,.bottom-nav,.sheet,.loader-card{
  max-width:100%;
  min-width:0;
}
img,video,canvas,svg{
  max-width:100%;
}
input,textarea,select,button{
  min-width:0;
  max-width:100%;
}
.ct-row>*,
.ct-grid-2>*,
.app-bar>*,
.app-bar-actions>*{
  min-width:0;
}
*{
  overflow-wrap:anywhere;
}
.people-scroll,.filter-scroll,.home-people{
  overscroll-behavior-x:contain;
}

/* ===== REAL UI SHELL POLISH ===== */
.app-bar{
  min-height:58px;
  padding-left:16px;
  padding-right:16px;
}
.brand-word{
  font-size:21px;
  letter-spacing:-.7px;
}
.bottom-nav{
  min-height:62px;
  padding-top:7px;
}
.nav-item{
  flex:1 1 0;
  min-width:0;
}
.nav-item span:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Media overflow hardening V2.5 */
audio,input[type="range"],input[type="file"]{
  max-width:100%;
}
audio{
  display:block;
  width:100%;
}
.page-host,.page-host>*,.sheet-content{
  min-width:0;
  max-width:100%;
}

/* Native app-bar navigation */
.app-bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.appbar-left{display:flex;align-items:center;min-width:0}
.native-back{
  width:38px;height:38px;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:var(--text);
  padding:0;margin-left:-7px;
}
.native-back:active{background:var(--surface-soft)}
.native-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.appbar-page-title{
  min-width:0;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.25px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-bar.has-back .brand{display:none!important}
.app-bar-actions{justify-self:end}

/* Mobile-native sizing confidence pass */
:root{
  --app-title-size:28px;
  --section-title-size:18px;
  --body-size:14px;
  --body-small:12px;
}
body{
  font-size:var(--body-size);
  line-height:1.45;
}
.ct-page-title{font-size:var(--app-title-size)}
.ct-section-head h2{font-size:var(--section-title-size)}
.ct-button{min-height:48px;font-size:14px;border-radius:14px}
.ct-input,.ct-select,.ct-textarea{font-size:16px}
.ct-label{font-size:12px}
.ct-card{border-radius:20px}
.ct-avatar{width:50px;height:50px}

/* V2.7 native typography + perfectly centered app-bar title */
body{font-size:15px}
.ct-page-sub,.bio{font-size:14px}
.ct-label{font-size:13px}
.ct-button{font-size:15px}
.ct-section-head h2{font-size:19px}
.ct-page-title{font-size:29px}
.ct-status{font-size:11px}
.app-bar{position:relative}
.appbar-page-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(58vw,320px);
  text-align:center;
  pointer-events:none;
  z-index:2;
  font-size:17px;
  font-weight:600;
}
.appbar-left{position:relative;z-index:3}
.app-bar-actions{position:relative;z-index:3;margin-left:auto}
@media(max-width:380px){
  body{font-size:15px}
  .ct-button{font-size:14px}
  .ct-page-title{font-size:28px}
}

/* V2.8 typography recalibration */
:root{
  --app-title-size:30px;
  --section-title-size:20px;
  --body-size:16px;
  --body-small:14px;
}
body{font-size:16px;line-height:1.5}
.ct-page-title{font-size:30px}
.ct-section-head h2{font-size:20px}
.ct-page-sub,.bio{font-size:14px}
.ct-label{font-size:14px}
.ct-button{font-size:15px}
.ct-input,.ct-select,.ct-textarea{font-size:16px}
.ct-status{font-size:12px}
.ct-link{font-size:14px}
@media(max-width:380px){
  body{font-size:16px}
  .ct-page-title{font-size:29px}
}

.profile-button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface-soft);color:var(--text)}
.profile-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.profile-button.signed-in{background:var(--accent-soft);color:var(--accent)}
.image-viewer{position:fixed;inset:0;z-index:300;background:#000;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);touch-action:pinch-zoom}
.image-viewer[hidden]{display:none}.image-viewer img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.image-viewer-close{position:absolute;z-index:2;right:14px;top:calc(12px + env(safe-area-inset-top));width:42px;height:42px;border-radius:50%;border:0;background:rgba(30,30,30,.65);color:#fff;font-size:28px}



/* V2.11 — device-width app-bar geometry
   Center content against the viewport, never against remaining flex/grid space. */
.app-bar{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  max-width:none !important;
}
.app-bar .brand,
.app-bar .appbar-page-title{
  position:fixed !important;
  left:50vw !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  width:auto !important;
  max-width:min(60vw,320px) !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.app-bar .brand{
  top:calc(env(safe-area-inset-top) + (var(--appbar-height,56px) / 2)) !important;
  transform:translate(-50%,-50%) !important;
}
.app-bar .appbar-page-title{
  top:calc(env(safe-area-inset-top) + (var(--appbar-height,56px) / 2)) !important;
  transform:translate(-50%,-50%) !important;
}
.appbar-left,.app-bar-actions{
  position:relative !important;
  z-index:3 !important;
}
.app-bar-actions{margin-left:auto !important}
.account-profile-icon{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

/* V2.12 native scrollbar suppression */
html,body,#app,.app-shell,.page-host,
.home,.discover,.profile,.bookings,.confirm,.notifs,
.auth-page,.verify-page,.account,.support,.moderation,
.people-scroll,.filter-scroll{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
.app-shell::-webkit-scrollbar,
.page-host::-webkit-scrollbar,
.home::-webkit-scrollbar,
.discover::-webkit-scrollbar,
.profile::-webkit-scrollbar,
.bookings::-webkit-scrollbar,
.confirm::-webkit-scrollbar,
.notifs::-webkit-scrollbar,
.auth-page::-webkit-scrollbar,
.verify-page::-webkit-scrollbar,
.account::-webkit-scrollbar,
.support::-webkit-scrollbar,
.moderation::-webkit-scrollbar,
.people-scroll::-webkit-scrollbar,
.filter-scroll::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* V2.13 — strict circle geometry
   Every icon-only circular control/indicator uses an explicit 1:1 box.
   aspect-ratio is supplemental; width/height remain fixed for older WebViews. */
.profile-button,
.image-viewer-close,
.slot-check,
.audio-intro-icon,
.boot-spinner,
.inline-spinner,
.global-loader-spinner,
[class*="close-button"],
[class*="close-btn"],
[class*="icon-circle"],
[class*="circle-icon"]{
  box-sizing:border-box !important;
  aspect-ratio:1 / 1 !important;
  flex:0 0 auto !important;
  padding:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}

/* Known app circles: explicit equal dimensions prevent font/padding from
   stretching the shape into an oval. */
.profile-button{width:38px !important;height:38px !important}
.image-viewer-close{width:42px !important;height:42px !important;line-height:1 !important}
.slot-check{width:22px !important;height:22px !important}
.audio-intro-icon{width:30px !important;height:30px !important}

/* Availability count is a circular numeric indicator, not a pill. */
.availability-count{
  box-sizing:border-box !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  aspect-ratio:1 / 1 !important;
  flex:0 0 34px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  text-align:center !important;
}