.sbp-root{--sbp-button-bg:#111827;--sbp-button-fg:#fff;--sbp-accent:#10b981}
.sbp-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.sbp-search{flex:1}
.sbp-grid{display:grid;gap:10px}
.sbp-button{border:0;border-radius:12px;padding:10px;cursor:pointer;background:var(--sbp-button-bg);color:var(--sbp-button-fg);display:flex;flex-direction:column;gap:6px;min-height:72px}
.sbp-title{font-weight:600;line-height:1.2}
.sbp-meta{font-size:12px;opacity:.8;display:flex;justify-content:space-between}
.sbp-chip{font-size:11px;padding:2px 6px;border-radius:999px;background:#00000020}
.sbp-ctrl{display:flex;gap:8px;align-items:center;margin-left:auto}
.sbp-kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;background:#00000020;border-radius:6px;padding:0 4px;font-size:11px}
.sbp-actions{display:flex;gap:6px;align-items:center}
.sbp-small{font-size:12px;opacity:.8}
.sbp-btn{border:1px solid #00000020;border-radius:10px;background:#fff;padding:6px 10px;cursor:pointer;color:#111827;white-space:nowrap}
.sbp-btn.fav.active{background:var(--sbp-accent); color:#000; font-weight:600}
.sbp-filterbar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.sbp-filter{cursor:pointer;border-radius:999px;border:1px solid #00000020;padding:4px 10px;white-space:nowrap}
.sbp-filter.active{background:var(--sbp-accent)}
.sbp-fx{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0;padding:8px;border:1px dashed #0000001a;border-radius:12px}
.sbp-fx label{font-size:12px;opacity:.9;margin-right:6px}
.sbp-fx .sbp-field{display:flex;align-items:center;gap:6px}
.sbp-fx .sbp-num{width:72px}
.sbp-val{font-variant-numeric: tabular-nums; font-size:12px; padding:2px 6px; border-radius:6px; background:#00000012}
.sbp-fx .sbp-field>button{margin-left:6px}
.sbp-drumbar{display:flex;align-items:center;gap:8px;margin:8px 0}
@media (max-width:640px){.sbp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}