/*
Theme Name: XiaoZhi
Version: 5.0
*/
:root{
  --bg:#f4f7fb;
  --bg-soft:#eef3f9;
  --surface:#ffffff;
  --surface-soft:#f8fbff;
  --surface-strong:#ffffff;
  --line:#dbe5f2;
  --line-strong:#bfd2ec;
  --text:#162033;
  --text-soft:#2b3c55;
  --muted:#667892;
  --accent:#2f6df6;
  --accent-strong:#0ea5e9;
  --accent-soft:#e8f1ff;
  --success:#0f766e;
  --warn:#b45309;
  --shadow:0 22px 60px rgba(31, 55, 90, .10);
  --shadow-soft:0 14px 34px rgba(31, 55, 90, .07);
  --fs-h1:clamp(48px, 5.1vw, 60px);
  --fs-h2:clamp(36px, 4vw, 48px);
  --fs-h3:28px;
  --fs-h4:24px;
  --fs-body:clamp(16px, 1.35vw, 20px);
  --section-gap:56px;
  --content-pad-y:clamp(20px, 2.8vw, 40px);
  --content-pad-x:clamp(20px, 3vw, 40px);
  --content-gap:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.72 "Segoe UI","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(47,109,246,.08), transparent 30%),
    radial-gradient(circle at 100% 12%, rgba(14,165,233,.10), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 34%, #eef3f9 100%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.container{width:min(1200px, calc(100% - 56px));margin:0 auto}
.site-main{padding-bottom:96px}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(22,32,51,.08);
  box-shadow:0 14px 32px rgba(15,23,42,.05);
}
.header-shell{
  min-height:96px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
}
.brandmark{display:flex;align-items:center;gap:16px;min-width:0}
.brandmark img{width:64px;height:auto;flex:0 0 auto}
.brand-copy strong{display:block;font-size:23px;line-height:1.1;color:var(--text)}
.brand-copy small{display:block;font-size:16px;color:var(--muted);margin-top:6px}

.nav-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.nav-links a{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  font-size:16px;
  font-weight:600;
  color:var(--muted);
  border-bottom:2px solid transparent;
  transition:.25s ease;
}
.nav-links a:hover,.nav-links a.is-active{color:var(--text);border-color:var(--accent)}

.header-cta{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.btn,.chip{
  min-height:48px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  font-size:16px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover,.chip:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
  color:#fff;
  font-weight:700;
  box-shadow:0 14px 28px rgba(47,109,246,.22);
}
.btn-secondary,.chip{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(22,32,51,.10);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}
.btn-secondary:hover,.chip:hover{border-color:rgba(47,109,246,.28)}

.eyebrow{
  margin:0 0 18px;
  color:var(--accent);
  font-size:16px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
h1,h2,h3,h4{
  margin:0 0 18px;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--text);
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p,li{
  font-size:var(--fs-body);
  line-height:1.82;
  color:var(--text-soft);
}

.lead{
  font-size:clamp(18px, 1.55vw, 20px);
  line-height:1.82;
  color:var(--text-soft);
  margin:0;
}
.section-copy,.page-hero .section-copy{
  font-size:clamp(16px, 1.35vw, 18px);
  line-height:1.85;
  color:var(--muted);
  max-width:720px;
  margin:0;
}
.chip-row,.button-row,.badge-row,.post-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-grid,.single-hero{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:52px;
  align-items:center;
}
.hero-grid{padding:76px 0 46px}

.hero-panel,
.page-panel,
.info-card,
.compat-card,
.setup-card,
.flow-card,
.issue-card,
.guide-card,
.device-card,
.tip-card,
.post-card,
.single-cover{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.hero-copy{display:grid;gap:20px;padding:18px 0}
.hero-copy h1{max-width:10.5ch;margin-bottom:0}
.hero-copy .lead{max-width:44rem}

.hero-panel{
  padding:18px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 18% 18%, rgba(14,165,233,.16), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(47,109,246,.12), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7faff);
}
.hero-panel:after{
  content:"";
  position:absolute;
  inset:auto 10% -18% 10%;
  height:42%;
  border-radius:999px;
  background:radial-gradient(circle, rgba(47,109,246,.09), transparent 72%);
  pointer-events:none;
}
.hero-panel img,.single-cover img,.post-cover{width:100%;border-radius:22px}
.single-cover{padding:18px;overflow:hidden}
.hero-panel img{animation:heroFloat 9s ease-in-out infinite}

.hero-points{display:grid;gap:10px;padding-left:22px;margin:22px 0 0}
.hero-points li{color:var(--text-soft)}

.info-strip,.compat-grid,.setup-grid,.flow-grid,.issue-grid,.guide-grid,.device-grid,.tips-grid,.post-grid,.footer-grid{display:grid;gap:28px}
.info-strip{grid-template-columns:repeat(3,1fr);margin:18px 0}
.compat-grid{grid-template-columns:repeat(3,1fr)}
.setup-grid,.guide-grid,.device-grid{grid-template-columns:repeat(4,1fr)}
.flow-grid{grid-template-columns:repeat(4,1fr)}
.issue-grid{grid-template-columns:repeat(2,1fr)}
.tips-grid,.post-grid,.footer-grid{grid-template-columns:repeat(3,1fr)}

.home-section{padding-top:104px}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(280px,360px);
  gap:34px;
  align-items:end;
  margin-bottom:42px;
}
.section-head h2{max-width:12ch;margin-bottom:0}

.info-card,
.compat-card,
.setup-card,
.flow-card,
.issue-card,
.guide-card,
.device-card,
.tip-card,
.post-card{
  display:grid;
  align-content:start;
  gap:20px;
  padding:32px;
  background:var(--surface);
}
.compat-top{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:0}

.status{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  background:var(--accent-soft);
  color:var(--accent);
}
.status-good{background:#e9fbf8;color:var(--success)}
.status-warn{background:#fff2e1;color:var(--warn)}

.setup-card img,.device-card img,.post-cover{
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid rgba(22,32,51,.08);
  background:#f3f7fd;
  margin-bottom:0;
}
.flow-card,.issue-card,.guide-card,.setup-card,.post-card,.tip-card{position:relative;overflow:hidden}
.flow-card:before,
.issue-card:before,
.guide-card:before,
.setup-card:before,
.post-card:before{
  content:"";
  position:absolute;
  right:-38px;
  top:-38px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,109,246,.10), transparent 68%);
}

.step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:48px;
  padding:0 16px;
  border-radius:14px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:16px;
  font-weight:700;
  margin-bottom:0;
}
.kicker{
  display:block;
  margin-bottom:0;
  color:var(--accent);
  font-size:16px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.post-meta span,.badge-row span{
  padding:7px 12px;
  border-radius:999px;
  background:#f3f7fd;
  border:1px solid rgba(22,32,51,.08);
  font-size:16px;
  color:var(--muted);
}
.guide-card a,.setup-card a,.issue-card a,.post-card a{
  display:inline-flex;
  align-items:center;
  min-height:46px;
  margin-top:0;
  padding:0 16px;
  border-radius:14px;
  background:#eff6ff;
  border:1px solid rgba(47,109,246,.18);
  color:var(--accent);
  font-size:16px;
  font-weight:600;
}
.tip-card .btn,
.bento-card .btn,
.template-band .btn{justify-self:start}

.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.metric-card{
  display:grid;
  gap:8px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(22,32,51,.08);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:var(--shadow-soft);
}
.metric-card strong{font-size:clamp(28px,3vw,40px);line-height:1;color:var(--text)}
.metric-card span{font-size:16px;color:var(--muted);line-height:1.6}

.template-band{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:24px;
  align-items:center;
  padding:28px 30px;
  border-radius:26px;
  border:1px solid rgba(47,109,246,.14);
  background:linear-gradient(135deg, #edf4ff, #ffffff 58%, #f5fbff);
  box-shadow:var(--shadow-soft);
}
.template-band h3{margin:0}
.template-band p{margin:0;color:var(--muted)}

.bento-grid{display:grid;gap:20px}
.bento-grid--two{grid-template-columns:repeat(2,1fr)}
.bento-grid--three{grid-template-columns:repeat(3,1fr)}
.bento-card{
  display:grid;
  gap:18px;
  padding:30px;
  border-radius:28px;
  border:1px solid rgba(22,32,51,.08);
  background:linear-gradient(180deg,#ffffff,#f7faff);
  box-shadow:var(--shadow-soft);
}
.bento-card--featured{
  background:
    radial-gradient(circle at 86% 16%, rgba(14,165,233,.14), transparent 24%),
    linear-gradient(180deg,#ffffff,#eef6ff);
}
.bento-card p{margin:0;color:var(--text-soft)}
.hero-panel--showcase{padding:20px}
.hero-panel--showcase img{border-radius:24px}

.page-shell{padding:62px 0 108px}
.page-shell > section + section,
.page-shell > article + section,
.page-shell > section + article,
.page-shell > article + article{margin-top:var(--section-gap)}
.page-hero{max-width:780px;margin-bottom:0}
.page-hero h1{font-size:var(--fs-h1);margin-bottom:12px;max-width:12ch}

.page-panel{
  display:grid;
  gap:var(--content-gap);
  padding:var(--content-pad-y) var(--content-pad-x);
}
.page-panel > *{margin:0}

.elementor-page-shell{padding-top:48px}
.elementor-surface{padding:0;background:none;border:0;box-shadow:none}
.elementor-surface .elementor-section + .elementor-section,
.elementor-surface .e-con + .e-con{margin-top:var(--section-gap)}
.elementor-surface .elementor-container,
.elementor-surface .e-con,
.elementor-surface .e-con-inner{column-gap:20px;row-gap:20px}
.elementor-surface .elementor-widget:not(:last-child){margin-bottom:20px !important}
.elementor-surface .elementor-column-gap-default > .elementor-column > .elementor-element-populated{padding-left:10px;padding-right:10px}
.elementor-surface .elementor-widget-heading .elementor-heading-title{color:var(--text);letter-spacing:-.03em}
.elementor-surface .elementor-widget-text-editor,
.elementor-surface .elementor-widget-shortcode,
.elementor-surface .elementor-widget-button{font-size:var(--fs-body)}

.page-panel p,.page-panel li{font-size:var(--fs-body);line-height:1.9;color:var(--text-soft)}
.page-panel p{margin:0}
.page-panel h2{margin:0;font-size:var(--fs-h2)}
.page-panel h3{margin:0;font-size:var(--fs-h3)}
.page-panel h4{margin:0;font-size:var(--fs-h4)}
.page-panel ul,.page-panel ol{padding-left:24px;margin:0}
.page-panel li + li{margin-top:12px}

.content-intro,.content-section,.guide-section,.guide-step,.guide-callout{
  display:grid;
  gap:20px;
  padding-block:clamp(20px,2.6vw,40px);
}
.content-intro + .content-section,
.content-section + .content-section{margin-top:0}

.faq-list{display:grid;gap:20px}
.faq-item{
  border:1px solid rgba(22,32,51,.08);
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.faq-item.active,.faq-item:hover{
  border-color:rgba(47,109,246,.22);
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(47,109,246,.10);
}
.faq-trigger{
  width:100%;
  background:none;
  border:0;
  color:var(--text);
  display:flex;
  justify-content:space-between;
  gap:18px;
  text-align:left;
  padding:24px 26px;
  font:600 20px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;
  cursor:pointer;
}
.faq-answer{padding:0 26px 26px;display:none}
.faq-item.active .faq-answer{display:block}
.faq-plus{font-size:30px;color:var(--accent);line-height:1}

.single-copy .badge-row{margin-bottom:0}
.single-copy h1{max-width:12ch}
.article-panel .guide-section + .guide-section,
.article-panel .guide-step + .guide-step{margin-top:0}
.guide-step-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:0}
.guide-media{margin:0}
.guide-media img{border-radius:22px;border:1px solid rgba(22,32,51,.08)}
.guide-callout{
  margin-top:0;
  padding:clamp(20px,2.4vw,32px);
  border-radius:22px;
  background:#f5f9ff;
  border:1px solid rgba(47,109,246,.14);
}
.check-list{display:grid;gap:12px}

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible{opacity:1;transform:none}

.site-footer{
  border-top:1px solid rgba(22,32,51,.08);
  padding:68px 0 42px;
  background:linear-gradient(180deg,#f0f5fb,#eef3f9);
}
.footer-grid{grid-template-columns:1.2fr repeat(3,1fr);gap:30px}
.footer-brand img{width:88px;height:auto;margin-bottom:18px}
.footer-brand p,.footer-meta p,.footer-links a{
  font-size:16px;
  line-height:1.9;
  color:var(--muted);
}
.footer-grid h3{font-size:18px;margin-bottom:16px;color:var(--text)}
.footer-links{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.footer-links a{display:inline-flex;min-height:32px;align-items:center}
.footer-meta{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-top:28px;
  margin-top:32px;
  border-top:1px solid rgba(22,32,51,.08);
}

@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal],.hero-panel img{opacity:1;transform:none;transition:none;animation:none}
}

@media (max-width:1120px){
  .setup-grid,.guide-grid,.device-grid,.footer-grid,.compat-grid,.bento-grid--three{grid-template-columns:repeat(2,1fr)}
  .template-band{grid-template-columns:1fr}
  .metric-strip{grid-template-columns:1fr}
}

@media (max-width:980px){
  .header-shell,
  .hero-grid,
  .single-hero,
  .section-head,
  .info-strip,
  .compat-grid,
  .setup-grid,
  .flow-grid,
  .issue-grid,
  .guide-grid,
  .device-grid,
  .tips-grid,
  .post-grid,
  .footer-grid,
  .bento-grid--two,
  .bento-grid--three,
  .metric-strip{grid-template-columns:1fr}
  .header-shell{padding:18px 0}
  .nav-links{justify-content:flex-start}
  .header-cta{justify-content:flex-start}
  .section-head h2,.page-hero h1,.hero-copy h1,.single-copy h1{max-width:none}
  .template-band{padding:24px}
}

@media (max-width:680px){
  .container{width:min(100% - 28px, 100%)}
  .hero-grid{padding:44px 0 22px}
  .home-section{padding-top:74px}
  .page-shell{padding:42px 0 76px}
  .page-panel,
  .info-card,
  .compat-card,
  .setup-card,
  .flow-card,
  .issue-card,
  .guide-card,
  .device-card,
  .tip-card,
  .post-card{padding:24px}
}