/*
 * V160 — HX 审计页结构对齐层。
 * 只统一四套模板的层级、玻璃透明度、弱边缘与手机占屏比例；
 * 不替换环球品牌、活动图、业务按钮、接口和数据。
 */

html[data-skin] {
  --hx-page-0: #031f1a;
  --hx-page-1: #062c24;
  --hx-page-2: #02130f;
  --hx-light-a: rgba(67, 182, 132, .17);
  --hx-light-b: rgba(213, 173, 91, .10);
  --hx-glass-top: rgba(255, 255, 255, .046);
  --hx-glass-mid: rgba(255, 255, 255, .018);
  --hx-glass-bottom: rgba(255, 255, 255, .004);
  --hx-inner-top: rgba(255, 255, 255, .036);
  --hx-inner-bottom: rgba(255, 255, 255, .008);
  --hx-edge-top: rgba(231, 220, 176, .15);
  --hx-edge-mid: rgba(231, 220, 176, .040);
  --hx-accent: #dcc27a;
  --hx-accent-soft: rgba(220, 194, 122, .18);
  --hx-success: #5ad79b;
  --hx-text: rgba(255, 253, 246, .96);
  --hx-muted: rgba(236, 239, 229, .58);
  --hx-shadow: rgba(0, 11, 8, .28);
}

html[data-skin="global-ocean"] {
  --hx-page-0: #061b2a;
  --hx-page-1: #0b2d3c;
  --hx-page-2: #020d15;
  --hx-light-a: rgba(62, 155, 170, .17);
  --hx-light-b: rgba(218, 180, 98, .095);
  --hx-edge-top: rgba(220, 211, 174, .14);
  --hx-edge-mid: rgba(178, 214, 219, .038);
}

html[data-skin="royal-black-gold"],
html[data-skin="supreme-black-gold"] {
  --hx-page-0: #18130b;
  --hx-page-1: #251c0d;
  --hx-page-2: #080704;
  --hx-light-a: rgba(210, 164, 69, .15);
  --hx-light-b: rgba(255, 218, 127, .08);
  --hx-glass-top: rgba(255, 239, 198, .044);
  --hx-glass-mid: rgba(255, 235, 184, .017);
  --hx-inner-top: rgba(255, 240, 202, .034);
  --hx-edge-top: rgba(239, 202, 120, .15);
  --hx-edge-mid: rgba(239, 202, 120, .040);
  --hx-accent: #e4c477;
}

/* 全平台连续背景：不再由各卡片拼成一块块实色。 */
html[data-skin] body,
html[data-skin] body .phone-shell,
html[data-skin] body .phone-shell .app-view,
html[data-skin] body .phone-shell .detail-overlay,
html[data-skin] body .phone-shell .detail-page {
  color: var(--hx-text) !important;
  background-color: var(--hx-page-2) !important;
}

html[data-skin] body .phone-shell .app-view,
html[data-skin] body .phone-shell .detail-overlay {
  background-image:
    radial-gradient(ellipse 85% 34% at 12% 5%, var(--hx-light-a), transparent 72%),
    radial-gradient(ellipse 70% 28% at 92% 30%, var(--hx-light-b), transparent 76%),
    radial-gradient(ellipse 72% 25% at 20% 76%, color-mix(in srgb, var(--hx-light-a) 58%, transparent), transparent 78%),
    linear-gradient(180deg, var(--hx-page-1) 0%, var(--hx-page-0) 38%, var(--hx-page-2) 100%) !important;
  background-attachment: local !important;
  background-size: 100% 100% !important;
}

html[data-skin] body .phone-shell .mine-view {
  min-height: 100dvh !important;
  padding-bottom: 88px !important;
}

/* 首页轮播下方通知框按最终要求隐藏，不占空白高度。 */
html[data-skin] body .phone-shell .home-view .home-content > .notice {
  display: none !important;
}

html[data-skin] body .phone-shell .home-view .hero {
  margin-bottom: 13px !important;
}

