.stor-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px 6px; }
.stor-donut { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; }
.stor-hole {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
}
.stor-hole b { font-size: 18px; line-height: 22px; }
.stor-hole span, .stor-free, .stor-debug { color: var(--muted); font-size: 13px; line-height: 18px; }
.stor-free { margin: 4px 0 0; }
.stor-list { display: flex; flex-direction: column; }
.stor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.stor-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.stor-meta { flex: 1; min-width: 0; }
.stor-meta b { display: block; font-size: 15px; line-height: 20px; }
.stor-bar { height: 4px; border-radius: 4px; background: var(--line); margin-top: 6px; overflow: hidden; }
.stor-bar i { display: block; height: 100%; border-radius: 4px; }
.stor-size { color: var(--muted); font-size: 13px; flex: none; }
.stor-clear { flex: none; min-height: 32px; padding: 4px 10px; }
.stor-slider { width: 100%; margin: 4px 0 14px; accent-color: var(--blue, #1d9bf0); }
.stor-debug { padding: 4px 16px 24px; }
.stor-controls .danger { margin-top: 8px; }
.is-pending { box-shadow: inset 0 0 0 1px var(--accent, #3390ec); }
@media (prefers-reduced-motion: reduce) {
  .stor-bar i { transition: none; }
}