.help-trigger {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
    padding: 5px 10px; border: 1px solid #354656; border-radius: 7px;
    background: #0f1c28; color: #c3cad4; font-size: 12px; font-weight: 700;
    cursor: pointer; line-height: 1;
}
.help-trigger:hover, .help-trigger:focus-visible { border-color: #4b9f3f; color: #e2e8f0; outline: none; }
.help-trigger i { color: #4b9f3f; font-size: 15px; }

.help-guide-overlay {
    position: fixed; inset: 0; z-index: 100001; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(3, 9, 14, .82); backdrop-filter: blur(5px);
}
.help-guide-overlay.is-open { display: flex; }
.help-guide-dialog {
    /* header / scrollable layout / static footer — matches this app's own
       modal convention (header+footer fixed, only the body scrolls, see
       CLAUDE.md "Modals cap to the viewport globally"). Back/Next used to
       live inside the scrolling content itself and could scroll out of
       view on a long chapter — moved to this dedicated footer row. */
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1120px, 100%);
    height: min(760px, calc(100dvh - 40px)); overflow: hidden;
    background: #0c1722; border: 1px solid #354656; border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .58); color: #e2e8f0;
}
.help-guide-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 66px; padding: 12px 18px; border-bottom: 1px solid #1e2e3d;
}
.help-guide-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.help-guide-brand-icon {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
    background: #123020; border: 1px solid #245c2d; color: #5fc255; font-size: 17px;
}
.help-guide-brand h2 { margin: 0; color: #f3f7fa; font-size: 16px; font-weight: 750; }
.help-guide-brand p { margin: 2px 0 0; color: #718493; font-size: 12px; }
.help-guide-close {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid #354656; border-radius: 7px; background: transparent;
    color: #aebcc7; cursor: pointer; font-size: 17px;
}
.help-guide-close:hover, .help-guide-close:focus-visible { background: #172635; color: #fff; outline: none; }
.help-guide-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 0; }
.help-guide-nav { overflow-y: auto; padding: 14px 10px; border-right: 1px solid #1e2e3d; background: #09131d; }
.help-guide-nav-label { padding: 0 9px 8px; color: #607584; font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.help-guide-nav button {
    display: flex; align-items: center; gap: 9px; width: 100%; border: 0; border-left: 2px solid transparent;
    border-radius: 6px; padding: 10px 9px; background: transparent; color: #91a1af;
    font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.help-guide-nav button:hover { background: #101f2c; color: #d8e1e7; }
.help-guide-nav button.is-active { border-left-color: #4b9f3f; background: #10271a; color: #72cb66; }
.help-guide-nav button i { width: 16px; color: #6f8291; text-align: center; }
.help-guide-nav button.is-active i { color: #5fc255; }
.help-guide-main { min-width: 0; overflow-y: auto; padding: clamp(20px, 4vw, 42px); }
.help-guide-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .95fr); gap: clamp(24px, 4vw, 48px); align-items: center; min-height: 100%; }
.help-guide-kicker { margin: 0 0 8px; color: #5fc255; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.help-guide-copy h3 { margin: 0; color: #f2f6f9; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.help-guide-copy > p { margin: 14px 0 22px; color: #aebdca; font-size: 15px; line-height: 1.65; }
.help-guide-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.help-guide-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: #c7d2db; font-size: 13px; line-height: 1.5; }
.help-guide-step-number { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #356f35; border-radius: 50%; color: #6dcc62; font-size: 11px; font-weight: 800; }
.help-guide-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid #1e2e3d; background: #0c1722; }
.help-guide-progress { color: #718493; font-size: 12px; }
.help-guide-next, .help-guide-back {
    border-radius: 7px; padding: 9px 13px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.help-guide-next { margin-left: auto; border: 1px solid #3c873a; background: #3f913b; color: #fff; }
.help-guide-next:hover { background: #4ba547; }
.help-guide-back { border: 1px solid #354656; background: transparent; color: #c3cad4; }
.help-guide-back:hover { background: #172635; }
.help-guide-preview {
    position: relative; overflow: hidden; border: 1px solid #314454;
    border-radius: 10px; background: #071018; box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}
.help-guide-preview-bar { display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 12px; border-bottom: 1px solid #233646; background: #0d1a26; }
.help-guide-preview-bar span { width: 7px; height: 7px; border-radius: 50%; background: #3e5262; }
.help-guide-preview-bar b { margin-left: 5px; color: #8ca0af; font-size: 10px; font-weight: 700; }
.help-guide-preview-body { padding: 18px; }
.help-guide-preview-title { color: #dce6ed; font-size: 14px; font-weight: 750; }
.help-guide-preview-subtitle { margin-top: 4px; color: #617787; font-size: 10px; }
.help-guide-preview[data-preview="welcome"] .help-guide-preview-body { display: grid; place-items: center; min-height: 300px; text-align: center; }
.help-guide-welcome-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 15px; border: 1px solid #28642e; border-radius: 16px; background: #10291a; color: #66c95e; font-size: 30px; }
.help-guide-welcome-copy { color: #91a5b4; font-size: 12px; line-height: 1.6; }
.help-guide-preview[data-preview="welcome"] .help-guide-callout.one { position: absolute; top: 58px; right: 13px; }

/* Real app screenshots (replaced the generic stat-grid mockup 2026-10-05,
   then the mockup itself replaced 2026-10-06 with the user's own real
   desktop-app screenshots — see CLAUDE.md). No fixed height/object-fit on
   the image — it sizes purely from its own aspect ratio at the frame's
   real width, so there's never dead space below a shorter screenshot the
   way a fixed min-height box produced. */
.help-guide-screenshot-body { padding: 0; }
.help-guide-screenshot-frame { position: relative; }
.help-guide-screenshot { display: block; width: 100%; height: auto; cursor: zoom-in; }
.help-guide-screenshot-caption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-size: 10px; color: #8ca0af; border-top: 1px solid #233646; background: #0d1a26; }
.help-guide-screenshot-caption i { color: #5fa8d6; }

/* Numbered callout badges — positioned per-instance via an inline
   left/top % (set in help_guide.js, computed from the real screenshot's
   own pixel layout), not a fixed per-chapter CSS rule like the old
   mockup used, since every screenshot's layout is genuinely different. */
.help-guide-callout {
    position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 4px; border: 1px solid #5ba851; border-radius: 20px; background: rgba(12, 32, 16, .92);
    color: #d6f3d1; font-size: 11px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.45); pointer-events: none;
    white-space: nowrap; backdrop-filter: blur(2px);
}
.help-guide-callout b {
    display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
    background: #5cb657; color: #0b1a0b; font-size: 10px; flex-shrink: 0;
}

.help-guide-zoom-overlay {
    display: none; position: fixed; inset: 0; z-index: 100005; background: rgba(3, 7, 11, .92);
    align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
}
.help-guide-zoom-overlay.is-open { display: flex; }
/* inline-block + line-height:0 so the frame shrink-wraps exactly to the
   image's own rendered box — callout %s must land relative to that same
   box, not a larger frame with letterbox gaps around the image. */
.help-guide-zoom-frame { position: relative; display: inline-block; line-height: 0; cursor: default; }
.help-guide-zoom-frame img { display: block; max-width: 95vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.help-guide-zoom-close {
    position: absolute; top: 20px; right: 24px; width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid #354656; border-radius: 8px; background: #0c1722; color: #e2e8f0; font-size: 18px; cursor: pointer;
}
/* Zoom view gets the fuller callout set (see calloutsZoom per chapter) —
   larger and more numerous than the thumbnail's 2, per direct feedback
   that the thumbnail shouldn't be busier but the zoomed view should be. */
.help-guide-zoom-frame .help-guide-callout {
    font-size: 13px; padding: 6px 12px 6px 6px; pointer-events: none;
}
.help-guide-zoom-frame .help-guide-callout b { width: 20px; height: 20px; font-size: 11px; }

@media (max-width: 760px) {
    .help-trigger span { display: none; }
    .help-trigger { width: 32px; justify-content: center; padding: 0; }
    .help-guide-overlay { padding: 0; }
    .help-guide-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
    .help-guide-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .help-guide-nav { display: flex; gap: 3px; overflow-x: auto; overflow-y: hidden; padding: 8px; border-right: 0; border-bottom: 1px solid #1e2e3d; }
    .help-guide-nav-label { display: none; }
    .help-guide-nav button { width: auto; flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; padding: 7px 9px; white-space: nowrap; font-size: 12px; }
    .help-guide-nav button.is-active { border-left-color: transparent; border-bottom-color: #4b9f3f; }
    .help-guide-main { padding: 22px 18px; }
    .help-guide-page { display: block; min-height: auto; }
    .help-guide-preview { margin-top: 24px; }
    .help-guide-preview[data-preview="welcome"] .help-guide-preview-body { min-height: 234px; }
}