: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;
}

.btn,
.media-btn {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.btn:focus-visible,
.media-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(72, 138, 255, 0.32);
}

#browseBtn.btn,
.btn#browseBtn,
.media-btn.primary {
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  #browseBtn.btn,
  .btn#browseBtn,
  .media-btn.primary {
    background: linear-gradient(180deg, rgba(90, 162, 255, 0.30), rgba(46, 112, 204, 0.34)) !important;
    border-color: rgba(138, 190, 255, 0.75) !important;
    color: rgba(245, 249, 255, 0.98) !important;
    box-shadow: 0 10px 24px rgba(18, 56, 114, 0.40);
  }

  #browseBtn.btn:hover,
  .btn#browseBtn:hover,
  .media-btn.primary:hover {
    background: linear-gradient(180deg, rgba(110, 176, 255, 0.42), rgba(58, 126, 220, 0.42)) !important;
    border-color: rgba(166, 206, 255, 0.88) !important;
  }
}

html.hide-url-ui #urlInput,
html.hide-url-ui #loadUrlBtn,
html.hide-url-ui input.url,
html.hide-url-ui .url,
html.hide-url-ui input.media-field#urlInput,
html.hide-url-ui .media-controls #loadUrlBtn {
  display: none !important;
}

html.hide-drop-ui #drop,
html.hide-drop-ui .drop,
html.hide-drop-ui #dropOverlay,
html.hide-drop-ui #overlay,
html.hide-drop-ui .media-drop-overlay {
  display: none !important;
}

html.is-embedded #faqFooter,
html.is-embedded .faq,
html.is-embedded .footerCard,
html.is-embedded .media-footer,
html.is-embedded #dropOverlay,
html.is-embedded #overlay,
html.is-embedded .dropCard,
html.is-embedded .media-drop-overlay,
html.is-embedded #drop,
html.is-embedded .drop {
  display: none !important;
}

html.is-embedded header h1,
html.is-embedded header .sub,
html.is-embedded .media-title,
html.is-embedded .media-sub,
html.is-embedded #app > section.panel:first-child > h1,
html.is-embedded #app > section.panel:first-child > .sub,
html.is-embedded .controls,
html.is-embedded .media-controls {
  display: none !important;
}

html.is-embedded header {
  margin: 0 !important;
  top: 0 !important;
}

html.is-embedded main {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

html.is-embedded #app {
  padding: 8px !important;
  gap: 8px !important;
}

html.is-embedded #app > section.panel:first-child,
html.is-embedded .media-panel {
  padding: 8px 10px !important;
}

html.url-query-mode header,
html.url-query-mode footer,
html.url-query-mode #faqFooter,
html.url-query-mode .footerCard,
html.url-query-mode .site-footer,
html.url-query-mode .dropCard {
  display: none !important;
}