/* Clarity mobile visual system. Every rule is scoped so the classic theme remains intact. */
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) {
  --clarity-bg: #f5f5f7;
  --clarity-surface: rgba(255, 255, 255, 0.92);
  --clarity-surface-solid: #ffffff;
  --clarity-raised: #ffffff;
  --clarity-text: #1d1d1f;
  --clarity-secondary: #6e6e73;
  --clarity-tertiary: #8e8e93;
  --clarity-separator: rgba(60, 60, 67, 0.14);
  --clarity-fill: rgba(118, 118, 128, 0.10);
  --clarity-blue: #007aff;
  --clarity-green: #248a3d;
  --clarity-red: #d70015;
  --clarity-orange: #c93400;
  --clarity-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 34px rgba(0, 0, 0, 0.06);
  --clarity-spring: cubic-bezier(0.25, 0.85, 0.25, 1);
  background: var(--clarity-bg);
  color-scheme: light;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] {
  --clarity-bg: #000000;
  --clarity-surface: rgba(28, 28, 30, 0.92);
  --clarity-surface-solid: #1c1c1e;
  --clarity-raised: #2c2c2e;
  --clarity-text: #f5f5f7;
  --clarity-secondary: #aeaeb2;
  --clarity-tertiary: #8e8e93;
  --clarity-separator: rgba(84, 84, 88, 0.56);
  --clarity-fill: rgba(118, 118, 128, 0.24);
  --clarity-blue: #0a84ff;
  --clarity-green: #30d158;
  --clarity-red: #ff453a;
  --clarity-orange: #ff9f0a;
  --clarity-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) body {
  color: var(--clarity-text);
  background: var(--clarity-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-shell {
  width: min(100%, 430px);
  max-width: 430px;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom));
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-header {
  min-height: 82px;
  padding: 0 2px 4px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mascot-stage {
  height: 80px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mascot-stage::before {
  width: 96px;
  height: 24px;
  background: rgba(0, 122, 255, 0.08);
  filter: blur(9px);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mascot-stage img {
  width: 104px;
  height: 104px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.08));
  transition: opacity 180ms ease, transform 420ms var(--clarity-spring);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .home-bulletin-rail {
  min-height: 40px;
  margin-bottom: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--clarity-secondary);
  background: var(--clarity-fill);
  box-shadow: none;
}

html body.mobile-page .mobile-theme-toggle {
  width: 44px;
  height: 44px;
  color: var(--clarity-text);
  border: 0;
  background: transparent;
  box-shadow: none;
}

html body.mobile-page .mobile-theme-toggle span {
  width: 24px;
  height: 24px;
  filter: none;
}

html body.mobile-page .mobile-theme-toggle span::after { display: none; }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tabs {
  grid-auto-columns: clamp(78px, calc((100% - 24px) / 4.2), 94px);
  gap: 8px;
  padding: 8px 0 18px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-more-cue {
  right: -2px;
  height: 78px;
  background: linear-gradient(90deg, transparent, var(--clarity-bg) 78%);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab {
  min-height: 76px;
  padding: 12px 10px 9px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--clarity-text);
  background: var(--clarity-surface-solid);
  box-shadow: none;
  transition: transform 320ms var(--clarity-spring), color 180ms ease, background 180ms ease, border-color 180ms ease;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab strong {
  font-size: 15px;
  font-weight: 650;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab span {
  margin-top: 5px;
  color: var(--clarity-secondary);
  font-size: 11px;
  font-weight: 500;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active.has-uploaded-icon {
  color: #ffffff;
  border-color: transparent;
  background: var(--ux-action, #175da8);
  box-shadow: 0 7px 18px rgba(0, 122, 255, 0.19);
  transform: translateY(-2px);
  animation: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active::after { display: none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active span { color: rgba(255, 255, 255, 0.78); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .future-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .notice-bar,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-card-item {
  border: 0;
  border-radius: 16px;
  color: var(--clarity-text);
  background: var(--clarity-surface-solid);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card {
  margin-top: 0;
  padding: 18px 16px 16px;
  transition: transform 360ms var(--clarity-spring), box-shadow 200ms ease;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card.category-switching {
  animation: none;
  box-shadow: var(--clarity-shadow);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-row {
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  padding: 1px 0 12px;
  border-bottom-color: var(--clarity-separator);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .field > label,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .account-field-label { color: var(--clarity-secondary); font-size: 12px; font-weight: 600; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .field input { color: var(--clarity-text); font-weight: 650; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .field input::placeholder { color: var(--clarity-tertiary); font-weight: 500; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .icon-button { width:44px; height:44px; border:0; border-radius:50%; color:var(--clarity-blue); background:var(--clarity-fill); box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-clear-button { color:var(--clarity-secondary); background:var(--clarity-fill); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .location-line { color:var(--clarity-secondary); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .coupon-strip {
  min-height: 44px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  color: var(--clarity-secondary);
  background: rgba(215, 0, 21, 0.06);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .coupon-strip strong { color:var(--clarity-text); font-size:14px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .coupon-strip b { color:var(--clarity-red); font-size:14px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .cps-member-price-toggle { display:inline-flex; align-items:center; gap:6px; margin-left:auto; color:var(--clarity-red); font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .cps-member-price-toggle input { position:absolute; opacity:0; pointer-events:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .cps-toggle-ui { width:30px; height:18px; border-radius:999px; background:#c7cbd1; position:relative; transition:.18s ease; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .cps-toggle-ui::after { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:.18s ease; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .cps-member-price-toggle input:checked + .cps-toggle-ui { background:var(--clarity-red); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .cps-member-price-toggle input:checked + .cps-toggle-ui::after { transform:translateX(12px); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .coupon-strip.has-cps-member-price { min-height:50px; padding:8px 10px; border:1px solid rgba(215,0,21,.12); background:rgba(215,0,21,.045); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .coupon-strip.has-cps-member-price .cps-member-price-toggle { color:var(--clarity-red); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-grid { gap: 18px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-section { gap: 10px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-section-head { min-height: 30px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-section-copy > .product-section-title-row > strong { color:var(--clarity-text); font-size:16px; font-weight:650; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-section-copy > span { color:var(--clarity-secondary); background:transparent; font-weight:500; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-grid-inner { gap: 8px; }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card {
  min-height: 102px;
  padding: 20px 7px 12px;
  border: 1px solid var(--clarity-separator);
  border-radius: 12px;
  color: var(--clarity-text);
  background: var(--clarity-surface-solid);
  box-shadow: none;
  transition: transform 260ms var(--clarity-spring), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card:active { transform:scale(0.965); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.active { border-color:var(--clarity-blue); background:var(--clarity-surface-solid); box-shadow:0 0 0 2px rgba(0,122,255,.12); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.active::after { width:26px; height:26px; border-radius:12px 0 11px 0; background:var(--ux-action, #175da8); font-size:12px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card strong { color:var(--clarity-text); font-size:25px; font-weight:650; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card span { color:var(--clarity-secondary); font-weight:500; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card span b,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .product-price b { color:var(--clarity-red); font-weight:700; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.featured { border-color:rgba(0,122,255,.32); background:var(--clarity-surface-solid); box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.featured .featured-tag { background:var(--ux-action, #175da8); box-shadow:0 4px 10px rgba(0,122,255,.18); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-lookup-loading {
  border: 0;
  border-radius: 14px;
  color: var(--clarity-text);
  background: var(--clarity-fill);
  box-shadow: none;
}
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-lookup-loading-head strong { color:var(--clarity-text); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-lookup-loading-head span,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-lookup-route b { color:var(--clarity-secondary); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-lookup-radar { border-color:rgba(0,122,255,.18); background:rgba(0,122,255,.06); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-lookup-progress i { background:var(--ux-action, #175da8); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .empty-state {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 30px 18px;
  border: 0;
  border-radius: 14px;
  color: var(--clarity-secondary);
  background: var(--clarity-fill);
  line-height: 1.55;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .empty-state::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 2px solid var(--clarity-tertiary);
  border-radius: 10px;
  opacity: .62;
  background: linear-gradient(var(--clarity-tertiary),var(--clarity-tertiary)) 8px 10px/16px 2px no-repeat, linear-gradient(var(--clarity-tertiary),var(--clarity-tertiary)) 8px 17px/11px 2px no-repeat;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .empty-state.startup-error { color:var(--clarity-red); background:rgba(215,0,21,.07); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .empty-state.startup-error::before { border-color:currentColor; background:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .empty-state button { min-height:44px; padding:0 18px; border-radius:12px; color:#fff; background:var(--ux-action, #175da8); font-weight:650; }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-row { gap:0; margin-top:16px; border-top:1px solid var(--clarity-separator); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-row span { min-height:44px; border:0; border-radius:0; color:var(--clarity-secondary); background:transparent; font-size:12px; font-weight:500; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mini-icon { color:var(--clarity-blue); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .notice-bar { gap:8px; margin-top:12px; padding:12px 14px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .notice-bar strong { color:var(--clarity-blue); font-size:13px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .notice-bar span { color:var(--clarity-secondary); font-size:13px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .promotion-banner { border:0; border-radius:14px; background:var(--clarity-surface-solid); box-shadow:none; }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head { padding:18px 16px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head-copy > span { color:var(--clarity-blue); background:rgba(0,122,255,.08); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head-copy h2 { color:var(--clarity-text); font-weight:650; letter-spacing:0; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head-copy h2 strong { color:var(--clarity-blue); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head-copy p { color:var(--clarity-secondary)!important; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search > label > span { color:var(--clarity-text); font-weight:600; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search > label > small { color:var(--clarity-secondary); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search input { min-height:48px; border:1px solid transparent; border-radius:12px; color:var(--clarity-text); background:var(--clarity-surface-solid); box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search input:focus { border-color:var(--clarity-blue); box-shadow:0 0 0 3px rgba(0,122,255,.12); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search button { min-width:86px; height:48px; border-radius:12px; background:var(--ux-action, #175da8); font-weight:650; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-filters { gap:6px; padding-bottom:12px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-filters button { height:34px; padding:0 12px; border-radius:10px; color:var(--clarity-secondary); background:var(--clarity-fill); font-size:13px; font-weight:550; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-filters button.active { color:#fff; background:var(--clarity-text); box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-list { gap:10px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-card-item { border:1px solid var(--clarity-separator); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-open { padding:16px; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-card-top strong { font-size:17px; font-weight:650; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .status-text { color:var(--clarity-blue); font-size:14px; font-weight:600; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .status-text.success { color:var(--clarity-green); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .status-text.failed,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .status-text.needs_config,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .status-text.cancelled { color:var(--clarity-red); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-backdrop {
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-detail-card {
  border: 0;
  border-radius: 20px;
  color: var(--clarity-text);
  background: var(--clarity-surface-solid);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  animation: clarity-sheet-in 420ms var(--clarity-spring) both;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet h3 { color:var(--clarity-text); font-weight:650; letter-spacing:0; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet p { color:var(--clarity-secondary); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .plain-close { min-width:44px; min-height:44px; color:var(--clarity-blue); background:transparent; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet > button:not(.plain-close),
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .secondary-wide,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-actions button,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .customer-link { min-height:48px; border-radius:12px; font-weight:650; color:#fff; background:var(--ux-action, #175da8); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .toast {
  bottom: calc(98px + env(safe-area-inset-bottom));
  padding: 11px 15px;
  border-radius: 12px;
  background: rgba(29, 29, 31, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 14px;
  font-weight: 550;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar {
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(398px, calc(100vw - 24px));
  height: 68px;
  gap: 2px;
  padding: 6px;
  border: .5px solid rgba(0, 0, 0, .1);
  border-radius: 22px;
  background: rgba(249, 249, 249, .82);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar::before { display:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar button { min-width:44px; min-height:44px; border-radius:16px; color:var(--clarity-secondary); transition:transform 320ms var(--clarity-spring), color 180ms ease, background 180ms ease; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar button.active { color:var(--clarity-blue); background:transparent; box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar button:active { transform:scale(.92); background:var(--clarity-fill); box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar b { font-size:11px; font-weight:600; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-icon,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-morph-icon { width:23px; height:23px; }
html body.mobile-page .customer-float { width:48px; height:48px; right:max(14px,calc((100vw - 430px)/2 + 14px)); bottom:calc(92px + env(safe-area-inset-bottom)); border:0; background:var(--clarity-surface); box-shadow:0 8px 24px rgba(0,0,0,.14); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) :where(button,a,[role="button"]):not(:disabled) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) :where(button,a,[role="button"]):not(:disabled):active { transition-duration:80ms; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) :where(input,select,textarea):focus-visible { outline:0; box-shadow:0 0 0 3px rgba(0,122,255,.14); }

@keyframes clarity-sheet-in {
  from { opacity:0; transform:translateY(18px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .category-tab,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .recharge-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .future-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .notice-bar,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .orders-head,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .order-card-item,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .modal-sheet,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .order-detail-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .product-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .order-search input { color:var(--clarity-text); background:var(--clarity-surface-solid); box-shadow:none; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .tab-bar { border-color:rgba(255,255,255,.12); background:rgba(30,30,30,.82); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .tab-bar button.active { color:var(--clarity-blue); background:transparent; }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .category-more-cue { background:linear-gradient(90deg,transparent,var(--clarity-bg) 78%); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .coupon-strip { background:rgba(255,69,58,.10); }
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .service-row span { color:var(--clarity-secondary); background:transparent; }

@media (min-width: 700px) {
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-shell { width:min(100%,760px); max-width:760px; padding-inline:28px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-header { min-height:96px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tabs { grid-auto-columns:minmax(112px,1fr); }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card { padding:24px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .direct-grid-inner { grid-template-columns:repeat(4,minmax(0,1fr)); }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .platform-flow-grid-inner { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar { width:430px; }
  html body.mobile-page .customer-float { right:max(24px,calc((100vw - 760px)/2 + 24px)); }
}

@media (max-width: 390px) {
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-shell { padding-inline:12px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card { padding-inline:14px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tabs { grid-auto-columns:78px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card strong { font-size:23px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-row span { gap:4px; font-size:11px; }
}

@media (prefers-reduced-transparency: reduce) {
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar,
  html body.mobile-page .customer-float,
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .toast { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--clarity-surface-solid); }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .toast { color:#fff; background:#1d1d1f; }
}

@media (prefers-contrast: more) {
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) { --clarity-separator:rgba(0,0,0,.34); }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card,
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-card-item { border-width:2px; }
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active { outline:2px solid var(--clarity-text); outline-offset:2px; }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) *,
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) *::before,
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Final clarity pass for the home and order surfaces. */
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) {
  --clarity-bg: #f3f5f9;
  --clarity-surface: rgba(255, 255, 255, 0.9);
  --clarity-surface-solid: #ffffff;
  --clarity-fill: rgba(118, 118, 128, 0.09);
  --clarity-separator: rgba(60, 60, 67, 0.12);
  --clarity-text: #1d1d1f;
  --clarity-secondary: #6e6e73;
  --clarity-tertiary: #8e8e93;
  --clarity-blue: #007aff;
  --clarity-green: #248a3d;
  --clarity-red: #d70015;
  --clarity-shadow: 0 16px 42px rgba(31, 35, 41, 0.07);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) body.mobile-page {
  background: var(--clarity-bg);
  -webkit-font-smoothing: antialiased;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-shell {
  padding-top: calc(12px + env(safe-area-inset-top));
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-header {
  min-height: 72px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mascot-stage {
  height: 70px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mascot-stage img {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 7px 12px rgba(31, 35, 41, 0.08));
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-carousel {
  margin-bottom: 8px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tabs {
  gap: 6px;
  padding: 5px 0 14px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab {
  min-height: 68px;
  padding: 10px 9px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab.active.has-uploaded-icon {
  color: #fff;
  background: var(--ux-action, #175da8);
  box-shadow: 0 7px 18px rgba(0, 122, 255, 0.18);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .category-tab:not(.active):active {
  background: var(--clarity-fill);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card {
  padding: 20px 18px 16px;
  border: 0;
  border-radius: 26px;
  background: var(--clarity-surface-solid);
  box-shadow: var(--clarity-shadow);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-row {
  padding-bottom: 14px;
  border-bottom-color: var(--clarity-separator);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .field input {
  font-size: 26px;
  font-weight: 650;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-input-shell {
  min-height: 52px;
  border-radius: 14px;
  background: var(--clarity-fill);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-input-shell:focus-within {
  box-shadow: inset 0 0 0 2px rgba(0, 122, 255, 0.24);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-input-shell input {
  background: transparent;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .electricity-region-fields select,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-booking-fields input,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-booking-fields select,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-booking-fields textarea {
  border: 0;
  border-radius: 14px;
  background: var(--clarity-fill);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .coupon-strip {
  margin-bottom: 16px;
  border-radius: 14px;
  color: var(--clarity-secondary);
  background: rgba(215, 0, 21, 0.06);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-grid {
  gap: 20px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-section-head {
  padding-inline: 2px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-grid-inner {
  gap: 8px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card {
  min-height: 98px;
  padding: 19px 8px 11px;
  border: 0;
  border-radius: 16px;
  background: #f8f8fa;
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.active {
  border: 0;
  background: var(--clarity-blue-soft);
  box-shadow: inset 0 0 0 2px rgba(0, 122, 255, 0.24);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.featured {
  border: 0;
  background: #f5f9ff;
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card strong {
  color: var(--clarity-text);
  font-weight: 650;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card span {
  color: var(--clarity-secondary);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .product-price b {
  color: var(--clarity-red);
  font-weight: 700;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .featured-tag,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .product-tag,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .schedule-tag,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .maintenance-tag,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card .sold-out-tag {
  border: 0;
  border-radius: 8px;
  color: var(--clarity-blue);
  background: rgba(0, 122, 255, 0.1);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .product-card.featured .featured-tag {
  color: #fff;
  background: var(--ux-action, #175da8);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-row {
  margin-top: 17px;
  border-top-color: var(--clarity-separator);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .service-row span {
  color: var(--clarity-secondary);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .notice-bar,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .promotion-banner,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-card-item {
  border: 0;
  border-radius: 18px;
  background: var(--clarity-surface-solid);
  box-shadow: var(--clarity-shadow);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .notice-bar {
  padding: 13px 15px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .orders-head {
  padding: 20px 18px;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search input {
  border: 0;
  border-radius: 14px;
  background: var(--clarity-surface-solid);
  box-shadow: var(--clarity-shadow);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-search .order-search-row button {
  min-height: 48px;
  border-radius: 14px;
  background: var(--ux-action, #175da8);
  box-shadow: 0 8px 18px rgba(0, 122, 255, 0.16);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-filters button {
  height: 34px;
  border-radius: 30px;
  color: var(--clarity-secondary);
  background: var(--clarity-fill);
  font-weight: 550;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-filters button.active {
  color: #fff;
  background: var(--clarity-text);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-card-item {
  border: 1px solid var(--clarity-separator);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .phone-mini {
  color: var(--clarity-blue);
  background: var(--clarity-blue-soft);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-progress-track {
  margin: 12px 0 10px;
  padding: 13px 7px 11px;
  border: 0;
  border-radius: 16px;
  background: var(--clarity-fill);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-progress-line {
  top: 27px;
  background: rgba(0, 122, 255, 0.14);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-progress-line i {
  background: var(--ux-action, #175da8);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-progress-step span {
  border-color: #c8c8cc;
  color: var(--clarity-secondary);
  background: var(--clarity-surface-solid);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-progress-step.is-done span {
  color:#fff;
  border-color: var(--clarity-blue);
  background: var(--ux-action, #175da8);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-progress-step.is-active span {
  border-color: var(--clarity-blue);
  color: var(--clarity-blue);
  background: var(--clarity-surface-solid);
  box-shadow: 0 0 0 5px rgba(0, 122, 255, 0.1);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-backdrop {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-detail-card {
  border: 0;
  border-radius: 24px;
  background: var(--clarity-surface-solid);
  box-shadow: var(--clarity-shadow);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet > button:not(.plain-close),
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .secondary-wide,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-actions button,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .customer-link {
  color:#fff;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--ux-action, #175da8);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .modal-sheet button:disabled {
  color: var(--clarity-tertiary);
  background: var(--clarity-fill);
  box-shadow: none;
}

html body.mobile-page .notice-disclaimer {
  border: 0;
  border-radius: 16px;
  background: var(--clarity-blue-soft);
  box-shadow: none;
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar {
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: 66px;
  padding: 5px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 28px rgba(31, 35, 41, 0.13);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar button {
  border-radius: 17px;
  color: var(--clarity-secondary);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .tab-bar button.active {
  color: var(--clarity-blue);
  background: rgba(0, 122, 255, 0.1);
  box-shadow: none;
}

html body.mobile-page .customer-float {
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--clarity-surface-solid);
  box-shadow: var(--clarity-shadow);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] {
  --clarity-bg: #000;
  --clarity-surface-solid: #1c1c1e;
  --clarity-fill: rgba(118, 118, 128, 0.24);
  --clarity-separator: rgba(84, 84, 88, 0.56);
  --clarity-text: #f5f5f7;
  --clarity-secondary: #aeaeb2;
  --clarity-tertiary: #8e8e93;
  --clarity-blue: #0a84ff;
  --clarity-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .product-card,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .tab-bar {
  background: var(--clarity-surface-solid);
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .product-card.active,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .product-card.featured {
  background: rgba(10, 132, 255, 0.16);
}

/* Source-inspired component pass: Sweet Goat contact control, Good Bat
   confirmation check, and Bright Dolphin day/night switch. The controls keep
   the existing IDs and event handlers so only their presentation changes. */
html body.mobile-page .customer-float {
  position: fixed;
  width: 54px;
  height: 54px;
  right: max(14px, calc((100vw - 430px) / 2 + 14px));
  bottom: calc(92px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  color: #fff;
  background: #07c160;
  box-shadow: 0 13px 30px rgba(7, 139, 75, .25), inset 0 1px 0 rgba(255,255,255,.42);
  isolation: isolate;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
html body.mobile-page .customer-float::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border: 2px solid rgba(7, 193, 96, .34);
  border-radius: inherit;
  animation: taste-contact-pulse 2.4s ease-out infinite;
}
html body.mobile-page .customer-float::after {
  content: "联系客服";
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 7px 10px;
  border-radius: 7px;
  color: #fff;
  background: #20252c;
  box-shadow: 0 8px 18px rgba(25, 29, 35, .18);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .25s ease, transform .25s ease;
}
html body.mobile-page .customer-float:hover::after,
html body.mobile-page .customer-float:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
html body.mobile-page .customer-float:hover { transform: scale(1.06); box-shadow: 0 16px 34px rgba(7, 139, 75, .31), inset 0 1px 0 rgba(255,255,255,.42); }
html body.mobile-page .customer-float:active { transform: scale(.94); }
html body.mobile-page .wechat-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
html body.mobile-page .wechat-glyph::before,
html body.mobile-page .wechat-glyph::after { display: none; }
html body.mobile-page .wechat-official-icon { width: 34px; height: 34px; display: block; }
html body.mobile-page .customer-float i {
  right: -4px;
  top: -5px;
  min-width: 19px;
  height: 19px;
  border: 2px solid #fff;
  color: #fff;
  background: #ff3b57;
  box-shadow: 0 3px 8px rgba(190, 29, 57, .28);
  animation: taste-contact-badge 1.8s ease-in-out infinite;
}

html body.mobile-page .mobile-theme-toggle {
  position: relative;
  width: 58px;
  height: 30px;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 30px;
  color: #fff;
  background: #f7f7f7;
  box-shadow: inset 0 0 4px 3px rgba(255,255,255,.92), inset 0 0 15px rgba(0,0,0,.3), 4px 8px 14px rgba(0,0,0,.09), inset 0 0 0 2px rgba(0,0,0,.22);
  transition: transform .35s ease, background .35s ease;
}
html body.mobile-page .mobile-theme-toggle span {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  color: #242424;
  background: linear-gradient(130deg, #6d6969 10%, #fff 11%, #777 62%);
  box-shadow: 0 2px 1px rgba(0,0,0,.3), 5px 6px 8px rgba(0,0,0,.28);
  filter: none;
  transform: translateZ(0);
  transition: transform .4s ease, background .4s ease, color .25s ease;
}
html body.mobile-page .mobile-theme-toggle span::before {
  inset: 4px;
  background: currentColor;
  -webkit-mask: none;
  mask: none;
  border-radius: 50%;
  box-shadow: 0 -7px 0 -5px currentColor, 0 7px 0 -5px currentColor, 7px 0 0 -5px currentColor, -7px 0 0 -5px currentColor;
}
html body.mobile-page .mobile-theme-toggle span::after { display: none; }
html body.mobile-page .mobile-theme-toggle.is-dark { background: #d8d8d8; }
html body.mobile-page .mobile-theme-toggle.is-dark span {
  color: #f0f0f0;
  background: linear-gradient(315deg, #101010 0%, #454545 70%);
  transform: translateX(28px);
}
html body.mobile-page .mobile-theme-toggle.is-dark span::before {
  inset: 5px 4px 4px 6px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -3px 1px 0 0 currentColor;
}
html body.mobile-page .mobile-theme-toggle:hover { transform: perspective(100px) rotateX(4deg) rotateY(-4deg); }
html body.mobile-page .mobile-theme-toggle.is-dark:hover { transform: perspective(100px) rotateX(-4deg) rotateY(4deg); }
html body.mobile-page .mobile-theme-toggle:active { transform: scale(.96); }

@keyframes taste-contact-pulse { 0% { opacity: .7; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.2); } }
@keyframes taste-contact-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (min-width: 700px) {
  html body.mobile-page .customer-float { right: max(24px, calc((100vw - 760px) / 2 + 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  html body.mobile-page .customer-float::before,
  html body.mobile-page .customer-float i { animation: none; }
  html body.mobile-page .mobile-theme-toggle,
  html body.mobile-page .mobile-theme-toggle span,
  html body.mobile-page .customer-float { transition: none; }
}

html:is([data-ui-style="clarity"], [data-ui-style="ios27"])[data-theme="dark"] .tab-bar button.active {
  background: rgba(10, 132, 255, 0.18);
}

@media (min-width: 700px) {
  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .mobile-shell {
    width: min(100%, 780px);
    max-width: 780px;
  }

  html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .recharge-card {
    padding: 24px;
  }
}

/* Non-blocking surfaces keep the page interactive; only true modal sheets dim it. */
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .order-benefit-backdrop,
html:is([data-ui-style="clarity"], [data-ui-style="ios27"]) .share-guide-backdrop.is-side {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Final component layer. Keep this block last so older Clarity passes cannot
   override the three source-inspired controls. */
html body.mobile-page .customer-float {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border: 3px solid rgba(255, 255, 255, .94);
  color: #fff;
  background: #07c160;
  box-shadow: 0 14px 30px rgba(7, 139, 75, .3), inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  isolation: isolate;
  overflow: visible;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

html body.mobile-page .customer-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 2px solid rgba(7, 193, 96, .38);
  border-radius: inherit;
  pointer-events: none;
  animation: taste-contact-pulse 2.2s cubic-bezier(.2, .7, .2, 1) infinite;
}

html body.mobile-page .customer-float::after {
  content: "联系客服";
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 7px 10px;
  border-radius: 7px;
  color: #fff;
  background: #20252c;
  box-shadow: 0 8px 18px rgba(25, 29, 35, .18);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity .25s ease, transform .25s ease;
}

html body.mobile-page .customer-float:hover::after,
html body.mobile-page .customer-float:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
html body.mobile-page .customer-float:hover { transform: scale(1.06); }
html body.mobile-page .customer-float:active { transform: scale(.94); }

html body.mobile-page .customer-float .wechat-official-icon {
  width: 36px;
  height: 36px;
  color: #fff;
  filter: none;
  shape-rendering: geometricPrecision;
}

html body.mobile-page .customer-float > i {
  right: -4px;
  top: -5px;
  isolation: isolate;
  overflow: visible;
  background: #ff3153;
}

html body.mobile-page .customer-float > i::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 49, 83, .48);
  animation: taste-badge-ping 1.7s cubic-bezier(0, 0, .2, 1) infinite;
}

/* Official wheel conversion prompt: an explicit, dismissible home surface. */
html body.mobile-page .lottery-home-prompt-backdrop {
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(19, 7, 8, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html body.mobile-page .lottery-home-prompt {
  position: relative;
  width: min(100%, 360px);
  overflow: hidden;
  padding: 30px 22px 24px;
  border: 1px solid rgba(255, 231, 168, .7);
  border-radius: 25px;
  color: #fff8e4;
  text-align: center;
  background: radial-gradient(circle at 50% 34%, rgba(255, 218, 102, .34), transparent 25%), linear-gradient(160deg, #8e120e 0%, #ec3121 49%, #a80e0f 100%);
  box-shadow: 0 22px 60px rgba(38, 0, 0, .52), inset 0 1px 0 rgba(255,255,255,.36);
  animation: lottery-prompt-in .42s cubic-bezier(.2,.8,.2,1) both;
}
html body.mobile-page .lottery-home-prompt::before,
html body.mobile-page .lottery-home-prompt::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
html body.mobile-page .lottery-home-prompt::before { width: 180px; height: 180px; left: -90px; top: 30px; background: rgba(255, 203, 72, .13); }
html body.mobile-page .lottery-home-prompt::after { width: 130px; height: 130px; right: -55px; bottom: 45px; background: rgba(255, 113, 50, .18); }
html body.mobile-page .lottery-home-prompt-close { position: absolute; z-index: 2; top: 9px; right: 11px; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(80,0,0,.18); font-size: 23px; line-height: 25px; cursor: pointer; }
html body.mobile-page .lottery-home-prompt-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: #ffeaa8; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
html body.mobile-page .lottery-home-prompt-kicker i { width: 5px; height: 5px; border-radius: 50%; background: #ffd45d; box-shadow: 0 0 10px #ffd45d; }
html body.mobile-page .lottery-home-prompt-kicker small { color: rgba(255,248,228,.74); font-size: 11px; font-weight: 600; }
html body.mobile-page .lottery-home-prompt h2 { position: relative; z-index: 1; margin: 14px 20px 18px; color: #fff; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.35; font-weight: 850; letter-spacing: 0; }
html body.mobile-page .lottery-home-prompt-reward { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1px; margin: 0 auto 18px; width: min(220px, 75%); padding: 17px 18px 14px; border: 1px solid rgba(255,255,255,.82); border-radius: 20px; background: linear-gradient(180deg, #fffaf3 0%, #ffe6e5 100%); box-shadow: 0 12px 28px rgba(57,0,0,.2), inset 0 1px 0 #fff; }
html body.mobile-page .lottery-home-prompt-reward em { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; color: #b3211d; background: #ffd15a; font-size: 11px; font-style: normal; font-weight: 850; }
html body.mobile-page .lottery-home-prompt-reward strong { color: #f3162d; font-size: 55px; line-height: 1; font-weight: 900; letter-spacing: 0; text-shadow: 0 3px 0 #ffc3bc; }
html body.mobile-page .lottery-home-prompt-reward span { color: #cf2730; font-size: 18px; font-weight: 850; }
html body.mobile-page .lottery-home-prompt-cta { position: relative; z-index: 1; width: min(280px, 88%); min-height: 50px; border: 2px solid rgba(255,246,201,.95); border-radius: 999px; color: #fff; background: linear-gradient(100deg, #ff2f3d, #ff8b25); box-shadow: 0 8px 20px rgba(104,0,0,.3), inset 0 1px 0 rgba(255,255,255,.64); font: inherit; font-size: 18px; font-weight: 850; cursor: pointer; animation: lottery-prompt-cta-float 1.05s ease-in-out infinite alternate; }
html body.mobile-page .lottery-home-prompt-footer { position: relative; z-index: 1; margin: 16px 0 0; color: #ffe6b0; font-size: 13px; line-height: 1.5; font-weight: 700; }

html body.mobile-page .data-plan-float { position: fixed; z-index: 96; right: max(10px, calc((100vw - 430px) / 2 + 10px)); bottom: calc(152px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 0; width: 88px; padding: 0; border: 0; color: #fff; background: transparent; font: inherit; text-decoration: none; filter: drop-shadow(0 9px 12px rgba(45, 25, 88, .3)); cursor: pointer; animation: data-plan-breathe 1.7s ease-in-out infinite; }
html body.mobile-page .data-plan-scene { position: relative; display: block; width: 82px; height: 65px; }
html body.mobile-page .data-plan-phone { position: absolute; left: 24px; top: 5px; width: 40px; height: 54px; border: 3px solid #fff; border-radius: 10px; background: linear-gradient(145deg, #56c8ff 0 37%, #fdf6ff 38% 50%, #ffca55 51% 100%); transform: rotate(-10deg) rotateY(-13deg); box-shadow: 7px 8px 0 rgba(53, 20, 123, .25), inset 0 2px 0 rgba(255,255,255,.7); }
html body.mobile-page .data-plan-phone::after { content: ""; position: absolute; left: 12px; bottom: 5px; width: 12px; height: 3px; border-radius: 9px; background: #7a45d8; }
html body.mobile-page .data-plan-card { position: absolute; right: 5px; top: 14px; width: 32px; height: 23px; border: 2px solid #fff; border-radius: 5px; background: linear-gradient(145deg, #ffdf67, #f18d27); transform: rotate(15deg); box-shadow: 3px 5px 0 rgba(53, 20, 123, .2); }
html body.mobile-page .data-plan-card::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 3px; border-radius: 3px; background: rgba(112,45,167,.75); }
html body.mobile-page .data-plan-copy { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 2px; margin-top: -6px; padding: 2px 6px 3px; border: 2px solid #fff; border-radius: 7px; color: #fff; background: linear-gradient(180deg, #7444dc, #3d1d9e); white-space: nowrap; text-shadow: 0 2px 0 rgba(39,10,99,.5); }
html body.mobile-page .data-plan-copy b { font-size: 17px; line-height: 1; font-weight: 950; }
html body.mobile-page .data-plan-copy strong { font-size: 16px; line-height: 1; font-weight: 950; }
html body.mobile-page .data-plan-spark { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #fff4a5; transform: rotate(45deg); animation: data-plan-spark 1.1s ease-in-out infinite alternate; }
html body.mobile-page .data-plan-spark.spark-a { left: 7px; top: 13px; }
html body.mobile-page .data-plan-spark.spark-b { right: 0; top: 42px; animation-delay: .35s; }

@keyframes lottery-prompt-in { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lottery-prompt-cta-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes data-plan-breathe { from { transform: scale(.96) rotate(-1deg); } to { transform: scale(1.05) rotate(1deg); } }
@keyframes data-plan-spark { from { opacity: .35; transform: rotate(45deg) scale(.7); } to { opacity: 1; transform: rotate(45deg) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { html body.mobile-page .data-plan-float, html body.mobile-page .lottery-home-prompt-cta, html body.mobile-page .data-plan-spark { animation: none; } }

html body.mobile-page .lottery-home-prompt-backdrop[hidden],
html body.mobile-page .data-plan-float[hidden] { display: none !important; }
html body.mobile-page .lottery-home-prompt-backdrop {
  z-index: 1200;
  background: rgba(20, 11, 13, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html body.mobile-page .lottery-home-prompt {
  width: min(100%, 370px);
  overflow: visible;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fffbe9;
}
html body.mobile-page .lottery-home-prompt::before,
html body.mobile-page .lottery-home-prompt::after { display: none; }
html body.mobile-page .lottery-home-prompt-heading h2 {
  margin: 0;
  color: #fff9d9;
  font-size: 40px;
  line-height: 1.16;
  font-weight: 950;
  text-shadow: 0 4px 1px #8e3526, 0 10px 28px #ed9751;
}
html body.mobile-page .lottery-home-prompt-heading p {
  margin: 14px auto 0;
  max-width: 330px;
  color: #fff8d7;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.5;
  text-shadow: 0 2px 12px #53221c;
}
html body.mobile-page .lottery-home-prompt-reward {
  position: relative;
  display: block;
  width: min(240px, 76vw);
  height: 285px;
  margin: 26px auto 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 34px rgba(255, 184, 86, .55));
}
html body.mobile-page .lottery-home-prompt-reward::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -42px -48px 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 176, .52) 0%, rgba(255, 198, 75, .22) 37%, transparent 70%);
  opacity: .55;
  pointer-events: none;
}
html body.mobile-page .lottery-home-prompt-ticket {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 92%;
  height: 158px;
  margin: auto;
  border-radius: 22px 22px 33px 33px;
  background: linear-gradient(145deg, #fff3f9, #fff 66%, #ffdde5);
  box-shadow: 0 -4px 0 #ffc3c9, 0 10px 30px rgba(99, 1, 20, .35);
}
html body.mobile-page .lottery-home-prompt-ticket::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 100%;
  height: 36px;
  border-radius: 50%;
  background: #fff;
}
html body.mobile-page .lottery-home-prompt-ticket em {
  color: #aa3135;
  background: #ffeaa3;
  font-size: 12px;
}
html body.mobile-page .lottery-home-prompt-ticket strong {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #ff1748;
  font-size: 61px;
  line-height: 1.05;
  text-shadow: 0 3px #ffbeca;
}
html body.mobile-page .lottery-home-prompt-ticket strong #lotteryHomePromptAmountNumber {
  color: #ff1748;
  font-size: inherit;
  font-weight: 900;
  line-height: 1;
}
html body.mobile-page .lottery-home-prompt-ticket strong small {
  margin-left: 2px;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}
html body.mobile-page .lottery-home-prompt-ticket span { color: #d51d40; font-size: 24px; font-weight: 900; }
html body.mobile-page .lottery-home-prompt-envelope {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 139px;
  display: grid;
  align-items: end;
  padding-bottom: 31px;
  border-radius: 15px 15px 28px 28px;
  background: linear-gradient(170deg, #ff7782 0%, #ff173a 44%, #f91c32 78%, #ef072e 100%);
  box-shadow: inset 0 -12px 12px rgba(255, 87, 94, .65), 0 15px 28px rgba(88, 0, 20, .3);
  color: #fff9e5;
  font-size: 14px;
  font-weight: 800;
}
html body.mobile-page .lottery-home-prompt-envelope::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  height: 46px;
  border-bottom: 7px solid #fff8e9;
  border-radius: 50%;
}
html body.mobile-page .lottery-home-prompt-envelope span { color: #fff9e5; }
html body.mobile-page .lottery-home-prompt-open {
  position: absolute;
  z-index: 2;
  top: -18px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 61px;
  height: 61px;
  border: 4px solid #fbe5a0;
  border-radius: 50%;
  color: #9b5520;
  background: radial-gradient(circle at 30% 25%, #fff4bc 0%, #e7b65f 47%, #b87030 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.9), inset 0 -5px 7px rgba(113,52,13,.3), 0 7px 16px rgba(77,8,2,.3);
  font-size: 31px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
html body.mobile-page .lottery-home-prompt-spark {
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  background: #fff4be;
  box-shadow: 0 0 13px 3px #ffdb73;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  pointer-events: none;
}
html body.mobile-page .lottery-home-prompt-spark.spark-one { top: 21px; left: -22px; }
html body.mobile-page .lottery-home-prompt-spark.spark-two { top: 63px; right: -28px; width: 15px; height: 15px; }
html body.mobile-page .lottery-home-prompt-spark.spark-three { top: -23px; right: 26px; width: 7px; height: 7px; }
html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-ticket {
  animation: lottery-ticket-rise 1.45s cubic-bezier(.2,.72,.18,1) both;
}
html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-open {
  animation: lottery-open-seal 1.55s ease-in-out both;
}
html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-reward::before {
  animation: lottery-reward-glow 2.1s ease-in-out 1.1s infinite alternate;
}
html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-spark {
  animation: lottery-reward-spark 1.9s ease-in-out 1.25s infinite;
}
html body.mobile-page .lottery-home-prompt.is-revealing .spark-two { animation-delay: 1.65s; }
html body.mobile-page .lottery-home-prompt.is-revealing .spark-three { animation-delay: 1.9s; }
@keyframes lottery-ticket-rise {
  0%, 18% { opacity: 0; transform: translateY(108px) scale(.86); }
  35% { opacity: 1; }
  82% { transform: translateY(-8px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lottery-open-seal {
  0%, 15% { opacity: 1; transform: translateX(-50%) scale(.82); }
  30%, 48% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  72%, 100% { opacity: 0; transform: translateX(-50%) scale(.7); }
}
@keyframes lottery-reward-glow {
  from { opacity: .5; transform: scale(.9); }
  to { opacity: 1; transform: scale(1.16); }
}
@keyframes lottery-reward-spark {
  0%, 100% { opacity: .1; transform: rotate(0) scale(.55); }
  50% { opacity: 1; transform: rotate(60deg) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-ticket,
  html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-open,
  html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-reward::before,
  html body.mobile-page .lottery-home-prompt.is-revealing .lottery-home-prompt-spark { animation: none; }
  html body.mobile-page .lottery-home-prompt-open { opacity: 0; }
  html body.mobile-page .lottery-home-prompt-spark { opacity: .65; }
}
html body.mobile-page .lottery-home-prompt-cta {
  width: min(252px, 82%);
  min-height: 61px;
  margin-top: 3px;
  border: 3px solid #ffeab6;
  color: #fff;
  background: linear-gradient(170deg, #ff236a 0%, #ff323b 65%, #ff8c2c 100%);
  box-shadow: 0 11px 24px rgba(113, 7, 18, .5), inset 0 3px rgba(255, 255, 255, .45);
  font-size: 23px;
  outline: none;
  animation-duration: .65s;
}
html body.mobile-page .lottery-home-prompt-cta:focus-visible,
html body.mobile-page .lottery-home-prompt-close:focus-visible,
html body.mobile-page .data-plan-float:focus-visible { outline: 3px solid #ffdf80; outline-offset: 4px; }
html body.mobile-page .lottery-home-prompt-footer {
  margin: 22px auto 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
html body.mobile-page .lottery-home-prompt-close {
  position: relative;
  top: auto;
  right: auto;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  margin: 27px auto 0;
  border: 2px solid #fff;
  background: transparent;
  font-size: 31px;
  line-height: 1;
}
html body.mobile-page .data-plan-float { z-index: 759; bottom: calc(165px + env(safe-area-inset-bottom)); }
html body.mobile-page .data-plan-scene { height: 77px; }
html body.mobile-page .data-plan-mascot { position: absolute; left: 0; top: -5px; width: 83px; height: 83px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(20, 47, 118, .24)); }
html body.mobile-page .data-plan-card { right: -5px; top: 42px; z-index: 1; transform: rotate(20deg); }
html body.mobile-page .data-plan-copy { margin-top: -7px; }
html body.is-orders-tab .data-plan-float { display: none; }
@media (max-height: 690px) {
  html body.mobile-page .lottery-home-prompt-heading h2 { font-size: 32px; }
  html body.mobile-page .lottery-home-prompt-reward { transform: scale(.78); margin: -6px auto -22px; }
  html body.mobile-page .lottery-home-prompt-close { margin-top: 12px; }
}

html body.mobile-page .mobile-theme-toggle {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 58px;
  width: 58px;
  min-width: 58px;
  height: 30px;
  min-height: 30px;
  aspect-ratio: auto;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 30px;
  color: #fff;
  background: #f7f7f7;
  box-shadow: inset 0 0 4px 3px rgba(255, 255, 255, .92), inset 0 0 15px rgba(0, 0, 0, .3), 4px 8px 14px rgba(0, 0, 0, .09), inset 0 0 0 2px rgba(0, 0, 0, .22);
  transition: transform .35s ease, background .35s ease;
}

html body.mobile-page .mobile-theme-toggle span {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  color: #242424;
  background: linear-gradient(130deg, #6d6969 10%, #fff 11%, #777 62%);
  box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 5px 6px 8px rgba(0, 0, 0, .28);
  filter: none;
  transform: translateZ(0);
  transition: transform .4s ease, background .4s ease, color .25s ease;
}

html body.mobile-page .mobile-theme-toggle span::before {
  inset: 4px;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 -7px 0 -5px currentColor, 0 7px 0 -5px currentColor, 7px 0 0 -5px currentColor, -7px 0 0 -5px currentColor;
}

html body.mobile-page .mobile-theme-toggle span::after { display: none; }
html body.mobile-page .mobile-theme-toggle.is-dark { background: #d8d8d8; }
html body.mobile-page .mobile-theme-toggle.is-dark span {
  color: #f0f0f0;
  background: linear-gradient(315deg, #101010 0%, #454545 70%);
  transform: translate3d(28px, 0, 0);
}
html body.mobile-page .mobile-theme-toggle.is-dark span::before {
  inset: 5px 4px 4px 6px;
  background: transparent;
  box-shadow: inset -3px 1px 0 0 currentColor;
}
html body.mobile-page .mobile-theme-toggle:hover,
html body.mobile-page .mobile-theme-toggle.is-dark:hover { transform: none; }

@media (hover: hover) and (pointer: fine) {
  html body.mobile-page .mobile-theme-toggle:hover { transform: perspective(100px) rotateX(4deg) rotateY(-4deg); }
  html body.mobile-page .mobile-theme-toggle.is-dark:hover { transform: perspective(100px) rotateX(-4deg) rotateY(4deg); }
}

@keyframes taste-badge-ping {
  0% { opacity: .75; transform: scale(.75); }
  75%, 100% { opacity: 0; transform: scale(1.65); }
}

@media (prefers-reduced-motion: reduce) {
  html body.mobile-page .customer-float > i::after { animation: none; }
}

/* Source-matched day/night control. It intentionally stays independent of data-ui-style. */
html body.mobile-page .toggle-cont {
  --primary: #54a8fc;
  --light: #d9d9d9;
  --dark: #121212;
  --gray: #414344;
  --toggle-gap: 2px;
  --toggle-knob: 20px;
  --toggle-pad: 3px;
  position: relative;
  z-index: 10;
  isolation: isolate;
  flex: 0 0 60px;
  width: 60px;
  height: 44px;
  border-radius: 9999px;
  -webkit-tap-highlight-color: transparent;
}

html body.mobile-page .toggle-cont .toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

html body.mobile-page .toggle-cont .toggle-label {
  --gap: var(--toggle-gap);
  --width: var(--toggle-knob);
  position: absolute;
  top: 8px;
  left: 4px;
  display: inline-block;
  box-sizing: content-box;
  width: calc((var(--width) + var(--gap)) * 2);
  height: var(--width);
  padding: var(--toggle-pad);
  cursor: pointer;
  background-color: var(--dark);
  border: 1px solid #777;
  border-bottom: 0;
  border-radius: 9999px;
  transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}

html body.mobile-page .toggle-cont .toggle-label::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background-color: var(--gray);
  border: 1px solid #777;
  border-bottom: 0;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out;
}

html body.mobile-page .toggle-cont .toggle-label::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 50% -100%, rgb(58, 155, 252) 0%, rgba(12, 12, 12, 1) 80%);
  border-radius: 9999px;
  transform: translate(-50%, -50%);
}

html body.mobile-page .toggle-cont .toggle-label .cont-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: var(--width);
  height: var(--width);
  overflow: clip;
  background-image: radial-gradient(circle at 50% 0%, #666 0%, var(--gray) 100%);
  border: 1px solid #aaa;
  border-bottom: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -2px 2px var(--primary);
  transition: transform .3s ease-in-out, background-image .3s ease-in-out, border-color .3s ease-in-out;
  will-change: transform;
}

html body.mobile-page .toggle-cont .cont-icon .sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: calc(var(--width) * 1px);
  aspect-ratio: 1;
  background-color: var(--light);
  border-radius: 50%;
  transform-origin: 50% 50%;
  rotate: calc(1deg * var(--deg));
  transform: translate(-50%, -50%);
  animation: sparkle calc(100s / var(--duration)) linear calc(0s / var(--duration)) infinite;
}

@keyframes sparkle {
  to {
    width: calc(var(--width) * .5px);
    transform: translate(2000%, -50%);
  }
}

html body.mobile-page .toggle-cont .cont-icon .icon {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  fill: var(--light);
}

/* Daylight surface: keep the same source-matched control and motion, but use
   a quiet light track so it belongs with the white-first recharge surface. */
html[data-theme="light"] body.mobile-page .toggle-cont {
  --primary: #9db7cf;
  --light: #74879a;
  --dark: #f8fafc;
  --gray: #e8eef4;
}

html[data-theme="light"] body.mobile-page .toggle-cont .toggle-label {
  background: #f8fafc;
  border-color: #c4d0dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(47, 72, 94, .08);
}

html[data-theme="light"] body.mobile-page .toggle-cont .toggle-label::before {
  background: #e8eef4;
  border-color: #c4d0dc;
}

html[data-theme="light"] body.mobile-page .toggle-cont .toggle-label::after {
  background: linear-gradient(180deg, #fdfefe 0%, #e7edf3 100%);
}

html[data-theme="light"] body.mobile-page .toggle-cont .toggle-label .cont-icon {
  background: linear-gradient(180deg, #ffffff 0%, #e2eaf1 100%);
  border-color: #b9c8d6;
  box-shadow: inset 0 -2px 2px rgba(126, 157, 184, .45), 0 1px 2px rgba(46, 72, 95, .12);
}

html[data-theme="light"] body.mobile-page .toggle-cont .cont-icon .sparkle {
  background-color: #9aabba;
}

html[data-theme="light"] body.mobile-page .toggle-cont .cont-icon .icon {
  fill: #6b8094;
}

html body.mobile-page .mobile-header-actions {
  align-self: flex-start;
  margin: 0 -1px 0 auto;
}

html body.mobile-page .toggle-cont:has(.toggle-input:checked) {
  --checked: true;
}

@container style(--checked: true) {
  html body.mobile-page .toggle-cont .toggle-label {
    background-color: #41434400;
    border-color: #3d6970;
  }

  html body.mobile-page .toggle-cont .toggle-label::before {
    box-shadow: 0 16px 40px -32px #0080ff;
  }

  html body.mobile-page .toggle-cont .toggle-label .cont-icon {
    overflow: visible;
    background-image: radial-gradient(circle at 50% 0%, #045ab1 0%, var(--primary) 100%);
    border-color: var(--primary);
    transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg);
  }

  html body.mobile-page .toggle-cont .toggle-label .cont-icon .sparkle {
    z-index: -1;
    width: calc(var(--width) * 1.5px);
    background-color: #acacac;
    animation: sparkle calc(100s / var(--duration)) linear calc(10s / var(--duration)) infinite;
  }

  @keyframes sparkle {
    to {
      width: calc(var(--width) * 1px);
      transform: translate(5000%, -50%);
    }
  }
}

/* Direct checked-state fallback for browsers without CSS style queries. */
html body.mobile-page .toggle-cont .toggle-input:checked + .toggle-label {
  background-color: #41434400;
  border-color: #3d6970;
}

html body.mobile-page .toggle-cont .toggle-input:checked + .toggle-label::before {
  box-shadow: 0 16px 40px -32px #0080ff;
}

html body.mobile-page .toggle-cont .toggle-input:checked + .toggle-label .cont-icon {
  overflow: visible;
  background-image: radial-gradient(circle at 50% 0%, #045ab1 0%, var(--primary) 100%);
  border-color: var(--primary);
  transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg);
}

html body.mobile-page .toggle-cont .toggle-input:checked + .toggle-label .sparkle {
  z-index: -1;
  width: calc(var(--width) * 1.5px);
  background-color: #acacac;
  animation-delay: calc(10s / var(--duration));
}

html body.mobile-page .toggle-cont:focus-visible {
  outline: 3px solid rgba(84, 168, 252, .34);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  html body.mobile-page .toggle-cont .toggle-label:hover .cont-icon {
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.mobile-page .toggle-cont .cont-icon,
  html body.mobile-page .toggle-cont .toggle-label,
  html body.mobile-page .toggle-cont .toggle-label::before {
    transition-duration: .01ms;
  }

  html body.mobile-page .toggle-cont .cont-icon .sparkle {
    animation: none !important;
  }
}