/* 通用弱边玻璃：顶部略显，越向下越接近透明。 */
html[data-skin] body .phone-shell :is(
  .vip-card,
  .mine-menu-panel,
  .invite-panel,
  .mine-tool-list,
  .recharge-wallet-card,
  .withdraw-wallet-overview,
  .withdraw-form-card,
  .income-royal-card,
  .invite-source-card,
  .report-summary-grid,
  .commission-records,
  .generic-list,
  .generic-stats,
  .security-hero,
  .detail-menu,
  .detail-form-card,
  .software-section,
  .wheel-premium-stage,
  .lottery-prize-list,
  .lottery-draw-list,
  .activity-detail-sheet,
  .customer-modal,
  .download-modal,
  .address-modal,
  .member-auth-card,
  .royal-agent-top-stats,
  .royal-agent-bonus-card,
  .royal-agent-team,
  .agent-performance-card,
  .buy-coin-balance,
  .buy-provider-list,
  .buy-steps,
  .service-function-grid,
  .service-balance-card,
  .line-status-card,
  .notification-center,
  .bet-summary-grid,
  .bet-record-list,
  .income-record-list,
  .generic-empty-note
) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, var(--hx-glass-top) 0%, var(--hx-glass-mid) 38%, var(--hx-glass-bottom) 100%) padding-box,
    linear-gradient(180deg, var(--hx-edge-top) 0%, var(--hx-edge-mid) 45%, transparent 100%) border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 16px 34px var(--hx-shadow) !important;
  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
}

html[data-skin] body .phone-shell :is(
  .mine-user-pills button,
  .mine-primary-actions button,
  .mine-menu-grid button > i,
  .invite-copy-button,
  .mine-tool-list button,
  .income-royal-rows button,
  .income-royal-stat-grid span,
  .income-invite-link,
  .invite-share-panel button,
  .invite-stat-grid article,
  .vip-threshold-grid article,
  .vip-level-track,
  .vip-rebate-table,
  .money-tabs,
  .money-input,
  .recharge-wallet-card code,
  .money-rules,
  .record-filter-bar,
  .report-summary-grid article,
  .commission-records article,
  .service-list button,
  .customer-options button,
  .guide-step,
  .download-copy-url,
  .lottery-prize-list article,
  .lottery-draw-list article,
  .activity-sheet-section,
  .activity-managed-images,
  .detail-menu button,
  .software-list button,
  .buy-provider-list button,
  .buy-steps li,
  .service-function-grid button,
  .notification-row,
  .bet-summary-grid article,
  .bet-record-list article,
  .income-record-list article
) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, var(--hx-inner-top), var(--hx-inner-bottom)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-edge-top) 72%, transparent), color-mix(in srgb, var(--hx-edge-mid) 60%, transparent) 48%, transparent) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  -webkit-backdrop-filter: blur(10px) saturate(108%) !important;
  backdrop-filter: blur(10px) saturate(108%) !important;
}

/* “我的”：头像、ID、余额、充提、VIP、外框和独立小卡全部恢复为清楚层级。 */
html[data-skin] body .phone-shell .mine-hero {
  position: relative !important;
  min-height: 242px !important;
  padding: 48px 18px 24px !important;
  background:
    radial-gradient(circle at 52% 15%, rgba(255,255,255,.075), transparent 28%),
    radial-gradient(circle at 87% 22%, var(--hx-light-b), transparent 32%) !important;
}

html[data-skin] body .phone-shell .mine-view .mine-watermark {
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  right: -14px !important;
  left: auto !important;
  width: 190px !important;
  height: 190px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  pointer-events: none !important;
}

html[data-skin] body .phone-shell .mine-view .mine-watermark::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: url("./assets/skins/supreme-black-gold/mine-gold-mark-v124.webp") center / contain no-repeat !important;
  opacity: .37 !important;
  filter: saturate(1.06) brightness(1.04) contrast(1.06) drop-shadow(4px 10px 13px rgba(0,0,0,.45)) !important;
  transform: rotate(-5deg) scale(.96) !important;
}

html[data-skin] body .phone-shell .mine-view .mine-watermark::after,
html[data-skin] body .phone-shell .mine-view .mine-hero::before,
html[data-skin] body .phone-shell .mine-view .mine-hero::after {
  content: none !important;
  display: none !important;
}

html[data-skin] body .phone-shell .mine-avatar {
  width: 72px !important;
  height: 72px !important;
  border: 1px solid rgba(235, 213, 145, .30) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10) !important;
}

html[data-skin] body .phone-shell .mine-name {
  margin-top: 8px !important;
  font-size: 20px !important;
  letter-spacing: .02em !important;
}

html[data-skin] body .phone-shell .mine-user-pills {
  gap: 12px !important;
  margin-top: 10px !important;
}

html[data-skin] body .phone-shell .mine-user-pills button {
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
  color: rgba(255,255,255,.76) !important;
}

html[data-skin] body .phone-shell .mine-page-body {
  position: relative !important;
  z-index: 2 !important;
  margin-top: -22px !important;
  padding: 0 14px 24px !important;
}

html[data-skin] body .phone-shell .mine-primary-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 0 13px !important;
}

