.topbar{flex-wrap:wrap}
.header-actions{flex-wrap:wrap;justify-content:flex-end}
.guide-button{border:1px solid #bdcdf6;background:#eef3ff;color:#234db3;border-radius:10px;padding:.6rem .9rem;min-height:44px;font:inherit;font-size:.9375rem;font-weight:700;white-space:nowrap;cursor:pointer}
.guide-button:hover{background:#e0eaff}
.guide-button:focus-visible,.usage-guide button:focus-visible,.usage-guide summary:focus-visible{outline:3px solid #769cf5;outline-offset:3px}
dialog.usage-guide{width:min(820px,calc(100vw - 2rem));max-width:none;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);padding:0;border:1px solid #dce3ee;border-radius:18px;overflow:hidden;color:#182338}
dialog.usage-guide[open]{display:flex;flex-direction:column}
.usage-guide .dialog-header,.usage-guide .dialog-footer{flex:none;background:white;padding:1rem 1.5rem}
.usage-guide .dialog-header h2{font-size:1.3rem;margin:0}
.usage-guide .icon-button{min-width:44px;min-height:44px}
.usage-guide .dialog-footer{border-top:1px solid #e0e6ef}
.guide-body{overflow-y:auto;overscroll-behavior:contain;padding:1.25rem 1.5rem 1.5rem;min-height:0;font-size:1rem;line-height:1.8}
.guide-intro{margin:0 0 1rem;color:#526079}
.guide-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:1.5rem}
.guide-roles button{border:1px solid #d8e1ef;border-radius:10px;background:#fff;padding:.8rem .45rem;min-height:52px;font:inherit;line-height:1.4;font-weight:650;color:#354761;cursor:pointer;word-break:keep-all}
.guide-roles button[aria-pressed=true]{background:#2455e7;border-color:#2455e7;color:#fff}
.guide-content h3{font-size:1.2rem;line-height:1.5;margin:0 0 .6rem;word-break:keep-all}
.guide-description{color:#526079;margin:0 0 1.3rem}
.guide-steps{list-style:none;counter-reset:guide-step;margin:0;padding:0;display:grid;gap:.85rem}
.guide-steps>li{counter-increment:guide-step;position:relative;background:#f7f9fd;border:1px solid #e2e8f2;border-radius:12px;padding:1rem 1rem 1rem 3.7rem}
.guide-steps>li::before{content:counter(guide-step);position:absolute;left:1rem;top:1.05rem;width:1.8rem;height:1.8rem;display:grid;place-items:center;background:#e4edff;color:#234db3;border-radius:50%;font-weight:800;line-height:1}
.guide-content h4{font-size:1rem;line-height:1.6;margin:0 0 .3rem;font-weight:750}
.guide-content p{overflow-wrap:anywhere;word-break:keep-all}
.guide-steps p{margin:0;color:#354761}
.guide-note{margin:1.15rem 0 1.5rem;padding:1rem 1.15rem;border-left:4px solid #d99731;background:#fff7e7;border-radius:8px;color:#704709}
.guide-payments{display:grid;gap:.75rem;margin:1.5rem 0}
.guide-payments article{border:1px solid #dae3f1;padding:1rem 1.15rem;border-radius:10px}
.guide-payments article p{margin:0;color:#354761}
.guide-extra,.guide-faq details{border:1px solid #dce3ed;border-radius:10px;margin:.65rem 0;background:#fff}
.guide-extra summary,.guide-faq summary{cursor:pointer;padding:.95rem 1rem;min-height:48px;font-weight:650;line-height:1.7}
.guide-extra ol{padding:0 1.3rem 0 2.5rem;margin:.5rem 0 1rem}
.guide-extra li{padding-left:.25rem;margin:.8rem 0}
.guide-extra>p,.guide-faq details>p{margin:0;padding:0 1rem 1rem;color:#354761}
.guide-faq{margin-top:1.5rem}
@media(max-width:600px){
  .topbar{gap:.65rem}
  .header-actions{width:100%;justify-content:space-between}
  .guide-button{margin-right:auto}
  dialog.usage-guide{width:calc(100vw - 1rem);max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem);border-radius:14px}
  .usage-guide .dialog-header,.usage-guide .dialog-footer{padding:.8rem 1rem}
  .guide-body{padding:1rem}
  .guide-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-steps>li{padding:.9rem .85rem .9rem 3.1rem}
  .guide-steps>li::before{left:.7rem;top:1rem}
}