/* ===== Reset ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --primary:#10a37f;--primary-hover:#0d8c6d;--primary-light:rgba(16,163,127,.1);
    --danger:#ef4444;--danger-hover:#dc2626;
    --warning:#f59e0b;--warning-bg:#fffbeb;
    --success:#10a37f;--success-bg:#ecfdf5;
    --text:#111827;--text-2:#4b5563;--text-3:#9ca3af;
    --bg:#ffffff;--bg-2:#f8fafc;--bg-3:#f1f5f9;
    --border:#e5e7eb;--border-focus:#10a37f;
    --shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
    --shadow-md:0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:0 10px 30px rgba(0,0,0,.1);
    --radius:12px;--radius-sm:8px;--radius-lg:16px;
    --transition:.2s ease;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans SC",sans-serif;color:var(--text);line-height:1.6;background:var(--bg);-webkit-font-smoothing:antialiased}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1.2}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-lg{padding:14px 32px;font-size:16px;border-radius:var(--radius)}
.btn-block{width:100%}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 14px rgba(16,163,127,.35)}
.btn-ghost{background:transparent;color:var(--text-2);border:1.5px solid var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--bg-3);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover:not(:disabled){background:var(--danger-hover)}
.btn-icon{background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--text-2);transition:all var(--transition)}
.btn-icon:hover{background:var(--bg-3);color:var(--text)}
.btn-row{display:flex;gap:12px;justify-content:center;margin-top:8px}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-text,.btn-loading{display:inline-flex;align-items:center;gap:6px}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--text)}
.nav-link{font-size:14px;color:var(--text-2);text-decoration:none;padding:6px 14px;border-radius:6px;transition:all var(--transition)}
.nav-link:hover{background:var(--bg-3);color:var(--text)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:80px 0 60px;text-align:center}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#ecfdf5 0%,#f0f9ff 50%,#faf5ff 100%);z-index:0}
.hero-bg::after{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(16,163,127,.08) 0%,transparent 70%)}
.hero-content{position:relative;z-index:1}
.hero-badge{display:inline-block;padding:6px 16px;background:rgba(16,163,127,.1);color:var(--primary);border-radius:20px;font-size:13px;font-weight:600;margin-bottom:20px;border:1px solid rgba(16,163,127,.15)}
.hero h1{font-size:44px;font-weight:800;line-height:1.2;margin-bottom:16px;letter-spacing:-.02em}
.text-gradient{background:linear-gradient(135deg,#10a37f,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{max-width:560px;margin:0 auto 32px;font-size:17px;color:var(--text-2);line-height:1.7}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:40px}
.stat-item{text-align:center}
.stat-item strong{display:block;font-size:22px;font-weight:800;color:var(--text)}
.stat-item span{font-size:13px;color:var(--text-3)}
.stat-divider{width:1px;height:32px;background:var(--border)}

/* ===== Sections ===== */
.section-title{text-align:center;font-size:28px;font-weight:800;margin-bottom:8px}
.section-desc{text-align:center;color:var(--text-2);font-size:15px;margin-bottom:40px}

/* ===== Features ===== */
.features{padding:72px 0;background:var(--bg)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 22px;text-align:center;transition:all .3s ease}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(16,163,127,.3)}
.feature-icon{font-size:36px;margin-bottom:14px}
.feature-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.feature-card p{font-size:13px;color:var(--text-2);line-height:1.6}

/* ===== How it works ===== */
.how-it-works{padding:72px 0;background:var(--bg-2)}
.steps-row{display:flex;align-items:flex-start;justify-content:center;gap:16px}
.step-card{flex:1;max-width:240px;text-align:center;padding:24px 16px}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-size:18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.step-card h4{font-size:16px;font-weight:700;margin-bottom:6px}
.step-card p{font-size:13px;color:var(--text-2)}
.step-arrow{font-size:24px;color:var(--text-3);padding-top:28px;flex-shrink:0}

