.panel-help-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:1.25rem; font-size:.875rem; }
.panel-help-bar > span:first-child { opacity:.75; }
.panel-help-bar button, #panel-guide button { border:1px solid var(--wl-fog); border-radius:.65rem; padding:.55rem .85rem; font:inherit; font-weight:600; cursor:pointer; }
.panel-help-bar button:hover, #panel-guide button:hover { background:color-mix(in srgb, var(--wl-fog) 14%, transparent); }
.panel-help-bar button:focus-visible, #panel-guide button:focus-visible { outline:3px solid rgb(var(--acc-600)); outline-offset:3px; }
#guide-save-status { flex-basis:100%; font-size:.8rem; }
#guide-save-status:empty { display:none; }
#panel-guide { box-sizing:border-box; width:calc(100% - 2rem); max-width:38rem; max-height:85dvh; overflow:auto; margin:auto; padding:1.5rem; border:1px solid var(--wl-fog); border-radius:1rem; background:var(--wl-white); color:var(--wl-graphite); }
#panel-guide::backdrop { background:color-mix(in srgb, var(--wl-void) 72%, transparent); }
.dark #panel-guide { background:var(--wl-obsidian); color:var(--wl-frost); border-color:var(--wl-line); }
#panel-guide .guide-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
#guide-progress { font-size:.8rem; font-weight:600; }
#panel-guide h2 { font-size:1.65rem; line-height:1.2; font-weight:700; margin:1.25rem 0 .75rem; }
#panel-guide h3 { font-size:.9rem; font-weight:700; margin:1.25rem 0 .6rem; }
#guide-summary, #guide-steps, #guide-tip { font-size:.95rem; line-height:1.65; }
#guide-steps { list-style:decimal; padding-left:1.5rem; }
#guide-steps li { padding-left:.3rem; margin:.65rem 0; }
#guide-tip { padding:1rem; background:color-mix(in srgb, var(--wl-fog) 12%, transparent); border-left:3px solid rgb(var(--acc-600)); border-radius:.3rem; margin-top:1.2rem; }
#panel-guide .guide-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; margin-top:1.5rem; }
#panel-guide [hidden] { display:none !important; }
#panel-guide [data-guide-next], #panel-guide [data-guide-start] { background:var(--wl-graphite); color:var(--wl-frost); border-color:var(--wl-line); }
@media (max-width:480px) { #panel-guide { padding:1rem; } #panel-guide h2 { font-size:1.35rem; } }

.dark #panel-guide [data-guide-next], .dark #panel-guide [data-guide-start] { background:rgb(var(--acc-500)); color:var(--wl-void); border-color:transparent; }
.panel-help-bar button, #panel-guide button { min-height:46px; }
.panel-help-bar [hidden] { display:none !important; }
.panel-help-bar button, #panel-guide button { color:inherit; background:transparent; }
#panel-guide { font-family:var(--wl-font-sans); }
#panel-guide [data-guide-next], #panel-guide [data-guide-start] { background:var(--wl-graphite); color:var(--wl-frost); }
.dark #panel-guide [data-guide-next], .dark #panel-guide [data-guide-start] { background:rgb(var(--acc-500)); color:var(--wl-void); }
