style.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@300..600,0..1&display=swap");

:root,
.dark,
.light,
.gradio-container {
  color-scheme: dark !important;
  --avm-background: #0f1115 !important;
  --avm-surface: #171a21 !important;
  --avm-surface-2: #20232a !important;
  --avm-surface-3: #292b31 !important;
  --avm-panel: rgba(255, 255, 255, 0.055) !important;
  --avm-panel-strong: rgba(255, 255, 255, 0.078) !important;
  --avm-border: rgba(255, 255, 255, 0.125) !important;
  --avm-border-soft: rgba(255, 255, 255, 0.075) !important;
  --avm-text: #f0f0f4 !important;
  --avm-text-soft: rgba(240, 240, 244, 0.74) !important;
  --avm-muted: #bda79d !important;
  --avm-primary: #ff5c00 !important;
  --avm-primary-soft: #ffb59a !important;
  --avm-secondary: #40e0cb !important;
  --avm-danger: #ffb4ab !important;
  --avm-radius: 8px !important;
  --avm-shadow: 0 18px 54px rgba(0, 0, 0, 0.34) !important;
  --body-background-fill: #0f1115 !important;
  --body-text-color: #f0f0f4 !important;
  --body-text-color-subdued: rgba(240, 240, 244, 0.68) !important;
  --background-fill-primary: #0f1115 !important;
  --background-fill-secondary: #171a21 !important;
  --border-color-primary: rgba(255, 255, 255, 0.125) !important;
  --border-color-accent: #ff5c00 !important;
  --block-background-fill: rgba(255, 255, 255, 0.055) !important;
  --block-border-color: rgba(255, 255, 255, 0.125) !important;
  --block-label-background-fill: transparent !important;
  --block-label-text-color: #f0f0f4 !important;
  --block-title-text-color: #f0f0f4 !important;
  --panel-background-fill: rgba(255, 255, 255, 0.045) !important;
  --panel-border-color: rgba(255, 255, 255, 0.12) !important;
  --input-background-fill: #2a2b31 !important;
  --input-background-fill-focus: #32343b !important;
  --input-border-color: rgba(255, 255, 255, 0.14) !important;
  --input-border-color-focus: #ff5c00 !important;
  --input-placeholder-color: rgba(240, 240, 244, 0.42) !important;
  --input-text-color: #f0f0f4 !important;
  --button-primary-background-fill: linear-gradient(135deg, #ff5c00, #ff8a3d) !important;
  --button-primary-text-color: #2a0c00 !important;
  --button-secondary-background-fill: rgba(255, 255, 255, 0.045) !important;
  --button-secondary-border-color: rgba(64, 224, 203, 0.45) !important;
  --button-secondary-text-color: #40e0cb !important;
  --link-text-color: #40e0cb !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
.gradio-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 7% 0%, rgba(255, 92, 0, 0.16), transparent 27rem),
    radial-gradient(circle at 92% 14%, rgba(64, 224, 203, 0.11), transparent 28rem),
    var(--avm-background) !important;
  color: var(--avm-text) !important;
  font-family: "Inter", Arial, sans-serif !important;
}

.gradio-container,
.gradio-container * {
  color-scheme: dark !important;
}

.gradio-container {
  min-height: 100vh;
}

#avm-shell {
  width: min(1400px, calc(100vw - clamp(16px, 4vw, 64px))) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) 0 clamp(30px, 4vw, 52px);
  gap: clamp(16px, 2.2vw, 24px);
  overflow-x: hidden;
}

#avm-shell,
#avm-shell > *,
#avm-shell .block,
#avm-shell .html-container,
#avm-shell .form,
#avm-shell .row,
#avm-shell .column,
#avm-shell [class*="row"],
#avm-shell [class*="column"] {
  max-width: 100% !important;
  min-width: 0 !important;
}

.avm-panel,
.glass-card {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden;
  padding: clamp(16px, 1.7vw, 22px) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.038)),
    rgba(23, 26, 33, 0.74) !important;
  border: 1px solid var(--avm-border) !important;
  border-radius: var(--avm-radius) !important;
  box-shadow: var(--avm-shadow);
  backdrop-filter: blur(18px);
}

.avm-panel::before,
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--avm-primary), rgba(64, 224, 203, 0.72), transparent);
  opacity: 0.92;
  pointer-events: none;
}

.avm-panel-body {
  position: relative;
  z-index: 1;
}

.avm-hero,
.hero {
  padding: clamp(24px, 4vw, 44px) !important;
}

