/* Clarity mobile visual system. Every rule is scoped so the classic theme remains intact. */
html[data-ui-style="clarity"] {
  --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[data-ui-style="clarity"][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[data-ui-style="clarity"] 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[data-ui-style="clarity"] .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[data-ui-style="clarity"] .mobile-header {
  min-height: 82px;
  padding: 0 2px 4px;
}

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

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

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .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[data-ui-style="clarity"] .mobile-theme-toggle {
  width: 44px;
  height: 44px;
  color: var(--clarity-text);
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-ui-style="clarity"] .mobile-theme-toggle span {
  width: 24px;
  height: 24px;
  filter: none;
}

html[data-ui-style="clarity"] .mobile-theme-toggle span::after { display: none; }

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

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

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .category-tab strong {
  font-size: 15px;
  font-weight: 650;
}

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

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

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

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

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

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

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

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

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .coupon-strip strong { color:var(--clarity-text); font-size:14px; }
html[data-ui-style="clarity"] .coupon-strip b { color:var(--clarity-red); font-size:14px; }
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .cps-member-price-toggle input { position:absolute; opacity:0; pointer-events:none; }
html[data-ui-style="clarity"] .cps-toggle-ui { width:30px; height:18px; border-radius:999px; background:#c7cbd1; position:relative; transition:.18s ease; }
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .cps-member-price-toggle input:checked + .cps-toggle-ui { background:var(--clarity-red); }
html[data-ui-style="clarity"] .cps-member-price-toggle input:checked + .cps-toggle-ui::after { transform:translateX(12px); }
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .coupon-strip.has-cps-member-price .cps-member-price-toggle { color:var(--clarity-red); }

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

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

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

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .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[data-ui-style="clarity"] .empty-state.startup-error { color:var(--clarity-red); background:rgba(215,0,21,.07); }
html[data-ui-style="clarity"] .empty-state.startup-error::before { border-color:currentColor; background:none; }
html[data-ui-style="clarity"] .empty-state button { min-height:44px; padding:0 18px; border-radius:12px; color:#fff; background:var(--clarity-blue); font-weight:650; }

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

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

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

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

html[data-ui-style="clarity"] .modal-sheet,
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .modal-sheet h3 { color:var(--clarity-text); font-weight:650; letter-spacing:0; }
html[data-ui-style="clarity"] .modal-sheet p { color:var(--clarity-secondary); }
html[data-ui-style="clarity"] .plain-close { min-width:44px; min-height:44px; color:var(--clarity-blue); background:transparent; }
html[data-ui-style="clarity"] .modal-sheet > button:not(.plain-close),
html[data-ui-style="clarity"] .secondary-wide,
html[data-ui-style="clarity"] .order-actions button,
html[data-ui-style="clarity"] .customer-link { min-height:48px; border-radius:12px; font-weight:650; background:var(--clarity-blue); }

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .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[data-ui-style="clarity"] .tab-bar::before { display:none; }
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .tab-bar button.active { color:var(--clarity-blue); background:transparent; box-shadow:none; }
html[data-ui-style="clarity"] .tab-bar button:active { transform:scale(.92); background:var(--clarity-fill); box-shadow:none; }
html[data-ui-style="clarity"] .tab-bar b { font-size:11px; font-weight:600; }
html[data-ui-style="clarity"] .tab-icon,
html[data-ui-style="clarity"] .tab-morph-icon { width:23px; height:23px; }
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] :where(button,a,[role="button"]):not(:disabled) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
html[data-ui-style="clarity"] :where(button,a,[role="button"]):not(:disabled):active { transition-duration:80ms; }
html[data-ui-style="clarity"] :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[data-ui-style="clarity"][data-theme="dark"] .category-tab,
html[data-ui-style="clarity"][data-theme="dark"] .recharge-card,
html[data-ui-style="clarity"][data-theme="dark"] .future-card,
html[data-ui-style="clarity"][data-theme="dark"] .notice-bar,
html[data-ui-style="clarity"][data-theme="dark"] .orders-head,
html[data-ui-style="clarity"][data-theme="dark"] .order-card-item,
html[data-ui-style="clarity"][data-theme="dark"] .modal-sheet,
html[data-ui-style="clarity"][data-theme="dark"] .order-detail-card,
html[data-ui-style="clarity"][data-theme="dark"] .product-card,
html[data-ui-style="clarity"][data-theme="dark"] .order-search input { color:var(--clarity-text); background:var(--clarity-surface-solid); box-shadow:none; }
html[data-ui-style="clarity"][data-theme="dark"] .tab-bar { border-color:rgba(255,255,255,.12); background:rgba(30,30,30,.82); }
html[data-ui-style="clarity"][data-theme="dark"] .tab-bar button.active { color:var(--clarity-blue); background:transparent; }
html[data-ui-style="clarity"][data-theme="dark"] .category-more-cue { background:linear-gradient(90deg,transparent,var(--clarity-bg) 78%); }
html[data-ui-style="clarity"][data-theme="dark"] .coupon-strip { background:rgba(255,69,58,.10); }
html[data-ui-style="clarity"][data-theme="dark"] .service-row span { color:var(--clarity-secondary); background:transparent; }

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  html[data-ui-style="clarity"] *,
  html[data-ui-style="clarity"] *::before,
  html[data-ui-style="clarity"] *::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[data-ui-style="clarity"] {
  --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[data-ui-style="clarity"] body.mobile-page {
  background: var(--clarity-bg);
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html[data-ui-style="clarity"] .product-card .featured-tag,
html[data-ui-style="clarity"] .product-card .product-tag,
html[data-ui-style="clarity"] .product-card .schedule-tag,
html[data-ui-style="clarity"] .product-card .maintenance-tag,
html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .product-card.featured .featured-tag {
  color: #fff;
  background: var(--clarity-blue);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

html[data-ui-style="clarity"] .order-progress-line i {
  background: var(--clarity-blue);
}

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

html[data-ui-style="clarity"] .order-progress-step.is-done span {
  border-color: var(--clarity-blue);
  background: var(--clarity-blue);
}

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

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

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

html[data-ui-style="clarity"] .notice-disclaimer {
  border: 0;
  border-radius: 16px;
  background: var(--clarity-blue-soft);
  box-shadow: none;
}

html[data-ui-style="clarity"] .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[data-ui-style="clarity"] .tab-bar button {
  border-radius: 17px;
  color: var(--clarity-secondary);
}

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

html[data-ui-style="clarity"] .customer-float {
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--clarity-surface-solid);
  box-shadow: var(--clarity-shadow);
}

html[data-ui-style="clarity"][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[data-ui-style="clarity"][data-theme="dark"] .product-card,
html[data-ui-style="clarity"][data-theme="dark"] .tab-bar {
  background: var(--clarity-surface-solid);
}

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

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

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

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

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