/* Scoped presentation for the native tutorial dialog across all page themes. */
body .admin-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 0 0 10px;
  border: 1px solid #93b8e7;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d4ed8;
  font: 700 19px/1 Arial, sans-serif;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
}
body .admin-help-trigger:hover { background: #dbeafe; border-color: #2563eb; }
body .admin-help-trigger:focus-visible,
#admin-page-help button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
body .admin-help-page-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 14px 18px;
  margin: 0;
  color: #163c66;
  font: 700 22px/1.5 "Microsoft JhengHei", sans-serif;
}

#admin-page-help,
#admin-page-help * { box-sizing: border-box; }
#admin-page-help {
  position: fixed;
  inset: 0;
  width: min(1080px, calc(100% - 48px));
  max-width: 1080px;
  height: min(820px, calc(100vh - 48px));
  height: min(820px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: #fff;
  color: #33465e;
  font: 15px/1.8 "Microsoft JhengHei", "Noto Sans TC", Arial, sans-serif;
  text-align: left;
  box-shadow: 0 30px 100px rgba(8, 26, 52, .3);
  overflow: hidden;
}
#admin-page-help.admin-help-compact-guide { width: min(900px, calc(100% - 48px)); height: fit-content; }
#admin-page-help:not([open]) { display: none; }
#admin-page-help[open] { display: flex; flex-direction: column; }
#admin-page-help::backdrop { background: rgba(15, 30, 52, .46); backdrop-filter: blur(3px); }
#admin-page-help button { appearance: none; cursor: pointer; text-shadow: none; }