.hero-kicker,
.card-kicker {
  color: var(--avm-primary-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-kicker.secondary {
  color: var(--avm-secondary);
}

.card-kicker.muted {
  color: var(--avm-muted);
}

.card-kicker.error,
.avm-chip-error,
.avm-badge-error {
  color: var(--avm-danger);
}

.hero h1 {
  margin: 12px 0 12px;
  max-width: 920px;
  color: var(--avm-text);
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-size: clamp(1.9rem, 3.1vw, 3.05rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.hero p {
  max-width: 900px;
  margin: 0;
  color: var(--avm-text-soft);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.62;
}

.context-grid,
.main-grid,
.result-grid,
.main-grid > .form,
.result-grid > .form {
  display: grid !important;
  gap: clamp(14px, 1.6vw, 18px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.main-grid,
.main-grid > .form {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.result-grid,
.result-grid > .form {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.context-grid > *,
.main-grid > *,
.main-grid > .form > *,
.result-grid > *,
.result-grid > .form > *,
.input-row > *,
.input-row > .form > *,
.action-row > *,
.action-row > .form > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.context-card {
  min-height: clamp(140px, 11vw, 170px);
}

.card-title {
  margin: 10px 0 16px;
  color: var(--avm-text);
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avm-badge,
.avm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  max-width: 100%;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  color: rgba(240, 240, 244, 0.86);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.avm-chip-primary,
.avm-badge-primary {
  color: var(--avm-primary-soft);
}

.avm-chip-secondary,
.avm-badge-secondary {
  color: var(--avm-secondary);
}

.avm-panel-header,
.section-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 1.6vw, 20px);
  min-height: 58px;
  margin-bottom: clamp(16px, 1.7vw, 22px);
}

.avm-panel-header > div:first-child,
.section-header > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.avm-section-title,
.section-header h2 {
  margin: 0;
  color: var(--avm-text);
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-size: clamp(1.08rem, 1.35vw, 1.32rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

.avm-section-subtitle {
  max-width: 390px;
  color: rgba(240, 240, 244, 0.64);
}

.avm-section-subtitle p,
.section-header p {
  margin: 0;
  color: rgba(240, 240, 244, 0.64);
  font-size: 0.88rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--avm-primary-soft);
  font-family: "Material Symbols Outlined";
  font-size: 1.4rem;
  line-height: 1;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 24;
}

.autofill-card .material-symbols-outlined,
.report-card .material-symbols-outlined {
  color: var(--avm-secondary);
}

.gradio-container .form,
.gradio-container .wrap,
.gradio-container .container,
.gradio-container .input-container,
.gradio-container .block-background {
  color-scheme: dark !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  color: var(--avm-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.gradio-container .html-container,
.gradio-container .html-container.block,
.gradio-container .markdown,
.gradio-container .prose {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--avm-text) !important;
}

.input-row,
.action-row,
.input-row > .form,
.action-row > .form {
  gap: 14px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.input-row > *,
.input-row > .form > * {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.action-row {
  margin-top: 8px;
}

.action-row > *,
.action-row > .form > * {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.gradio-container label,
.gradio-container legend,
.gradio-container .label-wrap,
.gradio-container .label-wrap span,
.gradio-container .block-title,
.gradio-container .block-label,
.gradio-container [data-testid="block-label"] {
  background: transparent !important;
  color: rgba(240, 240, 244, 0.82) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gradio-container option,
.gradio-container [contenteditable="true"] {
  color-scheme: dark !important;
  background: #2a2b31 !important;
  color: var(--avm-text) !important;
  -webkit-text-fill-color: var(--avm-text) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  caret-color: var(--avm-primary-soft) !important;
}

.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
  color: rgba(240, 240, 244, 0.42) !important;
  -webkit-text-fill-color: rgba(240, 240, 244, 0.42) !important;
}

.gradio-container input:focus,
.gradio-container textarea:focus,
.gradio-container select:focus {
  border-color: var(--avm-primary) !important;
  box-shadow: 0 0 0 1px rgba(255, 92, 0, 0.26) !important;
}

.entry-card .block:not(.html-container),
.override-card .block:not(.html-container),
.report-card .block:not(.html-container),
.autofill-card .block:not(.html-container),
.result-card .block:not(.html-container) {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 7px !important;
  color: var(--avm-text) !important;
}

.gradio-container button {
  color-scheme: dark !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

.gradio-container button.primary-action,
.gradio-container button.primary {
  min-height: 44px;
  background: linear-gradient(135deg, var(--avm-primary), #ff8a3d) !important;
  border: 1px solid rgba(255, 181, 154, 0.54) !important;
  color: #2a0c00 !important;
  box-shadow: 0 0 22px rgba(255, 92, 0, 0.24);
}

.gradio-container button.secondary-action {
  min-height: 44px;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(64, 224, 203, 0.5) !important;
  color: var(--avm-secondary) !important;
}

.avm-kpi-grid {
  gap: 12px;
}

.result-metrics,
.result-metrics.avm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.result-metrics {
  margin-bottom: 16px;
}

.avm-kpi-card,
.metric-card,
.avm-output-card {
  min-height: 92px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 7px;
}

.metric-card.main {
  border-color: rgba(255, 92, 0, 0.34);
}

.metric-card span,
.empty-title {
  display: block;
  color: rgba(240, 240, 244, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  color: var(--avm-text);
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  font-size: clamp(1.08rem, 1.35vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.metric-card.compact strong {
  color: var(--avm-secondary);
  font-size: 1rem;
}

.empty-state {
  min-height: 132px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

.empty-state.error {
  border-color: rgba(255, 180, 171, 0.45);
}

.empty-copy {
  margin-top: 10px;
  color: rgba(240, 240, 244, 0.66);
  line-height: 1.5;
}

.gradio-container .json-holder,
.gradio-container pre,
.gradio-container .cm-editor,
.gradio-container .cm-scroller,
.gradio-container .cm-content,
.gradio-container .cm-gutters {
  max-width: 100%;
  overflow-x: auto;
  background: rgba(10, 11, 15, 0.74) !important;
  color: rgba(240, 240, 244, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

.gradio-container .json-holder,
.gradio-container .cm-editor {
  border-radius: 7px !important;
}

.report-card .block,
.report-card .wrap,
.report-card .container,
.report-card [data-testid*="file"],
.report-card .file-preview,
.report-card .upload-container {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--avm-text) !important;
}

.report-card a,
.report-card button {
  color: var(--avm-secondary) !important;
}

.override-card summary,
.model-status summary,
.gradio-container details summary {
  color: var(--avm-text) !important;
  font-weight: 800 !important;
  background: transparent !important;
}

.model-status {
  margin-top: 4px;
}

@media (max-width: 1180px) {
  .context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-grid,
  .main-grid > .form,
  .result-grid,
  .result-grid > .form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  #avm-shell {
    width: min(100% - 24px, 760px) !important;
    padding-top: 22px;
    gap: 18px;
  }

  .avm-panel,
  .glass-card {
    padding: 16px !important;
  }

  .avm-panel-header,
  .section-header {
    flex-direction: column;
    min-height: 0;
    gap: 8px;
  }

  .avm-section-subtitle,
  .section-header p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  #avm-shell {
    width: calc(100vw - 16px) !important;
    padding: 14px 0 28px;
    gap: 14px;
  }

  .hero h1 {
    font-size: 1.65rem;
    line-height: 1.15;
  }

  .hero p {
    font-size: 0.92rem;
  }

  .context-grid,
  .main-grid,
  .main-grid > .form,
  .result-grid,
  .result-grid > .form,
  .result-metrics {
    grid-template-columns: 1fr;
    gap: 12px !important;
  }

  .input-row,
  .input-row > .form,
  .action-row,
  .action-row > .form {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .input-row > *,
  .input-row > .form > *,
  .action-row > .form > *,
  .action-row > * {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  .context-card,
  .metric-card,
  .empty-state {
    min-height: 0;
  }
}

/* Dark hardening for Hugging Face / Gradio light-mode wrappers. */
:root,
.light,
.dark,
.gradio-container {
  color-scheme: dark !important;
}

.gradio-container code,
.gradio-container code span,
.gradio-container .prose code,
.gradio-container .markdown code,
.gradio-container [data-testid="markdown"] code,
.gradio-container kbd {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.085) !important;
  color: var(--avm-text) !important;
  -webkit-text-fill-color: var(--avm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 6px;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: "Inter", "Consolas", ui-monospace, monospace !important;
  font-size: 0.86em;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.gradio-container pre {
  background: rgba(10, 11, 15, 0.82) !important;
  color: var(--avm-text) !important;
  -webkit-text-fill-color: var(--avm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.gradio-container pre code,
.gradio-container pre code span,
.gradio-container .cm-content span,
.gradio-container .json-holder span {
  display: inline;
  padding: 0;
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
}

.gradio-container label,
.gradio-container .block-label,
.gradio-container .label-wrap,
.gradio-container .label-wrap span,
.gradio-container [data-testid="block-label"] {
  background: transparent !important;
  color: rgba(240, 240, 244, 0.84) !important;
  -webkit-text-fill-color: rgba(240, 240, 244, 0.84) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gradio-container [data-testid="textbox"],
.gradio-container [data-testid="file"],
.gradio-container [data-testid="json"],
.gradio-container [data-testid="code"] {
  background: #2a2b31 !important;
  color: var(--avm-text) !important;
  -webkit-text-fill-color: var(--avm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.gradio-container input::placeholder,
.gradio-container textarea::placeholder {
  color: rgba(240, 240, 244, 0.42) !important;
  -webkit-text-fill-color: rgba(240, 240, 244, 0.42) !important;
}

.gradio-container input:focus,
.gradio-container textarea:focus,
.gradio-container select:focus {
  background: #32343b !important;
  border-color: var(--avm-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.gradio-container [data-testid="file"] *,
.gradio-container [data-testid="json"] *,
.gradio-container [data-testid="code"] *,
.gradio-container [data-testid="textbox"] * {
  text-shadow: none !important;
}

.gradio-container [class*="badge"],
.gradio-container [class*="chip"],
.gradio-container .avm-badge,
.gradio-container .avm-chip {
  background: rgba(255, 255, 255, 0.085) !important;
  color: rgba(240, 240, 244, 0.88) !important;
  -webkit-text-fill-color: rgba(240, 240, 244, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* File/PDF output hardening for Hugging Face / Gradio light-mode wrappers. */
.gradio-container [data-testid="file"],
.gradio-container .file-preview,
.gradio-container .file-preview-holder,
.gradio-container .file-preview-item,
.gradio-container .download,
.gradio-container a[download] {
  background: #111827 !important;
  color: #f5f7fb !important;
  -webkit-text-fill-color: #f5f7fb !important;
  border: 1px solid rgba(245, 247, 251, 0.14) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.gradio-container [data-testid="file"] *,
.gradio-container .file-preview *,
.gradio-container .file-preview-holder *,
.gradio-container .file-preview-item *,
.gradio-container .download *,
.gradio-container a[download] *,
.gradio-container [data-testid="file"] div,
.gradio-container [data-testid="file"] span,
.gradio-container [data-testid="file"] a,
.gradio-container [data-testid="file"] small,
.gradio-container .file-preview div,
.gradio-container .file-preview span,
.gradio-container .file-preview a,
.gradio-container .file-preview small,
.gradio-container .file-preview-holder div,
.gradio-container .file-preview-holder span,
.gradio-container .file-preview-holder a,
.gradio-container .file-preview-holder small,
.gradio-container .file-preview-item div,
.gradio-container .file-preview-item span,
.gradio-container .file-preview-item a,
.gradio-container .file-preview-item small,
.gradio-container .download div,
.gradio-container .download span,
.gradio-container .download a,
.gradio-container .download small,
.gradio-container a[download] span,
.gradio-container a[download] small {
  background: transparent !important;
  background-color: transparent !important;
  color: #f5f7fb !important;
  -webkit-text-fill-color: #f5f7fb !important;
  border-color: rgba(245, 247, 251, 0.14) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.gradio-container [data-testid="file"] small,
.gradio-container .file-preview small,
.gradio-container .file-preview-holder small,
.gradio-container .file-preview-item small,
.gradio-container .download small,
.gradio-container a[download] small,
.gradio-container [data-testid="file"] [class*="size"],
.gradio-container .file-preview [class*="size"],
.gradio-container .file-preview-holder [class*="size"],
.gradio-container .file-preview-item [class*="size"],
.gradio-container .download [class*="size"],
.gradio-container a[download] [class*="size"] {
  color: #22e6d1 !important;
  -webkit-text-fill-color: #22e6d1 !important;
}

.gradio-container [data-testid="file"] svg,
.gradio-container [data-testid="file"] svg *,
.gradio-container .file-preview svg,
.gradio-container .file-preview svg *,
.gradio-container .file-preview-holder svg,
.gradio-container .file-preview-holder svg *,
.gradio-container .file-preview-item svg,
.gradio-container .file-preview-item svg *,
.gradio-container .download svg,
.gradio-container .download svg *,
.gradio-container a[download] svg,
.gradio-container a[download] svg * {
  color: #22e6d1 !important;
  fill: #22e6d1 !important;
  stroke: #22e6d1 !important;
}

.gradio-container [data-testid="file"]:hover,
.gradio-container .file-preview:hover,
.gradio-container .file-preview-holder:hover,
.gradio-container .file-preview-item:hover,
.gradio-container .download:hover,
.gradio-container a[download]:hover {
  background: #172033 !important;
  color: #22e6d1 !important;
  -webkit-text-fill-color: #22e6d1 !important;
  border-color: rgba(34, 230, 209, 0.42) !important;
}

.gradio-container [data-testid="file"]:hover *,
.gradio-container .file-preview:hover *,
.gradio-container .file-preview-holder:hover *,
.gradio-container .file-preview-item:hover *,
.gradio-container .download:hover *,
.gradio-container a[download]:hover * {
  color: #22e6d1 !important;
  -webkit-text-fill-color: #22e6d1 !important;
  text-shadow: none !important;
}