.account-nav { margin-bottom:1rem; }
.account-nav [aria-pressed=true],.hb-shell [data-mode][aria-pressed=true] { color:#080808; background:var(--yellow); border-color:var(--yellow); }
.campaign-lobby > .lobby-header h1 { font-size:2rem; margin-bottom:.5rem; }
.hb-shell { min-width:0; width:100%; }
.hb-shell h2 { font-size:1.4rem; }
.hb-filters { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin:1rem 0 .5rem; padding:.8rem; border:1px solid var(--line); border-top:2px solid var(--cyan); border-radius:.5rem; background:#0a161be8; }
.hb-filters label { flex:1 1 10rem; min-width:0; }
.hb-workspace { display:grid; grid-template-columns:minmax(15rem,.8fr) minmax(0,1.4fr); gap:1rem; min-height:16rem; height:clamp(16rem,64dvh,55rem); }
.hb-shell :is(button, a:where(.route-link)),.account-nav :is(button, a:where(.route-link)) { min-height:44px; }
.hb-list-pane,.hb-inspector { min-width:0; min-height:0; padding:.8rem; border:1px solid var(--line); border-radius:.6rem; background:#0c1012f2; overflow-y:auto; }
.hb-list-pane { display:flex; flex-direction:column; gap:.5rem; }
.hb-list { display:grid; gap:.35rem; }
.hb-row { display:grid; gap:.25rem; min-width:0; width:100%; text-align:left; background:#141719; padding:.75rem; min-height:44px; border-left:3px solid transparent; }
.hb-row small { overflow-wrap:anywhere; font-weight:400; }
.hb-row[aria-pressed=true] { border-left-color:var(--cyan); background:#0f2a31; }
.hb-description,.hb-definition dd { white-space:pre-wrap; overflow-wrap:anywhere; }
.hb-definition { display:grid; grid-template-columns:minmax(7rem,.4fr) minmax(0,1fr); gap:.5rem 1rem; font-size:.9rem; }
.hb-definition dt { color:var(--cyan); text-transform:capitalize; }
.hb-definition dd { margin:0; }
.hb-inspector p { overflow-wrap:anywhere; }
.hb-definition dd p { margin:.2rem 0 .6rem; }
.hb-preview-attack { margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); }
.hb-bundle { margin:.75rem 0; padding:.75rem; background:#11171ce8; border:1px solid var(--line); border-left:2px solid var(--cyan); border-radius:.5rem; }
.hb-bundle summary { padding:.35rem 0; cursor:pointer; font-weight:700; }
.hb-dialog { width:min(56rem,calc(100vw - 2rem)); max-width:calc(100vw - 2rem); max-height:calc(100dvh - 2rem); overflow:auto; padding:1.25rem; border-top:3px solid var(--pink); }
.hb-dialog > header { position:sticky; top:-1.25rem; z-index:1; padding:.7rem 0; background:#101010f5; }
.hb-dialog h2 { font-size:1.3rem; }
.hb-dialog :is(input,textarea,select) { min-width:0; max-width:100%; }
.hb-dialog .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hb-dialog :is(:is(button, a:where(.route-link)),summary) { min-height:44px; }
.hb-dialog fieldset { min-width:0; border:1px solid var(--line); border-radius:.5rem; margin:.5rem 0; padding:.8rem; }
.hb-dialog legend { color:var(--cyan); font-weight:700; }
.hb-dialog .inline-actions { flex-wrap:wrap; }
.hb-link { display:grid; grid-template-columns:minmax(6rem,.4fr) minmax(0,1fr) auto; gap:.5rem; align-items:end; margin:.5rem 0; }
.hb-attack { margin:.6rem 0; padding:.7rem; border:1px solid var(--line); }
.hb-result { padding:.5rem .75rem; margin:.75rem 0; border-left:2px solid var(--yellow); background:#1c190a; }
.hb-overlay { width:min(85rem,calc(100vw - 2rem)); }
.hb-back { display:none; }
@media(max-width:700px) {
 .hb-workspace { grid-template-columns:minmax(0,1fr); height:62dvh; }
 .hb-inspector { display:none; }
 .hb-selected .hb-inspector { display:block; }
 .hb-selected .hb-list-pane { display:none; }
 .hb-selected .hb-shell > header,.hb-selected .hb-shell > nav,.hb-selected .hb-filters { display:none; }
 .hb-back { display:inline-flex; margin-bottom:.75rem; }
 .hb-inspector .hb-back { position:sticky; top:0; z-index:1; background:#101010; }
 .hb-dialog { width:calc(100vw - 1rem); max-width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem); padding:.75rem; }
 .hb-dialog > header { top:-.75rem; }
 .hb-dialog .form-grid,.hb-link,.hb-definition { grid-template-columns:minmax(0,1fr); }
 .hb-definition dd { margin-bottom:.5rem; }
 .hb-shell .tab-row { flex-wrap:wrap; }
 .hb-filters { gap:.5rem; padding:.5rem; }
 .hb-filters label { flex-basis:100%; }
}
