/* ===== join.css - 海淘助手页面专用样式 ===== */

/* 布局 */
.main-layout{ display:flex; min-height:100vh; padding-top:80px; }

/* Sidebar */
.sidebar{
  width:280px; background:#fff; box-shadow:2px 0 10px rgba(0,0,0,0.05);
  position:fixed; top:80px; left:0; height:calc(100vh - 80px); overflow-y:auto; z-index:100; transition:all .3s ease;
}
.sidebar-header{ padding:2rem 1.5rem 1rem; border-bottom:1px solid #e2e8f0; }
.sidebar-title{
  font-size:1.3rem; font-weight:700; color:#1e293b; margin-bottom:.5rem;
  background:linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sidebar-subtitle{ font-size:.9rem; color:#64748b; }
.sidebar-nav{ padding:1rem 0; }
.sidebar-nav ul{ list-style:none; }
.sidebar-nav li{ margin-bottom:.5rem; }
.sidebar-nav a{
  display:block; padding:.8rem 1.5rem; color:#64748b; text-decoration:none; transition:all .3s ease;
  border-radius:0 25px 25px 0; margin-right:1rem; position:relative; font-weight:500;
}
.sidebar-nav a::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(135deg,#3b82f6,#06b6d4); transform:scaleY(0); transition:transform .3s ease;
}
.sidebar-nav a:hover, .sidebar-nav a.active{
  background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(6,182,212,.05));
  color:#3b82f6; transform: translateX(5px);
}
.sidebar-nav a:hover::before, .sidebar-nav a.active::before{ transform:scaleY(1); }
.sidebar-footer{
  position:absolute; bottom:0; left:0; right:0; padding:1.5rem;
  background:linear-gradient(135deg,#f8fafc,#e2e8f0); border-top:1px solid #e2e8f0;
}
.sidebar-footer p{ font-size:.8rem; color:#64748b; text-align:center; line-height:1.4; }

/* Main Content */
.main-content{ flex:1; margin-left:280px; padding:2rem 3rem; max-width:none; position:relative; }

/* Page Hero */
.page-hero{
  background:linear-gradient(135deg,#ffffff 0%, #f8fafc 100%); border-radius:20px; padding:1rem; margin-bottom:1rem;
  box-shadow:0 4px 25px rgba(0,0,0,0.05); position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; top:-50%; right:-50%; width:100%; height:200%;
  background: radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 70%); animation:heroFloat 8s ease-in-out infinite;
}
@keyframes heroFloat{ 0%,100%{transform:rotate(0) scale(1);} 50%{transform:rotate(180deg) scale(1.1);} }
.page-hero-content{ position:relative; z-index:2; text-align:center; }
.page-hero h1{
  font-size:2rem; margin-bottom:0.8rem; font-weight:700;
  background:linear-gradient(135deg,#3b82f6,#06b6d4,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-hero p{ font-size:1rem; color:#64748b; margin-bottom:0.5rem; }
.hero-stats{ display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; }
.hero-stat{ text-align:center; }
.hero-stat-number{ font-size:1.8rem; font-weight:700; color:#3b82f6; margin-bottom:.5rem; }
.hero-stat-label{ font-size:.9rem; color:#64748b; }

/* 内容块结构补充 */
.section-header{ display:flex; align-items:center; margin-bottom:2rem; position:relative; z-index:2; }
.step-number{
  width:50px; height:50px; background:linear-gradient(135deg,#3b82f6,#06b6d4); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:1.2rem; margin-right:1rem; box-shadow:0 4px 15px rgba(59,130,246,.3);
}
.section-title{ font-size:1.5rem; font-weight:700; color:#1e293b; margin:0; }
.section-content{ position:relative; z-index:2; }
.section-content p{ margin-bottom:1.5rem; color:#475569; line-height:1.6; }

/* 认证流程 */
.auth-flow-container{
  background:linear-gradient(135deg,#f8fafc,#e2e8f0); border-radius:20px; padding:2.5rem; margin:2rem 0; position:relative; overflow:hidden;
}
.auth-flow-container::before{
  content:''; position:absolute; top:-50%; right:-50%; width:100%; height:200%;
  background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%); animation:authFloat 12s ease-in-out infinite;
}
@keyframes authFloat{ 0%,100%{transform:rotate(0) scale(1);} 50%{transform:rotate(180deg) scale(1.1);} }

.auth-flow-title{
  text-align:center; font-size:1.3rem; font-weight:700; color:#1e293b; margin-bottom:2rem; position:relative; z-index:2;
  background:linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.auth-flow-steps{ display:flex; align-items:flex-start; justify-content:center; position:relative; z-index:2; flex-wrap:wrap; gap:2.5rem; }
.auth-step{
  display:flex; flex-direction:column; align-items:center; text-align:center; flex:0 0 auto; min-width:300px; max-width:300px;
  margin:.5rem; background:transparent; padding:1rem; transition:all .3s ease; position:relative; overflow:visible;
}
.auth-step:hover{ transform:translateY(-10px); }
.auth-step-image{
  width:300px; height:600px; border-radius:20px; overflow:hidden; margin-bottom:2rem; box-shadow:0 12px 40px rgba(0,0,0,.15);
  background:#fff; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; transition:all .3s ease;
}
.auth-step:hover .auth-step-image{ box-shadow:0 16px 50px rgba(59,130,246,.25); transform:scale(1.02); }
.auth-step-image img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }
.auth-step-content{ position:relative; z-index:2; }
.auth-step-number{
  width:40px; height:40px; background:linear-gradient(135deg,#3b82f6,#06b6d4); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem;
  margin:0 auto 1.2rem; box-shadow:0 6px 20px rgba(59,130,246,.3);
}
.auth-step h4{ font-size:1.3rem; font-weight:600; color:#1e293b; margin:0 0 .8rem; }
.auth-step p{ font-size:1rem; color:#64748b; margin:0; line-height:1.5; }

/* QR Code Container */
.qr-container{
  background:linear-gradient(135deg,#f0f9ff,#e0f2fe); border-radius:16px; padding:2rem; margin:2rem 0; text-align:center; position:relative; overflow:hidden;
}
.qr-container::before{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(59,130,246,.1) 0%, transparent 50%); animation:qrFloat 10s ease-in-out infinite;
}
@keyframes qrFloat{ 0%,100%{transform:rotate(0);} 50%{transform:rotate(180deg);} }
.qr-placeholder{
  max-width:600px; min-height:600px; background:#fff; border:2px dashed #94a3b8; border-radius:16px;
  display:flex; align-items:center; justify-content:center; margin:1rem auto; color:#64748b; font-size:.9rem; padding:20px; overflow:hidden;
  position:relative; z-index:2; box-shadow:0 8px 25px rgba(59,130,246,.1);
}
.qr-placeholder img{
  max-width:90%; max-height:90%; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.1);
  min-width:300px; min-height:300px;
}
.qr-description{ color:#64748b; font-size:1rem; margin-top:1.5rem; position:relative; z-index:2; font-weight:500; }
.qr-highlight{
  background:rgba(59,130,246,.1); padding:1.5rem; border-radius:12px; margin-top:1.5rem; position:relative; z-index:2;
}
.qr-highlight p{ color:#3b82f6; font-weight:600; text-align:center; margin:0; font-size:1.1rem; }

/* Alert Boxes */
.alert{
  padding:1.5rem; border-radius:12px; margin:1.5rem 0; position:relative; overflow:hidden;
}
.alert::before{ content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:currentColor; }
.alert.warning{
  background:linear-gradient(135deg,#fef7cd,#fde68a); color:#92400e; border:1px solid #f59e0b;
}
.alert.info{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1e40af; border:1px solid #3b82f6;
}
.alert-title{
  font-weight:700; font-size:1.1rem; margin-bottom:1rem; display:flex; align-items:center;
}
.alert-title::before{ margin-right:.5rem; font-size:1.2rem; }
.alert.warning .alert-title::before{ content:'⚠️'; }
.alert.info .alert-title::before{ content:'💡'; }
.alert ul{ margin:1rem 0; padding-left:1.5rem; }
.alert li{ margin-bottom:.5rem; line-height:1.5; }

/* FAQ Section */
.faq-item{
  margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid #e2e8f0;
}
.faq-item:last-child{ border-bottom:none; margin-bottom:0; }
.faq-question{ font-weight:700; color:#1e293b; margin-bottom:.8rem; font-size:1.1rem; }
.faq-answer{ color:#475569; line-height:1.6; }

/* Back to Top Button */
.back-to-top{
  position:fixed; bottom:30px; right:30px; width:50px; height:50px; background:linear-gradient(135deg,#3b82f6,#06b6d4);
  border:none; border-radius:50%; color:#fff; font-size:1.2rem; cursor:pointer; box-shadow:0 4px 15px rgba(59,130,246,.3);
  transition:all .3s ease; opacity:0; visibility:hidden; transform:translateY(100px); z-index:1000;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(59,130,246,.4); }
.back-to-top::before{
  content:'↑'; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:bold;
}

/* Sidebar Toggle for Mobile */
.sidebar-toggle{
  position:fixed; top:120px; left:20px; z-index:1001; background:linear-gradient(135deg,#3b82f6,#06b6d4); color:#fff;
  border:none; border-radius:8px; padding:.5rem; cursor:pointer; box-shadow:0 4px 15px rgba(59,130,246,.3); transition:all .3s ease;
}
.sidebar-toggle:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(59,130,246,.4); }

/* Overlay for mobile sidebar */
.sidebar-overlay{
  position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:99;
  opacity:0; visibility:hidden; transition:all .3s ease;
}
.sidebar-overlay.active{ opacity:1; visibility:visible; }

/* CTA Button - 添加客服微信按钮 */
.cta-button{
  display:inline-block; padding:.9rem 2rem; border-radius:30px; font-weight:600; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,#3b82f6,#06b6d4); text-decoration:none; box-shadow:0 4px 15px rgba(59,130,246,.3);
  transition:all .3s ease; position:relative; overflow:hidden; border:none; cursor:pointer;
}
.cta-button:hover{
  transform:translateY(-2px); box-shadow:0 8px 25px rgba(59,130,246,.4);
}
.cta-button::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left .6s ease;
}
.cta-button:hover::before{ left:100%; }

/* Animations */
.fade-in{ opacity:0; transform:translateY(30px); animation:fadeInUp .8s ease forwards; }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }

/* Responsive styles for join page specific elements */
@media (max-width: 1024px){
  .main-content{ margin-left:0; padding:2rem 1.5rem; }
  .sidebar{ transform:translateX(-100%); }
  .sidebar.active{ transform:translateX(0); }
  .sidebar-toggle{ display:block; }

  .auth-flow-steps{ justify-content:center; gap:2rem; }
  .auth-step{ min-width:240px; max-width:240px; }
  .auth-step-image{ width:240px; height:480px; }
  .auth-step-number{ width:36px; height:36px; font-size:1.1rem; }
  .auth-step h4{ font-size:1.2rem; }
  .auth-step p{ font-size:.95rem; }
}

@media (max-width: 768px){
  .page-hero{ padding:1rem; margin-bottom:1rem; }
  .page-hero h1{ font-size:1.8rem; }
  .hero-stats{ gap:1rem; }
  .content-section{ padding:2rem; }
  .section-header{ flex-direction:column; text-align:center; margin-bottom:1.5rem; }
  .step-number{ margin-right:0; margin-bottom:1rem; }

  .auth-flow-container{ padding:1.5rem 1rem; }
  .auth-flow-title{ font-size:1.1rem; margin-bottom:2rem; }
  .auth-flow-steps{ flex-direction:column; align-items:center; gap:3rem; }
  .auth-step{
    width:100%; max-width:200px; min-width:200px; flex-direction:column; text-align:center; padding:1rem .5rem; margin:0;
  }
  .auth-step-image{ width:200px; height:400px; margin-right:0; margin-bottom:1.5rem; flex-shrink:0; }
  .auth-step-content{ flex:1; }
  .auth-step-number{ margin:0 auto 1rem; width:32px; height:32px; font-size:1rem; }
  .auth-step h4{ font-size:1.1rem; margin-bottom:.6rem; }
  .auth-step p{ font-size:.9rem; }

  .qr-placeholder{ max-width:100%; min-height:450px; padding:15px; }
  .qr-placeholder img{ min-width:250px; min-height:250px; }
  .back-to-top{ bottom:20px; right:20px; width:45px; height:45px; font-size:1.1rem; }
}

@media (max-width: 480px){
  .main-content{ padding:1.5rem 1rem; }
  .page-hero{ padding:0.8rem; }
  .page-hero h1{ font-size:1.6rem; }
  .content-section{ padding:1.5rem; }

  .auth-flow-container{ padding:1rem .5rem; }
  .auth-flow-title{ font-size:1rem; margin-bottom:1.5rem; }
  .auth-step{ max-width:160px; min-width:160px; padding:.8rem .3rem; }
  .auth-step-image{ width:160px; height:320px; margin-bottom:1.2rem; }
  .auth-step-number{ width:28px; height:28px; font-size:.9rem; margin-bottom:.8rem; }
  .auth-step h4{ font-size:1rem; margin-bottom:.4rem; }
  .auth-step p{ font-size:.85rem; }

  .qr-placeholder{ min-height:350px; padding:12px; }
  .qr-placeholder img{ min-width:200px; min-height:200px; }
}