/* ===== Reset & Base ===== */
:root {
  --primary:       #0b7ddc;
  --primary-hover: #0960b0;
  --primary-light: #e8f4fd;
  --accent:        #10b981;
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --text:          #111827;
  --text-sub:      #6b7280;
  --text-muted:    #9ca3af;
  --border:        #e5e7eb;
  --bg:            #f9fafb;
  --card:          #ffffff;
  --nav-bg:        #ffffff;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.12);
  --radius:        12px;
  --radius-sm:     8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.6;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-hover);}
img{max-width:100%;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}

/* ===== Navbar ===== */
.navbar{background:var(--nav-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:var(--shadow-sm);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-size:1.35rem;font-weight:800;color:var(--primary);letter-spacing:-.5px;display:flex;align-items:center;gap:8px;}
.brand-icon{width:32px;height:32px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{color:var(--text-sub);font-size:.9rem;font-weight:500;padding:6px 12px;border-radius:6px;transition:all .15s;}
.nav-links a:hover{color:var(--primary);background:var(--primary-light);}
.nav-links a.active{color:var(--primary);background:var(--primary-light);}
.nav-divider{width:1px;height:20px;background:var(--border);margin:0 4px;}
.balance-chip{background:var(--primary-light);color:var(--primary);font-weight:700;padding:5px 12px;border-radius:20px;font-size:.85rem;}
.btn-nav{background:var(--primary);color:#fff!important;padding:7px 18px!important;border-radius:8px!important;}
.btn-nav:hover{background:var(--primary-hover)!important;color:#fff!important;}
.lang-btn{border:1px solid var(--border);padding:5px 10px;border-radius:6px;font-size:.8rem;color:var(--text-sub);cursor:pointer;}
.lang-btn:hover{border-color:var(--primary);color:var(--primary);}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .15s;text-decoration:none;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-hover);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(79,70,229,.3);}
.btn-outline{background:#fff;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-lg{padding:13px 32px;font-size:1rem;border-radius:10px;}
.btn-sm{padding:6px 14px;font-size:.82rem;}
.btn-block{width:100%;}
.btn-white{background:#fff;color:var(--primary);font-weight:700;}
.btn-white:hover{background:#f0f0ff;color:var(--primary-hover);}

/* ===== Hero ===== */
.hero{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#06b6d4 100%);padding:72px 0 80px;color:#fff;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.hero-inner{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:center;position:relative;}
.hero-text h1{font-size:2.6rem;font-weight:800;line-height:1.2;margin-bottom:16px;}
.hero-text h1 span{color:#a5f3fc;}
.hero-text p{font-size:1.1rem;opacity:.9;margin-bottom:28px;max-width:480px;}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap;}
.hero-badge{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);padding:7px 14px;border-radius:20px;font-size:.82rem;display:flex;align-items:center;gap:6px;}
.hero-form{background:#fff;border-radius:16px;padding:32px;box-shadow:var(--shadow-lg);}
.hero-form h3{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:20px;text-align:center;}

/* ===== Stats Bar ===== */
.stats-bar{background:#fff;border-bottom:1px solid var(--border);padding:20px 0;}
.stats-inner{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:16px;}
.stat-item{text-align:center;}
.stat-item .val{font-size:1.5rem;font-weight:800;color:var(--primary);}
.stat-item .lbl{font-size:.78rem;color:var(--text-muted);margin-top:2px;}

/* ===== Platform Cards ===== */
.section{padding:60px 0;}
.section-title{text-align:center;margin-bottom:40px;}
.section-title h2{font-size:1.8rem;font-weight:800;color:var(--text);}
.section-title p{color:var(--text-sub);margin-top:8px;font-size:.95rem;}
.platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.platform-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center;cursor:pointer;transition:all .2s;}
.platform-card:hover{border-color:var(--primary);box-shadow:0 4px 20px rgba(79,70,229,.12);transform:translateY(-2px);}
.platform-card .p-icon{font-size:2.2rem;margin-bottom:10px;}
.platform-card .p-name{font-weight:700;font-size:.9rem;color:var(--text);}
.platform-card .p-count{font-size:.78rem;color:var(--text-muted);margin-top:4px;}

/* ===== Service Table ===== */
.service-section{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;}
.service-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.service-tab-bar::-webkit-scrollbar{display:none;}
.svc-tab{padding:14px 20px;font-size:.88rem;font-weight:600;color:var(--text-sub);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .15s;text-decoration:none;display:flex;align-items:center;gap:6px;}
.svc-tab:hover{color:var(--primary);}
.svc-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.svc-search{padding:16px 20px;border-bottom:1px solid var(--border);}
.svc-search input{width:100%;padding:9px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);outline:none;transition:border .15s;}
.svc-search input:focus{border-color:var(--primary);}
table{width:100%;border-collapse:collapse;}
thead tr{background:#f8f9fa;}
th{padding:11px 16px;text-align:left;font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);}
td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--text);}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafbff;}
.price-cell{font-weight:700;color:var(--primary);}
.id-cell{color:var(--text-muted);font-size:.8rem;}
.name-cell{max-width:320px;}
.qty-cell{white-space:nowrap;color:var(--text-sub);}

/* ===== Steps ===== */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;position:relative;}
.step-num{width:40px;height:40px;background:var(--primary-light);color:var(--primary);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin-bottom:16px;}
.step-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.step-card p{font-size:.85rem;color:var(--text-sub);line-height:1.6;}

/* ===== Why Us ===== */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.why-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;}
.why-icon{font-size:2rem;margin-bottom:12px;}
.why-card h3{font-size:.95rem;font-weight:700;margin-bottom:6px;}
.why-card p{font-size:.82rem;color:var(--text-sub);}

