/* Source: tianxin_new apps/client/src/views/Benefit*.vue. Scoped to this shared route. */

/* BenefitsView */

#tx-benefits-root .benefits-attention { position:relative; }
#tx-benefits-root .benefits-attention::after { content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#f04452; box-shadow:0 0 0 2px var(--skin-surface, #fff); pointer-events:none; z-index:1; }
#tx-benefits-root .benefits-header ion-toolbar {
  --min-height: 48px;
  --background: rgba(250, 252, 255, .96);
  --border-width: 0;
  --border-color: transparent;
  box-shadow: none;
}
#tx-benefits-root .benefits-toolbar-action { display:flex; align-items:center; gap:5px; height:38px; margin-right:12px; padding:0 9px; border:0; background:transparent; color:#40617d; font-size:14px; }
#tx-benefits-root .benefits-toolbar-action ion-icon { font-size:19px; }
#tx-benefits-root .benefits-page { --background:#f3f6fa; }
#tx-benefits-root .benefits-shell { width:min(100%, 680px); min-height:100%; margin:0 auto; padding:14px 14px calc(28px + var(--ion-safe-area-bottom)); }
#tx-benefits-root .benefits-summary-card,#tx-benefits-root .benefits-card { border:1px solid rgba(219,227,237,.94); background:#fff; box-shadow:0 10px 28px rgba(38,57,77,.07); }
#tx-benefits-root .benefits-summary-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; padding:18px 16px; border-radius:20px; overflow:hidden; }
#tx-benefits-root .benefits-summary-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; color:#8c6428; background:linear-gradient(145deg,#fff7e5,#f7e6bd); font-size:25px; }
#tx-benefits-root .benefits-summary-card p,#tx-benefits-root .benefits-summary-card h1,#tx-benefits-root .benefits-summary-card small { margin:0; }
#tx-benefits-root .benefits-summary-card p { margin-bottom:3px; color:#7a8795; font-size:12px; }
#tx-benefits-root .benefits-summary-card h1 { color:#172536; font-size:20px; line-height:1.25; }
#tx-benefits-root .benefits-summary-card small { display:block; margin-top:5px; color:#8b97a5; line-height:1.35; }
#tx-benefits-root .benefits-summary-card button { height:36px; padding:0 14px; border:0; border-radius:12px; background:#176fbe; color:#fff; font-weight:750; }
#tx-benefits-root .benefits-inline-error { display:flex; justify-content:space-between; gap:10px; margin:10px 2px 0; padding:9px 11px; border-radius:10px; color:#9a4e45; background:#fff1ef; font-size:12px; }
#tx-benefits-root .benefits-inline-error button { border:0; background:transparent; color:#bd493a; font-weight:700; }
#tx-benefits-root .benefits-card { margin-top:12px; padding:16px; overflow:hidden; border-radius:18px; }
#tx-benefits-root .benefits-card-media { display:block; width:calc(100% + 32px); max-width:none; height:auto; aspect-ratio:3/1; margin:-16px -16px 14px; object-fit:cover; background:#edf3f9; }
#tx-benefits-root .benefits-summary-card>.benefits-summary-media { grid-column:1/-1; width:calc(100% + 32px); max-width:none; margin:-18px -16px 2px; }
#tx-benefits-root .benefits-section { margin-top:22px; }
#tx-benefits-root .benefits-section-heading { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; }
#tx-benefits-root .benefits-section-heading>span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; font-size:22px; }
#tx-benefits-root .benefits-section-heading>span.blue { color:#246da7; background:#eaf5ff; }
#tx-benefits-root .benefits-section-heading>span.gold { color:#9d732f; background:#fff5dd; }
#tx-benefits-root .benefits-section-heading h2,#tx-benefits-root .benefits-section-heading p { margin:0; }
#tx-benefits-root .benefits-section-heading h2 { color:#1d2a39; font-size:16px; }
#tx-benefits-root .benefits-section-heading p { margin-top:4px; color:#8b96a4; font-size:12px; }
#tx-benefits-root .benefits-section-heading em { color:#9a7434; font-size:12px; font-style:normal; font-weight:700; }
#tx-benefits-root .benefits-checkin-main { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid #edf1f5; }
#tx-benefits-root .benefits-checkin-main small { display:block; color:#8b96a4; }
#tx-benefits-root .benefits-checkin-main strong { display:block; margin-top:3px; color:#996b20; font-size:19px; }
#tx-benefits-root .benefits-checkin-actions { display:flex; align-items:center; gap:7px; }
#tx-benefits-root .benefits-checkin-actions button,#tx-benefits-root .benefits-rule-row button { min-width:82px; height:36px; padding:0 13px; border:1px solid #2879c8; border-radius:11px; background:#2879c8; color:#fff; font-weight:750; }
#tx-benefits-root .benefits-checkin-actions .benefits-checkin-detail { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:76px; border-color:#d6e1eb; background:#f8fafc; color:#53728c; }
#tx-benefits-root .benefits-checkin-detail > ion-icon { flex-shrink:0; font-size:14px; color:inherit; }
#tx-benefits-root .benefits-checkin-actions button.completed,#tx-benefits-root .benefits-rule-row button.claimed,#tx-benefits-root .benefits-rule-row button:not(.claimable):not(.guest) { border-color:#d8e0e8; background:#f2f5f8; color:#8b96a3; }
#tx-benefits-root .benefits-checkin.disabled { background:linear-gradient(145deg,#fff,#f8fafc); }
#tx-benefits-root .benefits-checkin-disabled { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; padding-top:14px; border-top:1px solid #edf1f5; }
#tx-benefits-root .benefits-checkin-disabled strong,#tx-benefits-root .benefits-checkin-disabled small { display:block; }
#tx-benefits-root .benefits-checkin-disabled strong { color:#526170; font-size:14px; }
#tx-benefits-root .benefits-checkin-disabled small { margin-top:4px; color:#98a2ad; font-size:11px; }
#tx-benefits-root .benefits-checkin-disabled button { display:flex; align-items:center; gap:3px; flex:none; height:35px; padding:0 9px 0 12px; border:1px solid #d9e2eb; border-radius:11px; background:#f7f9fb; color:#607991; font-weight:700; }
#tx-benefits-root .benefits-checkin-disabled ion-icon { font-size:16px; }
#tx-benefits-root .benefits-block-title { display:flex; align-items:end; justify-content:space-between; padding:0 3px 10px; }
#tx-benefits-root .benefits-block-title h2,#tx-benefits-root .benefits-block-title p { margin:0; }
#tx-benefits-root .benefits-block-title h2 { color:#1c2a3a; font-size:18px; }
#tx-benefits-root .benefits-block-title p { margin-top:4px; color:#8995a4; font-size:12px; }
#tx-benefits-root .benefits-spinner-card { overflow:hidden; border:1px solid #dce5ef; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(38,57,77,.06); }
#tx-benefits-root .benefits-spinner-card>.benefits-spinner-media { width:100%; max-width:none; margin:0; }
#tx-benefits-root .benefits-spinner-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
#tx-benefits-root .benefits-spinner-entry { display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:9px; min-height:78px; padding:13px; border:0; border-radius:0; background:#fff; text-align:left; box-shadow:none; }
#tx-benefits-root .benefits-spinner-entry+.benefits-spinner-entry { border-left:1px solid #edf1f5; }
#tx-benefits-root .benefits-spinner-entry>span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; font-size:22px; }
#tx-benefits-root .benefits-spinner-entry.low>span { color:#2676b9; background:#eaf5ff; }
#tx-benefits-root .benefits-spinner-entry.high>span { color:#a17429; background:#fff4d9; }
#tx-benefits-root .benefits-spinner-entry.disabled { border-style:dashed; background:linear-gradient(145deg,#fff,#f7f9fb); box-shadow:none; }
#tx-benefits-root .benefits-spinner-entry.disabled>span { color:#8997a5; background:#edf1f5; }
#tx-benefits-root .benefits-spinner-entry.disabled small { color:#9aa5af; }
#tx-benefits-root .benefits-spinner-entry strong,#tx-benefits-root .benefits-spinner-entry small { display:block; }
#tx-benefits-root .benefits-spinner-entry strong { color:#1d2b3a; font-size:15px; }
#tx-benefits-root .benefits-spinner-entry small { margin-top:5px; color:#8794a2; }
#tx-benefits-root .benefits-spinner-entry>ion-icon { color:#aab4bf; font-size:18px; }
#tx-benefits-root .benefits-tasks .benefits-task-card:first-of-type { margin-top:0; }
#tx-benefits-root .benefits-progress { height:7px; margin-top:14px; overflow:hidden; border-radius:999px; background:#edf2f6; }
#tx-benefits-root .benefits-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d3aa5d,#2d7cc2); transition:width .35s ease; }
#tx-benefits-root .benefits-progress-caption { margin:6px 0 0; color:#8b96a4; font-size:11px; text-align:right; }
#tx-benefits-root .benefits-effective-note { margin:5px 0 0; color:#8b96a4; font-size:11px; line-height:1.45; }
#tx-benefits-root .benefits-rule-list { margin-top:11px; border-top:1px solid #edf1f5; }
#tx-benefits-root .benefits-rule-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; border-bottom:1px solid #f0f3f6; }
#tx-benefits-root .benefits-rule-row:last-child { border-bottom:0; }
#tx-benefits-root .benefits-rule-row small,#tx-benefits-root .benefits-rule-row strong { display:block; }
#tx-benefits-root .benefits-rule-row small { color:#8794a2; }
#tx-benefits-root .benefits-rule-row strong { margin-top:4px; color:#9b6c22; font-size:15px; }
#tx-benefits-root .benefits-state { display:grid; place-items:center; min-height:280px; margin-top:14px; padding:28px; border:1px dashed #d5dee8; border-radius:20px; background:#fff; text-align:center; }
#tx-benefits-root .benefits-state>span { display:grid; place-items:center; width:54px; height:54px; border-radius:18px; color:#51718d; background:#edf4fa; font-size:28px; }
#tx-benefits-root .benefits-state h2 { margin:12px 0 0; color:#253547; font-size:18px; }
#tx-benefits-root .benefits-state p { margin:7px 0 0; color:#8795a5; }
#tx-benefits-root .benefits-state button { display:flex; align-items:center; gap:6px; height:38px; margin-top:16px; padding:0 15px; border:0; border-radius:11px; background:#2678c6; color:#fff; }
#tx-benefits-root .benefits-state.is-error>span { color:#b64b3c; background:#fff0ed; }
#tx-benefits-root .benefits-skeleton { display:grid; gap:12px; }
#tx-benefits-root .benefits-skeleton-summary,#tx-benefits-root .benefits-skeleton-card { position:relative; overflow:hidden; border:1px solid #e2e8ef; border-radius:19px; background:#fff; }
#tx-benefits-root .benefits-skeleton-summary::after,#tx-benefits-root .benefits-skeleton-card::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent); animation:benefits-shimmer 1.35s infinite; }
#tx-benefits-root .benefits-skeleton-summary { display:grid; grid-template-columns:48px 1fr 42px; gap:12px; padding:18px 16px; }
#tx-benefits-root .benefits-skeleton-summary i,#tx-benefits-root .benefits-skeleton-card i { width:48px; height:48px; border-radius:15px; background:#edf1f5; }
#tx-benefits-root .benefits-skeleton-summary strong,#tx-benefits-root .benefits-skeleton-summary span,#tx-benefits-root .benefits-skeleton-card strong,#tx-benefits-root .benefits-skeleton-card span,#tx-benefits-root .benefits-skeleton-card b { display:block; height:13px; margin-top:5px; border-radius:999px; background:#edf1f5; }
#tx-benefits-root .benefits-skeleton-summary span { width:72%; margin-top:10px; }
#tx-benefits-root .benefits-skeleton-card { display:grid; grid-template-columns:48px 1fr 74px; gap:12px; padding:17px 16px; }
#tx-benefits-root .benefits-skeleton-card span { width:60%; margin-top:9px; }
#tx-benefits-root .benefits-skeleton-card b { align-self:center; height:34px; margin:0; }
@keyframes benefits-shimmer { to { transform:translateX(100%); } }
@media (max-width:430px) { #tx-benefits-root .benefits-checkin-main { align-items:stretch; flex-direction:column; } #tx-benefits-root .benefits-checkin-actions { width:100%; } #tx-benefits-root .benefits-checkin-actions button { flex:1; } }
@media (max-width:380px) { #tx-benefits-root .benefits-spinner-grid { grid-template-columns:1fr; } #tx-benefits-root .benefits-spinner-entry+.benefits-spinner-entry { border-top:1px solid #edf1f5; border-left:0; } #tx-benefits-root .benefits-summary-card { grid-template-columns:44px minmax(0,1fr); } #tx-benefits-root .benefits-summary-card>button { grid-column:2; justify-self:start; } #tx-benefits-root .benefits-checkin-disabled { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { #tx-benefits-root .benefits-skeleton-summary::after,#tx-benefits-root .benefits-skeleton-card::after { animation:none; } #tx-benefits-root .benefits-progress i { transition:none; } }


/* BenefitCheckInView */

#tx-benefits-root .checkin-header ion-toolbar { --background:rgba(250,252,255,.97); --border-color:#e3e9f1; }
#tx-benefits-root .checkin-page { --background:#f3f6fa; }
#tx-benefits-root .checkin-shell { width:min(100%,680px); min-height:100%; margin:0 auto; padding:14px 14px calc(30px + var(--ion-safe-area-bottom)); }
#tx-benefits-root .checkin-hero { position:relative; display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:13px; overflow:hidden; padding:18px 17px; border:1px solid #dce5ef; border-radius:21px; background:linear-gradient(145deg,#fff 12%,#f4f9ff 70%,#fff9ec); box-shadow:0 12px 32px rgba(38,57,77,.08); }
#tx-benefits-root .checkin-hero::after { content:""; position:absolute; right:-42px; bottom:-74px; width:170px; height:170px; border:28px solid rgba(51,127,190,.055); border-radius:50%; pointer-events:none; }
#tx-benefits-root .checkin-hero-icon { position:relative; z-index:1; display:grid; place-items:center; width:54px; height:54px; border-radius:18px; color:#2877b8; background:linear-gradient(145deg,#e7f4ff,#f2f8ff); box-shadow:inset 0 0 0 1px rgba(45,123,187,.08); font-size:27px; }
#tx-benefits-root .checkin-hero-copy { position:relative; z-index:1; min-width:0; }
#tx-benefits-root .checkin-hero-copy p,#tx-benefits-root .checkin-hero-copy h1,#tx-benefits-root .checkin-hero-copy small { margin:0; }
#tx-benefits-root .checkin-hero-copy p { color:#7f8d9b; font-size:12px; }
#tx-benefits-root .checkin-hero-copy h1 { margin-top:3px; color:#182739; font-size:21px; }
#tx-benefits-root .checkin-hero-copy small { display:block; margin-top:5px; color:#8794a2; line-height:1.4; }
#tx-benefits-root .checkin-hero-status { position:relative; z-index:1; padding:7px 10px; border-radius:11px; color:#9a6d24; background:#fff2d5; font-size:12px; font-weight:800; white-space:nowrap; }
#tx-benefits-root .checkin-hero-status.completed { color:#287b64; background:#e8f7f0; }
#tx-benefits-root .checkin-inline-error { display:flex; justify-content:space-between; gap:10px; margin:10px 2px 0; padding:9px 11px; border-radius:10px; color:#9a4e45; background:#fff1ef; font-size:12px; }
#tx-benefits-root .checkin-inline-error button { border:0; background:transparent; color:#bd493a; font-weight:750; }
#tx-benefits-root .checkin-cycle-card { margin-top:12px; padding:17px; border:1px solid #dce4ed; border-radius:21px; background:#fff; box-shadow:0 10px 28px rgba(38,57,77,.065); }
#tx-benefits-root .checkin-cycle-card>header { display:flex; align-items:start; justify-content:space-between; gap:12px; }
#tx-benefits-root .checkin-cycle-card h2,#tx-benefits-root .checkin-cycle-card p { margin:0; }
#tx-benefits-root .checkin-cycle-card h2 { color:#1b2a3b; font-size:18px; }
#tx-benefits-root .checkin-cycle-card p { margin-top:4px; color:#8794a2; font-size:12px; }
#tx-benefits-root .checkin-cycle-card>header>span { display:flex; align-items:center; gap:4px; color:#37775f; font-size:11px; font-weight:750; }
#tx-benefits-root .checkin-cycle-card>header ion-icon { font-size:15px; }
#tx-benefits-root .checkin-cycle-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:15px; }
#tx-benefits-root .checkin-day { position:relative; display:grid; justify-items:center; min-width:0; min-height:112px; padding:9px 7px 10px; overflow:hidden; border:1px solid #e1e7ee; border-radius:15px; background:#f8fafc; text-align:center; }
#tx-benefits-root .checkin-day-top { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; }
#tx-benefits-root .checkin-day-top span { overflow:hidden; color:#718091; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#tx-benefits-root .checkin-day-top i { display:none; color:#3478b1; font-size:8px; font-style:normal; font-weight:800; white-space:nowrap; }
#tx-benefits-root .checkin-day-icon { display:grid; place-items:center; width:35px; height:35px; margin-top:7px; border-radius:12px; color:#8191a0; background:#edf1f5; font-size:18px; }
#tx-benefits-root .checkin-day strong { align-self:end; width:100%; margin-top:7px; overflow:hidden; color:#465767; font-size:10px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
#tx-benefits-root .checkin-day.completed,#tx-benefits-root .checkin-day.today { border-color:#cfe8dc; background:#f2faf6; }
#tx-benefits-root .checkin-day.completed .checkin-day-icon,#tx-benefits-root .checkin-day.today .checkin-day-icon { color:#2d8268; background:#e0f3e9; }
#tx-benefits-root .checkin-day.today { border-color:#e6c982; background:linear-gradient(145deg,#fff9e9,#fffdf8); box-shadow:0 7px 16px rgba(163,116,33,.09); }
#tx-benefits-root .checkin-day.today .checkin-day-icon { color:#a67525; background:#fff0c9; }
#tx-benefits-root .checkin-day.current { border-color:#80b6e2; background:linear-gradient(145deg,#f1f8ff,#fff); box-shadow:0 8px 18px rgba(41,119,183,.12); }
#tx-benefits-root .checkin-day.current .checkin-day-icon { color:#2878b9; background:#e3f1fc; }
#tx-benefits-root .checkin-day.current .checkin-day-top i,#tx-benefits-root .checkin-day.today .checkin-day-top i { display:block; }
#tx-benefits-root .checkin-day.upcoming { opacity:.72; }
#tx-benefits-root .checkin-action-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; margin-top:12px; padding:14px; border:1px solid #d9e4ee; border-radius:19px; background:linear-gradient(145deg,#fff,#f5faff); box-shadow:0 9px 25px rgba(38,57,77,.06); }
#tx-benefits-root .checkin-action-card>span { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; color:#2878b9; background:#e8f4fe; font-size:23px; }
#tx-benefits-root .checkin-action-card strong,#tx-benefits-root .checkin-action-card small { display:block; }
#tx-benefits-root .checkin-action-card strong { color:#1d2c3d; font-size:14px; }
#tx-benefits-root .checkin-action-card small { margin-top:4px; color:#8794a2; font-size:11px; line-height:1.35; }
#tx-benefits-root .checkin-action-card>button { min-width:94px; height:39px; padding:0 13px; border:0; border-radius:12px; background:linear-gradient(135deg,#3187cc,#246db3); color:#fff; font-weight:800; box-shadow:0 7px 15px rgba(42,119,184,.2); }
#tx-benefits-root .checkin-action-card>button:disabled { color:#87939f; background:#e9edf1; box-shadow:none; }
#tx-benefits-root .checkin-action-card.completed>span { color:#2b8067; background:#e6f5ed; }
#tx-benefits-root .checkin-action-card.guest>span { color:#98702e; background:#fff3d9; }
#tx-benefits-root .checkin-state { display:grid; place-items:center; min-height:500px; padding:34px; border:1px dashed #d5dfe8; border-radius:23px; background:#fff; text-align:center; }
#tx-benefits-root .checkin-state>span { display:grid; place-items:center; width:62px; height:62px; border-radius:21px; color:#51718d; background:#edf4fa; font-size:31px; }
#tx-benefits-root .checkin-state h1 { margin:16px 0 0; color:#233446; font-size:20px; }
#tx-benefits-root .checkin-state.is-empty h1 { margin-top:0; }
#tx-benefits-root .checkin-state p { max-width:330px; margin:8px 0 0; color:#8795a4; line-height:1.65; }
#tx-benefits-root .checkin-state button { display:flex; align-items:center; gap:6px; height:39px; margin-top:17px; padding:0 15px; border:0; border-radius:11px; background:#2878bd; color:#fff; }
#tx-benefits-root .checkin-state.is-error>span { color:#b64d3f; background:#fff0ed; }
#tx-benefits-root .checkin-skeleton { display:grid; gap:12px; }
#tx-benefits-root .checkin-skeleton>section,#tx-benefits-root .checkin-skeleton>article,#tx-benefits-root .checkin-skeleton>footer { position:relative; overflow:hidden; border:1px solid #e0e7ee; border-radius:21px; background:#fff; }
#tx-benefits-root .checkin-skeleton>section::after,#tx-benefits-root .checkin-skeleton>article::after,#tx-benefits-root .checkin-skeleton>footer::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); animation:checkin-shimmer 1.3s infinite; }
#tx-benefits-root .checkin-skeleton>section { display:grid; grid-template-columns:54px 1fr 70px; gap:13px; padding:18px 17px; }
#tx-benefits-root .checkin-skeleton>section i { width:54px; height:54px; border-radius:18px; background:#edf1f5; }
#tx-benefits-root .checkin-skeleton strong,#tx-benefits-root .checkin-skeleton span,#tx-benefits-root .checkin-skeleton b,#tx-benefits-root .checkin-skeleton article header,#tx-benefits-root .checkin-skeleton article i,#tx-benefits-root .checkin-skeleton>footer { display:block; border-radius:999px; background:#edf1f5; }
#tx-benefits-root .checkin-skeleton strong { width:55%; height:15px; margin-top:4px; }
#tx-benefits-root .checkin-skeleton span { width:82%; height:11px; margin-top:10px; }
#tx-benefits-root .checkin-skeleton b { align-self:center; height:28px; }
#tx-benefits-root .checkin-skeleton>article { padding:17px; }
#tx-benefits-root .checkin-skeleton article header { width:35%; height:17px; }
#tx-benefits-root .checkin-skeleton article div { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:15px; }
#tx-benefits-root .checkin-skeleton article i { height:110px; border-radius:15px; }
#tx-benefits-root .checkin-skeleton>footer { height:72px; border-radius:19px; }
#tx-benefits-root .checkin-result-modal { --border-radius:23px 23px 0 0; --box-shadow:0 -16px 44px rgba(22,34,47,.16); }
#tx-benefits-root .checkin-result-sheet { display:flex; box-sizing:border-box; flex-direction:column; align-items:center; min-height:100%; padding:25px 24px calc(24px + var(--ion-safe-area-bottom)); background:#fff; text-align:center; }
#tx-benefits-root .checkin-result-sheet>span { display:grid; place-items:center; width:60px; height:60px; border-radius:20px; color:#9c712c; background:#fff3d8; font-size:31px; }
#tx-benefits-root .checkin-result-sheet.plain>span { color:#2c8168; background:#e8f7f0; }
#tx-benefits-root .checkin-result-sheet p { margin:12px 0 0; color:#8794a2; }
#tx-benefits-root .checkin-result-sheet h2 { margin:5px 0 0; color:#966922; font-size:29px; }
#tx-benefits-root .checkin-result-sheet.plain h2 { margin-top:12px; color:#2c8168; }
#tx-benefits-root .checkin-result-sheet small { margin-top:7px; color:#8794a1; }
#tx-benefits-root .checkin-result-sheet button { width:100%; height:44px; margin-top:20px; border:0; border-radius:13px; background:#2879c7; color:#fff; font-size:16px; font-weight:800; }
@keyframes checkin-shimmer { to { transform:translateX(100%); } }
@media (max-width:390px) { #tx-benefits-root .checkin-cycle-grid,#tx-benefits-root .checkin-skeleton article div { grid-template-columns:repeat(3,minmax(0,1fr)); } #tx-benefits-root .checkin-action-card { grid-template-columns:42px minmax(0,1fr); } #tx-benefits-root .checkin-action-card>button { grid-column:1/-1; width:100%; } }
@media (max-width:350px) { #tx-benefits-root .checkin-hero { grid-template-columns:50px minmax(0,1fr); } #tx-benefits-root .checkin-hero-status { grid-column:2; justify-self:start; } }
@media (prefers-reduced-motion:reduce) { #tx-benefits-root .checkin-skeleton>section::after,#tx-benefits-root .checkin-skeleton>article::after,#tx-benefits-root .checkin-skeleton>footer::after { animation:none; } }


/* BenefitSpinnerView */

#tx-benefits-root .spinner-header ion-toolbar {
  --background: rgba(250, 252, 255, 0.97);
  --border-color: #e3e9f1;
}
#tx-benefits-root .spinner-balance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  box-sizing: border-box;
  min-width: 0;
  max-width: min(48vw, 180px);
  min-height: 26px;
  margin-inline: 4px 10px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #74859a;
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#tx-benefits-root .spinner-balance-coin {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  color: #8ca0b6;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}
#tx-benefits-root .spinner-balance > span {
  flex: none;
}
#tx-benefits-root .spinner-balance strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #65758a;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tx-benefits-root .spinner-balance.is-increasing strong {
  animation: spinner-balance-counting 0.32s ease-in-out infinite alternate;
  color: #159b72;
}
#tx-benefits-root .spinner-page {
  --background: #f3f6fa;
}
#tx-benefits-root .spinner-shell {
  --accent: #2a78bc;
  --accent-light: #5a9fd6;
  --accent-soft: #e9f5ff;
  --accent-border: rgba(42, 120, 188, 0.1);
  --accent-shadow: rgba(42, 120, 188, 0.32);
  --metal: #adc8de;
  width: min(100%, 680px);
  min-height: 100%;
  margin: 0 auto;
  padding: 14px 14px calc(30px + var(--ion-safe-area-bottom));
}
#tx-benefits-root .spinner-shell.high {
  --accent: #9c712d;
  --accent-light: #c69a4e;
  --accent-soft: #fff4da;
  --accent-border: rgba(156, 113, 45, 0.1);
  --accent-shadow: rgba(156, 113, 45, 0.3);
  --metal: #d5b16a;
}
#tx-benefits-root .spinner-tier-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid #dce4ec;
  border-radius: 14px;
  background: #e9eef4;
}
#tx-benefits-root .spinner-tier-switch button {
  height: 39px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #718091;
  font-weight: 700;
}
#tx-benefits-root .spinner-tier-switch button.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 4px 14px rgba(41, 58, 77, 0.1);
}
#tx-benefits-root .spinner-intro {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 17px;
  border: 1px solid #dce5ee;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(38, 57, 77, 0.07);
}
#tx-benefits-root .spinner-intro > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 25px;
}
#tx-benefits-root .spinner-intro p,
#tx-benefits-root .spinner-intro h1,
#tx-benefits-root .spinner-intro small {
  margin: 0;
}
#tx-benefits-root .spinner-intro p {
  color: #8693a1;
  font-size: 12px;
}
#tx-benefits-root .spinner-intro h1 {
  margin-top: 2px;
  color: #182638;
  font-size: 20px;
}
#tx-benefits-root .spinner-intro small {
  display: block;
  margin-top: 4px;
  color: #8c98a5;
  line-height: 1.35;
}
#tx-benefits-root .spinner-intro em {
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}
#tx-benefits-root .spinner-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 390px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid #dde5ed;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 45%, #fff 0 36%, #f5f8fb 69%, #eef3f8 100%);
  box-shadow: 0 12px 34px rgba(35, 54, 74, 0.08);
}
#tx-benefits-root .spinner-stage::before,
#tx-benefits-root .spinner-stage::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
}
#tx-benefits-root .spinner-stage::after {
  width: 350px;
  height: 350px;
}
#tx-benefits-root .spinner-stage.requesting .spinner-wheel-frame {
  animation: spinner-request-pulse 0.72s ease-in-out infinite alternate;
}
#tx-benefits-root .spinner-pointer {
  position: absolute;
  z-index: 5;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 5px rgba(29, 42, 55, 0.2));
}
#tx-benefits-root .spinner-pointer i {
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 34px solid var(--accent);
}
#tx-benefits-root .spinner-wheel-frame {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 302px;
  height: 302px;
  padding: 9px;
  border: 5px solid var(--metal);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 15px 32px rgba(43, 60, 78, 0.16),
    inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}
