#storage-meter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #e9c3a1;
  border-radius: 13px;
  color: #54311e;
  background: linear-gradient(155deg, #fff8e9, #f9e1c5);
  box-shadow: inset 0 1px 0 #fff9;
  text-align: left;
  min-width: 0;
}
#storage-meter:hover { border-color: #c87942; background: linear-gradient(155deg, #fff5df, #f9d7b3); }
.storage-meter-top, .usage-row-line { display: flex; justify-content: space-between; align-items: baseline; gap: 7px; }
#storage-meter-percent, .usage-metric { font-variant-numeric: tabular-nums; white-space: nowrap; }
#storage-meter-percent { color: #903b14; }
#storage-meter-value { color: #6d4a35; font-weight: 500; }
.usage-track { display: block; height: 6px; border-radius: 99px; overflow: hidden; background: #ab713328; }
.usage-track > span { display: block; width: var(--used); height: 100%; border-radius: inherit; background: var(--slice, #eb792c); }
#storage-meter-fill { background: linear-gradient(#ffc084, #dc631d); }

#storage-detail {
  box-sizing: border-box;
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100% - 30px);
  max-height: calc(100dvh - 30px);
  padding: clamp(14px, 4vw, 25px);
  overflow: auto;
  overscroll-behavior: contain;
  color: #40271b;
  background: linear-gradient(155deg, #fffbf5 24%, #fff0de);
  border: 1px solid #e3be9e;
  border-radius: 24px;
  box-shadow: 0 24px 76px #3c200646, inset 0 1px 0 #fff;
}
#storage-detail::backdrop { background: #34241865; backdrop-filter: blur(5px); }
.storage-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.storage-header h2 { margin: 4px 0 0; font-size: clamp(1.7rem, 5.5vw, 2.35rem); letter-spacing: -.05em; line-height: 1; }
.storage-eyebrow { color: #984020; font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
#storage-close { flex: none; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1.45rem; line-height: 1; }
.storage-visual {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 10px 0 13px;
  padding: 0 0 12px;
  border: 1px solid #e8caaa;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #ffe2b7 1%, #fff8ed 69%);
  box-shadow: inset 0 1px 0 #fff;
}
#storage-chart { width: 100%; }
.storage-caption { display: grid; gap: 2px; position: relative; text-align: center; }
.storage-caption strong { font-size: clamp(1.35rem, 5vw, 1.95rem); letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.storage-caption span, .storage-list-header span { color: #70513e; font-size: .79rem; }
.storage-list-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; margin-bottom: 5px; }
.storage-list-header h3 { font-size: .99rem; margin: 0; }
#storage-breakdown { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid #b8876230; }
.usage-row:last-child { border-bottom: 0; }
.usage-row-line { margin-bottom: 5px; font-size: .83rem; }
.usage-category { display: inline-flex; align-items: center; gap: 6px; }
.usage-swatch { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--slice); }
.usage-metric { font-size: .73rem; color: #70513e; }
.usage-manage { min-height: 44px; padding: 4px 9px; font-size: .77rem; }
#clear-category { color: #8d3c18; background: #fff0de; }