:root{
  --bg:#f5f7fb; --text:#0f172a; --muted:#64748b; --line:#e6eaf2;
  --brand:#9ec5ff; --brand2:#c4b5fd;
}

/* ================= Base ================= */
*{box-sizing:border-box}

html,body{ 
  margin:0; 
  min-height:100%;
}

/* 只在桌面端禁用文字缩放 */
/* @media (min-width: 541px) {
  html,body{ 
    -webkit-text-size-adjust: none !important;
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }
}*/

body{
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",Arial;
  min-height:100vh;
  background:#0e1325 url('/assets/img/page-bg.jpg') center top / cover no-repeat fixed;
}

/* 链接 */
a{color:#1d4ed8;text-decoration:none}

/* 容器：桌面端更舒适的版心宽度 */
.container{max-width:1100px;margin:0 auto;padding:60px}

/* ================= HERO ================= */
.hero-wrap{
  position:relative;
  min-height:420px;
  border-radius:28px; overflow:hidden;
  box-shadow:0 30px 60px rgba(16,24,40,.08);
  background-image:url('/assets/img/hero.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0; pointer-events:none;
}

.hero-img{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(115%) contrast(103%);
}

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1400px 600px at 18% 15%, rgba(7,12,22,.42), rgba(7,12,22,.18) 60%, rgba(7,12,22,0) 100%),
    linear-gradient(180deg, rgba(7,12,22,.35), rgba(7,12,22,.18) 45%, rgba(7,12,22,.05) 100%);
}

.hero-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 48px; gap:10px;
}

.hero-title{
  font-size:60px; font-weight:900; letter-spacing:.2px; margin:0; color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.70);
  -webkit-text-stroke:1px rgba(0,0,0,.35);
}
.hero-sub{
  color:#e9eef9; font-size:32px; max-width:680px;
  text-shadow:0 1px 8px rgba(0,0,0,.38), 0 0 1px rgba(0,0,0,.75);
  -webkit-text-stroke:.4px rgba(0,0,0,.25);
}

/* 搜索与徽章 */
.badge{display:inline-block; padding:6px 12px; border-radius:999px; background:#ecfeff; color:#0369a1; border:1px solid #bae6fd; font-size:12px; width:max-content}
.search{display:flex; gap:10px; margin-top:6px}
.search input{
  flex:1; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:#ffffff45; backdrop-filter:saturate(140%) blur(4px);
  color:#101828; font-weight:700;
}
.search input::placeholder{color:#0f172a; opacity:.65; font-weight:600;}
.search button{padding:14px 18px; border-radius:14px; border:1px solid var(--line); background:white; cursor:pointer}

/* ================= Tiles（左侧四卡） ================= */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:18px;
}
.tile{position:relative; border-radius:18px; overflow:hidden; box-shadow:0 16px 32px rgba(16,24,40,.06)}
.tile img{width:100%; height:180px; object-fit:cover; display:block}

.tile .t-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62) 78%, rgba(0,0,0,.72));
}
.tile .t-text{
  position:absolute; left:14px; bottom:12px; color:#fff; font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.85);
  -webkit-text-stroke:.4px rgba(0,0,0,.35);
}
.tile small{display:block; font-weight:600; opacity:.95}

/* ================= 右侧 CTA 列 ================= */
.side{display:grid; gap:12px; min-width:280px}
.side a{
  display:flex; align-items:center; gap:10px;
  background:white; border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; color:var(--text);
  box-shadow:0 8px 20px rgba(16,24,40,.05);
  line-height:1.25; white-space:normal; word-break:break-word;
}
.side a strong{display:block; font-weight:800;}
.side a span{color:var(--muted); font-size:12px}

