* { margin:0; padding:0; box-sizing:border-box; }
html,body{height:100%; font-family:"PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:#0a1220; color:#fff;}
.finance-page{min-height:100vh; background:#0a1220 url("../img/finance/bg.jpg") center top/100% auto no-repeat; padding:12px 14px 50px; padding-top:max(12px, env(safe-area-inset-top)); padding-bottom:max(50px, env(safe-area-inset-bottom));}
.finance-header{display:flex; align-items:center; min-height:50px; position:relative;}
.menu-back{display:inline-flex; align-items:center; justify-content:center; width:34px; height:28px; border-radius:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); text-decoration:none;}
.menu-back{position:relative;}
.menu-back-icon{width:18px; height:12px; display:none;}
.menu-back::before{content:""; width:18px; height:12px; display:block; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAYAAACIhL/AAAAAAXNSR0IArs4c6QAAAZxJREFUWEfVlz0zA1EUhp83vgoUaDCioUh+BaUZhUKr8d+UzPgLZvwHCmaMr2hQiEJiHHPiLmutmdiPZKXaTO6e++S955z7HpH4mNk4MAtMAmOAkmsK/m5AF3gGHiW9xON/bm5m/jwPTAEPwJOkTsEwqeHMbCLs68K0gTtJDv6hToCrA6/hx7dBgKWcnvMsAiPAlUNGgAtATdLNMMBSQB3SJLUU5F0GziJZhw1pZjVgBbh0QFevI+l+2GDx/c1szovUAZ3Uz3sgBdGvCKGb1B2wIem03xfT1pnZGnAu6TpPnJRcbDhgU9JJ1sBmtg3sARuSjrLG+eWPN3MBxuB2JB0UCRfaX3bAsuFyAZrZFrAPXADH/SgnabefdYlKzqagmW0Ch5UFDPJHxVFK/uU64ugYys7DXof5D22miEa9Hu7yUhp1Va8694hLfsRuUrtVNgtOWjW75T51tWe3Qjm7QUTS7V+baRnrzezLsKZY/tawjGswqp5yo98sfwzSzatPcz40tZMTVhlqhb19kpwO0+TPoSlx/3lOzlRl7HwHI5n+Bdn1IWYAAAAASUVORK5CYII=") center/contain no-repeat;}
.menu-title{position:absolute; left:50%; transform:translateX(-50%); font-size:18px; font-weight:600;}
.finance-search{display:flex; gap:8px; margin:10px 0;}
.finance-search input{flex:1; height:34px; border-radius:18px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.35); color:#fff; padding:0 12px; font-size:13px;}
.finance-search button{height:34px; padding:0 14px; border-radius:18px; border:none; background:linear-gradient(180deg,#7bb6ff 0%,#5a90e8 100%); color:#fff; font-size:13px;}
.finance-tabs{display:flex; gap:10px; margin:6px 0 16px;}
.finance-tab{flex:1; text-align:center; padding:8px 0; border-radius:18px; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); font-size:13px;}
.finance-tab.active{background:#6aa9ff; color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(106,169,255,0.35);}
.finance-section{display:flex; align-items:center; justify-content:space-between; margin:8px 2px 10px; font-size:14px; color:#fff;}
.finance-section a{color:#7bb6ff; font-size:12px; text-decoration:none;}
.order-row{display:flex; justify-content:space-between; align-items:center; font-size:13px;}
.order-row + .order-row{margin-top:8px;}
.order-meta{color:rgba(255,255,255,0.7); font-size:12px;}
.finance-list{display:flex; flex-direction:column; gap:14px;}
.finance-card{background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:12px;}
.card-top{display:flex; gap:10px;}
.card-top img{width:46px; height:46px; border-radius:8px; background:#1b2838;}
.card-info{flex:1;}
.card-title{font-size:14px; font-weight:600; margin-bottom:4px;}
.card-status{font-size:12px; color:#6aa9ff; margin-bottom:4px;}
.card-limit{font-size:12px; color:rgba(255,255,255,0.7);} 
.card-limit span{margin-left:6px; color:#fff;}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:10px 0; font-size:12px; color:rgba(255,255,255,0.75);} 
.card-grid div:nth-child(odd){color:rgba(255,255,255,0.6);} 
.card-foot{font-size:12px; color:rgba(255,255,255,0.7); margin-bottom:10px;}
.card-btn{height:36px; border-radius:18px; background:linear-gradient(180deg,#7bb6ff 0%,#5a90e8 100%); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#fff; text-decoration:none;}
.card-btn.disabled{background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.6);}

.subscribe-page{padding-bottom:24px; background:linear-gradient(180deg,#2d4867 0%, #24384b 48%, #1a242e 72%, #1a242e 100%);}
.finance-header{color:#fff;}
.menu-title{font-size:15px; line-height:1.2; text-align:center; max-width:70%;}
.subscribe-page .menu-back{background:transparent; border:none;}

.subscribe-card{padding:8px 8px 0; margin-top:6px;}
.logo-box{background:#fff; border-radius:20px; padding:16px; display:flex; align-items:center; justify-content:center;}
.product-logo{width:230px; height:230px; object-fit:contain; border-radius:16px;}
.product-name{margin:14px 6px 6px; font-size:18px; font-weight:600; color:#ffffff;}
.price-row{display:flex; align-items:center; justify-content:space-between; margin:6px 6px 10px;}
.price{font-size:24px; font-weight:700; color:#ffffff;}
.price span{font-size:14px; font-weight:500; margin-left:6px; color:rgba(255,255,255,0.9);}
.limit-badge{display:inline-flex; align-items:center; gap:10px; padding:6px 12px; background:#deaa5a; border-radius:10px; font-size:12px; color:#fff;}
.limit-value{font-weight:600;}
.sale-tip{display:flex; align-items:center; justify-content:space-between; margin:0 6px 10px; font-size:12px; color:rgba(255,255,255,0.7);}
.sale-value{color:#fff;}

.metrics-bar{background:rgba(32,51,59,0.95); border-radius:14px; padding:12px 8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; margin-bottom:8px;}
.metrics-bar.two-cols{grid-template-columns:repeat(2,1fr);}
.metric-item{color:#fff;}
.metric-main{font-size:18px; font-weight:700; letter-spacing:0.5px;}
.metric-sub{display:block; margin-top:4px; font-size:11px; font-weight:500; color:rgba(255,255,255,0.85);}
.metric-main .unit{font-size:12px; font-weight:500; margin-left:2px; color:rgba(255,255,255,0.85);}
.metric-label{font-size:11px; color:rgba(255,255,255,0.8); margin-top:4px;}

.subscribe-tabs{display:flex; gap:18px; padding:6px 6px 0; color:rgba(255,255,255,0.75); font-size:13px;}
.subscribe-tabs .tab{position:relative; padding-bottom:8px;}
.subscribe-tabs .tab.active{color:#fff; font-weight:600;}
.subscribe-tabs .tab.active::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:#fff; border-radius:2px;}
.subscribe-desc{padding:8px 6px 16px; font-size:12px; line-height:1.6; color:rgba(255,255,255,0.75); display:none;}
.subscribe-desc.is-active{display:block;}
.rebate-scroll{max-height:280px; overflow:auto; padding-right:2px;}
.rebate-row{display:flex; align-items:center; line-height:20px; font-size:12px;}
.rebate-col{flex:1;}
.rebate-amount{text-align:right; padding-right:15px;}
.rebate-head{font-weight:600; color:#fff;}
.rebate-divider{height:0.5px; background-color:rgba(157,173,195,0.3); margin:10px 0; margin-right:15px;}
.rebate-total{font-weight:600; color:#fff;}

.subscribe-footer{margin-top:14px; padding:0 6px;}
.join-btn{width:100%; height:44px; border-radius:22px; border:none; background:linear-gradient(180deg,#89c5f1 0%, #3c97e6 100%); color:#fff; font-size:16px; font-weight:600; box-shadow:0 6px 16px rgba(60,151,230,0.35); display:flex; align-items:center; justify-content:center; text-decoration:none;}
.join-btn.disabled{background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.6); box-shadow:none;}
.subscribe-space{height:40px;}

.purchase-page{background:linear-gradient(180deg,#2d4867 0%, #24384b 50%, #1a242e 100%);}
.purchase-card{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:14px; margin-top:10px; color:#fff;}
.purchase-title{display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:12px;}
.purchase-title img{width:22px; height:22px; border-radius:4px;}
.purchase-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:10px;}
.purchase-note{color:rgba(255,255,255,0.7);}
.amount-row{display:flex; align-items:center; justify-content:center; gap:12px; background:rgba(0,0,0,0.25); border-radius:12px; padding:10px; margin-bottom:10px;}
.amount-btn{width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background:transparent; color:#fff; font-size:16px;}
.amount-input{width:90px; text-align:center; background:transparent; border:none; color:#fff; font-size:16px;}
.amount-input:focus{outline:none; box-shadow:none;}
.asset-row{font-size:12px; color:rgba(255,255,255,0.7); margin-bottom:12px;}
.toggle-row{display:flex; gap:10px; margin-bottom:12px;}
.toggle{flex:1; text-align:center; padding:6px 0; border-radius:12px; background:rgba(255,255,255,0.08); font-size:12px; color:rgba(255,255,255,0.7);}
.toggle.active{background:rgba(255,255,255,0.2); color:#fff;}
.option-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:13px;}
.option-row:last-of-type{border-bottom:none;}
.option-value{color:rgba(255,255,255,0.7);}
.password-row{display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid rgba(255,255,255,0.08); font-size:13px;}
.password-row input{flex:1; background:transparent; border:none; color:#fff;}
.password-row input:focus{outline:none; box-shadow:none;}
.eye{font-size:14px; color:rgba(255,255,255,0.6);}
.purchase-footer{margin-top:14px;}
.confirm-btn{width:100%; height:44px; border-radius:22px; border:none; background:linear-gradient(180deg,#89c5f1 0%, #3c97e6 100%); color:#fff; font-size:16px; font-weight:600; box-shadow:0 6px 16px rgba(60,151,230,0.35);}

.toast-container{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:9999; pointer-events:none;}
.toast-item{background:rgba(0,0,0,0.78); color:#fff; padding:10px 14px; border-radius:10px; font-size:13px; margin:8px 0; opacity:0; transform:translateY(-8px); transition:all .25s ease;}
.toast-item.show{opacity:1; transform:translateY(0);}
.toast-success{background:rgba(40,167,69,0.9);}
.toast-error{background:rgba(220,53,69,0.9);}