html[data-skin] body .phone-shell .mine-primary-actions button {
  min-height: 54px !important;
  border-radius: 26px !important;
  color: var(--hx-text) !important;
  font-size: 16px !important;
}

html[data-skin] body .phone-shell .mine-primary-actions .gold-action,
html[data-skin] body .phone-shell :is(.generic-action,.detail-submit,.recharge-copy-action,.wheel-button) {
  color: #fff9e8 !important;
  border-color: transparent !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hx-success) 19%, transparent), color-mix(in srgb, var(--hx-accent) 12%, transparent)) padding-box,
    linear-gradient(180deg, rgba(246,224,154,.28), rgba(246,224,154,.045) 68%, transparent) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 12px 26px rgba(0,0,0,.18) !important;
}

html[data-skin] body .phone-shell .vip-card {
  width: 100% !important;
  min-height: 132px !important;
  margin: 0 0 13px !important;
  padding: 20px 18px 18px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  text-align: left !important;
}

html[data-skin] body .phone-shell .vip-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 35% 0 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hx-page-2) 18%, transparent)) !important;
  opacity: .68 !important;
}

html[data-skin] body .phone-shell .vip-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-skin] body .phone-shell .vip-card > div:first-child strong {
  color: var(--hx-text) !important;
  font-size: 24px !important;
}

html[data-skin] body .phone-shell .vip-card > div:first-child span {
  padding: 7px 12px !important;
  border-radius: 15px !important;
  color: rgba(255,255,255,.76) !important;
  background: rgba(255,255,255,.055) !important;
}

html[data-skin] body .phone-shell .vip-progress {
  margin-top: 16px !important;
}

html[data-skin] body .phone-shell .vip-progress i {
  height: 7px !important;
  background: rgba(255,255,255,.09) !important;
}

html[data-skin] body .phone-shell .vip-progress b {
  background: linear-gradient(90deg, var(--hx-accent), var(--hx-success)) !important;
}

html[data-skin] body .phone-shell .vip-card p {
  margin-top: 10px !important;
  color: var(--hx-muted) !important;
}

html[data-skin] body .phone-shell .mine-menu-panel {
  width: 100% !important;
  margin: 0 0 13px !important;
  padding: 17px 10px 13px !important;
  border-radius: 22px !important;
}

html[data-skin] body .phone-shell .mine-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 17px 4px !important;
}

html[data-skin] body .phone-shell .mine-menu-grid button {
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .mine-menu-grid button > i {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto 8px !important;
  place-items: center !important;
  border-radius: 11px !important;
}

html[data-skin] body .phone-shell .mine-view .mine-menu-grid button:nth-child(n) > i {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, var(--hx-inner-top), var(--hx-inner-bottom)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-edge-top) 68%, transparent), transparent 92%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
}

html[data-skin] body .phone-shell .mine-menu-grid button > i img,
html[data-skin] body .phone-shell .mine-menu-grid button > i svg {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
}

html[data-skin] body .phone-shell .mine-menu-grid button > span {
  color: rgba(255,255,255,.76) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

html[data-skin] body .phone-shell .invite-panel {
  min-height: 84px !important;
  margin: 0 0 13px !important;
  padding: 12px 12px 12px 82px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

html[data-skin] body .phone-shell .invite-panel .invite-visual {
  left: 6px !important;
  width: 74px !important;
  height: 74px !important;
}

html[data-skin] body .phone-shell .invite-copy-button {
  min-width: 59px !important;
  min-height: 34px !important;
  border-radius: 16px !important;
  color: var(--hx-accent) !important;
}

html[data-skin] body .phone-shell .mine-tool-list {
  margin: 0 !important;
  padding: 4px 12px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

/* 四套模板在“我的”页采用同一玻璃结构，只继承各自主题变量。 */
html[data-skin] body .phone-shell .mine-view :is(.vip-card,.mine-menu-panel,.invite-panel,.mine-tool-list) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, var(--hx-glass-top) 0%, var(--hx-glass-mid) 38%, var(--hx-glass-bottom) 100%) padding-box,
    linear-gradient(180deg, var(--hx-edge-top) 0%, var(--hx-edge-mid) 45%, transparent 100%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 16px 34px var(--hx-shadow) !important;
  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
}

html[data-skin] body .phone-shell .mine-view .mine-primary-actions > button,
html[data-skin] body .phone-shell .mine-view .mine-primary-actions > button:last-child {
  border: 1px solid transparent !important;
  border-radius: 26px !important;
  color: var(--hx-text) !important;
  background:
    linear-gradient(180deg, var(--hx-inner-top), var(--hx-inner-bottom)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-edge-top) 72%, transparent), transparent 94%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
}

html[data-skin] body .phone-shell .mine-view .mine-primary-actions > .gold-action {
  color: #fff9e8 !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hx-success) 19%, transparent), color-mix(in srgb, var(--hx-accent) 12%, transparent)) padding-box,
    linear-gradient(180deg, rgba(246,224,154,.28), rgba(246,224,154,.045) 68%, transparent) border-box !important;
}

html[data-skin] body .phone-shell .mine-view .vip-card::after {
  display: block !important;
  content: "" !important;
  width: auto !important;
  height: auto !important;
  inset: 35% 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hx-page-2) 18%, transparent)) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .mine-tool-list button {
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-width: 0 0 1px !important;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.085), transparent) 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .mine-tool-list button:last-child {
  border-bottom: 0 !important;
}

