/* Layout proportions measured against the supplied 574px mobile reference. */
:root{--app-width:574px;--reference-gold:#ffdc68;--reference-blue:#29a8ff;--reference-surface:#050c19}
html body{max-width:var(--app-width);background:radial-gradient(ellipse at 0 12%,#362b1230,transparent 35%),radial-gradient(ellipse at 100% 60%,#002b5130,transparent 45%),#050a15}
html body :is(.page,.container,.shell-page){max-width:var(--app-width)}
html body :is(.app-header,.header,.bottom-bar,.sheet){max-width:var(--app-width)}
html body .page{padding:0 clamp(12px,2.8vw,16px) calc(118px + env(safe-area-inset-bottom))}
body .luxury-home-header{min-height:75px;padding:10px clamp(14px,3.1vw,18px) 14px;border-bottom:0;background:#070e18}
body .luxury-home-header::after{opacity:.95}
body .luxury-wordmark{font-size:clamp(24px,5.4vw,31px);gap:10px;letter-spacing:-.7px}
body .luxury-wordmark img{width:clamp(34px,7.3vw,42px);height:clamp(34px,7.3vw,42px)}
body .luxury-wordmark>span{position:relative}
body .luxury-wordmark>span::after{content:'✦';position:absolute;font-size:15px;color:#ffe28c;top:-3px;right:-11px}
body .luxury-header-actions{gap:clamp(10px,2.5vw,14px)}
body :is(.luxury-support,.luxury-notifications){width:clamp(40px,9.8vw,56px);height:clamp(40px,9.8vw,56px);border-radius:17px;box-shadow:inset 0 1px 1px #d6ecff77,0 1px 3px #ffd65544}
body .luxury-notifications svg{width:29px;height:29px}
body .luxury-notifications::after{width:12px;height:12px;top:6px;right:7px}
body .page .hero.banner-slider{aspect-ratio:2.5866666667;min-height:157.5px;border-radius:23px;margin-bottom:20px;border-color:#dfcb8c;box-shadow:0 0 2px #fff0b9,0 0 14px #d5a42724;position:relative}
body .banner-panel.luxury-banner{padding:clamp(14px,3.5vw,20px);background-image:url('/assets/luxury/crown-reference-v3.png');background-position:center;background-size:cover}
body .luxury-banner .banner-copy{max-width:58%}
body .luxury-banner .banner-kicker{font-size:clamp(10px,2.5vw,14px);line-height:1.05;padding:6px 11px;margin-bottom:6px;font-weight:850;box-shadow:inset 0 1px 1px #fff6,0 0 9px #ffdc4b33}
body .luxury-banner h2{font-size:clamp(29px,7.7vw,44px);letter-spacing:-1.2px;line-height:1.01;margin:4px 0 8px;font-weight:900}
body .luxury-banner h2 em{color:#ffe178}
body .luxury-banner p{font-size:clamp(12px,2.9vw,16px);max-width:245px;line-height:1.3;margin:0}
body .hero-benefits{margin:10px 0 0;font-size:clamp(10px,2.45vw,14px);line-height:1.5}
body .hero-benefits li::before{width:13px;height:13px;font-size:10px;margin-right:6px;box-shadow:0 0 5px #e9be2522}
body .exclusive-badge{right:clamp(10px,2.8vw,16px);top:clamp(9px,2vw,12px);width:clamp(74px,17.5vw,100px);min-height:84px;padding:10px 10px 7px;border:0;border-radius:0;background:transparent url('/assets/luxury/exclusive-wreath.svg') center/100% 100% no-repeat;box-shadow:none;font-size:clamp(7px,1.6vw,9px);line-height:1.15;color:#f8f2d6}
body .exclusive-badge::before{font-size:18px;line-height:1.1}
body .exclusive-badge strong{font-size:clamp(13px,3vw,17px);line-height:1.05;color:#ffe384;margin:1px 0 2px}
body .banner-controls{bottom:7px;gap:6px}
body .banner-dot{width:20px;height:22px}
body .banner-dot::before{width:7px;height:7px;background:#929caf}
body .banner-dot.active::before{width:10px;background:#ffdf6e}
body .banner-pause{width:20px;height:20px;font-size:11px;background:#07142580}
body .quick-grid{gap:clamp(8px,2.6vw,15px);margin-bottom:20px}
body .quick-chip{height:clamp(82px,17.1vw,98px);min-height:0;border-radius:17px;gap:8px;padding:11px 3px;box-shadow:inset 0 1px 1px #ffffff22,0 0 9px rgba(var(--action-rgb),.2);background-color:#08111c}
body .quick-label{font-size:clamp(10px,2.43vw,14px);line-height:1.2;font-weight:650;letter-spacing:-.3px}
body .quick-icon{width:38px;height:38px}
body .quick-icon>i,body .quick-icon>img{width:clamp(34px,7.5vw,43px)!important;height:clamp(34px,7.5vw,43px)!important;background-size:contain}
body .quick-chip:nth-child(1) .quick-icon i{background-image:url('/assets/reference-icons/recharge.svg')}
body .quick-chip:nth-child(2) .quick-icon i{background-image:url('/assets/reference-icons/withdraw.svg')}
body .quick-chip:nth-child(3) .quick-icon i{background-image:url('/assets/reference-icons/plans.svg')}
body .quick-chip:nth-child(4) .quick-icon{background:url('/assets/reference-icons/channel.svg') center/contain no-repeat;filter:drop-shadow(0 0 8px #00cde477)}
body .quick-chip:nth-child(4) .quick-icon img{visibility:hidden}
body .quick-chip:nth-child(5) .quick-icon i{background-image:url('/assets/reference-icons/online.svg')}
body .menu-new{right:-3px;top:-6px;border-radius:9px;font-size:clamp(10px,2.5vw,14px);padding:3px 6px;line-height:1.1}
body .page .tabs:has(#normalTab){gap:clamp(12px,2.9vw,17px);margin:0 0 15px;padding-inline:4px}
body .page .tabs :is(#normalTab,#vipTab),body .page .tabs :is(#normalTab,#vipTab).active{min-height:clamp(68px,14.3vw,82px);padding:12px 37px 12px 20px;gap:clamp(9px,2.5vw,14px);border-radius:18px;transform:skewX(9deg);background:linear-gradient(110deg,#5a451b,#151006 65%);box-shadow:inset 0 1px 1px #fff0ac77,0 0 12px #ffcf4c22}
body .page .tabs #normalTab.active{background:radial-gradient(ellipse at 0 0,#efce7280,transparent 45%),linear-gradient(100deg,#6b4c13,#211708 55%,#151006);box-shadow:inset 0 1px 2px #fff2a1,inset 0 -1px 7px #ffcb4777,0 0 13px #fbc74555}
body .page .tabs :is(#normalTab,#vipTab)>span{transform:skewX(-9deg)}
body .page .tabs #normalTab.active .plan-tab-label strong,body .page .tabs #normalTab.active .plan-tab-label>span{color:#fff2c4}
body .page .tabs :is(#normalTab,#vipTab) .plan-tab-label strong{font-size:clamp(14px,3.2vw,18px);font-weight:750;line-height:1.12;letter-spacing:-.4px}
body .page .tabs :is(#normalTab,#vipTab) .plan-tab-label>span{font-size:clamp(10px,2.4vw,13px);line-height:1.1;letter-spacing:.6px}
body .page .tabs #normalTab .plan-tab-icon{width:clamp(36px,8vw,46px);height:clamp(36px,8vw,46px);border-radius:11px}
body .page .tabs #normalTab .plan-tab-icon img{width:29px;height:29px}
body .page .tabs #vipTab .plan-tab-icon{width:clamp(36px,8vw,46px);height:clamp(36px,8vw,46px)}
body .page .tabs #vipTab .plan-tab-icon img{width:clamp(36px,8vw,46px);height:clamp(36px,8vw,46px)}
body .page .tabs :is(#normalTab,#vipTab)::after,body .page .tabs :is(#normalTab,#vipTab).active::after{width:26px;height:26px;right:12px;transform:translateY(-50%) skewX(-9deg);font-size:28px}
body .page .tabs #vipTab,body .page .tabs #vipTab.active{background:linear-gradient(105deg,#0b2648,#040c1e 70%);border-color:#3a79ca;box-shadow:inset 0 1px 1px #badfff77,0 0 12px #1b8aff33}
body .page .tabs #vipTab.active{background:linear-gradient(105deg,#063c7c,#05142b 70%);border-color:#6bbfff;box-shadow:inset 0 1px 1px #d0edff77,0 0 15px #229dff55}
body .product-list{gap:14px}
body .product{padding:11px 14px 10px;grid-template-columns:35% minmax(0,1fr);gap:0 18px;border-radius:22px;background:linear-gradient(120deg,#101922,#030a16 65%);box-shadow:inset 0 1px 1px #ffe8a34a,0 0 5px #ffdf7133,0 0 16px #ffcb491f}
body .product-list>.product:nth-child(even){background:linear-gradient(120deg,#0d1930,#030a17 65%);box-shadow:inset 0 1px 1px #9bd9ff55,0 0 5px #279aff44,0 0 16px #007fff22}
body .product-title{font-size:clamp(18px,4.4vw,25px);line-height:1.12;margin:9px 0 7px;font-weight:800;letter-spacing:-.6px;text-wrap:pretty}
body .product:has(.product-ribbon) .product-title{padding-right:36px}
body .product-hero{min-height:clamp(174px,38vw,218px);margin-left:-1px;border-radius:13px;box-shadow:none;background-size:cover;background-position:center}
body .product-info{gap:0;align-content:start}
body .product-info .info-box:nth-child(1){padding:2px 0 8px}
body .product-info .info-box:nth-child(1) .info-val{font-size:clamp(27px,6.4vw,37px);font-weight:850;line-height:1.2;letter-spacing:-.9px;color:var(--card-light)}
body .product-info .info-box:nth-child(3){left:0;justify-self:end;align-self:center;margin-right:20px;padding:0;text-align:center}
body .product-info .info-box:nth-child(3) .info-val{font-size:14px;line-height:1.2}
body .product-info .info-box:nth-child(3) .info-label{font-size:12px;line-height:1.2;color:#cbd7e9;margin-top:2px}
body .product-info .info-box:nth-child(2),body .product-info .info-box:nth-child(4){min-height:clamp(35px,7.6vw,44px);margin-top:7px;padding:6px 9px;border-radius:12px;background:linear-gradient(110deg,#17263d,#0a1528);box-shadow:inset 0 1px 1px #ffffff05}
body .product-info .income-label{font-size:clamp(12px,2.8vw,16px);gap:7px;font-weight:500}
body .income-icon{width:clamp(23px,4.9vw,28px);height:clamp(23px,4.9vw,28px);flex-basis:clamp(23px,4.9vw,28px)}
body .income-icon img{width:19px;height:19px}
body .product-info .info-box:nth-child(2) .info-val,body .product-info .info-box:nth-child(4) .info-val{font-size:clamp(17px,3.8vw,22px);font-weight:800}
body .product-limit{top:2px;left:1px;padding:5px 10px;font-size:clamp(10px,2.5vw,14px);line-height:1.2;border-radius:14px}
body .product-ribbon{top:21px;right:-39px;width:150px;font-size:12px;padding:7px 0;line-height:1.25}
body .product .buy-wrap{position:relative;margin-top:-10px;padding-top:0;z-index:3}
body .product .btn-buy{min-height:clamp(48px,9.8vw,57px);border-radius:17px;padding:10px 43px 10px 17px;font-size:clamp(15px,3.2vw,18px);line-height:1.2;box-shadow:inset 0 2px 2px #fff2aaaa,inset 0 -2px 2px #a8772255,0 0 9px #f7c43d44;gap:10px}
body .product .btn-buy::before{width:29px;height:29px;background-size:27px}
body .product .btn-buy::after{right:12px;width:28px;height:28px;font-size:28px}
body .product-list>.product:nth-child(even) .btn-buy{background:linear-gradient(180deg,#1ac6ff,#0878ec 30%,#0743b9);box-shadow:inset 0 2px 2px #8cf0ff99,inset 0 -2px 2px #06367b99,0 0 11px #10a1ff55}
body .buy-timer{margin-top:5px;font-size:11px;padding:5px 9px;border-radius:10px}
html body .footer{width:calc(100% - 28px);max-width:calc(var(--app-width) - 28px);min-height:clamp(80px,15.5vw,89px);bottom:8px;border-radius:22px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(110deg,#251f1470,#08121f 30%,#070e20);box-shadow:inset 0 1px 1px #ffebba33,0 0 9px #9d7c3433,0 -6px 20px #0007}
body .footer .nav-item{min-height:69px;gap:5px;padding:5px 2px;font-size:clamp(10px,2.5vw,14px);font-weight:550;letter-spacing:-.3px}
body .footer .nav-item>i,body .footer .nav-item>svg{width:35px!important;height:35px!important;background-size:31px 31px;padding:2px}
body .footer .nav-item.active{border:1px solid #8d784466;box-shadow:inset 0 1px 0 #ffe8a322,0 0 8px #cfaa3422;background:radial-gradient(ellipse at 50% 0,#6f52273d,transparent 85%)}
body .footer .nav-item.active::after{bottom:-6px;height:3px;width:38px}
body .card,body .bal-card,body .menu-card,body .level-card{border-radius:20px}
body .app-header{height:64px}
body .container{padding-top:78px}
body .balance-card{border-radius:21px;padding:24px}
body .balance-amount,body .bal-value{font-weight:800;font-size:33px}
body :is(.btn-submit,.btn-recharge,.shell-btn){min-height:52px;font-size:16px;font-weight:750}
body .modal{max-width:360px}
body .modal-body{padding:26px 24px;font-size:16px}
@media(max-width:420px){body .luxury-home-header{min-height:64px;padding-top:7px;padding-bottom:10px}body .luxury-banner h2{font-size:29px}body .luxury-banner .banner-kicker{font-size:10px}body .hero-benefits{font-size:10px;margin-top:6px;line-height:1.4}body .luxury-banner p{font-size:12px;max-width:185px}body .exclusive-badge{width:72px;min-height:72px;padding-top:8px;font-size:7px}body .exclusive-badge strong{font-size:12px}body .page .tabs :is(#normalTab,#vipTab){padding-left:11px;padding-right:29px;gap:7px}body .page .tabs :is(#normalTab,#vipTab) .plan-tab-label strong{font-size:14px}body .page .tabs :is(#normalTab,#vipTab)::after{right:8px;width:22px;height:22px;font-size:24px}body .product{padding:10px;gap:0 10px;grid-template-columns:35% minmax(0,1fr)}body .product-title{font-size:18px;margin-top:7px}body .product:has(.product-ribbon) .product-title{padding-right:26px}body .product-info .info-box:nth-child(3){margin-right:8px}body .product-info .info-box:nth-child(2),body .product-info .info-box:nth-child(4){padding:6px;gap:4px}body .product-info .income-label{gap:4px}body .product .buy-wrap{margin-top:-4px}body .product-ribbon{font-size:10px}body .footer .nav-item{font-size:11px}}
@media(max-width:350px){body .luxury-wordmark{font-size:22px;gap:7px}body .luxury-wordmark img{width:30px;height:30px}body .luxury-header-actions{gap:8px}body :is(.luxury-support,.luxury-notifications){width:35px;height:35px}body .luxury-banner h2{font-size:26px}body .luxury-banner p{font-size:11px;max-width:155px}body .hero-benefits{font-size:9px}body .product-title{font-size:16px}body .product-info .info-box:nth-child(1) .info-val{font-size:25px}body .page .tabs :is(#normalTab,#vipTab) .plan-tab-label strong{font-size:12px}body .product-info .income-label{font-size:11px}body .product-info .info-box:nth-child(2) .info-val,body .product-info .info-box:nth-child(4) .info-val{font-size:15px}}

/* Home banner is 75% of its previous height; compact copy keeps all content visible. */
body .banner-panel.luxury-banner{padding:clamp(10.5px,2.625vw,15px)}
body .luxury-banner .banner-kicker{font-size:clamp(9px,1.875vw,11px);padding:4px 8px;margin-bottom:4px}
body .luxury-banner h2{font-size:clamp(22px,5.775vw,33px);line-height:1.05;letter-spacing:-.9px;margin:3px 0 6px}
body .luxury-banner p{font-size:clamp(10px,2.175vw,12px);line-height:1.25}
body .hero-benefits{font-size:clamp(9px,1.84vw,10.5px);line-height:1.35;margin-top:6px}
body .hero-benefits li::before{width:10px;height:10px;font-size:8px;margin-right:5px}
body .exclusive-badge{width:clamp(60px,13.125vw,75px);min-height:63px;padding:7px 8px 5px;font-size:7px;top:8px;right:10px}
body .exclusive-badge::before{font-size:13px}
body .exclusive-badge strong{font-size:clamp(11px,2.25vw,13px)}
body .banner-controls{left:auto;right:10px;bottom:5px;transform:none;gap:4px}