/* ===== Pricing ===== */
.pricing{padding:72px 0;background:var(--bg)}
.pricing-grid{display:flex;justify-content:center;gap:24px}
.pricing-grid.two-cards{max-width:780px;margin:0 auto}
.pricing-card{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-lg);padding:36px 32px;max-width:380px;width:100%;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:all .3s ease;cursor:pointer}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pricing-card[data-plan="plus"]{border-color:var(--primary)}
.pricing-card[data-plan="plus"]::before{content:'热门';position:absolute;top:16px;right:-28px;background:var(--primary);color:#fff;font-size:12px;font-weight:600;padding:4px 36px;transform:rotate(45deg)}
.pricing-card-pro{border-color:#8b5cf6}
.pricing-card-pro::before{content:'旗舰';position:absolute;top:16px;right:-28px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:12px;font-weight:600;padding:4px 36px;transform:rotate(45deg)}
.pricing-card-pro .pricing-price .price-amount,.pricing-card-pro .pricing-price .price-currency{color:#6d28d9}
.pricing-card-pro .pricing-features li::first-letter{color:#8b5cf6}
.pricing-card-pro .btn-primary{background:#8b5cf6}
.pricing-card-pro .btn-primary:hover:not(:disabled){background:#7c3aed;box-shadow:0 4px 14px rgba(139,92,246,.35)}
.pricing-header h3{font-size:20px;font-weight:700}
.pricing-header p{color:var(--text-2);font-size:14px;margin-top:2px}
.pricing-price{padding:20px 0;border-bottom:1px solid var(--border);margin-bottom:20px}
.price-currency{font-size:24px;font-weight:700;color:var(--text);vertical-align:top;line-height:1.4}
.price-amount{font-size:52px;font-weight:800;color:var(--text);line-height:1}
.price-period{font-size:16px;color:var(--text-2)}
.pricing-features{list-style:none;margin-bottom:24px}
.pricing-features li{padding:6px 0;font-size:14px;color:var(--text-2)}
.pricing-features li::first-letter{color:var(--primary)}

/* ===== FAQ ===== */
.faq{padding:72px 0;background:var(--bg-2)}
.faq-list{max-width:640px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--bg);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;font-size:15px;font-weight:600;user-select:none;transition:background var(--transition)}
.faq-q:hover{background:var(--bg-2)}
.faq-arrow{font-size:10px;color:var(--text-3);transition:transform .2s}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 20px}
.faq-item.open .faq-a{max-height:300px;padding:0 20px 16px}
.faq-a p,.faq-a ol{font-size:14px;color:var(--text-2);line-height:1.7}
.faq-a ol{padding-left:20px;margin-top:8px}
.faq-a code{background:var(--bg-3);padding:2px 6px;border-radius:4px;font-size:13px;color:var(--primary)}
.faq-a a{color:#0369a1;text-decoration:none;transition:color var(--transition)}
.faq-a a:hover{color:#075985;text-decoration:underline}
.faq-a a code{color:inherit}

/* ===== Footer ===== */
.site-footer{padding:28px 0;text-align:center;border-top:1px solid var(--border);font-size:13px;color:var(--text-3)}

/* ============================================ */
/*            充值流程 (全屏覆盖)                */
/* ============================================ */
.recharge-flow{position:fixed;inset:0;z-index:200;background:var(--bg-2);overflow-y:auto;animation:slideUp .35s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.flow-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.flow-title{font-size:16px;font-weight:700}

/* Flow Steps */
.flow-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:20px 32px;max-width:480px;margin:0 auto}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}
.fs-num{width:30px;height:30px;border-radius:50%;background:var(--border);color:var(--text-3);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.flow-step span{font-size:12px;color:var(--text-3);white-space:nowrap;transition:color var(--transition)}
.flow-step.active .fs-num{background:var(--primary);color:#fff}
.flow-step.active span{color:var(--primary);font-weight:600}
.flow-step.done .fs-num{background:var(--primary);color:#fff}
.flow-step.done span{color:var(--primary)}
.fs-line{flex:1;height:2px;background:var(--border);margin:0 8px;margin-bottom:20px;transition:background var(--transition)}
.fs-line.active{background:var(--primary)}

/* Flow Panels */
.flow-body{max-width:520px;margin:0 auto;padding:0 16px 40px}
.flow-panel{display:none;animation:fadeIn .3s ease}
.flow-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Card ===== */
.card{background:var(--bg);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow);border:1px solid var(--border);margin-top:8px}
.card h2{font-size:18px;font-weight:700;margin-bottom:4px}
.card-desc{color:var(--text-2);font-size:14px;margin-bottom:20px}

/* ===== Plan Selector ===== */
.plan-selector{display:flex;gap:12px}
.plan-option{flex:1;cursor:pointer}
.plan-option input{display:none}
.plan-option-inner{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px;border:2px solid var(--border);border-radius:var(--radius-sm);transition:all var(--transition);text-align:center}
.plan-option.active .plan-option-inner,.plan-option input:checked~.plan-option-inner{border-color:var(--primary);background:var(--primary-light)}
.plan-option[data-plan="pro"].active .plan-option-inner,.plan-option[data-plan="pro"] input:checked~.plan-option-inner{border-color:#8b5cf6;background:rgba(139,92,246,.08)}
.plan-option-inner:hover{border-color:var(--primary)}
.plan-option[data-plan="pro"] .plan-option-inner:hover{border-color:#8b5cf6}
.plan-name{font-size:15px;font-weight:700;color:var(--text)}
.plan-price{font-size:13px;color:var(--text-2);font-weight:600}

/* ===== Session Link ===== */
.session-link{flex:1;font-size:12px;word-break:break-all;color:#0369a1;text-decoration:none;font-family:"SF Mono","Fira Code","Fira Mono",monospace;transition:color var(--transition)}
.session-link:hover{color:#075985;text-decoration:underline}

/* ===== Form ===== */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.form-group textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:"SF Mono","Fira Code","Fira Mono",monospace;color:var(--text);background:var(--bg);transition:border-color var(--transition),box-shadow var(--transition);outline:none;resize:vertical;min-height:120px;line-height:1.5}
.form-group textarea::placeholder{color:var(--text-3);font-family:inherit}
.form-group textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-light)}
.error-msg{margin-top:6px;font-size:13px;color:var(--danger)}
.token-info{margin-top:10px;padding:10px 14px;background:var(--success-bg);border-radius:var(--radius-sm);border:1px solid rgba(16,163,127,.2)}
.info-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:2px 0}
.info-label{color:var(--text-2);min-width:40px}
.info-value{color:var(--text);font-weight:600;word-break:break-all}
.text-success{color:var(--success);font-weight:600}

/* ===== Tutorial ===== */
.tutorial-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:var(--radius-sm);margin-bottom:20px;overflow:hidden}
.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:500;color:#0369a1;user-select:none;transition:background var(--transition)}
.tutorial-header:hover{background:#e0f2fe}
.tutorial-arrow{font-size:10px;transition:transform var(--transition)}
.tutorial-arrow.open{transform:rotate(180deg)}
.tutorial-body{padding:0 14px 14px;border-top:1px solid #bae6fd}
.tutorial-steps{list-style:none;counter-reset:tut;padding:0}
.tutorial-steps li{counter-increment:tut;padding:10px 0 10px 32px;position:relative;border-bottom:1px solid #e0f2fe;font-size:13px}
.tutorial-steps li:last-child{border-bottom:none}
.tutorial-steps li::before{content:counter(tut);position:absolute;left:0;top:12px;width:22px;height:22px;background:#0369a1;color:#fff;border-radius:50%;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.tutorial-steps strong{display:block;font-size:14px;color:var(--text);margin-bottom:4px}
.tutorial-steps p{color:var(--text-2);margin:0}
.tutorial-steps p a{color:#0369a1;text-decoration:none}
.tutorial-steps p a:hover{text-decoration:underline}
.tutorial-steps p a code{color:inherit}
.tutorial-steps code{background:#e0f2fe;padding:2px 6px;border-radius:4px;font-size:12px;color:#0369a1}
.tutorial-steps kbd{background:#374151;color:#fff;padding:2px 6px;border-radius:4px;font-size:11px}
.copy-box{display:flex;align-items:center;gap:8px;margin-top:6px;background:#fff;border:1px solid #bae6fd;border-radius:6px;padding:8px 10px}
.copy-box code{flex:1;font-size:12px;word-break:break-all}
.btn-copy{flex-shrink:0;padding:4px 10px;background:#0369a1;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background var(--transition)}
.btn-copy:hover{background:#075985}
.tutorial-notice{margin-top:12px;padding:10px 12px;background:#fefce8;border:1px solid #fde68a;border-radius:6px;font-size:13px;color:#92400e}

/* ===== Payment ===== */
.order-summary{background:var(--bg-2);border-radius:var(--radius-sm);padding:16px;margin-bottom:20px}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;color:var(--text-2)}
.order-row span:last-child{color:var(--text);font-weight:500}
.order-total{border-top:1px solid var(--border);margin-top:6px;padding-top:10px}
.price-highlight{color:var(--danger);font-size:20px;font-weight:800}

.pay-methods{display:flex;gap:12px;margin-bottom:20px}
.pay-method{flex:1;cursor:pointer}
.pay-method input{display:none}
.pay-method-inner{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:2px solid var(--border);border-radius:var(--radius-sm);transition:all var(--transition);font-size:14px;font-weight:600;color:var(--text-2)}
.pay-method.active .pay-method-inner,.pay-method input:checked~.pay-method-inner{border-color:var(--primary);background:var(--primary-light);color:var(--text)}
.pay-method-inner:hover{border-color:var(--primary)}
.pay-icon{display:flex;align-items:center}

.qr-area{text-align:center;padding:20px 0}
.qr-placeholder{display:inline-block;padding:12px;background:#fff;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm);min-width:304px;min-height:304px;display:inline-flex;align-items:center;justify-content:center}
.qr-image{border-radius:8px;display:block}
.qr-loading-box{text-align:center;padding:40px 20px}
.qr-loading-box p{margin-top:16px;font-size:14px;color:var(--text-2)}
.qr-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
.qr-error{color:var(--danger);font-size:14px;padding:40px 20px;text-align:center}
.qr-hint{margin-top:12px;font-size:14px;color:var(--text-2)}
.pay-timer{margin-top:8px;font-size:13px;color:var(--text-3)}
.countdown{font-weight:700;color:var(--danger);font-variant-numeric:tabular-nums}

.mock-pay-area{margin-top:16px;padding:16px;background:#fefce8;border:1px dashed #fde68a;border-radius:var(--radius-sm);text-align:center}
.mock-label{font-size:13px;color:#92400e;margin-bottom:10px;font-weight:600}

/* ===== Status ===== */
.status-box{text-align:center;padding:24px 0}
.status-anim{position:relative;display:inline-block;margin-bottom:16px}
.pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:3px solid var(--primary);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.8);opacity:1}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
.status-icon{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:28px;position:relative}
.status-icon.processing{background:var(--primary-light);color:var(--primary);animation:spin 2s linear infinite}
.status-icon.success{background:var(--success-bg);color:var(--success);font-size:32px;margin-bottom:16px}
.status-icon.failed{background:#fef2f2;color:var(--danger);font-size:32px;margin-bottom:16px}
.status-box h3{font-size:20px;font-weight:700;margin-bottom:8px}
.status-desc{color:var(--text-2);font-size:14px;margin-bottom:16px}
.status-hint{font-size:13px;color:var(--text-3);margin-top:12px}

.progress-bar{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:16px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#34d399);border-radius:3px;width:0%;transition:width .5s ease;animation:shimmer 1.5s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:.7}}

.result-details{background:var(--bg-2);border-radius:var(--radius-sm);padding:16px;margin:16px 0;text-align:left}
.detail-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.detail-row span:first-child{color:var(--text-2)}
.detail-row span:last-child{font-weight:600}

/* ===== Modals ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:fadeIn .2s ease}
.modal-box{background:#fff;border-radius:var(--radius-lg);padding:28px 24px;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.modal-icon-wrap{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px}
.modal-icon-wrap.warning{background:var(--warning-bg);color:var(--warning)}
.modal-box h3{font-size:18px;font-weight:700;margin-bottom:8px}
.modal-box p{font-size:14px;color:var(--text-2);margin-bottom:6px}
.modal-warning{color:var(--danger)!important;font-weight:600!important;font-size:13px!important}
.modal-actions{display:flex;gap:12px;margin-top:20px}
.modal-actions .btn{flex:1}

/* ===== Maintenance ===== */
.maintenance-overlay{position:fixed;inset:0;background:rgba(248,250,252,.96);display:flex;align-items:center;justify-content:center;z-index:2000;padding:16px}
.maintenance-content{text-align:center}
.maintenance-icon{font-size:48px;margin-bottom:16px}
.maintenance-content h2{font-size:22px;margin-bottom:8px}
.maintenance-content p{color:var(--text-2);font-size:15px}

/* ===== Responsive ===== */
@media(max-width:768px){
    .hero{padding:60px 0 40px}
    .hero h1{font-size:30px}
    .hero-desc{font-size:15px}
    .hero-stats{gap:16px}
    .stat-item strong{font-size:18px}
    .feature-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .feature-card{padding:20px 16px}
    .steps-row{flex-direction:column;align-items:center;gap:8px}
    .step-arrow{transform:rotate(90deg);padding:0}
    .pricing-grid.two-cards{flex-direction:column;align-items:center}
    .pricing-card{padding:28px 20px}
    .price-amount{font-size:40px}
    .pay-methods{flex-direction:column}
    .plan-selector{flex-direction:column}
}
@media(max-width:480px){
    .hero h1{font-size:26px}
    .feature-grid{grid-template-columns:1fr}
    .modal-actions{flex-direction:column-reverse}
    .btn-row{flex-direction:column}
}