#tx-benefits-root .spinner-wheel {
  position: relative;
  width: 274px;
  height: 274px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  transition: transform 4s cubic-bezier(0.12, 0.72, 0.12, 1);
}
#tx-benefits-root .spinner-wheel-frame,
#tx-benefits-root .spinner-wheel {
  box-sizing: border-box;
}
#tx-benefits-root .spinner-prize {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  color: #465b6c;
  text-align: center;
}
#tx-benefits-root .spinner-prize ion-icon {
  color: var(--accent);
  font-size: 18px;
}
#tx-benefits-root .spinner-prize small {
  display: block;
  width: 74px;
  margin-top: 3px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tx-benefits-root .spinner-wheel.dense .spinner-prize {
  width: 52px;
}
#tx-benefits-root .spinner-wheel.dense .spinner-prize ion-icon {
  font-size: 15px;
}
#tx-benefits-root .spinner-wheel.dense .spinner-prize small {
  width: 54px;
  font-size: 9px;
}
#tx-benefits-root .spinner-draw-button {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  width: 88px;
  height: 88px;
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  color: #fff;
  box-shadow: 0 9px 20px var(--accent-shadow);
}
#tx-benefits-root .spinner-draw-button strong,
#tx-benefits-root .spinner-draw-button small {
  display: block;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#tx-benefits-root .spinner-draw-button strong {
  font-size: 17px;
}
#tx-benefits-root .spinner-draw-button small {
  margin-top: 2px;
  opacity: 0.85;
}
#tx-benefits-root .spinner-draw-button:disabled {
  opacity: 0.72;
}
#tx-benefits-root .spinner-login-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  border: 1px solid #dce5ee;
  border-radius: 17px;
  background: #fff;
  text-align: left;
}
#tx-benefits-root .spinner-login-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 22px;
}
#tx-benefits-root .spinner-login-card strong,
#tx-benefits-root .spinner-login-card small {
  display: block;
}
#tx-benefits-root .spinner-login-card strong {
  color: #1e2d3e;
}
#tx-benefits-root .spinner-login-card small {
  margin-top: 4px;
  color: #626f7b;
}
#tx-benefits-root .spinner-login-card > ion-icon {
  color: #a9b3bd;
}
#tx-benefits-root .spinner-empty-chance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid #dce5ee;
  border-radius: 17px;
  background: #fff;
}
#tx-benefits-root .spinner-empty-chance strong,
#tx-benefits-root .spinner-empty-chance small {
  display: block;
}
#tx-benefits-root .spinner-empty-chance strong {
  color: #273748;
  font-size: 14px;
}
#tx-benefits-root .spinner-empty-chance small {
  margin-top: 4px;
  color: #626f7b;
  font-size: 11px;
  line-height: 1.35;
}
#tx-benefits-root .spinner-empty-chance button {
  height: 35px;
  padding: 0 11px;
  border: 1px solid #d6e1eb;
  border-radius: 11px;
  background: #f7f9fb;
  color: #55728a;
  font-weight: 750;
}
#tx-benefits-root .spinner-state {
  display: grid;
  place-items: center;
  min-height: 430px;
  margin-top: 14px;
  padding: 30px;
  border: 1px dashed #d6dfe8;
  border-radius: 22px;
  background: #fff;
  text-align: center;
}
#tx-benefits-root .spinner-state > span {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 30px;
}
#tx-benefits-root .spinner-state h2 {
  margin: 15px 0 0;
  color: #233446;
  font-size: 19px;
}
#tx-benefits-root .spinner-state.is-empty h2 {
  margin-top: 0;
}
#tx-benefits-root .spinner-state p {
  margin: 8px 0 0;
  color: #8795a4;
  line-height: 1.6;
}
#tx-benefits-root .spinner-state button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin-top: 16px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
}
#tx-benefits-root .spinner-skeleton {
  display: grid;
  place-items: center;
  min-height: 520px;
  margin-top: 14px;
  border: 1px solid #e0e7ee;
  border-radius: 22px;
  background: #fff;
}
#tx-benefits-root .spinner-skeleton i {
  display: block;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: #edf1f5;
  animation: spinner-pulse 1.2s ease-in-out infinite alternate;
}
#tx-benefits-root .spinner-skeleton strong,
#tx-benefits-root .spinner-skeleton span {
  display: block;
  width: 45%;
  height: 14px;
  border-radius: 999px;
  background: #edf1f5;
}
#tx-benefits-root .spinner-skeleton span {
  width: 65%;
}
#tx-benefits-root .spinner-result-modal {
  --border-radius: 22px 22px 0 0;
  --box-shadow: 0 -16px 44px rgba(22, 34, 47, 0.16);
}
#tx-benefits-root .spinner-result-sheet {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 25px 24px calc(24px + var(--ion-safe-area-bottom));
  background: #fff;
  text-align: center;
}
#tx-benefits-root .spinner-result-sheet > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 19px;
  color: #278167;
  background: #e9f7f1;
  font-size: 31px;
}
#tx-benefits-root .spinner-result-sheet:not(.plain) > span {
  color: #9b702a;
  background: #fff3d8;
}
#tx-benefits-root .spinner-result-sheet p {
  margin: 12px 0 0;
  color: #8995a2;
}
#tx-benefits-root .spinner-result-sheet h2 {
  margin: 5px 0 0;
  color: #9a6c22;
  font-size: 28px;
}
#tx-benefits-root .spinner-result-sheet small {
  margin-top: 7px;
  color: #8794a1;
}
#tx-benefits-root .spinner-result-sheet button {
  width: 100%;
  height: 44px;
  margin-top: 20px;
  border: 0;
  border-radius: 13px;
  background: #2879c7;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
}
@keyframes spinner-pulse {
  to {
    opacity: 0.52;
    transform: scale(0.985);
  }
}
@keyframes spinner-request-pulse {
  to {
    box-shadow:
      0 18px 38px rgba(43, 60, 78, 0.22),
      0 0 0 9px var(--accent-border),
      inset 0 0 0 3px rgba(255, 255, 255, 0.9);
  }
}
@keyframes spinner-balance-counting {
  to {
    opacity: 0.72;
    transform: translateY(-1px);
  }
}
@media (max-width: 420px) {
  #tx-benefits-root .spinner-empty-chance {
    grid-template-columns: minmax(0, 1fr);
  }
  #tx-benefits-root .spinner-empty-chance button {
    grid-column: 1/-1;
    width: 100%;
  }
}
@media (max-width: 370px) {
  #tx-benefits-root .spinner-wheel-frame {
    width: 278px;
    height: 278px;
  }
  #tx-benefits-root .spinner-wheel {
    width: 252px;
    height: 252px;
  }
  #tx-benefits-root .spinner-stage {
    min-height: 365px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tx-benefits-root .spinner-wheel {
    transition-duration: 0.05s;
  }
  #tx-benefits-root .spinner-skeleton i,
  #tx-benefits-root .spinner-stage.requesting .spinner-wheel-frame,
  #tx-benefits-root .spinner-balance.is-increasing strong {
    animation: none;
  }
}