/* ===== Testimonials ===== */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.review-stars{color:#f59e0b;font-size:1rem;margin-bottom:10px;}
.review-text{font-size:.88rem;color:var(--text-sub);line-height:1.7;margin-bottom:16px;}
.review-user{display:flex;align-items:center;gap:10px;}
.review-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.review-name{font-size:.85rem;font-weight:600;}
.review-date{font-size:.75rem;color:var(--text-muted);}

/* ===== CTA Banner ===== */
.cta-banner{background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:60px 0;text-align:center;color:#fff;}
.cta-banner h2{font-size:1.8rem;font-weight:800;margin-bottom:12px;}
.cta-banner p{opacity:.88;margin-bottom:28px;font-size:1rem;}

/* ===== Footer ===== */
.footer{background:#fff;border-top:1px solid var(--border);padding:40px 0 24px;}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:32px;}
.footer-brand p{font-size:.85rem;color:var(--text-sub);margin-top:10px;max-width:280px;}
.footer h4{font-weight:700;font-size:.9rem;margin-bottom:14px;}
.footer ul{list-style:none;}
.footer ul li{margin-bottom:8px;}
.footer ul li a{font-size:.85rem;color:var(--text-sub);}
.footer ul li a:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer-bottom p{font-size:.8rem;color:var(--text-muted);}

/* ===== Forms ===== */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.92rem;color:var(--text);background:#fff;outline:none;transition:border .15s;}
.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.08);}
.form-group small{font-size:.78rem;color:var(--text-muted);margin-top:5px;display:block;}

/* ===== Alerts ===== */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.88rem;display:flex;align-items:flex-start;gap:8px;}
.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;}
.alert-danger {background:#fef2f2;border:1px solid #fecaca;color:#dc2626;}
.alert-info   {background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;}
.alert-warning{background:#fffbeb;border:1px solid #fde68a;color:#b45309;}

/* ===== Dashboard ===== */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;}
.dash-card .dc-val{font-size:1.7rem;font-weight:800;color:var(--primary);}
.dash-card .dc-lbl{font-size:.8rem;color:var(--text-muted);margin-top:4px;}

/* ===== Cards (generic) ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px;}
.card h2{font-size:1.1rem;font-weight:700;margin-bottom:16px;}

/* ===== Badges ===== */
.badge{padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;}
.badge-pending   {background:#fffbeb;color:#b45309;}
.badge-processing{background:#eff6ff;color:#1d4ed8;}
.badge-completed {background:#f0fdf4;color:#15803d;}
.badge-partial   {background:#f5f3ff;color:#7c3aed;}
.badge-cancelled {background:#fef2f2;color:#dc2626;}

/* ===== Table wrap ===== */
.table-wrap{overflow-x:auto;}

/* ===== Auth ===== */
.auth-wrap{max-width:440px;margin:60px auto;}
.auth-wrap .card{box-shadow:var(--shadow-md);}
.auth-wrap h2{font-size:1.4rem;font-weight:800;text-align:center;margin-bottom:6px;}
.auth-sub{text-align:center;font-size:.88rem;color:var(--text-sub);margin-bottom:24px;}

/* ===== Pay tabs ===== */
.pay-tabs{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
.pay-tab{flex:1;min-width:100px;padding:16px;border:2px solid var(--border);border-radius:var(--radius);background:var(--card);cursor:pointer;text-align:center;transition:all .15s;}
.pay-tab:hover,.pay-tab.active{border-color:var(--primary);background:var(--primary-light);}
.pay-tab .pay-icon{font-size:1.6rem;margin-bottom:6px;}
.pay-tab .pay-name{font-size:.82rem;font-weight:600;color:var(--text-sub);}
.pay-tab.active .pay-name{color:var(--primary);}

/* ===== Page header ===== */
.page-header{padding:32px 0 20px;border-bottom:1px solid var(--border);margin-bottom:28px;}
.page-header h1{font-size:1.5rem;font-weight:800;}
.page-header p{color:var(--text-sub);font-size:.9rem;margin-top:4px;}
.main-content{padding:28px 0 60px;}

/* ===== Fans1688 风格首页 ===== */
.navbar-landing{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06);}
.navbar-landing .brand{font-size:1.25rem;color:#1a56db;}
.navbar-landing .brand-icon{background:linear-gradient(135deg,#1a56db,#0ea5e9);}

.landing-hero{background:linear-gradient(180deg,#f0f7ff 0%,#fff 55%);padding:48px 0 56px;border-bottom:1px solid var(--border);}
.landing-hero-inner{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start;}
.landing-hero-tag{font-size:.88rem;color:#1a56db;font-weight:700;margin-bottom:8px;}
.landing-brand{font-size:2.4rem;font-weight:800;color:#111827;line-height:1.15;margin-bottom:10px;}
.landing-subtitle{font-size:1.35rem;font-weight:600;color:#374151;line-height:1.45;margin-bottom:6px;}
.landing-subtitle-2{margin-bottom:20px;}
.landing-subtitle strong{color:#1a56db;}
.landing-hero-list a{color:#1a56db;font-weight:600;}
.landing-hero-list strong{font-weight:700;color:#111827;}
.landing-hero-list{list-style:none;margin:0 0 24px;padding:0;}
.landing-hero-list li{position:relative;padding:8px 0 8px 22px;font-size:.92rem;color:#4b5563;line-height:1.55;}
.landing-hero-list li::before{content:'✓';position:absolute;left:0;color:#10b981;font-weight:700;}
.landing-hero-list a{color:#1a56db;font-weight:600;}
.landing-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.landing-login-card{background:#fff;border:1px solid #dbeafe;border-radius:12px;padding:28px;box-shadow:0 8px 30px rgba(26,86,219,.08);}
.landing-login-card h3{font-size:1.05rem;font-weight:700;text-align:center;margin-bottom:18px;color:var(--text);}
.landing-login-foot{text-align:center;margin-top:14px;font-size:.85rem;color:var(--text-sub);}
.landing-balance{background:#f0f9ff;border-radius:10px;padding:16px;text-align:center;margin-bottom:16px;}
.landing-balance span{display:block;font-size:.8rem;color:var(--text-sub);}
.landing-balance strong{font-size:1.75rem;color:#1a56db;}

.landing-section{padding:56px 0;}
.landing-section-head{text-align:center;margin-bottom:40px;}
.landing-section-head h2{font-size:1.75rem;font-weight:800;color:#111827;}
.landing-section-head p{color:var(--text-sub);margin-top:8px;font-size:.95rem;}

.landing-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.landing-step{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px 18px;text-align:center;}
.landing-step-num{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,#1a56db,#0ea5e9);color:#fff;font-size:1.25rem;font-weight:800;display:flex;align-items:center;justify-content:center;}
.landing-step h3{font-size:.95rem;font-weight:700;margin-bottom:8px;}
.landing-step p{font-size:.82rem;color:var(--text-sub);line-height:1.55;}

.landing-why-section{background:#f8fafc;}
.landing-features{display:flex;flex-direction:column;gap:28px;max-width:900px;margin:0 auto;}
.landing-feature{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px;}
.landing-feature-icon{font-size:2rem;flex-shrink:0;}
.landing-feature h3{font-size:1.1rem;font-weight:700;margin-bottom:10px;color:#111827;}
.landing-feature p{font-size:.9rem;color:#4b5563;line-height:1.75;}

.landing-platforms-section{background:#fff;}
.landing-platform-row{display:grid;grid-template-columns:120px 1fr;gap:32px;align-items:center;padding:32px 0;border-bottom:1px solid var(--border);}
.landing-platform-row:last-child{border-bottom:none;}
.landing-platform-row.is-reverse{direction:rtl;}
.landing-platform-row.is-reverse > *{direction:ltr;}
.landing-platform-icon{font-size:4rem;text-align:center;display:flex;align-items:center;justify-content:center;}
.landing-platform-icon .cat-icon-img,.landing-platform-icon .landing-platform-img{object-fit:contain;}
.platform-card .p-icon .cat-icon-img,.platform-card .p-icon .p-icon-img{display:block;margin:0 auto;object-fit:contain;}
.svc-tab .cat-icon-img,.svc-tab .svc-tab-icon{display:inline-block;vertical-align:middle;margin-right:6px;object-fit:contain;}
.landing-platform-body h3{font-size:1.35rem;font-weight:800;margin-bottom:12px;color:#1a56db;}
.landing-platform-body p{font-size:.92rem;color:#4b5563;line-height:1.8;margin-bottom:12px;}
.landing-platform-link{font-weight:700;color:#1a56db;font-size:.9rem;}
.landing-platform-chips{margin-bottom:24px;}
.platform-card.is-active{border-color:#1a56db;background:#e8f4fd;}

.landing-services-section{background:#f8fafc;}
.landing-service-table{box-shadow:0 2px 12px rgba(0,0,0,.04);}
.footer-landing{background:#1e293b;color:#94a3b8;padding:24px 0;margin-top:0;}
.footer-landing p{margin:0;text-align:center;font-size:.85rem;color:#94a3b8;}

.cta-banner{background:linear-gradient(135deg,#1a56db,#0ea5e9);}

.panel-faq-item{border-bottom:1px solid var(--border);padding:4px 0;}
.panel-faq-item summary{cursor:pointer;font-weight:600;padding:14px 4px;list-style:none;}
.panel-faq-item summary::-webkit-details-marker{display:none;}
.panel-faq-item summary::after{content:'+';float:right;color:var(--text-sub);font-weight:400;}
.panel-faq-item[open] summary::after{content:'−';}
.panel-faq-item p{margin:0 4px 16px;color:var(--text-sub);line-height:1.75;font-size:.92rem;}

.panel-terms-card{max-width:800px;line-height:1.8;font-size:.92rem;color:var(--text-sub);}
.panel-terms-card ol{margin:16px 0;padding-left:20px;}
.panel-terms-card li{margin-bottom:10px;}

.public-legal-wrap{padding:28px 16px 48px;max-width:960px;}
.public-legal-card{margin:0 auto;box-shadow:0 2px 16px rgba(0,0,0,.06);}
.terms-prose{line-height:1.85;font-size:.92rem;color:var(--text-sub);}
.terms-prose .terms-title{text-align:center;font-size:1.35rem;font-weight:800;color:var(--text);margin:0 0 20px;text-transform:uppercase;}
.terms-prose h3{font-size:1.05rem;font-weight:800;color:var(--text);margin:28px 0 12px;}
.terms-prose h4{font-size:.95rem;font-weight:700;color:var(--text);margin:20px 0 10px;}
.terms-prose p{margin:0 0 14px;}
.terms-prose ul,.terms-prose ol{margin:12px 0 16px;padding-left:22px;}
.terms-prose li{margin-bottom:8px;}
.terms-prose .terms-warn{color:#b91c1c;}
.terms-prose .terms-warn-list li{color:#b91c1c;}
.terms-prose .terms-note{margin-top:24px;font-size:.88rem;color:var(--text-muted);}
.navbar-landing .nav-links a.active{font-weight:700;color:var(--primary);}

/* ===== Responsive ===== */
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr;}
  .landing-hero-inner{grid-template-columns:1fr;}
  .landing-steps{grid-template-columns:1fr 1fr;}
  .landing-platform-row{grid-template-columns:1fr;text-align:center;}
  .landing-platform-row.is-reverse{direction:ltr;}
  .footer-inner{grid-template-columns:1fr;}
  .nav-links .hide-mobile{display:none;}
  .hero-text h1{font-size:1.8rem;}
  .landing-brand{font-size:1.85rem;}
}
@media(max-width:480px){
  .platform-grid{grid-template-columns:repeat(3,1fr);}
  .steps-grid{grid-template-columns:1fr;}
  .landing-steps{grid-template-columns:1fr;}
}