.guide-page {

    --ink:#241b3a;
    --ink-2:#514a68;
    --ink-3:#8d87a6;
    --violet:#7c3aed;
    --violet-deep:#5b21b6;
    --violet-soft:#f3edff;
    --line:#e7dffb;
    --line-strong:#d5c6f7;
    --grad:linear-gradient(120deg,#7c3aed,#a855f7);
    --serif:"Noto Serif SC","Songti SC","SimSun",serif;
    --sans:"Noto Sans SC","PingFang SC",system-ui,sans-serif;
    --radius:18px;
  
}

  * {margin:0;padding:0;box-sizing:border-box}

  html {scroll-behavior:smooth;scroll-padding-top:80px}

  .guide-page {
    font-family:var(--sans);
    color:var(--ink-2);
    background:#fdfcff;
    line-height:1.8;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .guide-page .num {font-family:"Inter",sans-serif}

  .guide-page .wrap {max-width:1140px;margin:0 auto;padding:0 28px}

  .guide-page a {color:inherit;text-decoration:none}

  .guide-page img {max-width:100%}


  
  .guide-page .dot-grid {
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:radial-gradient(rgba(124,58,237,.09) 1.2px,transparent 1.2px);
    background-size:26px 26px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 30%,transparent 65%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 30%,transparent 65%);
  }


  
  .guide-page .progress-bar {position:fixed;top:0;left:0;height:4px;width:0;background:var(--grad);z-index:300}


  
  .guide-page .float-nav {position:fixed;bottom:26px;left:26px;z-index:200}

  .guide-page .fn-toggle {
    width:56px;height:56px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:2px solid var(--ink);color:var(--ink);
    box-shadow:4px 4px 0 rgba(124,58,237,.28);
    transition:transform .25s,box-shadow .25s;
  }

  .guide-page .fn-toggle:hover {transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(124,58,237,.32)}

  .guide-page .fn-toggle svg {width:22px;height:22px;transition:transform .4s}

  .guide-page .float-nav.open .fn-toggle svg {transform:rotate(45deg)}

  .guide-page .fn-panel {
    position:absolute;bottom:70px;left:0;width:250px;
    max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s;
    opacity:0;
  }

  .guide-page .float-nav.open .fn-panel {max-height:560px;opacity:1}

  .guide-page .fn-inner {
    padding:18px 14px 14px;background:#fff;
    border:2px solid var(--ink);border-radius:20px;
    box-shadow:6px 6px 0 rgba(124,58,237,.28);
  }

  .guide-page .fn-brand {display:flex;align-items:center;gap:10px;padding:0 6px 12px;border-bottom:2px dashed var(--line-strong);margin-bottom:10px}

  .guide-page .fn-brand .logo {width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}

  .guide-page .fn-brand .logo svg {width:18px;height:18px}

  .guide-page .fn-brand b {font-family:var(--serif);font-size:15px;font-weight:900;line-height:1.2;color:var(--ink);display:block}

  .guide-page .fn-brand small {display:block;font-size:10.5px;color:var(--ink-3);font-weight:500;letter-spacing:1px}

  .guide-page .fn-list {display:flex;flex-direction:column;gap:1px;max-height:370px;overflow-y:auto}

  .guide-page .fn-list::-webkit-scrollbar {width:3px}

  .guide-page .fn-list::-webkit-scrollbar-thumb {background:var(--line-strong);border-radius:3px}

  .guide-page .fn-list a {display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13px;color:var(--ink-2);font-weight:500;transition:.2s}

  .guide-page .fn-list a:hover {background:var(--violet-soft);color:var(--violet)}

  .guide-page .fn-list a .idx {font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;color:var(--violet);background:var(--violet-soft);border-radius:6px;padding:2px 7px;flex:none}


  
  .guide-page .reveal {opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

  .guide-page .reveal.visible {opacity:1;transform:translateY(0)}

  .guide-page .reveal-d1 {transition-delay:.1s}

  .guide-page .reveal-d2 {transition-delay:.2s}

  .guide-page .reveal-d3 {transition-delay:.3s}


  
  .guide-page section {padding:88px 0}

  .guide-page .sec-head {display:flex;align-items:flex-start;gap:28px;margin-bottom:52px}

  .guide-page .sec-no {
    font-family:"Inter",sans-serif;font-size:96px;font-weight:800;line-height:.85;flex:none;
    color:transparent;-webkit-text-stroke:2px rgba(124,58,237,.4);
    letter-spacing:-4px;user-select:none;
  }

  .guide-page .sec-head-main {padding-top:8px}

  .guide-page .sec-kicker {
    display:flex;align-items:center;gap:12px;
    font-family:"Inter",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:3px;
    color:var(--violet);margin-bottom:10px;text-transform:uppercase;
  }

  .guide-page .sec-kicker::before {content:"";width:34px;height:2px;background:var(--grad)}

  .guide-page .sec-head h2 {font-family:var(--serif);font-size:38px;font-weight:900;color:var(--ink);line-height:1.3;letter-spacing:1px}

  .guide-page .sec-head h2 em {font-style:normal;background:linear-gradient(transparent 68%,rgba(168,85,247,.3) 68%)}

  .guide-page .sec-head .sub {margin-top:12px;font-size:15px;color:var(--ink-3);max-width:640px}

  .guide-page .sec-head .stamp {margin-left:auto;flex:none;align-self:flex-start;margin-top:14px}

  @media (max-width:768px){
.guide-page .sec-no {font-size:56px;-webkit-text-stroke-width:1.5px}

    .guide-page .sec-head h2 {font-size:27px}

    .guide-page .sec-head {gap:16px;margin-bottom:38px}

}


  
  .guide-page .stamp {
    display:inline-block;border:2.5px solid #dc2626;color:#dc2626;
    font-weight:900;padding:3px 14px;border-radius:9px;
    transform:rotate(-5deg);letter-spacing:5px;font-size:14px;background:rgba(255,255,255,.7);
  }

  .guide-page .stamp.stamp-violet {border-color:var(--violet);color:var(--violet)}

  .guide-page .sticker {
    display:inline-block;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;
    padding:7px 15px;border-radius:10px;letter-spacing:1px;
    box-shadow:3px 3px 0 rgba(124,58,237,.35);
  }


  
  .guide-page .btn {
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-weight:700;font-size:15px;border-radius:999px;padding:13px 28px;transition:.25s;cursor:pointer;border:none;font-family:var(--sans);
  }

  .guide-page .btn svg {width:16px;height:16px}

  .guide-page .btn-primary {background:var(--ink);color:#fff;box-shadow:4px 4px 0 rgba(124,58,237,.35)}

  .guide-page .btn-primary:hover {transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(124,58,237,.4)}

  .guide-page .btn-ghost {background:#fff;color:var(--ink);border:2px solid var(--ink)}

  .guide-page .btn-ghost:hover {background:var(--violet-soft);transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(124,58,237,.25)}


  
  .guide-page .hero {padding:96px 0 64px;position:relative}

  .guide-page .hero-grid {display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}

  .guide-page .hero-tag {
    display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);
    border-radius:999px;padding:6px 18px;font-size:12.5px;font-weight:700;letter-spacing:1.5px;
    color:var(--ink);background:#fff;margin-bottom:26px;transform:rotate(-1deg);
  }

  .guide-page .hero-tag .dot {width:8px;height:8px;border-radius:50%;background:var(--grad)}

  .guide-page .hero h1 {
    font-family:var(--serif);font-size:58px;line-height:1.22;font-weight:900;color:var(--ink);margin-bottom:22px;letter-spacing:1px;
  }

  .guide-page .hero h1 .accent {color:var(--violet);position:relative;white-space:nowrap}

  .guide-page .hero h1 .accent::after {
    content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;z-index:-1;
    background:linear-gradient(transparent 0%,rgba(168,85,247,.28) 0%);
  }

  .guide-page .hero-sub {font-family:var(--serif);font-size:18px;font-weight:700;color:var(--violet-deep);margin-bottom:14px;letter-spacing:2px}

  .guide-page .hero-desc {color:var(--ink-2);font-size:15.5px;max-width:500px;line-height:1.9}

  .guide-page .hero-meta {display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font-size:13.5px;color:var(--ink-3);font-weight:500}

  .guide-page .hero-meta span {display:flex;align-items:center;gap:8px}

  .guide-page .hero-meta svg {width:15px;height:15px;color:var(--violet);flex:none}

  .guide-page .hero-actions {display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

  .guide-page .hero-visual {position:relative}

  .guide-page .hero-frame {position:relative}

  .guide-page .hero-frame::before {
    content:"";position:absolute;inset:0;transform:translate(16px,16px);
    border-radius:26px;background:var(--violet-soft);border:2px solid var(--line-strong);
  }

  .guide-page .img-main {
    position:relative;border-radius:26px;overflow:hidden;
    border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(124,58,237,.22);
    background:#fff;
  }

  .guide-page .img-main img {width:100%;display:block;aspect-ratio:1/1;object-fit:cover}

  .guide-page .hero-sticker-1 {position:absolute;top:-14px;right:-6px;z-index:2;transform:rotate(4deg)}

  .guide-page .hero-sticker-2 {position:absolute;bottom:26px;left:-18px;z-index:2;transform:rotate(-3deg);background:var(--violet)}

  .guide-page .hero-cap {
    margin-top:34px;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-3);
  }

  .guide-page .hero-cap::before {content:"";flex:none;width:44px;height:2px;background:var(--ink)}

  @media (max-width:1024px){
.guide-page .hero-grid {grid-template-columns:1fr;gap:48px}

    .guide-page .hero h1 {font-size:44px}

    .guide-page .hero-visual {max-width:460px;margin:0 auto}

}

  @media (max-width:768px){
.guide-page .hero {padding:64px 0 48px}

    .guide-page .hero h1 {font-size:34px}

    .guide-page .hero-sticker-2 {left:-6px}

}


  
  .guide-page .stats {border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:#fff}

  .guide-page .stats-inner {display:grid;grid-template-columns:repeat(4,1fr)}

  .guide-page .stat {padding:30px 18px;text-align:center;position:relative}

  .guide-page .stat + .stat::before {content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line-strong)}

  .guide-page .stat b {font-family:var(--serif);font-size:44px;font-weight:900;color:var(--violet);line-height:1.1;display:block;letter-spacing:-1px}

  .guide-page .stat span {font-size:13px;color:var(--ink-3);font-weight:500;margin-top:4px;display:block;letter-spacing:1px}

  @media (max-width:768px){
.guide-page .stats-inner {grid-template-columns:1fr 1fr}

    .guide-page .stat b {font-size:32px}

    .guide-page .stat:nth-child(3)::before {display:none}

}


  
  /* ===== 跑马灯：-104% 宽度 + 循环无缝填满，滚动完不出现空白 ===== */
  .guide-page .marquee-outer {overflow:hidden;padding:34px 0 0;position:relative;z-index:1}

  .guide-page .marquee {
    background:var(--grad);color:#fff;padding:13px 0;
    transform:rotate(-1.2deg);width:104%;margin-left:-2%;
    box-shadow:0 10px 30px rgba(124,58,237,.25);
    overflow:hidden;   /* 防止子元素 max-content 拉伸溢出右边出现可拖动空白 */
  }

  /* track 4 份内容，动画滚动 1 份 (-25%) 的距离 → 循环无缝，任意时刻整条都满 */
  .guide-page .marquee-track {
    display:flex;gap:0;
    width:max-content;
    will-change:transform;
    animation:mq 32s linear infinite;
  }

  .guide-page .marquee-track span {
    display:flex;align-items:center;white-space:nowrap;flex:none;
    font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:3px;
    padding:0 26px 0 0;
    position:relative;
  }

  .guide-page .marquee-track span::after {
    content:"✦";
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    font-size:12px;opacity:.7;
  }
  .guide-page .marquee-track span:last-child::after{content:'';display:none}

  /* 关键：track 是 4 份内容，动画位移只移动 1 份（25%），首尾衔接 = 同样的第 0 份，
   * 因而任意时刻 marquee 窗口都被填满，不会出现“滚动完右边空一段” */
  @keyframes mq{to{transform:translateX(-25%)}}


  
  .guide-page .letter {display:grid;grid-template-columns:150px 1fr;gap:44px;align-items:start}

  .guide-page .letter-side {position:sticky;top:60px}

  .guide-page .letter-mark {
    font-family:var(--serif);font-size:120px;line-height:.7;color:var(--violet);
    opacity:.18;font-weight:900;user-select:none;
  }

  .guide-page .letter-side h3 {font-family:var(--serif);writing-mode:vertical-rl;font-size:24px;font-weight:900;color:var(--ink);letter-spacing:10px;margin-top:-30px}

  .guide-page .letter-body {background:#fff;border:2px solid var(--ink);border-radius:22px;padding:44px 48px;box-shadow:8px 8px 0 rgba(124,58,237,.18)}

  .guide-page .letter-body p {color:var(--ink-2);font-size:15.5px;margin-bottom:14px;line-height:2}

  .guide-page .letter-body p:last-child {margin-bottom:0}

  .guide-page .letter-body .hl {color:var(--violet);font-weight:700}

  .guide-page .letter-body b {color:var(--ink)}

  .guide-page .letter-note {
    margin-top:26px;background:var(--violet-soft);border:1.5px dashed var(--violet);
    border-radius:12px;padding:14px 20px;font-size:13.5px;color:var(--violet-deep);font-weight:500;
  }

  @media (max-width:768px){
.guide-page .letter {grid-template-columns:1fr;gap:20px}

    .guide-page .letter-side {position:static;display:flex;align-items:center;gap:14px}

    .guide-page .letter-mark {font-size:64px;margin:0}

    .guide-page .letter-side h3 {writing-mode:horizontal-tb;margin:0;letter-spacing:4px;font-size:20px}

    .guide-page .letter-body {padding:30px 24px}

}


  
  .guide-page .card {background:#fff;border:2px solid var(--line-strong);border-radius:var(--radius);padding:28px;transition:.3s;position:relative}

  .guide-page .card:hover {border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(124,58,237,.2)}

  .guide-page .card h3 {font-family:var(--serif);font-size:18px;font-weight:900;color:var(--ink);margin-bottom:10px}

  .guide-page .card p,
.guide-page .card li {font-size:14px;color:var(--ink-2);line-height:1.85}

  .guide-page .card ul {padding-left:18px}

  .guide-page .card li b,
.guide-page .card p b {color:var(--violet)}

  .guide-page .card .ic {width:44px;height:44px;border-radius:12px;background:var(--violet-soft);color:var(--violet);display:flex;align-items:center;justify-content:center;margin-bottom:14px}

  .guide-page .card .ic svg {width:21px;height:21px}


  
  .guide-page .path-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}

  .guide-page .path-card {background:#fff;border:2px solid var(--ink);border-radius:20px;padding:30px;transition:.3s;position:relative;overflow:hidden}

  .guide-page .path-card:hover {transform:translate(-3px,-3px);box-shadow:6px 6px 0 rgba(124,58,237,.3)}

  .guide-page .path-tag {
    position:absolute;top:0;right:0;background:var(--ink);color:#fff;
    font-family:"Inter",sans-serif;font-weight:800;font-size:13px;padding:6px 16px;border-bottom-left-radius:14px;letter-spacing:1px;
  }

  .guide-page .path-card.p2 .path-tag {background:var(--violet)}

  .guide-page .path-card h3 {font-family:var(--serif);font-size:21px;font-weight:900;color:var(--ink);margin-bottom:10px;margin-top:6px}

  .guide-page .path-card p {color:var(--ink-2);font-size:14px;line-height:1.85;max-width:90%}

  .guide-page .path-icon {width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}

  .guide-page .path-card.p1 .path-icon {background:var(--violet-soft);color:var(--violet)}

  .guide-page .path-card.p2 .path-icon {background:#fdf0f8;color:var(--pink,#ec4899)}

  .guide-page .path-icon svg {width:22px;height:22px}

  .guide-page .path-note {
    display:flex;gap:10px;align-items:center;font-size:14px;color:var(--violet-deep);
    background:var(--violet-soft);border-radius:12px;padding:14px 20px;font-weight:500;margin-bottom:44px;
  }

  .guide-page .path-note svg {width:17px;height:17px;flex:none;color:var(--violet)}


  
  .guide-page .steps-timeline {position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

  .guide-page .steps-timeline::before {
    content:"";position:absolute;top:26px;left:9%;right:9%;height:0;
    border-top:2px dashed var(--line-strong);
  }

  .guide-page .step {position:relative;text-align:center}

  .guide-page .step-dot {
    width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
    background:#fff;border:2px solid var(--ink);color:var(--ink);
    font-family:"Inter",sans-serif;font-size:18px;font-weight:800;
    display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
    box-shadow:3px 3px 0 rgba(124,58,237,.25);
  }

  .guide-page .step:hover .step-dot {background:var(--violet);border-color:var(--violet);color:#fff}

  .guide-page .step h3 {font-family:var(--serif);font-size:16px;font-weight:900;color:var(--ink);margin-bottom:6px}

  .guide-page .step p {font-size:12.5px;color:var(--ink-3);line-height:1.7;max-width:180px;margin:0 auto}

  @media (max-width:1024px){
.guide-page .steps-timeline {grid-template-columns:repeat(3,1fr)}

    .guide-page .steps-timeline::before {display:none}

}

  @media (max-width:640px){
.guide-page .steps-timeline {grid-template-columns:1fr 1fr}

}

  .guide-page .qr-row {display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:44px}

  .guide-page .qr-card {
    background:#fff;border:2px solid var(--ink);border-radius:18px;padding:20px 24px;text-align:center;
    transition:.3s;box-shadow:5px 5px 0 rgba(124,58,237,.18);
  }

  .guide-page .qr-card:hover {transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(124,58,237,.24)}

  .guide-page .qr-card img {width:140px;height:140px;object-fit:contain;border-radius:10px;margin-bottom:10px;background:#fff}

  .guide-page .qr-card b {font-family:var(--serif);display:block;font-size:14.5px;color:var(--ink)}

  .guide-page .qr-card small {font-size:11.5px;color:var(--ink-3)}


  
  .guide-page .warn-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}

  .guide-page .warn {background:#fff;border-radius:var(--radius);padding:30px;border:2px solid;position:relative}

  .guide-page .warn::before {content:"";position:absolute;left:-2px;top:22px;bottom:22px;width:5px;border-radius:3px}

  .guide-page .warn .w-head {display:flex;align-items:center;gap:12px;margin-bottom:12px}

  .guide-page .warn .w-ic {width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}

  .guide-page .warn .w-ic svg {width:21px;height:21px}

  .guide-page .warn h3 {font-family:var(--serif);font-size:18px;font-weight:900}

  .guide-page .warn p,
.guide-page .warn li {font-size:14px;line-height:1.9;color:var(--ink-2)}

  .guide-page .warn ul {padding-left:18px;margin-top:4px}

  .guide-page .warn-red {border-color:#f3c1c1;background:linear-gradient(180deg,#fff 60%,#fef5f5)}

  .guide-page .warn-red::before {background:#dc2626}

  .guide-page .warn-red .w-ic {background:#fee2e2;color:#dc2626}

  .guide-page .warn-red h3 {color:#b91c1c}

  .guide-page .warn-amber {border-color:#f3ddb3;background:linear-gradient(180deg,#fff 60%,#fffaf0)}

  .guide-page .warn-amber::before {background:#d97706}

  .guide-page .warn-amber .w-ic {background:#fef3c7;color:#d97706}

  .guide-page .warn-amber h3 {color:#b45309}

  .guide-page .time-limit {
    border-radius:22px;padding:34px 38px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
    background:linear-gradient(120deg,#7f1d1d,#b91c1c 60%,#dc2626);
    box-shadow:8px 8px 0 rgba(220,38,38,.22);position:relative;overflow:hidden;
  }

  .guide-page .time-limit::after {
    content:"45′";position:absolute;right:-14px;bottom:-40px;
    font-family:"Inter",sans-serif;font-size:150px;font-weight:800;color:rgba(255,255,255,.07);letter-spacing:-6px;
  }

  .guide-page .time-limit .tl-ic {width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.4)}

  .guide-page .time-limit .tl-ic svg {width:28px;height:28px;color:#fff}

  .guide-page .time-limit h3 {font-family:var(--serif);font-size:20px;font-weight:900;margin-bottom:8px;color:#fff;letter-spacing:1px}

  .guide-page .time-limit p {font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.9;position:relative;z-index:1}

  .guide-page .grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:22px}

  .guide-page .grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}


  
  .guide-page .tbl-wrap {background:#fff;border:2px solid var(--ink);border-radius:20px;overflow-x:auto;box-shadow:6px 6px 0 rgba(124,58,237,.16)}

  .guide-page .tbl-wrap + .tbl-wrap {margin-top:26px}

  .guide-page table {width:100%;border-collapse:collapse;min-width:620px}

  .guide-page th,
.guide-page td {padding:17px 24px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:top}

  .guide-page thead th {font-family:var(--serif);color:var(--violet-deep);font-weight:900;font-size:15px;white-space:nowrap;background:var(--violet-soft)}

  .guide-page tbody tr:last-child td {border-bottom:none}

  .guide-page tbody tr {transition:background .2s}

  .guide-page tbody tr:hover {background:#faf7ff}

  .guide-page td b {font-family:var(--serif);color:var(--ink);font-weight:900}

  .guide-page td {color:var(--ink-2)}

  .guide-page .tbl-note {
    margin-top:18px;font-size:13.5px;color:var(--violet-deep);font-weight:500;
    background:#fff;border:1.5px dashed var(--violet);border-radius:12px;padding:14px 20px;
  }


  
  .guide-page .guide-line {position:relative;padding-left:34px}

  .guide-page .guide-line::before {content:"";position:absolute;left:9px;top:12px;bottom:12px;border-left:2px dashed var(--line-strong)}

  .guide-page .guide-step {position:relative;margin-bottom:26px}

  .guide-page .guide-step::before {
    content:"";position:absolute;left:-33px;top:22px;width:16px;height:16px;border-radius:50%;
    background:#fff;border:3px solid var(--violet);box-shadow:0 0 0 4px var(--violet-soft);
  }

  .guide-page .gs-head {display:flex;align-items:baseline;gap:12px;margin-bottom:12px}

  .guide-page .gs-no {font-family:"Inter",sans-serif;font-weight:800;color:var(--violet);font-size:15px;letter-spacing:.5px}

  .guide-page .gs-head h3 {font-family:var(--serif);font-size:21px;font-weight:900;color:var(--ink)}

  .guide-page .gs-body {background:#fff;border:2px solid var(--line-strong);border-radius:var(--radius);padding:26px 28px;transition:.3s}

  .guide-page .gs-body:hover {border-color:var(--ink);box-shadow:5px 5px 0 rgba(124,58,237,.18)}

  .guide-page .gs-body ul {padding-left:18px}

  .guide-page .gs-body li {font-size:14px;color:var(--ink-2);margin-bottom:7px;line-height:1.85}

  .guide-page .gs-body li b {color:var(--violet)}

  .guide-page .feat-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}

  .guide-page .feat-grid .card {padding:20px 22px}

  .guide-page .feat-grid .card h3 {font-size:16px}

  .guide-page .warn-blue {background:linear-gradient(180deg,#fff 60%,#f3f8ff);border:2px solid #bcd7fb}

  .guide-page .warn-blue::before {background:#2563eb}

  .guide-page .warn-blue .w-ic {background:#dbeafe;color:#2563eb}

  .guide-page .warn-blue h3 {color:#1d4ed8}

  .guide-page .warn-blue.w-card {border-radius:var(--radius);padding:26px 30px;position:relative}

  .guide-page .warn-blue.w-card::before {content:"";position:absolute;left:-2px;top:20px;bottom:20px;width:5px;border-radius:3px;background:#2563eb}

  .guide-page .warn-blue.w-card .w-head {display:flex;align-items:center;gap:12px;margin-bottom:10px}

  .guide-page .warn-blue.w-card .w-ic {width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}

  .guide-page .warn-blue.w-card .w-ic svg {width:20px;height:20px}

  .guide-page .warn-blue.w-card p {font-size:14px;line-height:1.85;color:var(--ink-2)}


  
  .guide-page .img-group-label {
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:700;color:var(--violet-deep);
    margin:24px 0 14px;letter-spacing:.5px;
  }

  .guide-page .img-group-label::before {content:"";width:5px;height:16px;border-radius:3px;background:var(--grad)}

  .guide-page .img-group-label small {font-weight:500;color:var(--ink-3)}


  
  .guide-page .carousel {position:relative;padding:6px 2px}

  .guide-page .car-viewport {overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;border-radius:16px}

  .guide-page .car-viewport::-webkit-scrollbar {display:none}

  .guide-page .car-track {display:flex}

  .guide-page .car-slide {flex:0 0 100%;scroll-snap-align:start;padding:4px}

  .guide-page .per-2 .car-slide {flex-basis:50%}

  .guide-page .per-3 .car-slide {flex-basis:33.3333%}

  .guide-page .per-4 .car-slide {flex-basis:25%}

  .guide-page .shot-frame {
    height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:#fff;border:2px solid var(--line-strong);border-radius:16px;transition:.3s;
  }

  .guide-page .shot-frame:hover {border-color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 28px rgba(124,58,237,.18)}

  .guide-page .shot-frame img {max-width:calc(100% - 16px);max-height:calc(100% - 12px);object-fit:contain}

  .guide-page .shot-frame.portrait img {max-height:100%;max-width:100%;object-fit:cover}

  .guide-page .shot-label {padding:9px 6px 3px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.5}

  .guide-page .car-btn {
    position:absolute;top:calc(50% - 22px);transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;background:#fff;z-index:3;
    border:2px solid var(--ink);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:3px 3px 0 rgba(124,58,237,.3);transition:.2s;
  }

  .guide-page .car-btn svg {width:17px;height:17px}

  .guide-page .car-btn:hover {background:var(--violet);border-color:var(--violet);color:#fff}

  .guide-page .car-btn:disabled {opacity:.3;cursor:default;box-shadow:none}

  .guide-page .car-btn:disabled:hover {background:#fff;border-color:var(--ink);color:var(--ink)}

  .guide-page .car-prev {left:-16px}

  .guide-page .car-next {right:-16px}

  .guide-page .car-dots {display:flex;justify-content:center;gap:8px;margin-top:14px}

  .guide-page .car-dot {width:9px;height:9px;border-radius:999px;border:none;background:var(--line-strong);cursor:pointer;transition:.25s;padding:0}

  .guide-page .car-dot.active {width:26px;background:var(--violet)}

  @media (max-width:900px){
.guide-page .per-3 .car-slide {flex-basis:50%}

    .guide-page .per-4 .car-slide {flex-basis:50%}

}

  @media (max-width:640px){
.guide-page .per-2 .car-slide,
.guide-page .per-3 .car-slide,
.guide-page .per-4 .car-slide {flex-basis:100%}

    .guide-page .car-btn {display:none}

}


  
  .guide-page .figure-band {border-radius:20px;overflow:hidden;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(124,58,237,.18);background:#fff}

  .guide-page .figure-band img {width:100%;display:block}

  .guide-page .figure-band figcaption {
    padding:13px 22px;font-size:13px;color:var(--ink-3);border-top:2px solid var(--line);
    background:#fff;display:flex;align-items:center;gap:10px;
  }

  .guide-page .figure-band figcaption::before {content:"";width:5px;height:15px;border-radius:3px;background:var(--grad)}


  
  .guide-page .see-wrap {display:grid;grid-template-columns:1fr 1.35fr;gap:22px;margin-top:26px}

  .guide-page .tips {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}

  .guide-page .tip {background:#fff;border:2px solid var(--line-strong);border-radius:16px;padding:20px;transition:.3s}

  .guide-page .tip:hover {border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(124,58,237,.2)}

  .guide-page .tip-no {
    font-family:"Inter",sans-serif;font-size:11px;font-weight:800;color:var(--violet);
    background:var(--violet-soft);display:inline-block;border-radius:999px;
    padding:3px 12px;margin-bottom:10px;letter-spacing:2px;
  }

  .guide-page .tip h3 {font-family:var(--serif);font-size:15.5px;font-weight:900;color:var(--ink);margin-bottom:7px}

  .guide-page .tip p {font-size:12.5px;color:var(--ink-2);line-height:1.8}

  @media (max-width:1024px){
.guide-page .see-wrap {grid-template-columns:1fr}

    .guide-page .tips {grid-template-columns:1fr}

}


  
  .guide-page .dim-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

  .guide-page .dim {background:#fff;border:2px solid var(--line-strong);border-radius:var(--radius);padding:26px;position:relative;overflow:hidden;transition:.3s}

  .guide-page .dim:hover {border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(124,58,237,.2)}

  .guide-page .dim-head {display:flex;align-items:center;gap:13px;margin-bottom:12px}

  .guide-page .dim-badge {width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}

  .guide-page .dim-badge svg {width:23px;height:23px}

  .guide-page .dim:nth-child(1) .dim-badge {background:linear-gradient(135deg,#818cf8,#7c3aed)}

  .guide-page .dim:nth-child(2) .dim-badge {background:linear-gradient(135deg,#60a5fa,#818cf8)}

  .guide-page .dim:nth-child(3) .dim-badge {background:linear-gradient(135deg,#fbbf24,#f472b6)}

  .guide-page .dim:nth-child(4) .dim-badge {background:linear-gradient(135deg,#f472b6,#c084fc)}

  .guide-page .dim:nth-child(5) .dim-badge {background:linear-gradient(135deg,#34d399,#60a5fa)}

  .guide-page .dim:nth-child(6) .dim-badge {background:linear-gradient(135deg,#c084fc,#7c3aed)}

  .guide-page .dim h3 {font-family:var(--serif);font-size:19px;font-weight:900;color:var(--ink)}

  .guide-page .dim .dim-goal {font-size:13.5px;color:var(--ink-2);margin-bottom:12px;line-height:1.8;min-height:72px}

  .guide-page .dim .dim-scene {
    font-size:12.5px;color:var(--violet-deep);background:var(--violet-soft);
    border-radius:10px;padding:10px 14px;line-height:1.7;font-weight:500;
  }

  .guide-page .dim .dim-scene b {font-weight:700}

  .guide-page .line-note {margin-top:30px;display:flex;gap:16px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);background:#fff;border:2px solid var(--ink);border-radius:16px;padding:22px 26px;box-shadow:5px 5px 0 rgba(124,58,237,.16)}

  .guide-page .line-note svg {width:22px;height:22px;color:var(--violet);flex:none;margin-top:2px}

  .guide-page .line-note b {color:var(--violet-deep)}

  @media (max-width:1024px){
.guide-page .dim-grid {grid-template-columns:1fr 1fr}

}

  @media (max-width:640px){
.guide-page .dim-grid {grid-template-columns:1fr}

}


  
  .guide-page .device-grid {display:grid;grid-template-columns:1.08fr .92fr;gap:36px;align-items:start}

  .guide-page .device-side {position:sticky;top:70px}

  .guide-page .device-side .hero-frame::before {transform:translate(12px,12px)}

  .guide-page .device-side .img-main img {aspect-ratio:4/5}

  .guide-page .device-side .sticker {position:absolute;top:-12px;right:14px;z-index:2;transform:rotate(3deg)}

  .guide-page .device-grid .card {margin-bottom:18px}

  .guide-page .device-grid .card:last-child {margin-bottom:0}

  @media (max-width:1024px){
.guide-page .device-grid {grid-template-columns:1fr}

    .guide-page .device-side {position:static;max-width:420px;margin:10px auto 0}

}


  
  .guide-page .faq-wrap {max-width:860px}

  .guide-page .faq-group {margin-bottom:34px}

  .guide-page .faq-group h3 {display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:18px;font-weight:900;margin-bottom:16px;color:var(--ink)}

  .guide-page .fg-badge {
    font-family:"Inter",sans-serif;font-size:12px;font-weight:800;color:#fff;
    background:var(--ink);border-radius:8px;padding:3px 11px;letter-spacing:1px;
  }

  .guide-page .faq-item {background:#fff;border:2px solid var(--line-strong);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:.3s}

  .guide-page .faq-item.open {border-color:var(--ink);box-shadow:4px 4px 0 rgba(124,58,237,.18)}

  .guide-page .faq-q {
    display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;cursor:pointer;
    padding:16px 20px;text-align:left;font-size:15px;font-weight:700;color:var(--ink);font-family:var(--sans);
  }

  .guide-page .faq-q .q-label {
    font-family:"Inter",sans-serif;font-size:11.5px;font-weight:800;color:var(--violet);
    border:1.5px solid var(--violet);border-radius:7px;padding:2px 8px;flex:none;background:#fff;
  }

  .guide-page .faq-q .chev {margin-left:auto;flex:none;transition:transform .35s;color:var(--violet)}

  .guide-page .faq-q .chev svg {width:19px;height:19px;display:block}

  .guide-page .faq-item.open .chev {transform:rotate(180deg)}

  .guide-page .faq-a {max-height:0;overflow:hidden;transition:max-height .4s ease}

  .guide-page .faq-a-inner {padding:0 20px 18px 54px;font-size:14px;color:var(--ink-2);line-height:1.9}


  
  .guide-page .contact-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

  .guide-page .cta-band {
    margin-top:44px;border-radius:26px;overflow:hidden;position:relative;
    border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(124,58,237,.24);
  }

  .guide-page .cta-band .cta-bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  .guide-page .cta-band::before {
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(115deg,rgba(59,7,141,.93) 20%,rgba(124,58,237,.78) 65%,rgba(168,85,247,.55));
  }

  .guide-page .cta-inner {position:relative;z-index:2;padding:64px 56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}

  .guide-page .cta-inner h3 {font-family:var(--serif);font-size:36px;font-weight:900;color:#fff;line-height:1.4;letter-spacing:2px;margin-bottom:10px}

  .guide-page .cta-inner p {color:rgba(255,255,255,.85);font-size:14.5px;max-width:440px}

  .guide-page .cta-actions {display:flex;gap:14px;flex-wrap:wrap}

  .guide-page .cta-inner .btn-primary {background:#fff;color:var(--violet-deep);box-shadow:4px 4px 0 rgba(0,0,0,.18)}

  .guide-page .cta-inner .btn-ghost {background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}

  .guide-page .cta-inner .btn-ghost:hover {background:rgba(255,255,255,.12)}

  @media (max-width:768px){
.guide-page .cta-inner {padding:44px 28px}

    .guide-page .cta-inner h3 {font-size:26px}

    .guide-page .contact-grid {grid-template-columns:1fr}

}


  
  .guide-page .footer {border-top:4px solid var(--ink);background:#fff;padding:60px 0 34px;margin-top:90px}

  .guide-page .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:40px}

  .guide-page .footer .f-brand {display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:900;font-size:20px;color:var(--ink);margin-bottom:14px}

  .guide-page .footer .f-brand .logo {width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}

  .guide-page .footer .f-brand .logo svg {width:19px;height:19px}

  .guide-page .footer p {font-size:13.5px;line-height:1.9;color:var(--ink-3)}

  .guide-page .footer h4 {font-family:var(--serif);color:var(--ink);font-size:15.5px;font-weight:900;margin-bottom:16px}

  .guide-page .footer ul {list-style:none}

  .guide-page .footer li {margin-bottom:9px}

  .guide-page .footer li a {font-size:13.5px;color:var(--ink-3);transition:.2s;display:inline-flex;align-items:center;gap:8px}

  .guide-page .footer li a::before {content:"—";color:var(--violet);opacity:.5}

  .guide-page .footer li a:hover {color:var(--violet)}

  .guide-page .footer-bottom {border-top:2px dashed var(--line-strong);padding-top:22px;text-align:center;font-size:12.5px;color:var(--ink-3)}

  .guide-page .footer-bottom b {color:var(--violet)}

  @media (max-width:768px){
.guide-page .footer-grid {grid-template-columns:1fr;gap:30px}

}

/* ===== WordPress 整合 ===== */
.guide-page > footer.footer,
.guide-page footer.footer { display:none !important; }
.guide-page .progress-bar { z-index: 99 !important; }
.guide-page .float-nav    { z-index: 95 !important; }
.guide-page .dot-grid    { z-index: -1 !important; }

/* ===== Hero · 浅色化（apple-style bright） ===== */
.guide-page .hero {
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 60%, #f5f0ff 100%) !important;
  position: relative;
}
.guide-page .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1200px 360px at 20% -10%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(900px 300px at 90% 10%, rgba(124,58,237,.08), transparent 55%);
  z-index: 0;
}
.guide-page .hero > * { position: relative; z-index: 1; }
.guide-page .hero-frame::before {
  background: #f7f3ff !important;
  border-color: #eae2fc !important;
  transform: translate(12px, 12px) !important;
}
.guide-page .hero-tag {
  background: #ffffff !important;
  border-color: #c4b5fd !important;
  color: #5b21b6 !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,.05), 4px 4px 0 rgba(124,58,237,.10);
}
.guide-page .hero-tag .dot {
  background: linear-gradient(120deg,#7c3aed,#a855f7) !important;
}
.guide-page .hero-sticker-1,
.guide-page .hero-sticker-2 {
  box-shadow: 2px 2px 0 rgba(124,58,237,.20) !important;
}
.guide-page .hero-sticker-1 {
  background: #ffffff !important;
  color: #4c1d95 !important;
  border: 1px solid #ddd6fe !important;
}
.guide-page .img-main {
  background: #ffffff !important;
  border-color: #c4b5fd !important;
  box-shadow: 6px 6px 0 rgba(124,58,237,.14) !important;
}

/* ===== 用户 5 项布局修复（2026-08-31） ===== */

/* 用户 2026-08-31 最新需求：把 hero 上下 padding 恢复为 96px / 64px（与设计稿一致） */
.guide-page .hero {
  display: block !important;
  min-height: auto !important;
  height: auto !important;
  padding: 96px 0 64px !important;   /* 用户指定 96px 0 64px */
  align-items: normal !important;
  justify-content: normal !important;
}
@media (max-width: 768px) {
  .guide-page .hero { padding: 64px 0 48px !important; }
}
/* 还原 H1 设计稿字号 + 用户最新：第一行（先练大脑的底层能力，）保证不被强制折断
 * 做法：给每行 span 设 display:block + white-space:nowrap，同时按断点略缩字号，
 *       保证在 1440/1920/1024 等常用分辨率下第一行不折且不溢出 hero-copy 容器。 */
.guide-page .hero h1 {
  font-size: 54px !important;        /* 原设计 58 → 缩 4px 防第 1 行 13 字被窄 hero-copy 换行 */
  margin-bottom: 22px !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}
.guide-page .hero h1 .h1-line1,
.guide-page .hero h1 .h1-line2 {
  display: block !important;
  white-space: nowrap !important;   /* 核心：每行都不被浏览器自动换行（用户明确要求第一行不折） */
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.guide-page .hero h1 .h1-line2 { margin-top: 2px; }

@media (max-width: 1024px) {
  .guide-page .hero h1 { font-size: 42px !important; }   /* 原 46 → 42，笔记本宽度也保证 line1 不折 */
}
@media (max-width: 768px) {
  .guide-page .hero h1 { font-size: 30px !important; }   /* 手机屏 30px 不折（并允许 hero-grid 单列时 line1 如果真的溢出 hero-copy 容器，会在更窄的 520 再处理） */
  /* 手机极窄屏兜底：≤520 才允许自动换行，不溢出屏幕出现横向滚 */
}
@media (max-width: 520px) {
  .guide-page .hero h1 .h1-line1,
  .guide-page .hero h1 .h1-line2 {
    white-space: normal !important;
    word-break: break-all !important;
  }
}
/* hero-copy 容器在 1440（lg 桌面）下也不挤到第一行换行：略缩 hero-grid 左侧比例让 copy 更宽 */
.guide-page .hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr !important;   /* 原 1.08 / 0.92 → 左 copy 加宽，图略缩（但图本身 max 100% 会被 visual max-width 600 限住不放大） */
  gap: 44px !important;
  align-items: center !important;
}
@media (max-width: 1024px) {
  .guide-page .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .guide-page .hero-visual { max-width: 480px !important; margin: 0 auto; }
}
.guide-page .hero-visual { max-width: 100% !important; }
/* Hero 各间距 & 阴影深度按设计稿 */
.guide-page .hero-tag    { margin-bottom: 26px !important; }
.guide-page .hero-sub    { margin-bottom: 14px !important; }
.guide-page .hero-meta   { margin-top: 24px !important; }
.guide-page .hero-actions{ margin-top: 32px !important; }
.guide-page .hero-cap    { margin-top: 34px !important; }
.guide-page .hero-frame::before { transform: translate(16px, 16px) !important; }

/* 2) .qr-card 中间图片 + 外部卡片整体在 qr-row 中居中 */
.guide-page .qr-row {
  justify-content: center !important;
  align-items: stretch !important;
}
.guide-page .qr-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
.guide-page .qr-card img {
  display: block !important;
  margin: 0 auto 10px auto !important; /* 上下 0 / 左右自动 = 横向居中 */
  flex: none !important;
}
.guide-page .qr-card b,
.guide-page .qr-card small {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) 所有 .tbl-wrap 表格贴合外部容器（消除右侧空白）
 * 根因：table-layout:auto 按内容给行宽，虽然 table clientWidth=1080，但 tr/th 实际宽
 *      只有 579 / 753，thead 背景色只到 tr 右边界导致用户观感"右侧空白"
 * 修复：table-layout:fixed + thead tr width:100% + 首列定宽 180 / 其余列 1fr 撑满
 *      这样每个 tr 的宽度 == 1080 == wrap，每一列都均匀分配到右边 */
.guide-page .tbl-wrap {
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.guide-page .tbl-wrap table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;   /* 强制按列宽分配，而不是按内容 */
  border-collapse: collapse !important;
  box-sizing: border-box !important;
}
/* 强制每一行（thead/tbody/tr）的宽度 === 表格宽度（1080），不让它按内容 579 就停 */
.guide-page .tbl-wrap table thead,
.guide-page .tbl-wrap table tbody,
.guide-page .tbl-wrap table tr {
  width: 100% !important;
  display: table;            /* 回到原生 table-row 排版（某些插件会把 tr 改成 block/flex） */
  table-layout: fixed;
}
.guide-page .tbl-wrap table thead tr,
.guide-page .tbl-wrap table tbody tr {
  width: 100% !important;
}
/* thead 背景色要覆盖整行 → 让它的宽度 == table 宽度（视觉上"紫色头"到最右） */
.guide-page .tbl-wrap table thead {
  width: 100% !important;
  background: inherit;
}
.guide-page .tbl-wrap th,
.guide-page .tbl-wrap td {
  box-sizing: border-box !important;
  display: table-cell !important;
}
/* 列宽分配：
 *   2 列表（训练处方 / 读懂报告）→ 180px + 1fr 占满剩余
 *   3 列表（阶段/时间/观察）→ 140px + 180px + 1fr 占满剩余
 */
.guide-page .tbl-wrap table colgroup col:first-child,
.guide-page .tbl-wrap table thead th:first-child,
.guide-page .tbl-wrap table tbody td:first-child {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}
/* 3 列模式的第 2 列：定宽 */
.guide-page .tbl-wrap table.cols-3 thead th:nth-child(2),
.guide-page .tbl-wrap table.cols-3 tbody td:nth-child(2) {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}
/* 最后一列：吃满剩余宽度，消除右侧空白 */
.guide-page .tbl-wrap table thead th:last-child,
.guide-page .tbl-wrap table tbody td:last-child {
  width: 1% !important;   /* table-layout:fixed 下 "1%" 结合下面 calc = 占满剩余 */
  width: -webkit-fill-available !important;
}
/* 使用相邻兄弟精确分配列宽：
 *   2 列：col1=180px / col2=calc(100% - 180px)
 *   3 列：col1=180 / col2=180 / col3=100% - 360px
 * 用更精确的 CSS 实现：为 thead 每个 th 定百分比 → 等价 */
.guide-page .tbl-wrap table thead th[style],
.guide-page .tbl-wrap table thead th {
  /* 清空任何内联 style="width:170px" 让上面统一分配生效 */
  width: auto !important;
}
.guide-page .tbl-wrap table thead th:first-child { width: 180px !important; }
.guide-page .tbl-wrap table thead th:last-child  { width: auto !important; }
/* 两列：thead th 一共 2 个 → 第二个占满 */
.guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(2) ~ th,
.guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(2) ~ td {
  width: calc(100% - 180px) !important;
}
/* 三列：th 一共 3 个 → #2 180，#3 占满剩余 */
.guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(3) + th,
.guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(3) + td {
  width: 180px !important;
}
.guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(3) + th + th,
.guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(3) + td + td {
  width: calc(100% - 360px) !important;
}
/* 兜底：表格里 <style> 或 th 自带 inline width 的全部被上面覆盖；
 * 再给 thead 整块加紫色，保证即便 tr 真的小，背景色也延伸到容器右 */
.guide-page .tbl-wrap table thead {
  background-color: #f3edff !important;
  background-image: none !important;
}
/* 用户截图显示"第 2 列建议标准 的 th 右边还空着"，
 * 用下面的直接规则锁定：thead 内 th + 背景色 到容器边缘（不是 tr 边缘） */
.guide-page .tbl-wrap table thead::after {
  /* 不新增盒，仅确保 thead 实际层宽 == table */
  content:'';
  display:block;
  height:0;
  clear:both;
}
.guide-page .tbl-wrap { overflow: hidden; }
.guide-page .tbl-wrap table {
  display: table; /* 防止 display:block 等插件改型导致宽度由内容决定 */
}

/* 手机端（≤640px）表格：左右滑动查看，不强制长文字换行
 * 策略：
 *   - .tbl-wrap 取消固定宽的 overflow:hidden，改为 overflow-x:auto + 可横向滚动
 *   - table 回到 table-layout:auto，并给每个 th/td 设 min-width 与 white-space:nowrap，
 *     让浏览器按内容定列宽；整体 table 自然宽度 > 容器宽度 → 出现横向滚动条（用户要求）
 *   - 取消桌面端 calc(100% - Xpx) 的列宽硬分配（在手机端会把最后一列锁得很窄，进而强制长文字换行）
 */
@media (max-width: 640px) {
  .guide-page .tbl-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    width: 100% !important;
    border-radius: 16px !important;
  }
  .guide-page .tbl-wrap table {
    width: max-content !important;        /* 按所有列的自然宽度之和来显示表格，不要被父容器（手机窄）挤压 */
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  /* 单元格：不做换行（表头+数据全部单行，用户横向滑动阅读完整文字） */
  .guide-page .tbl-wrap th,
  .guide-page .tbl-wrap td {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    display: table-cell !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  /* 为了可读性：第 1 列（项目/阶段/报告类型）至少 110px；其余列交给 auto+nowrap 决定 */
  .guide-page .tbl-wrap table thead th:first-child,
  .guide-page .tbl-wrap table tbody td:first-child {
    min-width: 110px !important;
    max-width: none !important;
    width: auto !important;
  }
  /* 撤销桌面端为“填满容器”写的各种 calc/nth-child 定宽（它们手机端会把长内容挤到换行） */
  .guide-page .tbl-wrap table thead th:last-child,
  .guide-page .tbl-wrap table tbody td:last-child,
  .guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(2) ~ th,
  .guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(2) ~ td,
  .guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(3) + th,
  .guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(3) + td,
  .guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(3) + th + th,
  .guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(3) + td + td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* 行/表头：宽度不再强制 100%，按 max-content 自然宽（横向滑动容器） */
  .guide-page .tbl-wrap table thead,
  .guide-page .tbl-wrap table tbody,
  .guide-page .tbl-wrap table tr,
  .guide-page .tbl-wrap table thead tr,
  .guide-page .tbl-wrap table tbody tr {
    width: auto !important;
    display: table-row-group !important; /* thead/tbody 回到 UA 默认 */
    table-layout: auto;
  }
  .guide-page .tbl-wrap table tr { display: table-row !important; }
  /* thead 紫色背景：按 max-content 的 table 宽，不再跟 wrap=100% 对齐 */
  .guide-page .tbl-wrap table thead {
    background-color: #f3edff !important;
  }
  /* 取消 thead::after 清浮动占位，保证横向滚动时 table 真正可向右滚完 */
  .guide-page .tbl-wrap table thead::after {
    display: none !important;
    content: none !important;
  }
  /* 手机表格首屏给一个轻微提示：底部淡色滚动条（浏览器默认会画） */
  .guide-page .tbl-wrap { scrollbar-width: thin; }
}

/* 4) 小程序特色模块（feat-grid）4 张 card：标题前加彩色图标 badge */
.guide-page .feat-grid .card {
  display: flex !important;
  flex-direction: row !important;   /* 左：图标，右：标题+描述 */
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 22px 20px !important;
  text-align: left !important;
}
.guide-page .feat-grid .card .feat-icon {
  flex: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--violet-soft, #f3edff);
  color: var(--violet, #7c3aed);
  border: 1.5px solid var(--line-strong, #d5c6f7);
  box-shadow: 2px 2px 0 rgba(124,58,237,.14);
}
.guide-page .feat-grid .card .feat-icon svg {
  width: 22px; height: 22px; stroke-width: 2;
}
.guide-page .feat-grid .card .feat-icon.ic-trainer { background:#ede9fe; color:#6d28d9; border-color:#c4b5fd; }
.guide-page .feat-grid .card .feat-icon.ic-mic     { background:#fef3c7; color:#b45309; border-color:#f5d78f; }
.guide-page .feat-grid .card .feat-icon.ic-pulse   { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.guide-page .feat-grid .card .feat-icon.ic-family  { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.guide-page .feat-grid .card .feat-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.guide-page .feat-grid .card .feat-body h3 {
  margin: 0 0 6px 0 !important;
  font-family: var(--serif);
  font-size: 16px !important;
  color: var(--ink);
}
.guide-page .feat-grid .card .feat-body p {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: var(--ink-2);
  line-height: 1.75;
}
/* ===== 手机端适配（用户截图 3 块优化）
 * ① 截图1（warn-grid 红/琥珀 2 卡）、② 截图2（grid-2 蓝 warn 2 卡）→ 手机端改为 1 列上下排列
 * ③ 截图3（feat-grid 4 卡 2×2）→ 每张 card 里图标与描述改为水平同行（左图标 40×40，右侧 feat-body 标题+描述占满左边空白）
 * ④ 全局通用：卡内间距/字号同步缩小，手机边缘少留空
 * ===================================================================== */
@media (max-width: 640px) {

  /* --- 截图1：.warn-grid（光敏性癫痫警示 + 不适用人群）上下排列 --- */
  .guide-page .warn-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
  }
  .guide-page .warn {
    padding: 20px 18px !important;
  }
  .guide-page .warn::before {
    top: 16px !important;
    bottom: 16px !important;
  }
  .guide-page .warn .w-head {
    gap: 10px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
  }
  .guide-page .warn .w-ic {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .guide-page .warn .w-ic svg {
    width: 18px !important;
    height: 18px !important;
  }
  .guide-page .warn h3 {
    font-size: 16px !important;
  }
  .guide-page .warn p,
  .guide-page .warn li {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
  }

  /* --- 截图2：.grid-2（含 warn-blue 不适应处理 / 再次提醒）上下排列 --- */
  .guide-page .grid-2,
  .guide-page .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .guide-page .warn-blue.w-card {
    padding: 18px 18px 20px !important;
  }
  .guide-page .warn-blue.w-card::before {
    top: 14px !important;
    bottom: 14px !important;
  }
  .guide-page .warn-blue.w-card .w-head {
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  .guide-page .warn-blue.w-card .w-ic {
    width: 36px !important;
    height: 36px !important;
  }
  .guide-page .warn-blue.w-card .w-ic svg {
    width: 18px !important;
    height: 18px !important;
  }
  .guide-page .warn-blue.w-card h3 {
    font-size: 15.5px !important;
  }
  .guide-page .warn-blue.w-card p {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
  }

  /* --- 截图3：feat-grid（小程序特色 4 卡）
   * 保留 2 列整体排版；每张卡片内部 图标 与 描述文字 改为水平同行，
   * 左侧 feat-icon 固定 40×40，右侧 feat-body 自动吃掉"图标右边的左侧空白"
   * 让描述文字真正贴到图标旁边，不再上方图标下方文字那样留下左半空白 --- */
  .guide-page .feat-grid {
    grid-template-columns: 1fr 1fr !important; /* 手机仍保持 2×2，用户只调卡内 */
    gap: 12px !important;
  }
  .guide-page .feat-grid .card {
    display: flex !important;
    flex-direction: row !important;   /* 关键：左图标右文字 */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 14px 12px !important;
    text-align: left !important;
  }
  .guide-page .feat-grid .card .feat-icon {
    flex: none !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    margin: 0 !important;        /* 防止原来的 margin-bottom 把图标撑开 */
  }
  .guide-page .feat-grid .card .feat-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
  .guide-page .feat-grid .card .feat-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .guide-page .feat-grid .card .feat-body h3 {
    font-size: 14px !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
  }
  .guide-page .feat-grid .card .feat-body p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    margin: 0 !important;
    color: var(--ink-2);
  }

  /* 所有卡片的圆角 & 边框强度在手机端略缩小留边 */
  .guide-page .card,
  .guide-page .warn,
  .guide-page .warn-blue.w-card,
  .guide-page .path-card {
    border-radius: 16px !important;
  }
}

/* =================================================================
 * 手机端表格（最终覆盖块：放在文件最后，用更高特异性覆盖桌面的 table-layout: fixed / calc 列宽）
 * 用户诉求：手机端表格采用左右滑动查看，不要强制长文字换行
 * ================================================================= */
@media (max-width: 640px) {
  /* 加倍特异性保证打赢桌面规则 */
  div.guide-page .tbl-wrap.tbl-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    width: 100% !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;     /* 避免阴影加宽度导致右溢出 */
  }
  div.guide-page .tbl-wrap > table {
    width: max-content !important;   /* 关键：table 宽 = 所有 th/td 单行的自然宽（可能 > wrap 390，触发横滚） */
    min-width: 0 !important;        /* 不兜底 100%（否则在 1080 wrap 上仍被压成 1080，没横滚） */
    max-width: none !important;     /* 不允许任何上限把 max-content 削掉 */
    table-layout: auto !important;
    border-collapse: collapse !important;
    box-sizing: content-box !important;
  }
  /* 去掉所有 th/td 的宽度锁 + 不折行 */
  div.guide-page .tbl-wrap th,
  div.guide-page .tbl-wrap td {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    display: table-cell !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    box-sizing: content-box !important;
  }
  /* 第一列略宽一点不挤 */
  div.guide-page .tbl-wrap table thead th:first-child,
  div.guide-page .tbl-wrap table tbody td:first-child {
    min-width: 110px !important;
  }
  /* 清空桌面端所有 nth-child 的 calc(100%-X) 锁宽 */
  div.guide-page .tbl-wrap table thead th:last-child,
  div.guide-page .tbl-wrap table tbody td:last-child,
  div.guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(2) ~ th,
  div.guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(2) ~ td,
  div.guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(3) + th,
  div.guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(3) + td,
  div.guide-page .tbl-wrap table thead tr th:first-child:nth-last-child(3) + th + th,
  div.guide-page .tbl-wrap table tbody  tr td:first-child:nth-last-child(3) + td + td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* thead/tbody/tr 回到 UA 默认，不要被桌面 display:table 污染导致宽 = wrap 100% */
  div.guide-page .tbl-wrap table thead,
  div.guide-page .tbl-wrap table tbody {
    display: table-row-group !important;
    width: auto !important;
  }
  div.guide-page .tbl-wrap table thead tr,
  div.guide-page .tbl-wrap table tbody tr,
  div.guide-page .tbl-wrap table tr {
    display: table-row !important;
    width: auto !important;
  }
  div.guide-page .tbl-wrap table thead::after { display: none !important; content: none !important; }
}

/* =================================================================
 * N3 缩小配图高度（用户："现在占据太大版面了"）
 * - Hero 主视觉 .img-main img: aspect-ratio 1/1 -> 4/5 改为 max-height 锁
 * - 安全须知 figure-band 超长图 modules-overview / report-compare: 限高+contain
 * - 设备 hero device-side img: aspect 4/5 太高 -> 限高
 * - 截图轮播 shot-frame 容器高度：300 -> 230（移动端仍 180）
 * - cta-band：限高避免一屏全是图
 * 保留图片可点击放大（lightbox）
 * ================================================================= */
.guide-page .hero .img-main img {
  aspect-ratio: 4 / 3 !important;
  max-height: 420px !important;
  object-fit: cover !important;
}
.guide-page .figure-band img {
  max-height: 520px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}
.guide-page .figure-band {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}
.guide-page .device-side .img-main img {
  aspect-ratio: auto !important;
  max-height: 460px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
.guide-page .shot-frame {
  height: 220px !important;
}
@media (max-width: 768px) {
  .guide-page .shot-frame { height: 200px !important; }
  .guide-page .hero .img-main img { max-height: 320px !important; aspect-ratio: 16 / 10 !important; }
  .guide-page .figure-band img { max-height: 320px !important; }
  .guide-page .device-side .img-main img { max-height: 340px !important; }
}
@media (max-width: 640px) {
  .guide-page .cta-band { max-height: 380px !important; }
  .guide-page .figure-band img { max-height: 260px !important; }
}
.guide-page .cta-band { max-height: 300px !important; min-height: 220px !important; }

/* =================================================================
 * N3 H1 两行间距从 67px -> ~24px（BR 的 line-height + span block 叠加导致过宽）
 * 策略：line-height 1.08 (基准 54→58.3) + h1-line1 负 margin-bottom
 * ================================================================= */
.guide-page .hero h1 { line-height: 1.08 !important; }
.guide-page .hero h1 .h1-line1 { margin-bottom: -32px !important; display: block !important; }
.guide-page .hero h1 .h1-line2 { margin-top: 0 !important; display: block !important; }
@media (max-width: 1024px) {
  .guide-page .hero h1 .h1-line1 { margin-bottom: -24px !important; }
}
@media (max-width: 768px) {
  .guide-page .hero h1 .h1-line1 { margin-bottom: -16px !important; }
}

/* =================================================================
 * N2 Lightbox：所有 .guide-page img 可点击查看大图
 * 基础样式，行为写在 main.js 中
 * ================================================================= */
.guide-page img { cursor: zoom-in; }
.guide-lightbox-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: none; align-items: center; justify-content: center;
  z-index: 99999; padding: 4vh 4vw; box-sizing: border-box;
  animation: guide-fade .18s ease-out;
}
.guide-lightbox-backdrop.guide-show { display: flex; }
.guide-lightbox-backdrop img {
  max-width: 100%; max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  object-fit: contain;
  background: #fff;
  cursor: zoom-out;
}
.guide-lightbox-close {
  position: absolute; top: 20px; right: 26px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 24px; line-height: 1;
  border: 2px solid #111;
  user-select: none;
}
@keyframes guide-fade { from { opacity: 0;} to { opacity: 1;} }

/* =================================================================
 * 图一 / 图二：figure-band-split 左右分栏 排版重排
 * 左 1.15fr 图像（cover 填满），右 0.85fr 文字说明（标题+描述+要点列表）
 * 桌面两栏；≤768 回退 1 栏上下堆叠
 * ================================================================= */
.guide-page .figure-band.figure-band-split {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}
.guide-page .figure-band-split .fb-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  background: #f6f3ff;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.guide-page .figure-band-split .fb-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
}
.guide-page .figure-band-split figcaption {
  padding: 26px 28px !important;
  border-top: none !important;
  border-left: 2px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  align-items: flex-start !important;
  background: linear-gradient(180deg, #fff 0%, #faf7ff 100%) !important;
}
.guide-page .figure-band-split figcaption::before { display: none !important; }
.guide-page .figure-band-split figcaption h4 {
  margin: 0 0 4px 0;
  font-family: "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.6px;
  line-height: 1.35;
}
.guide-page .figure-band-split figcaption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
}
.guide-page .figure-band-split figcaption ul {
  list-style: none;
  padding: 12px 0 0 0;
  margin: 8px 0 0 0;
  display: grid;
  gap: 9px;
  border-top: 1px dashed var(--line);
}
.guide-page .figure-band-split figcaption ul li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.guide-page .figure-band-split figcaption ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, #7c3aed, #c4a7ff);
}
@media (max-width: 960px) {
  .guide-page .figure-band.figure-band-split { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .guide-page .figure-band.figure-band-split { grid-template-columns: 1fr !important; }
  .guide-page .figure-band-split figcaption {
    border-left: none !important;
    border-top: 2px solid var(--line) !important;
    padding: 22px !important;
  }
  .guide-page .figure-band-split .fb-img-wrap { min-height: 280px !important; }
  .guide-page .figure-band-split .fb-img-wrap img { min-height: 280px !important; }
}

/* =================================================================
 * 图三：device-vr 配图铺满外部容器（img-main 不留下左右上内边距空白）
 * 策略：去掉 contain + max-width:420/max-height:460；改为 100% 宽高 + cover，
 *       让图填满 hero-frame，保留 sticker badge 叠层
 * ================================================================= */
.guide-page .device-side .img-main { padding: 0 !important; }
.guide-page .device-side .img-main img {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 520px !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 auto !important;
  display: block !important;
}
@media (max-width: 1024px) {
  .guide-page .device-side { max-width: 560px !important; width: 100% !important; }
  .guide-page .device-side .img-main img { min-height: 420px !important; max-height: none !important; }
}
@media (max-width: 768px) {
  .guide-page .device-side .img-main img { min-height: 360px !important; }
}
@media (max-width: 640px) {
  .guide-page .device-side .img-main img { min-height: 300px !important; }
}



/* =================================================================
 * 手机版（≤640px）轮播切换按钮 / 圆点缩小
 * 用户截图反馈：单次训练报告下方 3 个紫圆点"特别大"
 * - car-dot 9×9 → 6×6，激活 26 → 14，gap 8→5
 * - car-btn 左右箭头 40 → 28，图标 17→12，阴影减半
 * 保留最小触控热区（≥28px 仍达标）
 * ================================================================= */
@media (max-width: 640px) {
  div.guide-page .car-dots { gap: 5px !important; margin-top: 10px !important; }
  div.guide-page .car-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #cbd5e1 !important;
  }
  div.guide-page .car-dot.active {
    width: 16px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: #7c3aed !important;
  }
  div.guide-page .car-btn {
    width: 28px !important;
    height: 28px !important;
    box-sizing: border-box !important;
    top: calc(50% - 14px) !important;
    transform: translateY(-50%) !important;
    box-shadow: 2px 2px 0 rgba(124,58,237,.22) !important;
  }
  div.guide-page .car-btn svg { width: 12px !important; height: 12px !important; }
  div.guide-page .car-prev { left: -8px !important; }
  div.guide-page .car-next { right: -8px !important; }
}