/* BBBS user guide: uses the existing site's paper, mint and lavender palette. */
#app-shell .user-guide { width: 100%; max-width: 1030px; margin: 0 auto; padding: 2px 0 28px; }
#app-shell .user-guide .guide-hero { padding: 28px clamp(20px,4vw,44px); border: 1px solid #dcd0ed; border-radius: 19px; background: linear-gradient(122deg,#f6f0ff 0%,#fff9e9 57%,#ecfae8 100%); }
#app-shell .user-guide .guide-hero .page-title { margin: 8px 0 13px; font-size: clamp(1.7rem,3.6vw,2.4rem); }
#app-shell .user-guide .guide-lead { max-width: 760px; font-size: clamp(.96rem,1.7vw,1.08rem); line-height: 1.85; color: #454050; }
#app-shell .user-guide .guide-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
#app-shell .user-guide .guide-footnote { font-size: .78rem; line-height: 1.75; color: #706b77; margin: 15px 0 0; }
#app-shell .user-guide .guide-section { margin-top: 35px; }
#app-shell .user-guide .guide-section-heading { margin: 0 0 15px; }
#app-shell .user-guide .guide-section-heading h2 { margin: 6px 0 7px; font-size: clamp(1.22rem,2.3vw,1.55rem); line-height: 1.4; color: #39324a; }
#app-shell .user-guide .guide-section-heading p { margin: 0; color: #696575; line-height: 1.8; }
#app-shell .user-guide .guide-paths, #app-shell .user-guide .guide-hosts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: stretch; }
#app-shell .user-guide .guide-path { padding: 22px 23px; border-radius: 15px; display: flex; flex-direction: column; gap: 12px; line-height: 1.75; }
#app-shell .user-guide .guide-path-human { border-color: #d7e4d1; background: linear-gradient(155deg,#f1fae7,#fffdfa 44%); }
#app-shell .user-guide .guide-path-bot { border-color: #ded7ef; background: linear-gradient(155deg,#f2eafe,#fffdfa 44%); }
#app-shell .user-guide .guide-path-heading { display: flex; align-items: center; gap: 12px; }
#app-shell .user-guide .guide-path-heading img { flex: none; border-radius: 12px; object-fit: contain; }
#app-shell .user-guide .guide-path-kicker { display: block; font-size: .67rem; font-weight: 750; letter-spacing: .1em; color: #7e7196; }
#app-shell .user-guide .guide-path h3 { margin: 3px 0 0; font-size: 1.16rem; }
#app-shell .user-guide .guide-path p { margin: 0; color: #615b6c; }
#app-shell .user-guide .guide-path ol { margin: 0 0 4px; padding: 0 0 0 23px; flex: 1; }
#app-shell .user-guide .guide-path li { padding: 0 0 10px 2px; }
#app-shell .user-guide .guide-path .btn { align-self: flex-start; }
#app-shell .user-guide .guide-scenarios { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
#app-shell .user-guide .guide-scenario { position: relative; min-width: 0; padding: 20px; border-radius: 14px; border-color: #eee0d2; background: #fffefa; }
#app-shell .user-guide .guide-scenario-no { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .09em; color: #9d7caa; }
#app-shell .user-guide .guide-scenario h3 { margin: 7px 0; font-size: .98rem; }
#app-shell .user-guide .guide-scenario p { margin: 0; line-height: 1.85; color: #615c65; font-size: .86rem; }
#app-shell .user-guide .guide-loop { padding: 20px; border-color: #d7e3d0; background: linear-gradient(100deg,#f9fff0,#fffdf6); }
#app-shell .user-guide .guide-loop-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#app-shell .user-guide .guide-loop-stages > div { min-width: 0; padding: 14px; border: 1px solid #e7e6d5; border-radius: 11px; background: #fffefd; }
#app-shell .user-guide .guide-loop-stages span { display: block; color: #8c75ad; font-weight: 800; font-size: .7rem; margin-bottom: 6px; }
#app-shell .user-guide .guide-loop-stages strong { display: block; color: #3a3650; font-size: .88rem; }
#app-shell .user-guide .guide-loop-stages small { display: block; margin-top: 4px; color: #7b7481; font-size: .74rem; }
#app-shell .user-guide .guide-hosts { margin-top: 15px; }
#app-shell .user-guide .guide-host { padding: 20px 22px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
#app-shell .user-guide .guide-host h3 { margin: 0; font-size: 1.04rem; }
#app-shell .user-guide .guide-host p { margin: 0; color: #5e5b68; line-height: 1.8; }
#app-shell .user-guide .guide-host > a:last-child { margin-top: auto; font-size: .84rem; }
#app-shell .user-guide .guide-prompt-card { margin-top: 15px; padding: 22px; border-radius: 14px; }
#app-shell .user-guide .guide-prompt-card h3 { margin: 0 0 8px; }
#app-shell .user-guide .guide-prompt-card > p { line-height: 1.8; }
#app-shell .user-guide .guide-prompt { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; margin: 13px 0; border: 1px solid #dcd8e8; border-radius: 11px; padding: 16px; background: #f7f6fc; color: #48425d; font-size: .79rem; line-height: 1.8; }
#app-shell .user-guide .guide-boundaries { border-color: #e0d8e5; background: #fffdf9; padding: 23px; border-radius: 15px; }
#app-shell .user-guide .guide-boundaries h2 { margin: 7px 0 12px; font-size: 1.22rem; }
#app-shell .user-guide .guide-boundaries p { margin: 8px 0; color: #615b6d; line-height: 1.85; }
#app-shell .user-guide .guide-boundaries .guide-hero-links a { font-size: .85rem; }
@media (max-width: 760px) {
  #app-shell .user-guide { padding-bottom: 12px; }
  #app-shell .user-guide .guide-hero { padding: 22px 18px; border-radius: 13px; }
  #app-shell .user-guide .guide-section { margin-top: 28px; }
  #app-shell .user-guide .guide-paths, #app-shell .user-guide .guide-hosts, #app-shell .user-guide .guide-scenarios { grid-template-columns: minmax(0,1fr); }
  #app-shell .user-guide .guide-loop-stages { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app-shell .user-guide .guide-path, #app-shell .user-guide .guide-prompt-card, #app-shell .user-guide .guide-boundaries { padding: 18px; }
}
@media (max-width: 410px) {
  #app-shell .user-guide .guide-loop-stages { grid-template-columns: minmax(0,1fr); }
  #app-shell .user-guide .guide-hero-links .btn { width: 100%; justify-content: center; }
}