.sidebar-user-guide {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 14px 8px;
  padding:8px 10px;
  border:0;
  border-radius:3px;
  color:#484644;
  background:transparent;
  font:600 11px "Segoe UI",sans-serif;
  text-align:left;
  outline:none;
  cursor:pointer;
}
.sidebar-user-guide:focus { outline:none; box-shadow:none; }
.sidebar-user-guide span { display:grid; place-items:center; width:17px; height:17px; border:1px solid #8a8886; border-radius:50%; font-size:10px; }
.sidebar-user-guide:hover { color:#005a9e; background:#f3f2f1; }
.user-guide-modal { width:min(760px,calc(100vw - 30px)); height:min(680px,calc(100vh - 30px)); padding:0; border:1px solid #d9e0e8; border-radius:8px; color:#242424; background:#fff; box-shadow:0 22px 70px #142b4940; }
.user-guide-modal::backdrop { background:#10243b8c; backdrop-filter:blur(3px); }
.user-guide-dialog { display:grid; grid-template-rows:70px minmax(0,1fr) 64px; height:100%; }
.user-guide-dialog>header { display:flex; align-items:center; justify-content:space-between; height:auto; padding:0 24px; border-bottom:1px solid #edebe9; background:#fff; }
.user-guide-dialog>header>div { display:grid; gap:4px; }
.user-guide-dialog>header span { color:#0078d4; font-size:9px; font-weight:700; letter-spacing:.12em; }
.user-guide-dialog>header h2 { margin:0; font-size:19px; }
.user-guide-dialog>header button { width:34px; height:34px; padding:0; border:0; border-radius:3px; color:#605e5c; background:transparent; font-size:24px; cursor:pointer; }
.user-guide-dialog>header button:hover { background:#f3f2f1; }
.user-guide-content { overflow:auto; padding:28px; color:#323130; font-size:13px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.user-guide-content.empty { display:grid; place-items:center; color:#797775; text-align:center; }
.user-guide-content.error { color:#a4262c; }
.user-guide-dialog>footer { display:flex; align-items:center; justify-content:flex-end; padding:0 24px; border-top:1px solid #edebe9; background:#faf9f8; }
.user-guide-dialog>footer button { padding:8px 20px; border:1px solid #0078d4; border-radius:3px; color:#fff; background:#0078d4; font-weight:600; cursor:pointer; }
.user-guide-editor { display:grid; gap:12px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.settings-content .user-guide-editor textarea { width:100%; min-height:390px; max-height:none; resize:vertical; padding:13px; border:1px solid #8a8886; border-radius:2px; color:#242424; background:#fff; font:12px/1.65 "Segoe UI",sans-serif; outline:none; }
.settings-content .user-guide-editor textarea:focus { border-color:#0078d4; box-shadow:inset 0 -1px #0078d4; }
.user-guide-editor>div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.user-guide-editor small { color:#797775; font-size:10px; }
@media(max-width:650px) {
  .user-guide-modal { width:calc(100vw - 16px); height:calc(100vh - 16px); }
  .user-guide-content { padding:20px; }
  .settings-content .user-guide-editor textarea { min-height:300px; }
}