/* Consistent control states and spacing for the gold/blue customer theme. */
:root{--ui-gap:16px;--ui-control-radius:14px;--ui-transition:160ms ease}
/* Compact home actions; bottom navigation and other controls keep their sizing. */
html body .quick-grid{gap:clamp(8px,2.1vw,12px);margin-bottom:16px}
html body .quick-chip{height:clamp(70px,14.5vw,83px);min-height:0;padding:8px 3px;gap:6px;border-radius:14px}
html body .quick-icon{width:clamp(28px,6.3vw,36px);height:clamp(28px,6.3vw,36px)}
html body .quick-icon>i,html body .quick-icon>img{width:clamp(28px,6.3vw,36px)!important;height:clamp(28px,6.3vw,36px)!important}
html body .quick-label{font-size:clamp(10px,2.1vw,12px);line-height:1.2}
html body .quick-chip .menu-new{font-size:clamp(9px,1.9vw,11px);padding:3px 5px;top:-5px;right:-2px;border-radius:8px}
html body .luxury-wordmark{font-size:clamp(22px,4.8vw,28px);white-space:nowrap}
html body .luxury-wordmark span{font-weight:800}
html body .luxury-wordmark .wordmark-domain{font-size:.58em;letter-spacing:-.3px}
html body .p-title{font-size:clamp(26px,6vw,34px);overflow-wrap:anywhere}
html body .shell-banner .auth-brand-title{position:absolute;z-index:1;left:clamp(18px,4.2vw,28px);top:42%;transform:translateY(-50%);margin:0;padding:0;max-width:calc(100% - 36px);color:#ffe087;font-size:clamp(25px,6.4vw,36px);font-weight:900;line-height:1.2;letter-spacing:-.8px;white-space:nowrap;text-shadow:0 2px 0 #7c541f,0 0 16px #efbe4255,0 4px 9px #000e}
html body .shell-banner .auth-brand-title span{display:block;text-align:center;margin-top:4px;font-size:.62em;font-weight:800;line-height:1.2;letter-spacing:1.5px;color:#ffe087}
html body :is(button,.action-btn,.copy-btn,.change-btn,.lo-btn,.empty-cta,.quick-chip,.amount-item,.percent-btn,.channel-item,.menu-item,.nav-item){-webkit-tap-highlight-color:transparent}
html body :is(.btn-buy,.shell-btn,.btn-submit,.btn-recharge,.btn-deposit,.btn-withdraw,.cta-btn,.copy-btn,.submit-btn,.lo-yes,.lo-no,.vip-pop-btn,.modal-btn,.empty-cta,.change-btn,.sheet-confirm,.invite-copy){--control-rgb:255,211,96;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:0;padding:12px 18px;border-radius:var(--ui-control-radius);font-family:inherit;font-weight:750;line-height:1.3;text-align:center;text-decoration:none;box-sizing:border-box;transition:box-shadow var(--ui-transition),filter var(--ui-transition),transform var(--ui-transition),border-color var(--ui-transition);transform:none;filter:none;touch-action:manipulation}
html body :is(.btn-withdraw,.change-btn,.lo-no,.modal-btn.cancel){--control-rgb:91,178,255}
html body .product-list>.product:nth-child(even) .btn-buy{--control-rgb:55,177,255}
html body :is(.copy-btn,.change-btn,.invite-copy){min-height:44px;flex-shrink:0;padding:10px 16px;font-size:13px}
html body :is(.btn-submit,.btn-recharge,.shell-btn,.sheet-confirm){width:100%;min-height:52px;font-size:16px}
html body :is(.btn-submit,.btn-recharge,.sheet-confirm){margin-top:0;margin-bottom:0}
html body :is(.btn-grid,.lo-btns){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body .btn-grid{margin-top:16px;margin-bottom:16px}
html body .btn-grid .action-btn{width:100%;font-size:14px}
html body .product-list{gap:16px}
html body .product{row-gap:8px;padding-bottom:14px;transition:box-shadow var(--ui-transition),border-color var(--ui-transition)}
html body .product :is(.product-title,.product-info,.info-box,.info-val){min-width:0}
html body .product-title{line-height:1.22;overflow-wrap:anywhere;margin-bottom:8px}
html body .product-info{align-content:start}
html body .product .buy-wrap{margin-top:0;padding-top:4px}
html body .product .buy-row{--buy-row-gap:8px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--buy-row-gap);min-width:0}
html body .product .btn-buy{display:flex;width:auto;flex:1 1 calc((100% - var(--buy-row-gap)) * .75);min-width:0;min-height:50px;padding:10px 34px 10px 10px;gap:6px;border-radius:15px;font-size:clamp(12px,2.9vw,16px)}
html body .product .btn-buy::before{margin:0;flex-shrink:0}
html body .product .btn-buy::after{right:11px;pointer-events:none}
html body .product .buy-timer{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;flex:0 0 calc((100% - var(--buy-row-gap)) * .25);min-width:0;min-height:50px;width:auto;max-width:none;box-sizing:border-box;margin:0;padding:6px 4px;border-radius:12px;text-align:center;gap:3px}
html body .product .buy-timer .bt-label{font-size:clamp(8px,1.9vw,10px);line-height:1.2;letter-spacing:.3px;white-space:nowrap;margin:0}
html body .product .buy-timer .bt-time{font-size:clamp(10px,2.7vw,14px);line-height:1.2;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--card-light);margin:0}
html body .product .buy-timer:is([hidden],.hidden,.is-hidden,.d-none){display:none}
html body .product .buy-row>.btn-buy::before{width:22px;height:22px;background-size:22px}
html body .product .buy-row>.btn-buy::after{width:23px;height:23px;right:7px;font-size:24px}
html body .product .buy-row .buy-offer-row{min-width:0;flex-wrap:wrap;gap:2px 5px;white-space:normal;line-height:1.15}
html body .product .buy-row .buy-offer-row .new-plan-price{font-size:inherit}
html body :is(.card,.balance-card,.level-card,.summary-card,.invite-chip,.portfolio){margin-bottom:16px}
html body :is(.card,.bal-card,.level-card,.summary-card){border-radius:20px;padding:18px}
html body .balance-card{padding:22px}
html body .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
html body :is(.section-title,.section-head){line-height:1.35}
html body .amount-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;margin-bottom:16px}
html body .amount-item{min-width:0;min-height:56px;padding:14px 6px;border-radius:12px;box-sizing:border-box;transition:border-color var(--ui-transition),box-shadow var(--ui-transition);cursor:pointer}
html body .amount-item .amt{font-size:15px;line-height:1.3}
html body .percent-grid{gap:8px;margin-bottom:16px}
html body .percent-btn{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:54px;padding:10px 6px;border-radius:12px;transition:border-color var(--ui-transition),box-shadow var(--ui-transition),background-color var(--ui-transition)}
html body :is(.custom-input-group,.input-box,.shell-input){min-height:54px;gap:10px;border-radius:15px;padding:12px 14px;box-sizing:border-box;transition:border-color var(--ui-transition),box-shadow var(--ui-transition)}
html body .shell-input{margin-bottom:14px}
html body .shell-input .prefix{padding-right:10px;margin-right:0}
html body :is(.custom-input-group,.input-box,.shell-input) input{min-width:0;font-size:16px;line-height:1.4;padding:0}
html body .shell-eye{margin-left:0}
html body .copy-row{gap:12px;margin-bottom:12px;padding:14px;border-radius:14px;align-items:center}
html body .copy-info{min-width:0;flex:1}
html body :is(.copy-link,.copy-code){overflow-wrap:anywhere;line-height:1.45}
html body .level-row{gap:12px;padding-block:14px}
html body .menu-card .menu-item{min-height:66px;padding:14px;gap:12px;border-bottom-color:#293b59;transition:background-color var(--ui-transition)}
html body .menu-card .menu-item:last-child{border-bottom:0}
html body .menu-card .menu-text{min-width:0;flex:1}
html body .menu-card .menu-title{line-height:1.3}
html body .menu-card .menu-subtitle{line-height:1.4;margin-top:4px}
html body .mini-stats{gap:8px;padding-top:14px;margin-top:4px}
html body .ms-col{min-width:0}
html body .ms-lbl{font-size:11px;line-height:1.4}
html body .channel-item{gap:12px;min-height:62px;padding:12px;border-radius:14px;margin-bottom:10px}
html body .channel-info{min-width:0;flex:1}
html body .sheet-confirm{margin-top:14px}
html body .bottom-bar{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
html body .container{padding-bottom:calc(136px + env(safe-area-inset-bottom))}
html body .page{padding-bottom:calc(126px + env(safe-area-inset-bottom))}
html body .modal-foot{display:flex;gap:10px;padding:12px;border-top:1px solid #34435e}
html body .modal-foot .modal-btn{flex:1;min-height:48px;margin:0;padding:12px;border:1px solid #465878;border-radius:12px;font-size:14px}
html body .modal-foot .modal-btn.confirm{border-color:#f2d477}
html body .modal-body{padding:24px 22px;line-height:1.6}
html body .quick-chip{transition:box-shadow var(--ui-transition),border-color var(--ui-transition),transform var(--ui-transition);transform:none}
html body .page .tabs :is(#normalTab,#vipTab){transition:box-shadow var(--ui-transition),border-color var(--ui-transition);transform:skewX(9deg)}
html body .page .tabs :is(#normalTab,#vipTab):active{transform:skewX(9deg) translateY(1px)}
html body :is(button,a,input,textarea,select,[role="button"]):focus-visible{outline:2px solid #ffe79b;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  html body :is(.btn-buy,.shell-btn,.btn-submit,.btn-recharge,.btn-deposit,.btn-withdraw,.cta-btn,.copy-btn,.submit-btn,.lo-yes,.lo-no,.vip-pop-btn,.modal-btn,.empty-cta,.change-btn,.sheet-confirm,.invite-copy):hover:not(:disabled):not([aria-disabled="true"]){transform:translateY(-1px);filter:brightness(1.025);box-shadow:inset 0 1px 0 #ffffff55,0 0 12px rgba(var(--control-rgb),.35)}
  html body .product-list>.product:nth-child(even) .btn-buy:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.025);box-shadow:inset 0 1px 0 #ceffff66,0 0 12px #19aaff66}
  html body .quick-chip:hover{transform:translateY(-1px);border-color:var(--action-color);box-shadow:inset 0 1px 0 #ffffff25,0 0 13px rgba(var(--action-rgb),.32)}
  html body .product:hover{border-color:var(--card-light);box-shadow:inset 0 1px 0 #ffffff25,0 0 15px rgba(var(--card-rgb),.24)}
  html body .menu-card .menu-item:hover{background:#192940}
  html body .amount-item:hover{border-color:#75bbff;box-shadow:0 0 9px #389aff30}
  html body .amount-item.active:hover{border-color:#ffe083;box-shadow:0 0 10px #ffc84b33}
  html body :is(.percent-btn,.team-sort-btn).active:hover:not(:disabled){background:linear-gradient(180deg,#138ceb,#0756bd 45%,#07347e);color:#fff}
  html body .page .tabs #normalTab:hover{border-color:#ffe49b;box-shadow:inset 0 1px 0 #fff2a155,0 0 14px #ffcf4c44;transform:skewX(9deg)}
  html body .page .tabs #vipTab:hover{border-color:#7bccff;box-shadow:inset 0 1px 0 #d0edff55,0 0 14px #229dff44;transform:skewX(9deg)}
}
html body :is(.btn-buy,.shell-btn,.btn-submit,.btn-recharge,.btn-deposit,.btn-withdraw,.cta-btn,.copy-btn,.submit-btn,.lo-yes,.lo-no,.vip-pop-btn,.modal-btn,.empty-cta,.change-btn,.sheet-confirm,.invite-copy):active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px);filter:none;box-shadow:inset 0 1px 0 #ffffff25,0 0 7px rgba(var(--control-rgb),.22)}
html body :is(button,.btn-buy,.shell-btn,.action-btn,.copy-btn,.change-btn):is(:disabled,[aria-disabled="true"]){opacity:.65;cursor:not-allowed;transform:none;filter:saturate(.65);box-shadow:none}
@media(max-width:360px){html body :is(.card,.bal-card,.level-card,.summary-card){padding:16px 14px}html body .product{padding:10px;column-gap:10px}html body .amount-grid{gap:8px}html body .btn-grid{gap:10px}html body .copy-row{gap:8px;padding:12px}html body :is(.copy-btn,.change-btn){padding:10px 12px}html body .modal-foot{gap:8px;padding:10px}}
@media(prefers-reduced-motion:reduce){html body :is(button,a,.quick-chip,.amount-item,.percent-btn,.channel-item,.product,input){transition:none!important}html body :is(.btn-buy,.shell-btn,.btn-submit,.btn-recharge,.btn-deposit,.btn-withdraw,.copy-btn,.change-btn,.quick-chip):is(:hover,:active){transform:none}html body .page .tabs :is(#normalTab,#vipTab):active{transform:skewX(9deg)}}

/* Plan selection: a filled accent and checkmark identify the chosen collection. */
html body .page .tabs :is(#normalTab,#vipTab){background:linear-gradient(130deg,#152139,#080f20);border-color:#45526c;box-shadow:inset 0 1px 0 #ffffff14;transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
html body .page .tabs :is(#normalTab,#vipTab):not(.active) .plan-tab-label strong{color:#c4d0e5}
html body .page .tabs :is(#normalTab,#vipTab):not(.active) .plan-tab-label>span{color:#9caecb}
html body .page .tabs :is(#normalTab,#vipTab):not(.active) .plan-tab-icon{opacity:.65}
html body .page .tabs :is(#normalTab,#vipTab):not(.active)::after{content:'›';background:#0a1529;color:#a5badb;border-color:#526986;box-shadow:none}
html body .page .tabs #normalTab.active{background:linear-gradient(125deg,#fff0a0,#f5c958 55%,#d8a237);border-color:#ffe99a;box-shadow:inset 0 1px 0 #fff9,inset 0 0 0 1px #ffeaa855,0 0 17px #ffce4d55}
html body .page .tabs #normalTab.active .plan-tab-label strong{color:#201604;text-shadow:none}
html body .page .tabs #normalTab.active .plan-tab-label>span{color:#4a330c;opacity:1}
html body .page .tabs #normalTab.active .plan-tab-icon{background:linear-gradient(135deg,#38280a,#100e08);opacity:1;border-color:#fff0b344}
html body .page .tabs #vipTab.active{background:linear-gradient(125deg,#0874d0,#08449a 65%,#092d6a);border-color:#71d5ff;box-shadow:inset 0 1px 0 #c9f1ff88,inset 0 0 0 1px #5dc9ff33,0 0 17px #169aff66}
html body .page .tabs #vipTab.active .plan-tab-label strong{color:#fff4bf;text-shadow:none}
html body .page .tabs #vipTab.active .plan-tab-label>span{color:#deefff;opacity:1}
html body .page .tabs #vipTab.active .plan-tab-icon{background:#103c75;border-color:#78caff55;opacity:1}
html body .page .tabs :is(#normalTab,#vipTab).active::after{content:'✓';font-size:15px;font-weight:900;line-height:1;background:#17130a;color:#ffe58d;border-color:#fff0a788;box-shadow:0 0 8px #ffdc5c44}
html body .page .tabs #vipTab.active::after{background:#d1f5ff;color:#093467;border-color:#a1e9ff;box-shadow:0 0 8px #7cdfff55}
@media(hover:hover) and (pointer:fine){html body .page .tabs :is(#normalTab,#vipTab):not(.active):hover{background:linear-gradient(130deg,#1d2e4b,#101d34);border-color:#8faed3;box-shadow:inset 0 1px 0 #ffffff25,0 0 10px #6c9dcd22}html body .page .tabs #normalTab.active:hover{border-color:#fff5c6;box-shadow:inset 0 1px 0 #fffb,0 0 19px #ffce4d66}html body .page .tabs #vipTab.active:hover{border-color:#b3eaff;box-shadow:inset 0 1px 0 #d8f8ff99,0 0 19px #169aff77}}
