/* Shared guide: independent header/body/footer keep navigation within the viewport. */
#guideModal.guide-overlay{padding:16px;overflow:hidden}
#guideModal .guide-modal.guide-compact{display:flex;flex-direction:column;width:min(820px,100%);max-height:min(560px,calc(100dvh - 32px));padding:0;overflow:hidden;border-radius:16px}
#guideModal .guide-compact-header{flex:0 0 auto;padding:18px 24px 0;background:#fff}
#guideModal .guide-modal-topline{gap:12px;min-height:28px;color:#7f626d;font-size:12px;font-weight:600;letter-spacing:0}
#guideModal .guide-modal-topline>span:first-child{margin-right:auto}
#guideModal #guideCount{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:500}
#guideModal .guide-close-x{display:grid;place-items:center;width:32px;height:32px;padding:0;flex:0 0 auto;border-radius:50%;font-size:24px;line-height:1}
#guideModal .guide-close-x:hover{background:#f6eff2}
#guideModal .guide-description{margin:5px 0 9px;color:#8a7b81;font-size:12px;line-height:1.5}
#guideModal .guide-topic-nav{display:flex;flex-wrap:nowrap;gap:5px;margin:0;border-bottom:1px solid #eadfe3;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 0 8px}
#guideModal .guide-topic-nav button{flex:0 0 auto;margin:0;border:0;border-radius:5px;padding:6px 9px;min-height:32px;background:transparent;color:#846c75;font-size:12px;line-height:1.4;white-space:nowrap;font-weight:400}
#guideModal .guide-topic-nav button[aria-current=true]{background:#f7e9ee;color:#96314d;font-weight:650}
#guideModal .guide-compact-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 24px;scrollbar-gutter:stable}
#guideModal .guide-compact-copy{min-width:0}
#guideModal .guide-compact-copy h2{margin:0 0 12px;font-size:22px;line-height:1.45;color:#3c3037;text-wrap:pretty}
#guideModal .guide-compact-copy #guideText{margin:0;color:#695760;font-size:14px;line-height:1.8}
#guideModal .guide-compact-copy .guide-tip{margin:15px 0 0;padding:10px 12px;border-left:2px solid #d6acba;border-radius:0 6px 6px 0;background:#faf6f7;color:#8a6c77;font-size:12px;line-height:1.7}
#guideModal .guide-visual{align-self:center;min-width:0;margin:0;padding:10px 10px 12px;background:#fcfafb;border:1px solid #eddee4;border-radius:12px}
#guideModal .guide-visual svg{display:block;width:100%;height:auto;max-height:250px}
#guideModal .guide-visual figcaption{margin:8px 2px 0;font-size:11px;line-height:1.6;color:#9a818b;text-align:left}
#guideModal .guide-compact-footer{flex:0 0 auto;padding:0 24px 15px;background:#fff}
#guideModal .guide-progress{gap:5px;margin:0 0 12px}
#guideModal .guide-progress span{height:3px;background:#eee4e8}
#guideModal .guide-progress span.active{background:#bf718a}
#guideModal .guide-actions{display:flex;flex-wrap:nowrap;gap:8px;margin:0}
#guideModal .guide-actions button{min-height:38px;padding:8px 15px;border-radius:7px;font-size:13px;line-height:1.4}
#guideModal .btn-guide-skip{padding-left:0;color:#9a818b}
#guideModal .btn-guide-secondary{border-color:#e3cdd5;color:#8d5a6c}
#guideModal .btn-guide-primary{border-color:#a53351;background:#a53351;color:#fff}
#guideModal .guide-footnote{margin:8px 0 0;color:#a08c94;font-size:11px;line-height:1.45}
#guideModal button:focus-visible{outline:2px solid #b65a77;outline-offset:2px}
@media(max-width:640px){
 #guideModal.guide-overlay{padding:12px}
 #guideModal .guide-modal.guide-compact{max-height:calc(100dvh - 24px);border-radius:14px}
 #guideModal .guide-compact-header{padding:14px 16px 0}
 #guideModal .guide-modal-topline{gap:8px;font-size:11px}
 #guideModal .guide-description{font-size:11px;margin-top:2px}
 #guideModal .guide-topic-nav{gap:3px;padding-bottom:7px}
 #guideModal .guide-topic-nav button{min-height:32px;padding:6px 8px;font-size:12px}
 #guideModal .guide-compact-body{grid-template-columns:minmax(0,1fr);gap:16px;padding:17px 16px;align-items:start}
 #guideModal .guide-compact-copy h2{font-size:20px;margin-bottom:9px}
 #guideModal .guide-compact-copy .guide-tip{margin-top:12px}
 #guideModal .guide-visual{width:100%;max-width:400px;justify-self:center;padding:8px 10px 10px}
 #guideModal .guide-visual svg{max-height:190px}
 #guideModal .guide-compact-footer{padding:0 16px 12px}
 #guideModal .guide-actions button{padding:8px 11px;min-height:40px}
 #guideModal .guide-footnote{font-size:10px;margin-top:7px}
}
@media(max-height:560px){
 #guideModal.guide-overlay{padding:8px}
 #guideModal .guide-modal.guide-compact{max-height:calc(100dvh - 16px)}
 #guideModal .guide-compact-header{padding-top:9px}
 #guideModal .guide-description{margin:0 0 5px}
 #guideModal .guide-topic-nav{padding-bottom:5px}
 #guideModal .guide-compact-body{padding-top:14px;padding-bottom:14px}
 #guideModal .guide-compact-footer{padding-bottom:8px}
 #guideModal .guide-progress{margin-bottom:8px}
 #guideModal .guide-footnote{margin-top:5px}
}