.ui-bseries { display: grid; gap: 12px; margin: 0; padding: 16px 18px; border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-accent);
  border-radius: var(--ui-radius); background: var(--ui-surface); font: 15px/1.45 var(--ui-font); color: var(--ui-fg); }
.ui-bseries-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ui-bseries-count { color: var(--ui-accent); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ui-bseries-name { font-weight: 650; }
.ui-bseries-name a { color: inherit; text-decoration: none; border-radius: 3px; }
.ui-bseries-name a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bseries-name a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-bar { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-bseries-bar li { flex: 1; height: 5px; border-radius: 3px; background: var(--ui-border); }
.ui-bseries-bar .ui-bseries-done { background: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
.ui-bseries-bar .ui-bseries-here { background: var(--ui-accent); }
.ui-bseries-list summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--ui-muted); font-size: 14px;
  font-weight: 500; cursor: pointer; list-style: none; border-radius: 3px; }
.ui-bseries-list summary::-webkit-details-marker { display: none; }
.ui-bseries-list summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s; }
.ui-bseries-list[open] summary::before { transform: rotate(45deg); }
.ui-bseries-list summary:hover { color: var(--ui-accent); }
.ui-bseries-list summary:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-list ol { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: ui-bseries; }
.ui-bseries-list li { counter-increment: ui-bseries; display: flex; align-items: baseline; gap: 10px; padding: 5px 8px; border-radius: var(--ui-radius-sm); }
.ui-bseries-list li::before { content: counter(ui-bseries); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ui-subtle); color: var(--ui-muted); font-size: 12px; font-weight: 650; }
.ui-bseries-list li.ui-bseries-done::before { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-bseries-list li.ui-bseries-here { background: var(--ui-accent-soft); }
.ui-bseries-list li.ui-bseries-here::before { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-bseries-list li a { color: var(--ui-fg); text-decoration: none; border-radius: 3px; }
.ui-bseries-list li a:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-bseries-list li a:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-list li [aria-current] { font-weight: 650; }
.ui-bseries-soon { color: var(--ui-muted); }
.ui-bseries-step.ui-bseries-soon { border-style: dashed; }
.ui-bseries-list .ui-bseries-soon small { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ui-subtle); font-size: 12px; white-space: nowrap; }
.ui-bseries-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-bseries-step { display: grid; gap: 1px; min-width: 0; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  color: var(--ui-fg); text-decoration: none; font-size: 14px; }
.ui-bseries-step small { color: var(--ui-muted); font-size: 12px; }
.ui-bseries-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ui-bseries-next { grid-column: 2; text-align: end; }
a.ui-bseries-step:hover { border-color: var(--ui-accent); }
a.ui-bseries-step:hover span { color: var(--ui-accent); }
a.ui-bseries-step:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-bseries-bottom .ui-bseries-step { padding: 12px 16px; }
.ui-bseries-bottom .ui-bseries-step span { white-space: normal; font-size: 16px; }
@media (max-width: 480px) { .ui-bseries-steps { grid-template-columns: 1fr; } .ui-bseries-next { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-bseries-list summary::before { transition: none; } }