#admin-page-help .admin-help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
  padding: 24px 28px;
  background: linear-gradient(115deg, #123c82 0%, #146bc5 66%, #0895ac 100%);
  color: #fff;
}
#admin-page-help .admin-help-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
#admin-page-help .admin-help-mark {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 16px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
}
#admin-page-help .admin-help-mark svg { display: block; width: 29px; height: 29px; }
#admin-page-help .admin-help-heading { min-width: 0; }
#admin-page-help .admin-help-eyebrow { margin: 0 0 4px; color: #bfe6ff; font: 700 12px/1.5 "Microsoft JhengHei", sans-serif; letter-spacing: .12em; }
#admin-page-help .admin-help-title { margin: 0; color: #fff; font: 700 25px/1.4 "Microsoft JhengHei", sans-serif; overflow-wrap: anywhere; }
#admin-page-help .admin-help-subtitle { margin: 6px 0 0; color: #d8ecff; font-size: 13px; line-height: 1.6; }
#admin-page-help .admin-help-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 26px/1 Arial, sans-serif;
}
#admin-page-help .admin-help-close:hover { background: rgba(255, 255, 255, .25); }
#admin-page-help .admin-help-workspace { display: grid; grid-template-columns: 218px minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; }
#admin-page-help .admin-help-sidebar { min-width: 0; padding: 24px 14px; background: #f8fafc; border-right: 1px solid #e4ebf3; overflow-y: auto; overscroll-behavior: contain; }
#admin-page-help .admin-help-nav-caption { margin: 0 12px 14px; color: #7c8ba0; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
#admin-page-help .admin-help-chapters { display: flex; flex-direction: column; gap: 7px; }
#admin-page-help .admin-help-nav-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #60718a;
  font: 600 13px/1.5 "Microsoft JhengHei", sans-serif;
  text-align: left;
}
#admin-page-help .admin-help-nav-button:hover { background: #edf2f8; color: #1b4f99; }
#admin-page-help .admin-help-nav-number { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: #eaf0f6; color: #7c8ba0; font: 700 11px/1 Arial, sans-serif; }
#admin-page-help .admin-help-nav-button.is-active { background: #fff; border-color: #dce7f7; color: #195bcc; box-shadow: 0 3px 10px rgba(32, 79, 143, .05); }
#admin-page-help .admin-help-nav-button.is-active .admin-help-nav-number { background: #2563eb; color: #fff; }
#admin-page-help .admin-help-nav-note { margin: 22px 12px 0; padding-top: 18px; border-top: 1px solid #e4ebf3; color: #8795a9; font-size: 12px; line-height: 1.8; }
#admin-page-help .admin-help-body { position: relative; min-height: 0; min-width: 0; padding: 24px; background: #f1f5fa; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b3c5da transparent; }
#admin-page-help .admin-help-body::-webkit-scrollbar { width: 7px; }
#admin-page-help .admin-help-body::-webkit-scrollbar-thumb { border-radius: 8px; background: #b3c5da; }
#admin-page-help .admin-help-body:focus-visible { outline: 2px solid #60a5fa; outline-offset: -3px; }
#admin-page-help .admin-help-intro { margin-bottom: 20px; padding: 16px 20px; border: 1px solid #dce8f8; border-left: 3px solid #4484e7; border-radius: 12px; background: #eaf2fe; }
#admin-page-help .admin-help-intro-label { display: block; margin-bottom: 4px; color: #2860a3; font-size: 12px; font-weight: 700; }
#admin-page-help .admin-help-summary { margin: 0; color: #3c597b; overflow-wrap: anywhere; }
#admin-page-help .admin-help-overview,
#admin-page-help .admin-help-manual-section { margin: 0 0 18px; padding: 20px; border: 1px solid #e0e8f2; border-radius: 15px; background: #fff; box-shadow: 0 3px 12px rgba(30, 62, 108, .025); }
#admin-page-help .admin-help-section-header { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
#admin-page-help .admin-help-section-number { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: #edf3ff; color: #356ed4; font: 700 12px/1 Arial, sans-serif; }
#admin-page-help .admin-help-section-title { margin: 0; color: #203d65; font: 700 17px/1.5 "Microsoft JhengHei", sans-serif; }
#admin-page-help .admin-help-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: help-step; }
#admin-page-help .admin-help-steps li { position: relative; min-width: 0; padding: 16px 16px 16px 49px; margin: 0; border: 1px solid #e5edf8; border-radius: 11px; background: #f8fbff; color: #425772; counter-increment: help-step; overflow-wrap: anywhere; }
#admin-page-help .admin-help-steps li::before { content: counter(help-step); position: absolute; left: 14px; top: 18px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #2563eb; color: #fff; font: 700 12px/1 Arial, sans-serif; }
#admin-page-help .admin-help-definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
#admin-page-help .admin-help-definition { min-width: 0; padding: 14px 16px; border: 1px solid #eaf0f7; border-radius: 11px; background: #f8fafc; }
#admin-page-help .admin-help-definitions dt { margin: 0 0 5px; color: #274d7b; font-size: 14px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
#admin-page-help .admin-help-definitions dd { margin: 0; color: #586a81; font-size: 14px; font-weight: 400; line-height: 1.85; overflow-wrap: anywhere; }
#admin-page-help .admin-help-points { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
#admin-page-help .admin-help-points li { position: relative; margin: 0; padding: 12px 14px 12px 31px; border-radius: 9px; background: #f8fafc; overflow-wrap: anywhere; }
#admin-page-help .admin-help-points li::before { content: ""; position: absolute; left: 15px; top: 23px; width: 5px; height: 5px; border-radius: 50%; background: #5791de; }
#admin-page-help .admin-help-definitions + .admin-help-points { margin-top: 10px; }
#admin-page-help .admin-help-faq .admin-help-definitions { grid-template-columns: 1fr; }
#admin-page-help .admin-help-faq .admin-help-definition { border-left: 3px solid #c4d8f5; background: #f8fbff; }
#admin-page-help .admin-help-tips { padding: 18px 20px; border: 1px solid #f0dfba; border-radius: 14px; background: #fffaf0; }
#admin-page-help .admin-help-tips .admin-help-section-number { background: #fceccd; color: #a2701c; }
#admin-page-help .admin-help-tips .admin-help-section-title { color: #906629; }
#admin-page-help .admin-help-tips ul { padding-left: 20px; margin: 0; list-style: disc; color: #7a694d; }
#admin-page-help .admin-help-tips li { margin: 7px 0; overflow-wrap: anywhere; }
#admin-page-help .admin-help-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 15px 26px; border-top: 1px solid #e4ebf3; background: #fff; }
#admin-page-help .admin-help-footer-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#admin-page-help .admin-help-reading-status { margin: 0; color: #4a6080; font-size: 12px; font-weight: 700; line-height: 1.5; }
#admin-page-help .admin-help-keyboard-hint { color: #8b99ab; font-size: 11px; line-height: 1.5; }
#admin-page-help .admin-help-done { flex-shrink: 0; padding: 10px 24px; border: 0; border-radius: 10px; background: #2463e8; color: #fff; font: 700 14px/1.5 "Microsoft JhengHei", sans-serif; box-shadow: 0 4px 12px rgba(37, 99, 235, .2); }
#admin-page-help .admin-help-done:hover { background: #1c52cb; }