html[data-skin] body .phone-shell .mine-view .mine-tool-list > button,
html[data-skin] body .phone-shell .mine-view .mine-tool-list > button:first-child,
html[data-skin] body .phone-shell .mine-view .mine-tool-list > button:last-child,
html[data-skin] body .phone-shell .mine-view .mine-tool-list > button + button {
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .mine-view .mine-tool-list > button:last-child {
  border-bottom: 0 !important;
}

/* 内页头部与内容贴近参考页比例。 */
html[data-skin] body .phone-shell .detail-topbar {
  height: 58px !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hx-page-1) 92%, transparent), color-mix(in srgb, var(--hx-page-0) 78%, transparent)) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

html[data-skin] body .phone-shell .detail-page[data-detail="generic"] .generic-hero {
  margin: 12px 14px 8px !important;
  padding: 9px 2px !important;
  background: transparent !important;
}

html[data-skin] body .phone-shell .generic-hero > span {
  display: none !important;
}

html[data-skin] body .phone-shell .generic-hero strong {
  color: var(--hx-text) !important;
}

html[data-skin] body .phone-shell .generic-hero small,
html[data-skin] body .phone-shell :is(.money-rules,.income-settlement-notes,.vip-swipe-hint) {
  color: var(--hx-muted) !important;
}

/* 充值与提现：一个主玻璃框，内部地址、输入与按钮为更透明的第二层。 */
html[data-skin] body .phone-shell .money-center {
  width: 100% !important;
  padding: 0 14px 30px !important;
}

html[data-skin] body .phone-shell .money-tabs {
  width: 100% !important;
  margin: 0 0 13px !important;
  padding: 4px !important;
  border-radius: 18px !important;
}

html[data-skin] body .phone-shell .money-tabs button {
  min-height: 38px !important;
  border-radius: 14px !important;
  color: var(--hx-muted) !important;
  background: transparent !important;
}

html[data-skin] body .phone-shell .money-tabs button.active {
  color: var(--hx-accent) !important;
  background: var(--hx-accent-soft) !important;
}

html[data-skin] body .phone-shell .recharge-wallet-card,
html[data-skin] body .phone-shell .withdraw-form-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 17px !important;
  border-radius: 24px !important;
}

html[data-skin] body .phone-shell .recharge-wallet-card .demo-qr {
  width: min(56vw, 220px) !important;
  height: min(56vw, 220px) !important;
  margin: 24px auto 18px !important;
  padding: 9px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.88) !important;
}

html[data-skin] body .phone-shell .recharge-wallet-card code {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 13px !important;
  border-radius: 13px !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 11px !important;
  word-break: break-all !important;
}

html[data-skin] body .phone-shell .recharge-copy-action,
html[data-skin] body .phone-shell .generic-action {
  min-height: 52px !important;
  border-radius: 25px !important;
}

html[data-skin] body .phone-shell .money-rules {
  margin: 13px 0 0 !important;
  padding: 15px 16px 15px 31px !important;
  border-radius: 19px !important;
  line-height: 1.65 !important;
}

html[data-skin] body .phone-shell .withdraw-wallet-overview {
  margin: 0 0 13px !important;
  padding: 17px 15px !important;
  border-radius: 21px !important;
}

html[data-skin] body .phone-shell .withdraw-wallet-overview > div {
  gap: 7px !important;
}

html[data-skin] body .phone-shell .withdraw-wallet-overview > div > span {
  padding: 13px 6px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.026) !important;
}

html[data-skin] body .phone-shell .money-input {
  min-height: 49px !important;
  border-radius: 14px !important;
}

html[data-skin] body .phone-shell .withdraw-form-card :is(label button,.money-input button),
html[data-skin] body .phone-shell .withdraw-wallet-overview button {
  border: 1px solid rgba(229,204,131,.09) !important;
  border-radius: 13px !important;
  color: var(--hx-accent) !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
}