/* ================= Footer ================= */
.footer{display:flex; justify-content:space-between; gap:12px; margin-top:20px; color:var(--muted); font-size:12px}
.legal a{color:#64748b}

/* ================= 响应式 ================= */
@media (max-width:980px){
  .hero-content{padding:28px}
  .hero-title{font-size:60px}
  .hero-wrap{min-height:360px}
}
@media (max-width:540px){
  .hero-content{padding:22px}
  .hero-title{font-size:60px}
  .hero-wrap{min-height:360px}
}

@media (max-width:540px){
  .container{padding:14px}

  .tiles{grid-template-columns:1fr !important; justify-content:center;}
  .tile{width:min(92vw,360px); max-width:360px; margin:0 auto;}
  .tile img{width:100%; height:190px; object-fit:cover;}

  .side{grid-column:1 / -1 !important; width:100% !important;}
  .side a{
    width:100% !important; min-height:106px; padding:16px 18px; font-size:15px;
    writing-mode:horizontal-tb !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .side a strong, .side a span{writing-mode:horizontal-tb !important; white-space:nowrap;}

  .search{flex-wrap:wrap}
  .search input{width:100%}
  .search button{width:100%}
}

@media (max-width:360px){
  .hero-title{font-size:28px}
  .tile img{height:170px}
  .side a{padding:14px 16px}
}

@supports (height:100svh){ body{ min-height:100svh; } }
@media (max-width:1024px){ body{ background-attachment:scroll; } }

main, .doc, .container, .page, .content{
  min-height:calc(100vh - 1px);
}

.article-hero,
.doc > img:first-child,
main > img:first-child{
  width:100%;
  display:block;
  max-height:66vh;
  height:auto;
  object-fit:cover;
}

@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none; }
}

@media (max-width:540px){
  .hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(2, 6, 23, .55) 0%,
      rgba(2, 6, 23, .35) 45%,
      rgba(2, 6, 23, .15) 100%
    ) !important;
  }
  .hero-title{
    color:#fff;
    font-size:40px;
    line-height:1.2;
    font-weight:800;
    text-shadow:0 2px 18px rgba(0,0,0,.55);
    -webkit-text-stroke:.30px rgba(0,0,0,.2);
  }
  .hero-sub{
    color:#e2e8f0;
    font-size:15px;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
  }
  .badge{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(255,255,255,.28);
  }
  .search{ gap:10px; }
  .search input{
    font-size:16px;
    padding:14px 14px;
    background:rgba(255,255,255,.92);
    border:2px solid rgba(255,255,255,.85);
  }
  .search button{
    font-size:16px; font-weight:800; padding:10px 12px;
    color:#0B0B0B; background:#fff; border:1px solid #fff;
    box-shadow:0.6px 12px rgba(15,23,42,.25);
  }
}

/* ===== 桌面端文章样式 ===== */
@media (min-width: 541px) {
  main, .doc, article, .content {
    color: #0B0B0B !important;
    font-weight: 800;
    text-align: center;
    padding: 32px;
  }

  main p, .doc p, article p, .content p,
  main li, .doc li, article li, .content li,
  main td, .doc td, article td, .content td,
  main th, .doc th, article th, .content th,
  main small, .doc small, article small, .content small,
  main time, .doc time, article time, .content time {
    color: #0B0B0B !important;
    font-size: 40px !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  main h1, .doc h1, article h1, .content h1,
  main h2, .doc h2, article h2, .content h2,
  main h3, .doc h3, article h3, .content h3 {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-shadow: 0 3px 15px rgba(0,0,0,.8) !important;
    font-size:4.5vw;
    -webkit-text-stroke: 0 !important;
  }

  main ul, .doc ul, article ul, .content ul,
  main ol, .doc ol, article ol, .content ol {
    display: inline-block;
    text-align: left;
    margin: 1em auto;
  }

  main a[href*="guides"], .doc a[href*="guides"], 
  article a[href*="guides"], .content a[href*="guides"] {
    color: #FFF !important;
    background: rgba(0,0,0,.4);
    border: 2.5px solid #FFF;
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 900;
    display: inline-block;
    backdrop-filter: saturate(150%) blur(2px);
  }
}

/* 手机端文档标题样式 */
@media (max-width:540px){
  .doc h1 {
    font-size: 42px;
    line-height: 1.8;
    font-weight: 800;
    text-align: center;
    margin: 0 0 18px;
    color: #0f172a;
  }
}
.note{
    font-size:3.5vw;
}




.center-home{ text-align:center; margin:24px 0 8px; }
.center-home .btn-home{
  display:inline-block; padding:10px 16px; border-radius:12px;
  border:1.5px solid var(--text, #0f172a); color:var(--text, #0f172a);
  text-decoration:none; font-weight:600; line-height:1;
}
.center-home .btn-home:hover{ background:var(--text, #0f172a); color:#fff; }