@media (max-width: 760px) {
  #admin-page-help,
  #admin-page-help.admin-help-compact-guide { width: calc(100% - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  #admin-page-help.admin-help-full-guide { height: calc(100vh - 24px); height: calc(100dvh - 24px); }
  #admin-page-help .admin-help-header { gap: 10px; padding: 18px; }
  #admin-page-help .admin-help-identity { gap: 12px; }
  #admin-page-help .admin-help-mark { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
  #admin-page-help .admin-help-mark svg { width: 24px; height: 24px; }
  #admin-page-help .admin-help-title { font-size: 20px; }
  #admin-page-help .admin-help-subtitle { display: none; }
  #admin-page-help .admin-help-close { flex-basis: 34px; width: 34px; height: 34px; font-size: 24px; }
  #admin-page-help .admin-help-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #admin-page-help .admin-help-sidebar { padding: 10px 12px; border-right: 0; border-bottom: 1px solid #e4ebf3; overflow-x: auto; overflow-y: hidden; }
  #admin-page-help .admin-help-nav-caption,
  #admin-page-help .admin-help-nav-note { display: none; }
  #admin-page-help .admin-help-chapters { flex-direction: row; gap: 7px; width: max-content; }
  #admin-page-help .admin-help-nav-button { flex: 0 0 auto; width: auto; min-height: 38px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  #admin-page-help .admin-help-nav-number { flex-basis: 23px; width: 23px; height: 23px; }
  #admin-page-help .admin-help-body { padding: 14px; font-size: 14px; }
  #admin-page-help .admin-help-intro { padding: 13px 15px; margin-bottom: 14px; }
  #admin-page-help .admin-help-overview,
  #admin-page-help .admin-help-manual-section { padding: 16px; margin-bottom: 14px; border-radius: 12px; }
  #admin-page-help .admin-help-section-title { font-size: 16px; }
  #admin-page-help .admin-help-steps,
  #admin-page-help .admin-help-definitions { grid-template-columns: 1fr; }
  #admin-page-help .admin-help-tips { padding: 16px; }
  #admin-page-help .admin-help-footer { gap: 10px; padding: 12px 16px; }
  #admin-page-help .admin-help-keyboard-hint { display: none; }
  #admin-page-help .admin-help-done { padding: 9px 17px; }
  body .admin-help-page-heading { padding: 12px; font-size: 20px; }
}
@media (max-height: 560px) and (min-width: 761px) {
  #admin-page-help .admin-help-header { padding: 14px 24px; }
  #admin-page-help .admin-help-mark { width: 42px; height: 42px; flex-basis: 42px; }
  #admin-page-help .admin-help-subtitle { display: none; }
  #admin-page-help .admin-help-footer { padding: 10px 24px; }
}
@media print {
  body .admin-help-trigger,
  #admin-page-help[open] { display: none !important; }
}