/* ZunShot guide BODY styles only — scoped under .zunshot-guide inside .Context-Body.
   The left menu is the company-standard Context-Side component (markup mirrors /guide/guide_begin.html,
   styles from /style.css, behaviour from /js/context-side-menu.js). Do not restyle it here. */
.zunshot-guide{--zg-blue:#367dff;--zg-blue-deep:#1942c8;--zg-purple:#9c21e8;--zg-navy:#111827;--zg-text:#333;--zg-muted:#667085;--zg-line:#dce4f0;--zg-soft:#f6f8fc;color:var(--zg-text)}
.zunshot-guide *{box-sizing:border-box}
.zunshot-guide a{text-decoration:none}

/* article typography */
.zunshot-guide .zg-crumbs{margin:0 0 14px;color:var(--zg-muted);font-size:.85rem}
.zunshot-guide .zg-crumbs a{color:var(--zg-blue-deep)}
.zunshot-guide .zg-crumbs .zg-sep{display:inline-block;margin:0 .5em;color:#98a2b3}
.zunshot-guide .zg-article h1{margin:0 0 14px;color:var(--zg-navy);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-.03em}
.zunshot-guide .zg-lead{margin:0 0 26px!important;color:var(--zg-muted);font-size:1.08rem;line-height:1.7}
.zunshot-guide .zg-article h2{margin:40px 0 14px;padding-top:8px;scroll-margin-top:120px;color:var(--zg-navy);font-size:1.4rem;font-weight:700;line-height:1.3}
.zunshot-guide .zg-article h3{margin:26px 0 8px;color:var(--zg-navy);font-size:1.1rem;font-weight:700}
.zunshot-guide .zg-article p,.zunshot-guide .zg-article li{line-height:1.7}
.zunshot-guide .zg-article code{padding:1px 5px;border-radius:4px;background:var(--zg-soft);color:var(--zg-navy);font-size:.92em}
.zunshot-guide .zg-shot{margin:18px 0 26px;padding:34px 20px;border:1px dashed #b8c8df;border-radius:8px;background:var(--zg-soft);color:var(--zg-muted);font-size:.9rem;text-align:center}
.zunshot-guide .zg-shot img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:6px}
.zunshot-guide .zg-steps{margin:0;padding:0;list-style:none;counter-reset:zgstep}
.zunshot-guide .zg-steps li{position:relative;margin:0 0 14px!important;padding:0 0 0 46px!important;counter-increment:zgstep}
.zunshot-guide .zg-steps li:before{content:counter(zgstep);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--zg-blue),var(--zg-purple));color:#fff;font-size:.85rem;font-weight:700}
.zunshot-guide .zg-steps li strong{display:block;color:var(--zg-navy);font-size:1.02rem;line-height:32px}
.zunshot-guide .zg-tips{margin:0;padding:0 0 0 20px}
.zunshot-guide .zg-tips li{margin:0 0 8px!important;padding:0!important}
.zunshot-guide .zg-table{width:100%;margin:0 0 10px;border-collapse:collapse;font-size:.95rem}
.zunshot-guide .zg-table th,.zunshot-guide .zg-table td{padding:9px 12px;border-bottom:1px solid var(--zg-line);text-align:left;vertical-align:top}
.zunshot-guide .zg-table th{color:var(--zg-navy);background:var(--zg-soft);font-weight:700}
.zunshot-guide .zg-faq details{border-top:1px solid var(--zg-line);padding:10px 0}
.zunshot-guide .zg-faq details:last-child{border-bottom:1px solid var(--zg-line)}
.zunshot-guide .zg-faq summary{cursor:pointer;color:var(--zg-navy);font-weight:600;line-height:1.5}
.zunshot-guide .zg-faq p{margin:8px 0 0!important;color:var(--zg-muted)}
.zunshot-guide .zg-related ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.zunshot-guide .zg-related li{margin:0!important;padding:0!important}
.zunshot-guide .zg-related a{display:inline-block;padding:7px 12px;border:1px solid var(--zg-line);border-radius:999px;color:var(--zg-blue-deep);font-size:.9rem}
.zunshot-guide .zg-related a:hover{border-color:#b8c8df;background:var(--zg-soft)}
.zunshot-guide .zg-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 0}
.zunshot-guide .zg-pn a{display:block;padding:14px 16px;border:1px solid var(--zg-line);border-radius:8px;color:var(--zg-navy)}
.zunshot-guide .zg-pn a:hover{border-color:#b8c8df;background:var(--zg-soft)}
.zunshot-guide .zg-pn span{display:block;color:var(--zg-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.zunshot-guide .zg-pn .is-next{text-align:right}
.zunshot-guide .zg-note{margin:22px 0;padding:14px 16px;border-left:4px solid var(--zg-purple);border-radius:0 7px 7px 0;background:#fbf7ff;color:#535e70;line-height:1.65}
.zunshot-guide .zg-note strong{color:var(--zg-navy)}

/* index page */
.zunshot-guide .zg-kicker{display:inline-flex;min-height:2rem;align-items:center;margin-bottom:.8rem;padding:.35rem .75rem;border-radius:999px;background:#edf4ff;color:var(--zg-blue-deep);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.zunshot-guide .zg-index h1{margin:0;color:var(--zg-navy);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;line-height:1.08;letter-spacing:-.04em}
.zunshot-guide .zg-hero-lead{max-width:44rem;margin:1rem 0 0!important;color:var(--zg-muted);font-size:1.1rem;line-height:1.7}
.zunshot-guide .zg-mode-grid{display:grid;gap:1rem;margin:2.2rem 0 0}
.zunshot-guide .zg-mode-card{display:grid;grid-template-columns:minmax(13rem,.7fr) minmax(0,1.3fr);overflow:hidden;border:1px solid var(--zg-line);border-radius:14px;background:#fff;box-shadow:0 1rem 2.5rem rgba(15,23,42,.055)}
.zunshot-guide .zg-mode-visual{position:relative;height:100%;min-height:11rem;margin:0;background:linear-gradient(145deg,#edf4ff,#f7efff);overflow:hidden}
.zunshot-guide .zg-mode-screenshot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.zunshot-guide .zg-mode-screenshot.is-instant{object-position:center}
.zunshot-guide .zg-mode-copy{padding:1.3rem 1.4rem}
.zunshot-guide .zg-mode-label{display:inline-flex;align-items:center;min-height:1.75rem;margin-bottom:.6rem;padding:.25rem .6rem;border-radius:999px;background:#edf4ff;color:var(--zg-blue-deep);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.zunshot-guide .zg-mode-card h3{margin:0;color:var(--zg-navy);font-size:1.2rem;font-weight:700}
.zunshot-guide .zg-mode-card p{margin:.6rem 0 0!important;color:var(--zg-muted);font-size:.94rem;line-height:1.65}
.zunshot-guide .zg-mode-card a{color:var(--zg-blue-deep);font-weight:600}
.zunshot-guide .zg-index h2{margin:48px 0 16px;color:var(--zg-navy);font-size:1.5rem;font-weight:700}
.zunshot-guide .zg-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.zunshot-guide .zg-featured{display:flex;min-height:9.5rem;flex-direction:column;padding:1.2rem 1.3rem;border:1px solid var(--zg-line);border-radius:8px;background:#fff;color:var(--zg-text);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.zunshot-guide .zg-featured:hover,.zunshot-guide .zg-featured:focus-visible{border-color:#b8c8df;box-shadow:0 1rem 2rem rgba(15,23,42,.08);transform:translateY(-3px);outline:2px solid transparent}
.zunshot-guide .zg-featured-num{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:.9rem;border-radius:8px;background:linear-gradient(135deg,var(--zg-blue),var(--zg-purple));color:#fff;font-size:.8rem;font-weight:700}
.zunshot-guide .zg-featured strong{color:var(--zg-navy);font-size:1.03rem;line-height:1.45}
.zunshot-guide .zg-featured span:last-child{margin-top:auto;padding-top:.8rem;color:var(--zg-blue-deep);font-size:.88rem;font-weight:500}
.zunshot-guide .zg-featured span:last-child:after{content:"→";display:inline-block;margin-left:.35rem;transition:transform .18s ease}
.zunshot-guide .zg-featured:hover span:last-child:after{transform:translateX(.2rem)}
.zunshot-guide .zg-page-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0;padding:0;list-style:none}
.zunshot-guide .zg-page-list li{margin:0!important;padding:0!important}
.zunshot-guide .zg-page-list a{display:block;height:100%;padding:.9rem 1.05rem;border:1px solid var(--zg-line);border-radius:8px;background:#fff;color:var(--zg-text)}
.zunshot-guide .zg-page-list a:hover{border-color:#b8c8df;background:var(--zg-soft)}
.zunshot-guide .zg-page-list strong{display:block;color:var(--zg-navy);font-size:.98rem}
.zunshot-guide .zg-page-list span{display:block;margin-top:.25rem;color:var(--zg-muted);font-size:.86rem;line-height:1.5}

/* help panel (every page, from guide_end.html) */
.zunshot-guide .zg-help{margin:56px 0 0}
.zunshot-guide .zg-help-panel{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:clamp(1.6rem,3vw,2.4rem);border-radius:14px;background:linear-gradient(135deg,var(--zg-navy),#252f46);color:#fff}
.zunshot-guide .zg-help-panel h2{margin:0;color:#fff;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:700}
.zunshot-guide .zg-help-panel p{margin:.6rem 0 0!important;color:#cbd5e1;font-size:.98rem}
.zunshot-guide .zg-help-panel a{white-space:nowrap}
.zunshot-guide .zg-help-mail{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-width:15rem}
.zunshot-guide .zg-help-mail-label{color:#cbd5e1;font-size:.85rem}
.zunshot-guide .zg-help-mail-addr{color:#fff;font-size:1.25rem;font-weight:700;letter-spacing:.01em;user-select:all;-webkit-user-select:all;word-break:break-all}
.zunshot-guide .zg-help-mail .zg-mail-copy{margin-top:.5rem;min-width:9.5rem}
.zunshot-guide .zg-back{display:inline-flex;min-height:44px;align-items:center;margin-top:.8rem;color:#cbd5e1;font-size:.9rem}
.zunshot-guide .zg-back:hover,.zunshot-guide .zg-back:focus{color:#fff}

@media (max-width:767px){
  .zunshot-guide .zg-mode-card{display:block}
  .zunshot-guide .zg-mode-visual{height:11rem;min-height:0}
  .zunshot-guide .zg-featured-grid,.zunshot-guide .zg-page-list,.zunshot-guide .zg-pn{grid-template-columns:1fr}
  .zunshot-guide .zg-help-panel{grid-template-columns:1fr}
  .zunshot-guide .zg-help-panel .bdc-btn{width:100%}
  .zunshot-guide .zg-pn .is-next{text-align:left}
}
@media (prefers-reduced-motion:reduce){.zunshot-guide *{transition:none!important}}