.dhv-volume{display:grid;gap:14px;padding:16px}
.dhv-volume__head{display:flex;align-items:center;gap:12px}
.dhv-volume__heading{flex:1;min-width:0;display:grid;line-height:1.35}
.dhv-volume__heading strong{font-size:15px;color:var(--dhv-ink)}
.dhv-volume__heading span{font-size:13px;color:var(--dhv-muted)}
.dhv-volume__badge{flex:0 0 auto;padding:4px 10px;border-radius:999px;background:var(--dhv-accent);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap}
.dhv-volume .dhv-volume__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:4px}
.dhv-volume .dhv-volume__step{display:grid;gap:3px;margin:0;padding:0;text-align:center;font-size:12px;color:var(--dhv-muted);font-variant-numeric:tabular-nums}
.dhv-volume__step strong{font-size:13.5px;color:var(--dhv-ink)}
.dhv-volume__step.is-current strong{color:var(--dhv-accent)}
.dhv-volume__bar{display:block;height:8px;border-radius:4px;background:var(--dhv-line)}
.dhv-volume__step.is-reached .dhv-volume__bar{background:var(--dhv-accent)}
.dhv-volume__step.is-preview .dhv-volume__bar{background:repeating-linear-gradient(-45deg,var(--dhv-accent) 0 4px,var(--dhv-accent-soft) 4px 8px)}
.dhv-volume .dhv-volume__nudge{margin:0;padding-top:12px;border-top:1px solid var(--dhv-line);display:grid;gap:2px}
.dhv-volume__main{font-size:14.5px;font-weight:700;color:var(--dhv-accent)}
.dhv-volume__detail{font-size:13px;color:var(--dhv-muted)}
@media(prefers-reduced-motion:no-preference){.dhv-volume__bar{transition:background .2s}}