*{margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Helvetica Neue",Arial,sans-serif}
body{background-color:#f8f8f8;color:#333;line-height:1.6;padding-bottom:20px}
.container{max-width:750px;margin:0 auto;padding:0 15px}
.header{background:linear-gradient(135deg,#ff7e00,#ff5e00);color:white;padding:12px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.header-content{display:flex;align-items:center;justify-content:space-between}
.header-left{display:flex;align-items:center}
.logo{height:40px;width:40px;margin-right:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.2);border-radius:8px;padding:0;box-shadow:0 0 15px rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.3);overflow:hidden}
.logo img{width:40px;height:40px;object-fit:contain;border-radius:4px}
.header h1{font-size:18px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.order-query-link{background:rgba(255,255,255,0.2);color:white;border:1px solid rgba(255,255,255,0.3);border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all 0.3s;white-space:nowrap}
.order-query-link:hover{background:rgba(255,255,255,0.3);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.breadcrumb{padding:10px 0;font-size:12px;color:#666}
.breadcrumb a{color:#666;text-decoration:none}
.breadcrumb span{margin:0 5px}
.notification{background-color:white;border-radius:8px;padding:10px 15px;margin:10px 0 15px;box-shadow:0 2px 8px rgba(0,0,0,0.05);display:flex;align-items:center;font-size:13px}
.notification-icon{color:#ff5e00;margin-right:8px;font-size:16px}
.notification-content{flex:1;overflow:hidden;height:18px}
.notification-scroll{animation:scrollText 15s linear infinite}
@keyframes scrollText{0%{transform:translateY(0)}25%{transform:translateY(0)}30%{transform:translateY(-18px)}55%{transform:translateY(-18px)}60%{transform:translateY(-36px)}85%{transform:translateY(-36px)}90%{transform:translateY(-54px)}100%{transform:translateY(-54px)}}
.countdown{background:linear-gradient(135deg,#ff7e00,#ff5e00);color:white;border-radius:8px;padding:12px 15px;margin:15px 0;text-align:center;font-size:14px;box-shadow:0 3px 10px rgba(255,94,0,0.3)}
.countdown span{font-weight:bold;font-size:16px;margin:0 2px}
.account-input{background-color:white;border-radius:8px;padding:15px;margin:15px 0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.account-input label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}
.account-input input{width:100%;padding:12px 15px;border:1px solid #e0e0e0;border-radius:6px;font-size:15px;outline:none;transition:border-color 0.3s}
.account-input input:focus{border-color:#ff5e00}
.amount-section{background-color:white;border-radius:8px;padding:15px;margin:15px 0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.section-title{font-size:16px;font-weight:600;margin-bottom:15px;display:flex;align-items:center}
.amount-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.amount-option{border:1px solid #e0e0e0;border-radius:8px;padding:15px 10px;text-align:center;cursor:pointer;transition:all 0.3s;position:relative}
.amount-option:hover{border-color:#ff5e00;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.amount-option.selected{border-color:#ff5e00;background-color:rgba(255,94,0,0.05);box-shadow:0 0 0 2px rgba(255,94,0,0.2)}
.amount{font-size:18px;font-weight:600;color:#333}
.amount-points{font-size:13px;color:#666;margin-top:5px}
.discount-badge{position:absolute;top:-8px;right:-8px;background-color:#ff3b30;color:white;font-size:10px;padding:2px 6px;border-radius:10px}
.gift-badge{position:absolute;top:-8px;left:-8px;background-color:#ff5e00;color:white;font-size:10px;padding:2px 6px;border-radius:10px}
.custom-amount{margin-top:15px;position:relative}
.custom-amount input{width:100%;padding:12px 15px;border:1px solid #e0e0e0;border-radius:6px;font-size:15px;outline:none;transition:border-color 0.3s}
.custom-amount input:focus{border-color:#ff5e00}
.custom-amount-hint{font-size:12px;color:#999;margin-top:5px;text-align:right}
.custom-amount-error{color:#ff3b30;font-size:12px;margin-top:5px;display:none}
.payment-section{background-color:white;border-radius:8px;padding:15px;margin:15px 0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.payment-options{display:flex;gap:15px}
.payment-option{flex:1;border:1px solid #e0e0e0;border-radius:8px;padding:15px 10px;text-align:center;cursor:pointer;transition:all 0.3s}
.payment-option:hover{border-color:#ff5e00;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.payment-option.selected{border-color:#ff5e00;background-color:rgba(255,94,0,0.05);box-shadow:0 0 0 2px rgba(255,94,0,0.2)}
.payment-icon{height:30px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
.payment-icon img{max-height:100%;max-width:100%}
.payment-name{font-size:14px;font-weight:500}
.recharge-btn{display:block;width:100%;background:linear-gradient(135deg,#ff7e00,#ff5e00);color:white;border:none;border-radius:8px;padding:16px;font-size:16px;font-weight:600;cursor:pointer;margin:20px 0;box-shadow:0 4px 12px rgba(255,94,0,0.3);transition:all 0.3s}
.recharge-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(255,94,0,0.4)}
.recharge-btn:active{transform:translateY(0)}
.recharge-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}
.payment-info{background-color:white;border-radius:8px;padding:15px;margin:15px 0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.info-title{font-size:16px;font-weight:600;margin-bottom:10px}
.info-content{font-size:13px;color:#666;line-height:1.8}
.faq-section{background-color:white;border-radius:8px;padding:15px;margin:15px 0;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.faq-item{margin-bottom:15px;border-bottom:1px solid #f0f0f0;padding-bottom:15px}
.faq-item:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0}
.faq-question{font-size:14px;font-weight:500;margin-bottom:8px}
.faq-answer{font-size:13px;color:#666;line-height:1.6}
.footer{text-align:center;padding:20px 0;font-size:12px;color:#999;border-top:1px solid #f0f0f0;margin-top:20px}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #f0f0f0}
.footer-links a{color:#666;text-decoration:none;font-size:13px}
.success-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000;justify-content:center;align-items:center}
.success-content{background-color:white;border-radius:12px;padding:30px 20px;text-align:center;width:80%;max-width:300px;box-shadow:0 5px 20px rgba(0,0,0,0.2);animation:popIn 0.3s ease-out}
@keyframes popIn{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}
.success-icon{font-size:48px;color:#4cd964;margin-bottom:15px}
.success-title{font-size:18px;font-weight:600;margin-bottom:10px}
.success-message{font-size:14px;color:#666;margin-bottom:20px}
.success-btn{background-color:#ff5e00;color:white;border:none;border-radius:6px;padding:10px 20px;font-size:14px;cursor:pointer;transition:all 0.3s}
.success-btn:hover{background-color:#ff7e00}
@media (min-width:768px){.amount-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.header h1{font-size:16px}.order-query-link{padding:6px 12px;font-size:13px}.amount-grid{grid-template-columns:repeat(2,1fr)}}
/* 让卡片能承载右上角对角带 */
.amount-option { position: relative; overflow: hidden; }

/* 右上角“对角带”角标：紧贴角线 */
.amount-option .discount-badge{
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  width: 90px;                /* 可按需调 80–100 */
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #ff4d4f;
  transform: translate(45%,-45%) rotate(45deg);
  transform-origin: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  pointer-events: none;
}