/* ==========================================================================
   style.css — 全局基础样式
   模板库 / A4 预览 / 打印由 templates.css 负责
   ========================================================================== */

*{box-sizing:border-box}
body{margin:0;background:#f5f7fb;color:#182033;font:16px/1.6 system-ui,sans-serif}
a{color:#315efb;text-decoration:none}

/* ---------- Header / Footer ---------- */
header{
  background:white;border-bottom:1px solid #e5e7eb;
  padding:16px max(20px,calc((100% - 1160px)/2));
  display:flex;justify-content:space-between;gap:18px;align-items:center;
}
nav{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.brand{font-weight:850;font-size:21px;color:#172033}
.wrap{max-width:1160px;margin:30px auto;padding:0 20px}
footer{text-align:center;color:#667085;padding:30px;font-size:13px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:#315efb;color:white;border:0;border-radius:10px;
  padding:11px 17px;font:inherit;font-weight:750;cursor:pointer;
}
.btn.light{background:#e9edff;color:#293a9b}

/* ---------- Panels / Tiles ---------- */
.panel,.tile{
  background:#fff;border:1px solid #e5e7eb;border-radius:15px;
  padding:22px;margin:15px 0;box-shadow:0 6px 24px #18203308;
}
.tile{display:block;color:#182033;margin:0;min-height:150px;border-top:4px solid #315efb}
.tile small{color:#667085}
.tile h3{margin-bottom:5px}
.tile p,.row p{color:#667085;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}

/* ---------- Auth ---------- */
.auth{max-width:460px;margin:50px auto}
.panel label{display:block;font-size:14px;font-weight:650;margin:13px 0}
.panel input:not([type=checkbox]),
.panel textarea,
.panel select,
.search input{
  display:block;width:100%;margin-top:6px;border:1px solid #cfd5df;
  border-radius:9px;padding:11px;font:inherit;background:#fff;
}
.editor textarea{resize:vertical}
.flash{background:#ecfdf3;color:#027a48;padding:12px;border-radius:8px}
.error{background:#fef3f2;color:#b42318;padding:10px;border-radius:8px}
.notice{background:#fff7e6;padding:13px;border-radius:8px;margin:10px 0;color:#7a4a00;font-size:14px}

/* ---------- Head / Row / Search / Table ---------- */
.head,.row{display:flex;justify-content:space-between;align-items:center;gap:15px}
.row h3{margin:0}
.search{display:flex;gap:10px;max-width:600px}
.table-wrap{
  overflow:auto;background:#fff;border:1px solid #e5e7eb;
  border-radius:12px;margin:20px 0;
}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:12px;border-bottom:1px solid #e5e7eb;white-space:nowrap}
th{background:#f8fafc}

/* ---------- Hero (通用) ---------- */
.hero{text-align:center;padding:60px 0}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.15}
.hero p{color:#667085}

/* ---------- Payment ---------- */
.payment-choice{min-width:250px;max-width:360px;text-align:left}
.payment-hint,.muted{color:#667085;font-size:14px}
.payment-choice .btn{width:100%;margin-top:6px}
.payment-card{
  max-width:520px;margin:30px auto;padding:28px 24px;background:#fff;
  border:1px solid #e5e7eb;border-radius:18px;text-align:center;
  box-shadow:0 12px 36px #1820330b;
}
.payment-card h1{font-size:25px;margin:12px 0}
.payment-mark{display:inline-block;padding:7px 14px;border-radius:99px;font-weight:800}
.wechat-mark{background:#e7f8ed;color:#078044}
.qr-box{display:flex;justify-content:center;align-items:center;min-height:240px;margin:18px auto}
.qr-box img,.qr-box canvas{max-width:100%;height:auto}
.copy-link{display:flex;gap:8px;margin:14px 0}
.copy-link input{min-width:0;flex:1;padding:10px;border:1px solid #cfd5df;border-radius:9px}
.copy-link .btn{white-space:nowrap}

@media(max-width:550px){
  .payment-choice{min-width:0;width:100%;max-width:none}
  .payment-card{margin:16px auto;padding:22px 15px}
  .payment-card h1{font-size:22px}
  .copy-link{flex-direction:column}
  .copy-link .btn{width:100%}
  .head form{width:100%}
}

/* ==========================================================================
   Visual refresh — 首页 / 通用视觉
   ========================================================================== */
:root{--ink:#172033;--muted:#657086;--line:#e6e9f0;--blue:#365cf5;--violet:#7658e8;--surface:#fff}
body{background:#f7f8fc;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}

/* header：移动端不用 backdrop-filter，避免 UC / 安卓 WebView 点击失效 */
header{
  position:sticky;top:0;z-index:20;background:#fff;
  padding-top:14px;padding-bottom:14px;
  border-bottom:1px solid #e9ebf2;
}
@media(min-width:900px){
  header{background:rgba(255,255,255,.94);backdrop-filter:blur(16px)}
}

nav a{color:#475467;padding:7px 10px;border-radius:8px}
nav a:hover{background:#f0f3ff;color:var(--blue)}
.brand{letter-spacing:-.5px}
.wrap{max-width:1240px;margin:0 auto;padding:28px 24px 64px}
.btn{
  background:linear-gradient(135deg,#365cf5,#6249df);
  box-shadow:0 7px 16px #365cf526;border-radius:11px;padding:12px 18px;
  transition:transform .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px #365cf532}
.btn.light{background:#eef1ff;color:#3446a4;box-shadow:none}
.panel,.tile{border-color:#e8eaf2;border-radius:17px;box-shadow:0 10px 35px #1a275008}
.eyebrow{display:inline-block;font-size:11px;letter-spacing:2px;font-weight:850;color:#5368dc}
.page-intro{padding:38px 0 22px;max-width:900px}
.page-intro h1{font-size:clamp(30px,4vw,48px);line-height:1.2;letter-spacing:-1.6px;margin:14px 0}
.page-intro h1 em,.hero h1 em{font-style:normal;color:#5b5eea}
.page-intro>p{max-width:780px;color:#697386;font-size:16px}
.intro-pills,.hero-proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.intro-pills span,.hero-proof span{
  border:1px solid #e6e9f3;background:#fff;border-radius:999px;
  padding:8px 12px;font-size:12px;color:#596477;
}
.text-link{font-size:13px;color:#4e5fe1;font-weight:750;white-space:nowrap}
.text-link span{font-size:18px;margin-left:4px}

/* ---------- 首页 Hero ---------- */
.hero-home{
  display:grid;grid-template-columns:1.1fr .9fr;gap:55px;
  align-items:center;text-align:left;padding:65px 0 80px;
}
.hero-copy h1{font-size:clamp(40px,5vw,62px);line-height:1.15;letter-spacing:-2px;margin:18px 0}
.hero-copy>p{max-width:580px;font-size:17px;line-height:1.9;color:#697386}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.hero-preview{position:relative;padding:15px 25px 10px 10px}
.preview-shadow{
  position:absolute;inset:40px 0 0 45px;
  background:linear-gradient(135deg,#e6eaff,#f0e9ff);
  border-radius:25px;transform:rotate(3deg);
}
.hero-paper{
  position:relative;background:white;padding:30px 32px;max-width:390px;min-height:440px;
  margin:auto;border:1px solid #e8eaf2;border-radius:4px;
  box-shadow:0 25px 65px #26316c20;transform:rotate(-2deg);
}
.hero-paper-head{border-bottom:2px solid #5264eb;padding-bottom:15px}
.hero-paper-head>span{font-size:9px;letter-spacing:2px;color:#7a83a3}
.hero-paper-head h2{font-size:28px;margin:8px 0 0}
.hero-paper-head>b{font-size:12px;color:#5365e7}
.hero-paper-head p,.hero-paper p{font-size:10px;color:#7b8495;line-height:1.7}
.hero-paper h3{font-size:12px;margin:17px 0 5px;border-bottom:1px solid #edf0f5;padding-bottom:5px}

/* ---------- 首页 Section / Benefits / CTA ---------- */
.home-section{padding:38px 0 45px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
.section-heading h2{font-size:30px;letter-spacing:-.7px;margin:7px 0}
.section-heading p{margin:0;color:#697386}
.center-action{text-align:center;margin-top:24px}
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:35px 0}
.benefits>div{padding:24px;background:#fff;border:1px solid #e8eaf2;border-radius:15px}
.benefit-icon{font-size:12px;font-weight:850;color:#5d68e5;letter-spacing:1px}
.benefits h3{font-size:17px;margin:12px 0 7px}
.benefits p{font-size:13px;line-height:1.8;color:#697386;margin:0}
.home-cta{
  text-align:center;padding:42px 20px;margin-top:25px;
  background:linear-gradient(135deg,#eef0ff,#f7f2ff);
  border:1px solid #e7e7ff;border-radius:20px;
}
.home-cta h2{font-size:28px;margin:0 0 8px}
.home-cta p{color:#697386;margin:0 0 20px}

/* ---------- SEO 内容区 ---------- */
.seo-content{
  max-width:900px;margin:55px auto 10px;padding:30px;
  background:#fff;border:1px solid #e8eaf2;border-radius:16px;
}
.seo-content h2{font-size:22px;margin:8px 0 12px}
.seo-content h3{font-size:16px;margin:20px 0 5px}
.seo-content p{color:#697386;line-height:1.9;font-size:14px}

/* ==========================================================================
   响应式（全局）
   ========================================================================== */
@media(max-width:900px){
  .hero-home{grid-template-columns:1fr;gap:25px;padding:35px 0 50px}
  .hero-preview{max-width:500px;width:100%;margin:auto}
}
@media(max-width:850px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  /* 手机端 header：不用 overflow-x:auto，避免合成层 bug 导致点击失效 */
  header{
    padding:10px 14px;
    flex-direction:row;
    align-items:center;
    gap:10px;
    overflow:visible;
  }
  header .brand{font-size:17px;white-space:nowrap;flex:0 0 auto}
  header nav{
    display:flex;gap:6px;
    flex:1;
    flex-wrap:wrap;
    justify-content:flex-end;
    overflow:visible;
  }
  header nav a{
    font-size:13px;padding:6px 8px;
    white-space:nowrap;
  }

  .wrap{padding:20px 14px 45px}
  .page-intro{padding-top:20px}
  .page-intro h1{font-size:32px}
  .hero-copy h1{font-size:34px;line-height:1.25}
  .hero-copy>p{font-size:15px;line-height:1.75}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;text-align:center}
  .hero-proof{gap:6px}
  .hero-proof span{font-size:11px;padding:6px 10px}
  .hero-paper{padding:22px;min-height:360px;max-width:100%}

  .section-heading{flex-direction:column;align-items:flex-start;gap:8px}
  .section-heading h2{font-size:24px}
  .section-heading p{font-size:14px}
  .text-link{font-size:13px}

  .benefits{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .benefits>div{padding:18px}
  .benefits h3{font-size:16px}
  .benefits p{font-size:13px}

  .home-cta{padding:30px 18px;margin-top:18px}
  .home-cta h2{font-size:22px}
  .home-cta p{font-size:14px}

  .seo-content{margin-top:30px;padding:20px 16px}
  .seo-content h2{font-size:19px}
  .seo-content h3{font-size:15px}
  .seo-content p{font-size:13px;line-height:1.8}
}
@media(max-width:550px){
  .grid{grid-template-columns:1fr}
  .head,.row{align-items:flex-start;flex-direction:column}
  .search{flex-direction:column}
  .hero{padding:35px 0}
}
@media(max-width:420px){
  .wrap{padding:16px 12px 40px}
  .hero-copy h1{font-size:28px}
  .hero-paper{padding:18px;min-height:320px}
  header .brand{font-size:15px}
  header nav a{font-size:12px;padding:5px 6px}
}