/* Readable, self-contained help; styles do not alter the editor or other dialogs. */
.user-guide {
  --guide-ink: #202d38;
  --guide-secondary: #475864;
  --guide-line: #d8dfe3;
  --guide-paper: #fffefb;
  color: var(--guide-ink);
  background: var(--guide-paper);
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  box-shadow: 0 24px 90px #101a2b38;
  font-size: 16px;
  line-height: 1.75;
  overflow: hidden;
}
.user-guide::backdrop { background: #15232f80; backdrop-filter: blur(3px); }
.user-guide[open] { display: flex; flex-direction: column; }
.user-guide *, .user-guide *::before, .user-guide *::after { box-sizing: border-box; }
.user-guide button { font: inherit; cursor: pointer; }
.user-guide h2, .user-guide h3, .user-guide h4, .user-guide p, .user-guide dl, .user-guide dd { margin: 0; }
.guide-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 30px 22px; border-bottom: 1px solid var(--guide-line); }
.guide-heading h2 { color: var(--guide-ink); font-size: 27px; line-height: 1.35; letter-spacing: .025em; }
.guide-heading p { color: var(--guide-secondary); margin-top: 6px; font-size: 15px; }
.guide-close { width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1px solid var(--guide-line); border-radius: 50%; color: var(--guide-ink); background: transparent; font-size: 27px !important; line-height: 1; }
.guide-close:hover { background: #eef1f3; }
.guide-body { min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; }
.guide-nav { display: flex; flex-direction: column; gap: 5px; padding: 21px 13px; background: #f5f6f7; border-right: 1px solid var(--guide-line); overflow-y: auto; }
.guide-nav-button { text-align: left; color: var(--guide-secondary); background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 10px 12px; font-size: 15px !important; line-height: 1.5; }
.guide-nav-button:hover { color: var(--guide-ink); background: #e9edf0; }
.guide-nav-button.is-current { color: #152b39; font-weight: 700; background: #e0e8ed; border-color: #cbd8df; }
.guide-article { padding: 25px 30px 28px; overflow-y: auto; overscroll-behavior: contain; }
.guide-article-title { color: var(--guide-ink); font-size: 21px; line-height: 1.55; }
.guide-intro { margin-top: 9px !important; color: var(--guide-secondary); font-size: 15px; }
.guide-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 0; margin: 23px 0 0; list-style: none; counter-reset: guide-step; }
.guide-step { position: relative; padding-left: 35px; counter-increment: guide-step; }
.guide-step::before { content: counter(guide-step); position: absolute; top: 3px; left: 0; width: 24px; height: 24px; border-radius: 50%; background: #e5ebef; color: #203b4c; font-size: 13px; font-weight: 700; text-align: center; line-height: 24px; }
.guide-step h4, .guide-action h4 { color: var(--guide-ink); font-size: 16px; line-height: 1.65; font-weight: 700; }
.guide-step p, .guide-action p { color: var(--guide-secondary); font-size: 15px; margin-top: 4px; }
.guide-actions { display: flex; flex-direction: column; gap: 17px; margin-top: 23px; }
.guide-action + .guide-action { padding-top: 15px; border-top: 1px solid #e6eaed; }
.guide-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 21px; padding: 16px 18px; margin-top: 21px !important; background: #f2f4f6; border-radius: 10px; }
.guide-role dt { color: var(--guide-ink); font-size: 15px; font-weight: 700; }
.guide-role dd { color: var(--guide-secondary); font-size: 15px; }
.guide-note { margin-top: 23px; padding: 14px 17px; color: #39434c; background: #f4f0e7; border: 1px solid #e4dbc9; border-radius: 10px; }
.guide-note strong { display: block; color: #4f4535; font-size: 15px; font-weight: 700; }
.guide-note p { margin-top: 5px !important; font-size: 15px; }
.guide-footer { flex: 0 0 auto; padding: 13px 30px; border-top: 1px solid var(--guide-line); color: var(--guide-secondary); font-size: 15px; }
.user-guide button:focus-visible { outline: 3px solid #305f82; outline-offset: 3px; }
@media (max-width: 700px) {
  .user-guide { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 14px; }
  .guide-heading { padding: 18px 19px 15px; }
  .guide-heading h2 { font-size: 23px; }
  .guide-body { display: flex; flex-direction: column; }
  .guide-nav { flex: 0 0 auto; flex-direction: row; gap: 7px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--guide-line); padding: 11px 15px; }
  .guide-nav-button { flex: 0 0 auto; padding: 8px 11px; }
  .guide-article { padding: 20px 19px 23px; min-height: 0; }
  .guide-article-title { font-size: 19px; }
  .guide-steps, .guide-roles { grid-template-columns: 1fr; }
  .guide-steps { gap: 15px; }
  .guide-footer { padding: 12px 19px; }
}
@media (prefers-reduced-motion: reduce) { .user-guide::backdrop { backdrop-filter: none; } }