.admin-product-storage-panel {
  --storage-brand: #00afe9;
  --storage-ink: #111827;
  --storage-text: #344054;
  --storage-muted: #667085;
  --storage-helper: #98a2b3;
  --storage-border: #e8edf5;
  --storage-bg: #f7fbff;
  --storage-soft: #e7f8fe;
  --storage-error: #cd140f;
  --storage-running: #03b144;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--storage-border);
  border-radius: var(--rect-radius, 8px);
  background: #fff;
  color: var(--storage-text);
  font: 400 14px/22px "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color-scheme: light;
  text-align: left;
}
.admin-product-storage-panel * { box-sizing: border-box; }
.admin-product-storage-panel h1,
.admin-product-storage-panel h2,
.admin-product-storage-panel h3,
.admin-product-storage-panel p { margin: 0; }
.admin-product-storage-panel h1 {
  color: var(--storage-ink);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.admin-product-storage-panel h2 { color: var(--storage-ink); font-size: 18px; line-height: 26px; font-weight: 700; }
.admin-product-storage-panel h3 { color: var(--storage-ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.admin-product-storage-panel svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; }
.admin-product-storage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-product-storage-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-product-storage-button,
.admin-product-storage-input {
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--storage-border);
  border-radius: var(--rect-radius, 8px);
  background: #fff;
  color: var(--storage-text);
  padding: 0 16px;
  font: 400 14px/22px "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  text-align: center;
}
.admin-product-storage-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.admin-product-storage-button.is-icon { width: 40px; padding: 0; flex-shrink: 0; }
.admin-product-storage-button.is-accent { color: var(--storage-brand); border-color: #c7ecf8; }
.admin-product-storage-button.is-primary {
  height: 44px;
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(90deg, #00afe9, #5cc8f4);
  box-shadow: 0 4px 12px rgb(0 175 233 / 18%);
}
.admin-product-storage-button:not(:disabled):hover { border-color: #c7ecf8; background: var(--storage-bg); }
.admin-product-storage-button.is-primary:not(:disabled):hover { background: linear-gradient(90deg, #00afe9, #5cc8f4); filter: brightness(1.03); }
.admin-product-storage-button:not(:disabled):active { transform: translateY(1px); }
.admin-product-storage-panel :is(button, input, select):focus-visible { outline: 2px solid var(--storage-brand); outline-offset: 2px; }
.admin-product-storage-panel button:disabled {
  color: var(--storage-helper);
  background: #f2f4f7;
  border-color: var(--storage-border);
  box-shadow: none;
  cursor: not-allowed;
}
.admin-product-storage-tabs { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--storage-border); margin: 24px 0; }
.admin-product-storage-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: #fff;
  color: var(--storage-muted);
  font: 400 14px/22px "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  cursor: pointer;
}
.admin-product-storage-tab[aria-selected="true"] { color: var(--storage-brand); border-bottom-color: var(--storage-brand); font-weight: 600; }
.admin-product-storage-tab:hover { color: var(--storage-brand); }
.admin-product-storage-content { flex: 1; min-width: 0; }
.admin-product-storage-runtime { margin-bottom: 24px; }
.admin-product-storage-runtime > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--storage-text); font-size: 14px; line-height: 22px; }
.admin-product-storage-runtime > p { margin: 8px 0 0; color: var(--storage-muted); font-size: 12px; line-height: 18px; }
.admin-product-storage-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-product-storage-kpi { min-width: 0; padding: 16px; border: 1px solid var(--storage-border); border-radius: var(--rect-radius, 8px); background: var(--storage-bg); }
.admin-product-storage-kpi > span { display: block; color: var(--storage-muted); font-size: 12px; line-height: 18px; font-weight: 400; }
.admin-product-storage-kpi > strong { display: block; margin-top: 8px; color: var(--storage-ink); font-size: 28px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-product-storage-kpi.is-synced > strong { color: var(--storage-brand); }
.admin-product-storage-kpi.is-error > strong { color: var(--storage-error); }
.admin-product-storage-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-product-storage-nas-summary { padding: 16px; margin-bottom: 24px; border: 1px solid var(--storage-border); border-radius: var(--rect-radius, 8px); background: #fff; }
.admin-product-storage-nas-summary h3 { display: flex; align-items: center; gap: 8px; }
.admin-product-storage-nas-summary h3 svg { color: var(--storage-brand); }
.admin-product-storage-nas-summary dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 16px 0 0; }
.admin-product-storage-nas-summary dl > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.admin-product-storage-nas-summary dt { color: var(--storage-muted); font-size: 12px; line-height: 18px; font-weight: 400; }
.admin-product-storage-nas-summary dd { margin: 0; font-size: 14px; line-height: 22px; font-weight: 400; overflow-wrap: anywhere; }
.admin-product-storage-section-head { margin-bottom: 16px; }
.admin-product-storage-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  border-radius: var(--rect-radius, 8px);
  background: transparent;
  color: var(--storage-brand);
  font: 400 14px/22px "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.admin-product-storage-link:not(:disabled):hover { text-decoration: underline; }
.admin-product-storage-link:not(:disabled):active { opacity: .75; }
.admin-product-storage-table-wrap { overflow-x: auto; border: 1px solid var(--storage-border); border-radius: var(--rect-radius, 8px); background: #fff; }
.admin-product-storage-table { width: 100%; min-width: 600px; border-collapse: collapse; table-layout: fixed; color: var(--storage-text); font-size: 14px; line-height: 22px; }
.admin-product-storage-table th { height: 44px; padding: 0 16px; border-bottom: 1px solid var(--storage-border); background: #f8fafc; color: var(--storage-muted); text-align: left; font-size: 14px; line-height: 22px; font-weight: 400; }
.admin-product-storage-table td { height: 64px; padding: 8px 16px; border-bottom: 1px solid var(--storage-border); vertical-align: middle; overflow-wrap: anywhere; text-align: left; font-size: 14px; line-height: 22px; font-weight: 400; }
.admin-product-storage-table tbody tr:last-child td { border-bottom: 0; }
/* Explicit page-local approval: names stay 16 / 24 / 400 at every desktop tier. */
.admin-product-storage-filename {
  display: block;
  color: var(--storage-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-product-storage-time-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 18px; }
.admin-product-storage-time-row > span { white-space: nowrap; }
/* COS-local approval: all status chips stay 12 / 16 / 400 at every desktop tier. */
.admin-product-storage-status { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--storage-border); border-radius: 999px; background: #f2f4f7; color: var(--storage-muted); font-size: 12px; line-height: 16px; font-weight: 400; white-space: nowrap; }
.admin-product-storage-status.is-done { background: var(--storage-soft); color: var(--storage-brand); border-color: #c7ecf8; }
.admin-product-storage-status.is-running { background: #edfff5; color: var(--storage-running); border-color: #c5efd6; }
.admin-product-storage-status.is-failed { background: #fff2f0; color: var(--storage-error); border-color: #f4cfcc; }
.admin-product-storage-filterbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-product-storage-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.admin-product-storage-field > span { font-size: 14px; line-height: 22px; font-weight: 400; }
.admin-product-storage-field select { min-width: 128px; text-align: center; text-align-last: center; }
.admin-product-storage-search { flex: 1; min-width: 160px; }
.admin-product-storage-searchbox { display: flex; align-items: center; gap: 8px; }
.admin-product-storage-searchbox input { width: 100%; min-width: 0; text-align: left; }
.admin-product-storage-searchbox input::placeholder { color: var(--storage-helper); opacity: 1; }
.admin-product-storage-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 16px; color: var(--storage-muted); }
.admin-product-storage-paging-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-product-storage-button.is-page { min-width: 40px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.admin-product-storage-button[aria-current="page"] { background: var(--storage-brand); color: #fff; border-color: var(--storage-brand); }
.admin-product-storage-page-size { text-align: center; text-align-last: center; padding: 0 8px; }
.admin-product-storage-state-box { min-height: 232px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--storage-border); border-radius: var(--rect-radius, 8px); background: #fff; text-align: center; }
.admin-product-storage-state-box > svg { width: 32px; height: 32px; color: var(--storage-helper); }
.admin-product-storage-state-box > p { color: var(--storage-muted); }
.admin-product-storage-state-box.is-error > svg { color: var(--storage-error); }
.admin-product-storage-muted { color: var(--storage-muted); }
.admin-product-storage-panel .admin-product-storage-readonly { margin: 0 0 16px; color: var(--storage-muted); }
.admin-product-storage-panel .admin-product-storage-notice { margin-top: 16px; color: var(--storage-brand); }
.admin-product-storage-panel .admin-product-storage-notice.is-error { color: var(--storage-error); }
.admin-product-storage-confirm { width: 440px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--storage-border); border-radius: var(--rect-radius, 8px); background: #fff; color: var(--storage-text); font: 400 14px/22px "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif; box-shadow: 0 16px 48px rgb(16 24 40 / 12%); }
.admin-product-storage-confirm::backdrop { background: rgb(16 24 40 / 28%); }
.admin-product-storage-confirm h2 { margin: 0 0 12px; }
.admin-product-storage-confirm p { overflow-wrap: anywhere; }
.admin-product-storage-confirm-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 1600px) {
  .admin-product-storage-panel h1 { font-size: 24px; line-height: 32px; }
}
@media (min-width: 1920px) {
  .admin-product-storage-panel h1 { font-size: 30px; line-height: 38px; }
  .admin-product-storage-panel h2 { font-size: 24px; line-height: 32px; font-weight: 500; }
  .admin-product-storage-panel h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
  .admin-product-storage-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .admin-product-storage-button.is-primary { font-weight: 400; }
  .admin-product-storage-tab[aria-selected="true"] { font-weight: 500; }
  .admin-product-storage-time-row { font-size: 10px; line-height: 16px; }
}
@media (max-width: 1100px) {
  .admin-product-storage-nas-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}