/* 任务：整屏宽度、每项有足够高度，外卡和内部进度层清楚但不厚重。 */
html[data-skin] body .phone-shell .detail-overlay[data-page-layout="task"] .generic-hero {
  margin-bottom: 3px !important;
}

html[data-skin] body .phone-shell .detail-page[data-generic-layout="task"] .royal-task-list.task-card-list {
  display: grid !important;
  width: 100% !important;
  gap: 14px !important;
  padding: 8px 12px 34px !important;
}

html[data-skin] body .phone-shell .detail-page[data-generic-layout="task"] .royal-task-list article.jb-task-card,
html[data-skin] body .phone-shell .detail-page[data-generic-layout="task"] .royal-task-list article.sf-task-card,
html[data-skin] body .phone-shell .detail-page[data-generic-layout="task"] .sf-task-loading {
  position: relative !important;
  width: 100% !important;
  min-height: 218px !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 23px !important;
  background:
    radial-gradient(circle at 88% 6%, var(--hx-light-b), transparent 34%) padding-box,
    linear-gradient(180deg, var(--hx-glass-top), var(--hx-glass-bottom)) padding-box,
    linear-gradient(180deg, var(--hx-edge-top), var(--hx-edge-mid) 48%, transparent) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 16px 32px var(--hx-shadow) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  backdrop-filter: blur(15px) !important;
}

html[data-skin] body .phone-shell .royal-task-list .top_box {
  min-height: 58px !important;
}

html[data-skin] body .phone-shell .royal-task-list .pic {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.055) !important;
}

html[data-skin] body .phone-shell .royal-task-list .bottom_box {
  margin-top: 13px !important;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,.045) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.022) !important;
}

html[data-skin] body .phone-shell .royal-task-list .btn_box {
  min-height: 54px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
}

html[data-skin] body .phone-shell .royal-task-list .btn_box .btn {
  min-width: 98px !important;
  min-height: 38px !important;
  border: 1px solid rgba(222,198,126,.16) !important;
  border-radius: 18px !important;
  color: var(--hx-accent) !important;
  background: rgba(255,255,255,.045) !important;
}

html[data-skin] body .phone-shell .royal-task-list .btn_box .btn.ready {
  color: #fff9e7 !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hx-success) 50%, transparent), color-mix(in srgb, var(--hx-accent) 36%, transparent)) !important;
}

/* 旧任务样式使用 ID 选择器，这里以最终层明确压平蓝色实底。 */
html[data-skin] body .phone-shell #detailOverlay[data-page-layout="task"] .detail-page[data-generic-layout="task"] .royal-task-list article.jb-task-card,
html[data-skin] body .phone-shell #detailOverlay[data-page-layout="task"] .detail-page[data-generic-layout="task"] .royal-task-list article.sf-task-card {
  border: 1px solid transparent !important;
  border-radius: 23px !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 88% 6%, var(--hx-light-b), transparent 34%),
    linear-gradient(180deg, var(--hx-glass-top), var(--hx-glass-bottom)),
    linear-gradient(180deg, var(--hx-edge-top), var(--hx-edge-mid) 48%, transparent) !important;
  background-clip: padding-box, padding-box, border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 16px 32px var(--hx-shadow) !important;
}

html[data-skin] body .phone-shell #detailOverlay[data-page-layout="task"] .jb-task-card :is(.top_box,.bottom_box,.process,.btn_box) {
  border-color: rgba(255,255,255,.045) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell #detailOverlay[data-page-layout="task"] .jb-task-card .bottom_box {
  border: 1px solid rgba(255,255,255,.045) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.022) !important;
}

html[data-skin] body .phone-shell #detailOverlay[data-page-layout="task"] .jb-task-card .btn_box {
  border-top: 1px solid rgba(255,255,255,.055) !important;
}

/* 收入：两个主卡片、行和三格结算卡保持双层玻璃。 */
html[data-skin] body .phone-shell .detail-page[data-generic-layout="income"] #genericContent {
  display: grid !important;
  gap: 14px !important;
  padding: 4px 12px 34px !important;
}

html[data-skin] body .phone-shell .income-royal-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 16px !important;
  border-radius: 23px !important;
}

html[data-skin] body .phone-shell .income-royal-claim {
  min-height: 72px !important;
}

html[data-skin] body .phone-shell .income-royal-rows {
  gap: 8px !important;
}

html[data-skin] body .phone-shell .income-royal-rows button,
html[data-skin] body .phone-shell .income-royal-stat-grid span {
  min-height: 61px !important;
  border-radius: 14px !important;
}

