:root {
  color-scheme: light;
  --bg: #f7f9fc !important;
  --panel: rgba(255,255,255,0.88) !important;
  --panel2: rgba(255,255,255,0.98) !important;
  --text: rgba(17,24,39,0.96) !important;
  --muted: rgba(55,65,81,0.82) !important;
  --line: rgba(17,24,39,0.14) !important;
  --shadow: 0 16px 38px rgba(15,23,42,0.18) !important;
  --good: rgba(8,139,89,0.95) !important;
  --warn: rgba(180,83,9,0.95) !important;
  --bad: rgba(185,28,28,0.95) !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b1020 !important;
    --panel: rgba(255,255,255,0.08) !important;
    --panel2: rgba(255,255,255,0.12) !important;
    --text: rgba(255,255,255,0.92) !important;
    --muted: rgba(255,255,255,0.70) !important;
    --line: rgba(255,255,255,0.14) !important;
    --shadow: 0 18px 50px rgba(0,0,0,0.45) !important;
    --good: rgba(130,255,190,0.95) !important;
    --warn: rgba(255,210,130,0.95) !important;
    --bad: rgba(255,140,140,0.95) !important;
  }
}

#viewerMimeInfo {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

#viewerMimeInfo summary {
  cursor: pointer;
  color: var(--text);
}

#viewerMimeInfo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 8px;
}

#viewerMetaFallback {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 99999;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  max-height: 38vh;
  overflow: auto;
}