/* BenefitRecordsView */

#tx-benefits-root .benefit-records-header ion-toolbar { --background:rgba(250,252,255,.96); --border-color:#e4eaf2; }
#tx-benefits-root .benefit-records-page { --background:#f3f6fa; }
#tx-benefits-root .benefit-records-shell { width:min(100%,680px); min-height:100%; margin:0 auto; padding:14px 14px calc(26px + var(--ion-safe-area-bottom)); }
#tx-benefits-root .benefit-records-list { overflow:hidden; border:1px solid #dde5ee; border-radius:19px; background:#fff; box-shadow:0 10px 28px rgba(38,57,77,.07); }
#tx-benefits-root .benefit-record-card { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:86px; padding:15px; border-bottom:1px solid #edf1f5; }
#tx-benefits-root .benefit-record-card:last-child { border-bottom:0; }
#tx-benefits-root .benefit-record-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; font-size:23px; }
#tx-benefits-root .benefit-record-icon.blue { color:#2978b6; background:#eaf5ff; }
#tx-benefits-root .benefit-record-icon.purple { color:#775fb0; background:#f1edff; }
#tx-benefits-root .benefit-record-icon.gold { color:#9f7327; background:#fff4d9; }
#tx-benefits-root .benefit-record-icon.green { color:#2e866e; background:#e9f7f1; }
#tx-benefits-root .benefit-record-main { min-width:0; }
#tx-benefits-root .benefit-record-main h2 { margin:0; overflow:hidden; color:#1c2938; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
#tx-benefits-root .benefit-record-main time { display:block; margin:5px 0 0; color:#8a96a4; font-size:11px; }
#tx-benefits-root .benefit-record-card>strong { color:#9a6e25; font-size:15px; text-align:right; }
#tx-benefits-root .benefit-records-state { display:grid; place-items:center; min-height:390px; padding:35px; border:1px dashed #d6dfe8; border-radius:20px; background:#fff; text-align:center; }
#tx-benefits-root .benefit-records-state>span { display:grid; place-items:center; width:58px; height:58px; border-radius:19px; color:#53728d; background:#edf4fa; font-size:29px; }
#tx-benefits-root .benefit-records-state h2 { margin:15px 0 0; color:#263648; font-size:18px; }
#tx-benefits-root .benefit-records-state.is-empty h2 { margin-top:0; }
#tx-benefits-root .benefit-records-state p { max-width:280px; margin:8px 0 0; color:#8794a3; line-height:1.6; }
#tx-benefits-root .benefit-records-state button { display:flex; align-items:center; gap:6px; height:38px; margin-top:16px; padding:0 14px; border:0; border-radius:11px; background:#2678c6; color:#fff; }
#tx-benefits-root .benefit-records-state.is-error>span { color:#b74c3e; background:#fff0ed; }
#tx-benefits-root .benefit-records-inline-error { display:flex; justify-content:space-between; gap:10px; margin:10px 2px 0; padding:10px 12px; border-radius:11px; color:#9c5148; background:#fff1ef; font-size:12px; }
#tx-benefits-root .benefit-records-inline-error button { border:0; background:transparent; color:#ba493b; font-weight:750; }
#tx-benefits-root .benefit-records-end { margin:17px 0 0; color:#98a2ad; font-size:12px; text-align:center; }
#tx-benefits-root .benefit-records-skeleton { display:grid; gap:10px; }
#tx-benefits-root .benefit-records-skeleton>div { position:relative; display:grid; grid-template-columns:46px 1fr 78px; gap:12px; overflow:hidden; padding:16px; border:1px solid #e1e7ee; border-radius:17px; background:#fff; }
#tx-benefits-root .benefit-records-skeleton>div::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); animation:records-shimmer 1.3s infinite; }
#tx-benefits-root .benefit-records-skeleton i { width:46px; height:46px; border-radius:14px; background:#edf1f5; }
#tx-benefits-root .benefit-records-skeleton strong,#tx-benefits-root .benefit-records-skeleton span,#tx-benefits-root .benefit-records-skeleton b { display:block; height:12px; margin-top:4px; border-radius:999px; background:#edf1f5; }
#tx-benefits-root .benefit-records-skeleton span { width:65%; margin-top:9px; }
#tx-benefits-root .benefit-records-skeleton b { align-self:start; height:18px; margin-top:3px; }
@keyframes records-shimmer { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { #tx-benefits-root .benefit-records-skeleton>div::after { animation:none; } }


#tx-benefits-root { --ion-safe-area-bottom:env(safe-area-inset-bottom,0px); position:fixed; inset:0; z-index:1400; display:flex; flex-direction:column; overflow:hidden; background:#f3f6fa; color:#172536; font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft Yahei",sans-serif; text-align:left; letter-spacing:normal; }
#tx-benefits-root *,#tx-benefits-root *::before,#tx-benefits-root *::after { box-sizing:border-box; }
#tx-benefits-root button { cursor:pointer; font-family:inherit; font-size:13px; line-height:1.2; letter-spacing:normal; }
#tx-benefits-root button:disabled { cursor:default; }
#tx-benefits-root button:focus-visible { outline:2px solid #2781c5; outline-offset:3px; }
#tx-benefits-root ion-icon { display:inline-flex; flex:none; width:1em; height:1em; vertical-align:middle; }
#tx-benefits-root ion-icon svg { width:100%; height:100%; }
#tx-benefits-root .tx-benefits-toolbar { flex:none; display:flex; align-items:center; justify-content:space-between; height:49px; padding:0 7px; border-bottom:1px solid #e3e9f1; background:rgba(250,252,255,.97); }
#tx-benefits-root .tx-benefits-toolbar>h1 { flex:1; margin:0; font-size:17px; font-weight:650; text-align:center; }
#tx-benefits-root .tx-benefits-toolbar>button { display:flex; align-items:center; gap:3px; min-width:64px; height:40px; padding:0 5px; border:0; background:transparent; color:#40617d; font-size:14px; }
#tx-benefits-root .tx-benefits-toolbar>button:last-child { justify-content:flex-end; }
#tx-benefits-root .tx-benefits-toolbar ion-icon { font-size:20px; }
#tx-benefits-root .tx-benefits-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#c7cdd5 transparent; }
#tx-benefits-root .tx-benefits-scroll::-webkit-scrollbar { width:5px; height:5px; }
#tx-benefits-root .tx-benefits-scroll::-webkit-scrollbar-thumb { border-radius:5px; background:#c7cdd5; }
#tx-benefits-root .tx-benefits-loading { display:grid; place-items:center; min-height:260px; color:#8795a5; }
#tx-benefits-root .tx-benefits-result-backdrop { position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.32); }
#tx-benefits-root .tx-benefits-result-backdrop>[role=dialog] { width:min(100%,680px); min-height:300px; border-radius:22px 22px 0 0; box-shadow:0 -16px 44px rgba(22,34,47,.16); animation:tx-benefits-sheet-in .23s ease-out; }
#tx-benefits-root .tx-benefits-toast { position:absolute; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; z-index:6; width:max-content; max-width:calc(100% - 40px); padding:12px 18px; border-radius:12px; transform:translateX(-50%); color:#fff; background:rgba(26,34,42,.92); box-shadow:0 5px 22px #0002; }
#tx-benefits-root .tx-benefits-more,#tx-benefits-root .tx-benefits-login { display:block; width:100%; min-height:42px; margin:15px auto; border:1px solid #d9e2eb; border-radius:12px; background:#fff; color:#2879c7; }
.tx-benefits-entry { position:fixed; right:13px; bottom:83px; z-index:100; display:flex; align-items:center; gap:5px; min-height:35px; padding:0 11px; border:1px solid #d9bd7c; border-radius:999px; background:linear-gradient(145deg,#fff8e8,#f6e5bd); color:#8c6428; box-shadow:0 4px 15px #58421c20; font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"Microsoft Yahei",sans-serif; }
.tx-benefits-entry[hidden] { display:none; }
.tx-benefits-entry ion-icon { display:inline-flex; width:18px; height:18px; }
.tx-benefits-entry svg { width:100%; height:100%; }
.tx-benefits-entry i { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#fff; background:#ed4a54; font-size:10px; font-style:normal; }
@keyframes tx-benefits-sheet-in { from { transform:translateY(30px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
@media(prefers-reduced-motion:reduce) { #tx-benefits-root .tx-benefits-result-backdrop>[role=dialog] { animation:none; } }