html[data-skin] body .phone-shell .income-invite-link {
  min-height: 62px !important;
  margin-top: 14px !important;
  padding: 10px 11px !important;
  border-radius: 15px !important;
}

html[data-skin] body .phone-shell .detail-page[data-generic-layout="income"] :is(
  .income-royal-rows button,
  .income-royal-stat-grid span,
  .income-invite-link,
  .income-other-share
) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, var(--hx-inner-top), var(--hx-inner-bottom)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-edge-top) 62%, transparent), transparent 92%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

/* 邀请：一个大玻璃框包住四个独立分享小卡。 */
html[data-skin] body .phone-shell .detail-page[data-generic-layout="invite"] #genericContent {
  padding: 8px 12px 34px !important;
}

html[data-skin] body .phone-shell .invite-rebate-title {
  margin: 4px 2px 18px !important;
  color: var(--hx-text) !important;
  font-size: 21px !important;
}

html[data-skin] body .phone-shell .invite-rebate-title em {
  color: var(--hx-accent) !important;
}

html[data-skin] body .phone-shell .invite-source-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 17px !important;
  border-radius: 23px !important;
}

html[data-skin] body .phone-shell .invite-share-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .invite-share-panel button {
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 13px !important;
  border-radius: 15px !important;
}

html[data-skin] body .phone-shell .invite-stat-grid {
  gap: 9px !important;
  margin-top: 13px !important;
}

html[data-skin] body .phone-shell .invite-stat-grid article {
  min-height: 83px !important;
  border-radius: 17px !important;
}

/* VIP：卡面上亮下透；下半部所有信息块继续保持低透明。 */
html[data-skin] body .phone-shell .royal-vip-detail {
  padding: 2px 12px 34px !important;
}

html[data-skin] body .phone-shell .vip-profile-band {
  margin: 0 0 12px !important;
  padding: 12px 8px !important;
  background: transparent !important;
}

html[data-skin] body .phone-shell .vip-card-stage {
  margin: 0 -12px 8px !important;
}

html[data-skin] body .phone-shell .vip-tier-card {
  min-height: 188px !important;
  padding: 23px 22px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 83% 15%, var(--hx-light-b), transparent 34%) padding-box,
    linear-gradient(180deg, var(--hx-glass-top), var(--hx-glass-mid) 40%, transparent 100%) padding-box,
    linear-gradient(180deg, var(--hx-edge-top), var(--hx-edge-mid) 46%, transparent 100%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 18px 35px var(--hx-shadow) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

html[data-skin] body .phone-shell .vip-tier-card strong,
html[data-skin] body .phone-shell .vip-threshold-grid strong,
html[data-skin] body .phone-shell .vip-rebate-table b {
  color: var(--hx-accent) !important;
}

html[data-skin] body .phone-shell .vip-level-track,
html[data-skin] body .phone-shell .vip-threshold-grid article,
html[data-skin] body .phone-shell .vip-rebate-table {
  border-radius: 16px !important;
}

html[data-skin] body .phone-shell .vip-threshold-grid {
  gap: 8px !important;
}

html[data-skin] body .phone-shell .vip-threshold-grid article {
  min-height: 88px !important;
}

html[data-skin] body .phone-shell .vip-rebate-table header,
html[data-skin] body .phone-shell .vip-rebate-table > div {
  border-color: rgba(255,255,255,.05) !important;
  background: transparent !important;
}

/* 活动、客服、下载、转盘与报表统一材质；活动图仍使用环球自己的正式图。 */
html[data-skin] body .phone-shell .activity-view {
  padding-bottom: 88px !important;
}

html[data-skin] body .phone-shell .activity-card {
  border: 1px solid transparent !important;
  border-radius: 21px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.012)) padding-box,
    linear-gradient(180deg, var(--hx-edge-top), var(--hx-edge-mid) 45%, transparent) border-box !important;
  box-shadow: 0 15px 30px var(--hx-shadow) !important;
}

html[data-skin] body .phone-shell .activity-detail-sheet {
  border-radius: 24px 24px 0 0 !important;
}

html[data-skin] body .phone-shell .feature-modal-mask,
html[data-skin] body .phone-shell .modal-layer.show {
  background: rgba(0, 10, 8, .58) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}

html[data-skin] body .phone-shell .customer-modal,
html[data-skin] body .phone-shell .download-modal {
  overflow: hidden !important;
  border-radius: 25px !important;
}

html[data-skin] body .phone-shell .customer-head {
  min-height: 142px !important;
  background:
    radial-gradient(circle at 76% 24%, var(--hx-light-b), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.075), transparent) !important;
}

