.btn-guide-menu {
  width: 100%; margin: 0 0 10px; padding: 9px 10px; border: 1px solid #ddd6fe;
  border-radius: var(--radius-xs, 7px); background: #f5f3ff; color: var(--primary, #7c3aed);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 650; transition: var(--transition, .2s ease);
}
.btn-guide-menu:hover { background: #ede9fe; border-color: #c4b5fd; color: var(--primary-dark, #5b21b6); transform: translateY(-1px); }
.btn-guide-menu:focus-visible, .guide-close:focus-visible, .guide-tree-item:focus-visible, .guide-search:focus-within { outline: 3px solid rgba(124, 58, 237, .2); outline-offset: 2px; }
body.guide-panel-open .app-container { margin-right: min(46vw, 480px); }
.guide-side-panel { position: fixed; z-index: 10050; top: 0; right: 0; width: min(46vw, 480px); height: 100dvh; overflow: hidden; background: #fff; border-left: 1px solid #ddd6fe; box-shadow: -16px 0 40px rgba(30,27,75,.16); display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
.guide-side-panel.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.app-container { transition: margin-right .24s ease; }
.user-guide-overlay { position: fixed; inset: 0; z-index: 10050; padding: 24px; background: rgba(30, 27, 75, .58); backdrop-filter: blur(3px); display: grid; place-items: center; animation: guideFade .18s ease-out; }
.user-guide-modal { width: min(1120px, 100%); height: min(790px, calc(100vh - 48px)); overflow: hidden; background: #fff; border: 1px solid #ede9fe; border-radius: 18px; box-shadow: 0 28px 80px rgba(30, 27, 75, .28); display: flex; flex-direction: column; animation: guideRise .22s ease-out; }
.guide-modal-header { min-height: 78px; padding: 16px 20px; border-bottom: 1px solid #ede9fe; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(125deg, #faf5ff, #fff 60%); }
.guide-modal-header > div { display: flex; align-items: center; gap: 12px; }
.guide-modal-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary, #7c3aed), #9333ea); box-shadow: 0 8px 20px rgba(124, 58, 237, .25); }
.guide-modal-header h1 { margin: 0; color: #2e1065; font-size: 1.2rem; line-height: 1.3; }
.guide-modal-header p { margin: 3px 0 0; color: #6b7280; font-size: .8rem; }
.guide-close { width: 38px; height: 38px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #6b7280; cursor: pointer; font-size: 1rem; }
.guide-close:hover { color: #5b21b6; border-color: #c4b5fd; background: #f5f3ff; }
.guide-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 310px minmax(0, 1fr); }
.guide-side-panel .guide-layout { display: flex; flex-direction: column; }
.guide-side-panel .guide-sidebar { flex: 0 0 auto; max-height: 42%; border-right: 0; border-bottom: 1px solid #ede9fe; }
.guide-side-panel .guide-detail { flex: 1 1 auto; padding: 20px 18px 32px; }
.guide-side-panel .guide-step-card { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
.guide-side-panel .guide-step-number { width: 34px; height: 34px; border-width: 3px; }
.guide-side-panel .guide-step-card:not(:last-child)::before { left: 16px; top: 32px; }
.guide-side-panel .guide-tips { margin-left: 43px; }
.guide-sidebar { min-height: 0; padding: 18px 14px; overflow-y: auto; border-right: 1px solid #ede9fe; background: #fafafa; }
.guide-search { height: 42px; padding: 0 11px; border: 1px solid #ddd6fe; border-radius: 10px; display: flex; align-items: center; gap: 8px; background: #fff; color: #8b5cf6; }
.guide-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #312e81; font: inherit; font-size: .84rem; }
.guide-search kbd { padding: 2px 7px; border: 1px solid #ddd6fe; border-bottom-width: 2px; border-radius: 5px; background: #faf5ff; color: #6d28d9; font-size: .7rem; }
.guide-tree-group { margin: 18px 0 0; }
.guide-tree-group h3 { margin: 0 8px 7px; display: flex; align-items: center; gap: 8px; color: #6d28d9; font-size: .72rem; letter-spacing: .045em; text-transform: uppercase; }
.guide-tree-group h3 i { width: 16px; text-align: center; }
.guide-tree-item { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #4b5563; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; font: inherit; font-size: .82rem; line-height: 1.35; transition: .16s ease; }
.guide-tree-item + .guide-tree-item { margin-top: 3px; }
.guide-tree-item > i { color: #c4b5fd; font-size: .68rem; }
.guide-tree-item:hover { background: #f3f0ff; color: #5b21b6; }
.guide-tree-item.active { border-color: #ddd6fe; background: #ede9fe; color: #5b21b6; font-weight: 700; box-shadow: inset 3px 0 #7c3aed; }
.guide-tree-empty { padding: 24px 10px; color: #6b7280; text-align: center; font-size: .82rem; }
.guide-detail { min-height: 0; padding: 26px 30px 38px; overflow-y: auto; scroll-behavior: smooth; background: #fff; }
.guide-article { width: min(720px, 100%); margin: 0 auto; }
.guide-eyebrow { color: #7c3aed; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide-detail-heading h2 { margin: 5px 0 6px; color: #24104f; font-size: 1.55rem; line-height: 1.3; }
.guide-detail-heading p { margin: 0; color: #6b7280; line-height: 1.65; }
.guide-callout { margin: 20px 0; padding: 14px 16px; border: 1px solid #c4b5fd; border-radius: 12px; background: #f5f3ff; display: flex; gap: 11px; color: #5b21b6; }
.guide-callout > i { margin-top: 3px; }
.guide-callout strong { display: block; margin-bottom: 3px; }
.guide-callout p { margin: 0; color: #4c1d95; font-size: .86rem; line-height: 1.55; }
.guide-steps { margin-top: 24px; position: relative; }
.guide-step-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
.guide-step-card:not(:last-child) { padding-bottom: 18px; }
.guide-step-card:not(:last-child)::before { content: ''; position: absolute; left: 20px; top: 38px; bottom: 0; width: 2px; background: #ede9fe; }
.guide-step-number { z-index: 1; width: 42px; height: 42px; border: 4px solid #f5f3ff; border-radius: 50%; background: #7c3aed; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .82rem; }
.guide-step-body { padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(49, 46, 129, .055); }
.guide-step-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.guide-step-title > span { color: #7c3aed; font-size: .69rem; font-weight: 800; text-transform: uppercase; }
.guide-step-title h3 { margin: 0; color: #312e81; font-size: .96rem; }
.guide-step-title em { margin-left: auto; padding: 3px 8px; border-radius: 99px; background: #f3e8ff; color: #7e22ce; font-size: .65rem; font-style: normal; font-weight: 800; }
.guide-step-body > p { margin: 8px 0 0; color: #4b5563; font-size: .87rem; line-height: 1.62; }
.guide-shortcuts { margin-top: 10px; display: flex; align-items: center; gap: 7px; color: #6b7280; font-size: .72rem; }
.guide-shortcuts kbd { padding: 4px 8px; border: 1px solid #c4b5fd; border-bottom-width: 3px; border-radius: 6px; background: #faf5ff; color: #5b21b6; font: 700 .72rem/1 monospace; }
.guide-step-note { margin-top: 11px; padding: 9px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; line-height: 1.5; }
.guide-step-note i { margin-top: 2px; }
.guide-tips { margin: 22px 0 0 55px; padding: 15px 17px; border: 1px solid #bbf7d0; border-radius: 12px; background: #f0fdf4; }
.guide-tips h3 { margin: 0; color: #166534; font-size: .88rem; }
.guide-tips ul { margin: 8px 0 0; padding-left: 18px; color: #166534; font-size: .82rem; line-height: 1.55; }
.guide-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; color: #6b7280; text-align: center; }
.guide-empty > i { font-size: 2rem; color: #c4b5fd; }
.guide-empty h3 { margin: 12px 0 4px; color: #312e81; }
.guide-empty p { margin: 0; max-width: 420px; }
@keyframes guideFade { from { opacity: 0; } }
@keyframes guideRise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (min-width: 1025px) {
  .app-container.sidebar-collapsed .btn-guide-menu { position: relative; width: calc(100% - 16px); margin: 0 auto 10px; padding: 10px 0; justify-content: center; gap: 0; }
  .app-container.sidebar-collapsed .btn-guide-menu span { display: none; }
  .app-container.sidebar-collapsed .btn-guide-menu::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; z-index: 1000; padding: 7px 10px; border-radius: 6px; background: #312e81; color: #fff; opacity: 0; pointer-events: none; transform: translateY(-50%); white-space: nowrap; font-size: .75rem; font-weight: 500; transition: opacity .15s ease; }
  .app-container.sidebar-collapsed .btn-guide-menu:hover::after { opacity: 1; }
}
@media (max-width: 720px) {
  body.guide-panel-open .app-container { margin-right: 0; }
  .guide-side-panel { width: 100%; border-left: 0; }
  .user-guide-overlay { padding: 0; place-items: stretch; }
  .user-guide-modal { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .guide-modal-header { min-height: 68px; padding: 12px 14px; }
  .guide-modal-icon { width: 38px; height: 38px; }
  .guide-modal-header h1 { font-size: 1.05rem; }
  .guide-layout { display: block; overflow-y: auto; }
  .guide-sidebar { overflow: visible; padding: 14px; border-right: 0; border-bottom: 1px solid #ede9fe; }
  .guide-detail { overflow: visible; padding: 22px 15px 34px; }
  .guide-tree-group { margin-top: 14px; }
  .guide-tree-group h3 { margin-bottom: 5px; }
  .guide-tree-item { min-height: 39px; }
  .guide-detail-heading h2 { font-size: 1.3rem; }
  .guide-step-card { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
  .guide-step-number { width: 34px; height: 34px; border-width: 3px; }
  .guide-step-card:not(:last-child)::before { left: 16px; top: 32px; }
  .guide-step-body { padding: 12px; }
  .guide-step-title em { margin-left: 0; }
  .guide-tips { margin-left: 43px; }
}
@media (prefers-reduced-motion: reduce) { .guide-side-panel, .app-container { transition: none; } .guide-detail { scroll-behavior: auto; } }