/* 设置页 · 存储占用与清理面板样式 */

.xhs-storage-panel { display: block; }

.xhs-storage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.xhs-storage-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid #2c313c;
  border-radius: 8px;
  background: #161c22;
}
.xhs-storage-stat > span { font-size: 11.5px; color: #8b93a4; }
.xhs-storage-stat > b { font-size: 19px; font-weight: 700; color: #eef1f6; line-height: 1.2; }
.xhs-storage-stat > small { font-size: 11px; color: #8b93a4; }
.xhs-storage-stat.is-warn { border-color: #6a5a2e; background: #221d12; }
.xhs-storage-stat.is-warn > b { color: #f2c96d; }

.xhs-storage-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.xhs-storage-clean {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #6a3a34;
  border-radius: 6px;
  background: #2a1b19;
  color: #f0a89c;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.xhs-storage-clean:hover:not(:disabled) { border-color: #a8544a; background: #34211e; color: #ffc4b8; }
.xhs-storage-clean:disabled { opacity: .4; cursor: not-allowed; }

/* 浅色主题 */
html[data-vr-theme="light"] .xhs-storage-stat { background: #fbf0f1; border-color: #f2dade; }
html[data-vr-theme="light"] .xhs-storage-stat > b { color: #2a2c31; }
html[data-vr-theme="light"] .xhs-storage-stat > span,
html[data-vr-theme="light"] .xhs-storage-stat > small { color: #8d9099; }
html[data-vr-theme="light"] .xhs-storage-stat.is-warn { background: #fdf8ec; border-color: #e8d9a8; }
html[data-vr-theme="light"] .xhs-storage-stat.is-warn > b { color: #c8801f; }
html[data-vr-theme="light"] .xhs-storage-clean { border-color: #e9a99c; background: #fdf3f4; color: #d8402f; }
html[data-vr-theme="light"] .xhs-storage-clean:hover:not(:disabled) { border-color: #d8402f; background: #fbe6e6; }