html[data-skin] body .phone-shell .service-list {
  display: grid !important;
  gap: 9px !important;
  padding: 14px !important;
}

html[data-skin] body .phone-shell .service-list button {
  min-height: 58px !important;
  padding: 9px 12px !important;
  border-radius: 15px !important;
}

html[data-skin] body .phone-shell .service-list button b {
  min-width: 76px !important;
  padding: 8px 12px !important;
  border-radius: 15px !important;
  color: #1d1709 !important;
  background: linear-gradient(180deg, #f4dda1, #c6a75b) !important;
}

html[data-skin] body .phone-shell .customer-options {
  display: grid !important;
  gap: 9px !important;
  padding: 14px !important;
  background: transparent !important;
}

html[data-skin] body .phone-shell .customer-options > button {
  min-height: 58px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, var(--hx-inner-top), var(--hx-inner-bottom)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-edge-top) 68%, transparent), transparent 92%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

html[data-skin] body .phone-shell .customer-options > button > b {
  min-width: 76px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(229,199,118,.14) !important;
  border-radius: 15px !important;
  color: var(--hx-accent) !important;
  background: rgba(229,199,118,.055) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .download-guide {
  background: transparent !important;
}

html[data-skin] body .phone-shell .guide-step {
  margin: 9px 0 !important;
  padding: 13px !important;
  border-radius: 15px !important;
}

html[data-skin] body .phone-shell .download-platform-tabs {
  border: 1px solid rgba(255,255,255,.045) !important;
  background: rgba(255,255,255,.022) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .download-platform-tabs button {
  color: var(--hx-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .download-platform-tabs button.active {
  color: var(--hx-accent) !important;
  background: var(--hx-accent-soft) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
}

html[data-skin] body .phone-shell :is(.browser-bar,.add-home) {
  border: 1px solid rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.70) !important;
  background: rgba(3,24,20,.34) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

html[data-skin] body .phone-shell :is(.browser-bar,.add-home) b {
  color: var(--hx-accent) !important;
  border-color: rgba(228,200,124,.12) !important;
  background: rgba(228,200,124,.055) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .download-copy-url {
  color: var(--hx-accent) !important;
  border: 1px solid rgba(228,200,124,.13) !important;
  background: rgba(228,200,124,.055) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell #downloadModal .download-modal .download-platform-tabs,
html[data-skin] body .phone-shell #downloadModal .download-modal .download-guide {
  border: 1px solid rgba(255,255,255,.045) !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell #downloadModal .download-modal .download-platform-tabs button,
html[data-skin] body .phone-shell #downloadModal .download-modal .download-platform-tabs button.active {
  color: var(--hx-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell #downloadModal .download-modal .download-platform-tabs button.active {
  color: var(--hx-accent) !important;
  background: rgba(228,200,124,.065) !important;
}

html[data-skin] body .phone-shell #downloadModal .download-modal :is(.browser-bar,.add-home) {
  border: 1px solid rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.68) !important;
  background: rgba(3,24,20,.30) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03) !important;
}

html[data-skin] body .phone-shell #downloadModal .download-modal .download-copy-url {
  color: var(--hx-accent) !important;
  border: 1px solid rgba(228,200,124,.13) !important;
  background: rgba(228,200,124,.055) !important;
  box-shadow: none !important;
}

html[data-skin] body .phone-shell .wheel-page {
  padding: 10px 12px 34px !important;
}

html[data-skin] body .phone-shell .wheel-premium-stage {
  width: 100% !important;
  padding: 20px 14px !important;
  border-radius: 25px !important;
}

html[data-skin] body .phone-shell .wheel-image {
  filter: saturate(.84) brightness(.96) drop-shadow(0 16px 28px rgba(0,0,0,.28)) !important;
}

html[data-skin] body .phone-shell :is(.report-summary-grid,.generic-stats) {
  gap: 8px !important;
  margin: 0 12px 13px !important;
  padding: 12px !important;
  border-radius: 21px !important;
}

html[data-skin] body .phone-shell .report-summary-grid article {
  min-height: 88px !important;
  padding: 13px 7px !important;
  border-radius: 15px !important;
}

html[data-skin] body .phone-shell :is(.commission-records,.generic-list,.bet-record-list,.income-record-list) {
  margin: 0 12px 28px !important;
  padding: 13px !important;
  border-radius: 21px !important;
}

html[data-skin] body .phone-shell :is(.commission-records,.generic-list,.bet-record-list,.income-record-list) article {
  min-height: 62px !important;
  margin-top: 8px !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

/* 底部导航沿用同一玻璃，但不做厚重实色底。 */
html[data-skin] body .phone-shell .bottom-nav {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hx-page-1) 68%, transparent), color-mix(in srgb, var(--hx-page-2) 74%, transparent)) padding-box,
    linear-gradient(180deg, var(--hx-edge-top), var(--hx-edge-mid) 56%, transparent) border-box !important;
  box-shadow: 0 17px 34px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.055) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

html[data-skin] body .phone-shell .bottom-item {
  border-radius: 17px !important;
  background: transparent !important;
}

html[data-skin] body .phone-shell .bottom-item.active {
  border: 1px solid rgba(225, 198, 121, .12) !important;
  color: var(--hx-accent) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
}

@media (max-width: 390px) {
  html[data-skin] body .phone-shell .mine-page-body,
  html[data-skin] body .phone-shell .money-center {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  html[data-skin] body .phone-shell .mine-menu-panel {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html[data-skin] body .phone-shell .mine-menu-grid button > span {
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-skin] body .phone-shell *,
  html[data-skin] body .phone-shell *::before,
  html[data-skin] body .phone-shell *::after {
    scroll-behavior: auto !important;
  }
}

/* 客服和下载弹窗位于 phone-shell 之后，单独纳入同一最终玻璃层。 */
html[data-skin] body :is(#customerModal,#ticketModal,#downloadModal).modal-layer.show {
  background: rgba(0,10,8,.58) !important;
  -webkit-backdrop-filter: blur(6px) saturate(106%) !important;
  backdrop-filter: blur(6px) saturate(106%) !important;
}

html[data-skin] body :is(#customerModal,#ticketModal) .customer-modal,
html[data-skin] body #downloadModal .download-modal {
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 25px !important;
  color: var(--hx-text) !important;
  background:
    radial-gradient(circle at 84% 4%, var(--hx-light-b), transparent 31%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-page-1) 82%, transparent), color-mix(in srgb, var(--hx-page-2) 90%, transparent)) padding-box,
    linear-gradient(180deg, var(--hx-edge-top), var(--hx-edge-mid) 48%, transparent) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 24px 58px rgba(0,0,0,.42) !important;
  -webkit-backdrop-filter: blur(20px) saturate(110%) !important;
  backdrop-filter: blur(20px) saturate(110%) !important;
}

html[data-skin] body :is(#customerModal,#ticketModal) .customer-head {
  min-height: 142px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 76% 24%, var(--hx-light-b), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent) !important;
}

html[data-skin] body :is(#customerModal,#ticketModal) .customer-options {
  display: grid !important;
  gap: 9px !important;
  padding: 14px !important;
  background: transparent !important;
}

html[data-skin] body :is(#customerModal,#ticketModal) .customer-options > button {
  min-height: 58px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  color: rgba(255,255,255,.78) !important;
  background:
    linear-gradient(180deg, var(--hx-inner-top), var(--hx-inner-bottom)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--hx-edge-top) 68%, transparent), transparent 92%) border-box !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

html[data-skin] body :is(#customerModal,#ticketModal) .customer-options > button > b {
  min-width: 76px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(229,199,118,.14) !important;
  border-radius: 15px !important;
  color: var(--hx-accent) !important;
  background: rgba(229,199,118,.055) !important;
  box-shadow: none !important;
}

html[data-skin] body #downloadModal .download-guide,
html[data-skin] body #downloadModal .download-platform-tabs {
  border: 1px solid rgba(255,255,255,.045) !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
}

html[data-skin] body #downloadModal .download-platform-tabs button,
html[data-skin] body #downloadModal .download-platform-tabs button.active {
  color: var(--hx-muted) !important;
  -webkit-text-fill-color: var(--hx-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-skin] body #downloadModal .download-platform-tabs button.active {
  color: var(--hx-accent) !important;
  -webkit-text-fill-color: var(--hx-accent) !important;
  background: rgba(228,200,124,.065) !important;
}

html[data-skin] body #downloadModal :is(.browser-bar,.add-home) {
  border: 1px solid rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.68) !important;
  background: rgba(3,24,20,.30) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03) !important;
}

html[data-skin] body #downloadModal :is(.browser-bar,.add-home) b {
  color: var(--hx-accent) !important;
  border-color: rgba(228,200,124,.12) !important;
  background: rgba(228,200,124,.055) !important;
  box-shadow: none !important;
}

html[data-skin] body #downloadModal .download-copy-url {
  color: var(--hx-accent) !important;
  border: 1px solid rgba(228,200,124,.13) !important;
  background: rgba(228,200,124,.055) !important;
  box-shadow: none !important;
}