style.css

.flex-1 .flex.items-center.gap-x-4 a img {
  height: 50px;
}

/* Agents card grid (3-up, uses .venice-api-card for the cards themselves) */
.venice-agents-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 16px;
}

@media (max-width: 900px) {
  .venice-agents-cards {
    grid-template-columns: 1fr;
  }
}

/* Shared section header (centered eyebrow + title + subtitle) */
.venice-section-header {
  text-align: left;
  margin: 56px 0 20px;
}

.venice-section-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #125DA3 !important;
}

.venice-section-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

.venice-section-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.68;
}

@media (max-width: 900px) {
  .venice-section-title {
    font-size: 22px;
  }
}

/* Featured pricing block */
.venice-pricing {
  margin: 32px 0;
}

.venice-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.venice-pricing-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.dark .venice-pricing-card,
[data-theme="dark"] .venice-pricing-card {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.1);
}

.venice-pricing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.venice-pricing-card-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

.venice-pricing-card-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.12);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
}

.venice-pricing-card-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
}

.venice-pricing-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.venice-pricing-card-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.45;
}

.venice-pricing-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

.venice-pricing-card-cta {
  display: block;
  margin-top: auto;
  padding: 9px 14px;
  border-radius: 8px;
  background: #125DA3;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.venice-pricing-card-cta:hover {
  background: #0e4a82;
}

@media (max-width: 900px) {
  .venice-pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* Popular model cards */
.venice-models-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 16px;
}

.venice-model-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border: 1px solid rgba(128, 128, 128, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.venice-model-card:hover {
  transform: translateY(-1px);
  border-color: rgba(18, 93, 163, 0.45);
}

.dark .venice-model-card,
[data-theme="dark"] .venice-model-card {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .venice-model-card:hover,
[data-theme="dark"] .venice-model-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(96, 165, 250, 0.45);
}

.venice-model-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.venice-model-card-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.venice-model-card-maker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

.venice-model-card-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.78;
  flex: 1;
}

.venice-model-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.venice-model-card-stats > span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.12);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.venice-model-card-stats .venice-model-card-privacy {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.venice-model-card-id {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(128, 128, 128, 0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .venice-models-grid {
    grid-template-columns: 1fr;
  }
}

/* "View all models" CTA banner */
.venice-models-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 4px;
  padding: 16px 22px;
  border: 1px solid rgba(18, 93, 163, 0.3);
  border-radius: 12px;
  background:
    radial-gradient(circle at right, rgba(18, 93, 163, 0.12), transparent 50%),
    rgba(18, 93, 163, 0.05);
  color: inherit !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.venice-models-cta:hover {
  border-color: rgba(18, 93, 163, 0.55);
  transform: translateY(-1px);
  background:
    radial-gradient(circle at right, rgba(18, 93, 163, 0.18), transparent 50%),
    rgba(18, 93, 163, 0.08);
}

.dark .venice-models-cta,
[data-theme="dark"] .venice-models-cta {
  border-color: rgba(80, 140, 200, 0.32);
}

.venice-models-cta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.venice-models-cta-count {
  font-size: 20px;
  font-weight: 700;
  color: #125DA3;
  line-height: 1.1;
}

.dark .venice-models-cta-count,
[data-theme="dark"] .venice-models-cta-count {
  color: #6ba7e0;
}

.venice-models-cta-sub {
  font-size: 13px;
  opacity: 0.65;
}

.venice-models-cta-action {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .venice-models-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Hero copy block (tagline + subtitle + CTA row, stacked above a full-width code sample) */
.venice-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 24px;
}

.venice-hero-tagline {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.venice-hero-subtitle {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.7;
}

.venice-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.venice-hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.venice-hero-cta:hover {
  border-color: rgba(18, 93, 163, 0.55);
}

.venice-hero-cta-primary {
  background: #125DA3;
  color: #fff !important;
  border-color: #125DA3;
}

.venice-hero-cta-primary:hover {
  background: #0e4d87;
  border-color: #0e4d87;
}

.dark .venice-hero-cta,
[data-theme="dark"] .venice-hero-cta {
  border-color: rgba(255, 255, 255, 0.14);
}

.dark .venice-hero-cta:hover,
[data-theme="dark"] .venice-hero-cta:hover {
  border-color: rgba(96, 165, 250, 0.55);
}

/* Hero card grid (3-up navigation, kept for any pages that still use it) */
.venice-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 8px;
}

@media (max-width: 700px) {
  .venice-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* "Build with Venice APIs" rich cards */
.venice-apis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 16px;
}

.venice-apis-extras {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.65;
  opacity: 0.92;
}

.venice-apis-extras a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.55);
  text-underline-offset: 3px;
}

.venice-apis-extras a:hover {
  text-decoration-color: currentColor;
}

.venice-apis-extras-cta {
  color: #125DA3 !important;
  font-weight: 600;
  text-decoration: none !important;
  margin-left: 6px;
  white-space: nowrap;
}

.venice-apis-extras-cta:hover {
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
}

.dark .venice-apis-extras-cta,
[data-theme="dark"] .venice-apis-extras-cta {
  color: #6ba7e0 !important;
}

.venice-api-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(128, 128, 128, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.venice-api-card:hover {
  transform: translateY(-1px);
  border-color: rgba(18, 93, 163, 0.45);
}

.dark .venice-api-card,
[data-theme="dark"] .venice-api-card {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .venice-api-card:hover,
[data-theme="dark"] .venice-api-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(96, 165, 250, 0.45);
}

.venice-api-card-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.venice-api-card-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.78;
  flex: 1;
}

.venice-api-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.venice-api-card-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.12);
  font-size: 11px;
  font-weight: 500;
}

.venice-api-card-action {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #125DA3;
}

.dark .venice-api-card-action,
[data-theme="dark"] .venice-api-card-action {
  color: #6ba7e0;
}

@media (max-width: 600px) {
  .venice-apis-grid {
    grid-template-columns: 1fr;
  }
}

/* Hide pricing placeholders until JS renders styled content (avoids layout flash).
   Agents still see the markdown tables in the HTML source. */
[id$="-placeholder"] {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

/* Venice Model Browser */
#venice-model-browser {
  font-family: inherit;
  /* The Models page runs in wide mode so the catalog has room to breathe.
     Keep a generous cap so rows stay scannable without huge dead gaps on
     ultrawide displays. */
  max-width: 1100px;
  margin-inline: auto;
}


/* Toolbar: Search + Sort */
.vmb-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.vmb-toolbar-left {
  flex: 1;
}

/* Controls row: model count on the left; sort | divider | filters on the right. */
.vmb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Right-hand cluster: sort dropdown | divider | filter dropdowns. */
.vmb-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.vmb-controls-divider {
  align-self: stretch;
  width: 1px;
  min-height: 22px;
  margin: 0 2px;
  background: rgba(128,128,128,0.25);
  flex-shrink: 0;
}

.vmb-search {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 8px;
  background: rgba(128,128,128,0.06);
  color: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.vmb-search:focus {
  border-color: rgba(128,128,128,0.4);
  background: rgba(128,128,128,0.08);
}

.vmb-search::placeholder {
  color: rgba(128,128,128,0.6);
}

/* Sort dropdown: reuses the shared .vmb-dd popover component, with a leading
   sort glyph in the trigger and a right-aligned panel (it sits at the far right
   of the toolbar). */
.vmb-sort-dd .vmb-dd-sort-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.vmb-sort-dd.vmb-dd-active .vmb-dd-sort-icon {
  opacity: 1;
}

/* Right-align the popover for dropdowns anchored to the right edge. */
.vmb-dd-right .vmb-dd-panel {
  left: auto;
  right: 0;
}

/* Filter toolbar (nested in .vmb-controls, which owns the bottom margin). */
.vmb-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Model count (left side of the controls row). */
.vmb-count {
  font-size: 13px;
  opacity: 0.6;
  white-space: nowrap;
}

.vmb-search-highlight {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(18,93,163,0.16);
  color: inherit;
}

/* ===== Filter dropdowns ===== */
.vmb-dd {
  position: relative;
}

.vmb-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(128,128,128,0.25);
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.85;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.vmb-dd-trigger:hover {
  background: rgba(128,128,128,0.08);
  border-color: rgba(128,128,128,0.4);
  opacity: 1;
}

.vmb-dd-chevron {
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.vmb-dd.open .vmb-dd-chevron {
  transform: rotate(180deg);
}

/* Active (non-default) filter uses the Venice action color. */
.vmb-dd-active .vmb-dd-trigger {
  background: rgba(18,93,163,0.12);
  border-color: rgba(18,93,163,0.4);
  color: #125DA3;
  opacity: 1;
}

.dark .vmb-dd-active .vmb-dd-trigger,
[data-theme="dark"] .vmb-dd-active .vmb-dd-trigger {
  background: rgba(96,165,250,0.16);
  border-color: rgba(96,165,250,0.4);
  color: #6ba7e0;
}

/* Disabled dropdown (e.g. Capability while viewing non-text types). */
.vmb-dd-disabled {
  opacity: 0.4;
}

.vmb-dd-disabled .vmb-dd-trigger {
  cursor: not-allowed;
}

.vmb-dd-disabled .vmb-dd-trigger:hover {
  background: transparent;
  border-color: rgba(128,128,128,0.25);
}

/* Popover panel -- matches Mintlify's native menu component (theme/language
   dropdowns): 16px radius, 4px padding, subtle shadow in light / none in dark. */
.vmb-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 190px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(100,116,139,0.12), 0 2px 8px rgba(100,116,139,0.06);
}

.dark .vmb-dd-panel,
[data-theme="dark"] .vmb-dd-panel {
  background: rgb(10, 13, 15);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}

.vmb-dd-panel[hidden] {
  display: none;
}

.vmb-dd-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.vmb-dd-option:hover {
  background: rgba(0,0,0,0.05);
}

.dark .vmb-dd-option:hover,
[data-theme="dark"] .vmb-dd-option:hover {
  background: rgba(255,255,255,0.05);
}

.vmb-dd-option .vmb-dd-check {
  opacity: 0;
  color: #125DA3;
  flex-shrink: 0;
}

.dark .vmb-dd-option .vmb-dd-check,
[data-theme="dark"] .vmb-dd-option .vmb-dd-check {
  color: #6ba7e0;
}

.vmb-dd-option.selected {
  color: #125DA3;
  font-weight: 500;
}

.dark .vmb-dd-option.selected,
[data-theme="dark"] .vmb-dd-option.selected {
  color: #6ba7e0;
}

.vmb-dd-option.selected .vmb-dd-check {
  opacity: 1;
}

/* Clear-all affordance */
.vmb-dd-clear {
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.vmb-dd-clear:hover {
  opacity: 1;
  color: #125DA3;
}

.vmb-dd-clear[hidden] {
  display: none;
}

.vmb-models {
  display: flex;
  flex-direction: column;
}

.vmb-model {
  padding: 20px 0;
  border-bottom: 1px solid rgba(128,128,128,0.2);
}

.vmb-model:last-child {
  border-bottom: none;
}

.vmb-model-shell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin-inline: -8px;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}

.vmb-model-shell:hover {
  background: rgba(128,128,128,0.08);
}

.dark .vmb-model-shell:hover,
[data-theme="dark"] .vmb-model-shell:hover {
  background: rgba(255,255,255,0.045);
}

.vmb-model-body {
  flex: 1;
  min-width: 0;
}

.vmb-model-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(128,128,128,0.2);
  border-radius: 10px;
  background: rgba(128,128,128,0.08);
}

.dark .vmb-model-avatar,
[data-theme="dark"] .vmb-model-avatar {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

.vmb-model-avatar-mask {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #60a5fa, #125DA3);
  -webkit-mask-image: var(--vmb-model-icon);
  mask-image: var(--vmb-model-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#venice-model-browser .vmb-model-name,
#venice-model-browser a.vmb-model-name,
#venice-model-browser a.vmb-model-name:link,
#venice-model-browser a.vmb-model-name:visited,
#venice-model-browser span.vmb-model-name {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--tw-prose-headings, inherit) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
}

#venice-model-browser a.vmb-model-name:hover {
  color: #125DA3 !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  background: none !important;
}

.vmb-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.35;
  vertical-align: middle;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  position: relative;
}

.vmb-copy-btn:hover {
  opacity: 0.7;
}

.vmb-copy-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vmb-copy-btn .copy-icon,
.vmb-copy-btn .check-icon {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.vmb-copy-btn .check-icon {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
}

.vmb-copy-btn.copied .copy-icon {
  opacity: 0;
  transform: scale(0.8);
}

.vmb-copy-btn.copied .check-icon {
  opacity: 1;
  transform: scale(1);
}

.vmb-copy-btn.copied {
  opacity: 0.7;
}

/* Copied tooltip - positioned above */
.vmb-copied-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #18181b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  z-index: 1000;
  animation: vmb-tooltip-fade 0.15s ease-out;
}

@keyframes vmb-tooltip-fade {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.vmb-model-context {
  font-size: 14px;
}

.vmb-pricing-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vmb-fixed-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-right: -6px;
}

.dark .vmb-fixed-label,
[data-theme="dark"] .vmb-fixed-label {
  color: #777;
}

.vmb-res-select,
.vmb-dur-select,
.vpt-res-select {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 22px 4px 8px;
  border: none;
  border-radius: 4px;
  background-color: rgba(128,128,128,0.12);
  color: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: background-color 0.15s;
}

.vmb-res-select:hover,
.vmb-dur-select:hover,
.vpt-res-select:hover {
  background-color: rgba(128,128,128,0.18);
}

.dark .vmb-res-select,
.dark .vmb-dur-select,
.dark .vpt-res-select,
[data-theme="dark"] .vmb-res-select,
[data-theme="dark"] .vmb-dur-select,
[data-theme="dark"] .vpt-res-select {
  background-color: rgba(255,255,255,0.08);
  color: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.dark .vmb-res-select:hover,
.dark .vmb-dur-select:hover,
.dark .vpt-res-select:hover,
[data-theme="dark"] .vmb-res-select:hover,
[data-theme="dark"] .vmb-dur-select:hover,
[data-theme="dark"] .vpt-res-select:hover {
  background-color: rgba(255,255,255,0.12);
}

.vmb-res-select option,
.vmb-dur-select option,
.vpt-res-select option {
  background-color: #fff;
  color: #1a1a1a;
}

.dark .vmb-res-select,
.dark .vmb-dur-select,
.dark .vpt-res-select,
[data-theme="dark"] .vmb-res-select,
[data-theme="dark"] .vmb-dur-select,
[data-theme="dark"] .vpt-res-select {
  color-scheme: dark;
}

.dark .vmb-res-select option,
.dark .vmb-dur-select option,
.dark .vpt-res-select option,
[data-theme="dark"] .vmb-res-select option,
[data-theme="dark"] .vmb-dur-select option,
[data-theme="dark"] .vpt-res-select option {
  background-color: #1a1a1a;
  color: #e5e5e5;
}


/* Aspect ratio visual indicators */
.vmb-aspect-ratios {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vmb-ar {
  display: inline-block;
  border: 1.5px solid #888;
  border-radius: 2px;
  opacity: 0.7;
}

.vmb-ar.landscape {
  width: 14px;
  height: 9px;
}

.vmb-ar.portrait {
  width: 9px;
  height: 14px;
}

.vmb-ar.square {
  width: 11px;
  height: 11px;
}

.dark .vmb-ar,
[data-theme="dark"] .vmb-ar {
  border-color: #666;
}

.vmb-video-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vmb-video-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 3px 20px 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(128,128,128,0.25);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
}

.vmb-audio-toggle {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(128,128,128,0.12);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.vmb-audio-toggle:hover {
  background: rgba(128,128,128,0.2);
}

.vmb-audio-toggle.off {
  opacity: 0.5;
  text-decoration: line-through;
}

.vmb-video-price {
  font-size: 12px;
}

.vpt-res-price {
  color: #125DA3;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  min-width: 50px;
  display: inline-block;
}

.vmb-model-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  /* Let the badge cluster drop to a new line instead of overflowing the row
     when the name + context + badges don't fit at narrow/tablet widths. */
  flex-wrap: wrap;
  min-width: 0;
}

.vmb-model-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.vmb-model-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.vmb-model-info {
  font-size: 13px;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* Allow the left/right clusters to wrap and shrink so long pricing lines
     (e.g. high-context models with extended pricing) flow to a new line
     instead of overflowing the row at narrow/tablet widths. */
  flex-wrap: wrap;
  min-width: 0;
}

.vmb-info-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.vmb-info-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.vmb-dot {
  margin: 0 8px;
  opacity: 0.4;
}

.vmb-release-date {
  font-size: 11px;
  opacity: 0.45;
  white-space: nowrap;
}

.vmb-model-id {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: rgba(128,128,128,0.15);
  padding: 3px 8px;
  border-radius: 4px;
  color: inherit;
}

.vmb-id-copy-btn {
  display: none;
}

.vmb-caps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.vmb-cap {
  display: inline-flex;
  align-items: center;
}

.vmb-cap .vmb-cap-icon {
  opacity: 0.65;
  transition: opacity 0.15s;
}

.vmb-cap:hover .vmb-cap-icon {
  opacity: 1;
}

/* Compact tooltips for capability icons */
.vmb-cap.vmb-tooltip::after {
  white-space: nowrap;
  width: auto;
  max-width: none;
  padding: 6px 10px;
  font-size: 13px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  color: #18181b;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  opacity: 0; /* Start hidden */
}

.vmb-cap.vmb-tooltip:hover::after {
  opacity: 1; /* Full opacity on hover - overrides parent's 0.5 */
}

.dark .vmb-cap.vmb-tooltip::after {
  background: #18181b;
  border-color: #3f3f46;
  color: #fafafa;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.vmb-cap-icon {
  width: 14px;
  height: 14px;
}

.vmb-pricing {
  font-size: 12px;
  opacity: 0.7;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vmb-extended-pricing {
  opacity: 0.6;
  font-size: 11px;
}

.vmb-pipe {
  opacity: 0.25;
  margin: 0 2px;
}

.vmb-video-info {
  opacity: 0.7;
}

.vmb-context {
  font-size: 12px;
  opacity: 0.7;
}

/* Context: desktop in header, mobile in bottom row */
.vmb-context-mobile {
  display: none;
}

/* New model indicator */
.vmb-new-dot {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #10b981;
  opacity: 0.9;
}

.vmb-new-dot::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 4px;
  animation: vmb-pulse 2s ease-in-out infinite;
}

@keyframes vmb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.vmb-type-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(128,128,128,0.15);
  border-radius: 4px;
  color: inherit;
  text-transform: uppercase;
  font-weight: 500;
}

.vmb-video-type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  background: rgba(128,128,128,0.15);
  color: inherit;
  text-transform: uppercase;
}

.vmb-privacy-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.3);
  color: #71717a;
}

.dark .vmb-privacy-badge {
  color: #a1a1aa;
}

.vmb-privacy-badge.tee,
.vmb-privacy-badge.e2ee {
  background: rgba(71, 85, 105, 0.08);
  border-color: rgba(71, 85, 105, 0.25);
  color: #64748b;
}

.dark .vmb-privacy-badge.tee,
.dark .vmb-privacy-badge.e2ee {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
}

.vmb-beta-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(80, 120, 180, 0.1);
  border: 1px solid rgba(80, 120, 180, 0.25);
  color: #6090c0;
}

.dark .vmb-beta-badge {
  background: rgba(100, 140, 200, 0.12);
  border-color: rgba(100, 140, 200, 0.3);
  color: #80a8d0;
}

.vmb-uncensored-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.3);
  color: #71717a;
}

.dark .vmb-uncensored-badge {
  color: #a1a1aa;
}

.vmb-deprecated-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.vmb-upgraded-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.vmb-moderation-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  background: rgba(130, 115, 150, 0.12);
  border: 1px solid rgba(130, 115, 150, 0.25);
  color: #8a7ea0;
}

.dark .vmb-moderation-badge {
  background: rgba(150, 135, 170, 0.1);
  border-color: rgba(150, 135, 170, 0.25);
  color: #a098b8;
}

.vmb-ratelimit-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-family: monospace;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.3);
  color: #71717a;
}

.dark .vmb-ratelimit-badge {
  color: #a1a1aa;
}

.vmb-tooltip {
  position: relative;
  cursor: help;
}

.vmb-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 14px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: #18181b;
  white-space: normal;
  width: 280px;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.vmb-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fafafa;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 1001;
}

.dark .vmb-tooltip::after {
  background: #18181b;
  border-color: #3f3f46;
  color: #fafafa;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.dark .vmb-tooltip::before {
  border-top-color: #18181b;
}

.vmb-tooltip:hover::after,
.vmb-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Right-aligned badge/capability clusters sit at the catalog's right edge, so
   their 280px tooltips would spill past the page and create a horizontal
   scrollbar (even while hidden). Anchor those tooltips to open inward. */
#venice-model-browser .vmb-model-right .vmb-tooltip::after,
#venice-model-browser .vmb-info-right .vmb-tooltip::after {
  left: auto;
  right: 0;
  transform: none;
}

.vmb-loading {
  text-align: center;
  padding: 40px;
  color: #6b7280;
}

.vmb-error {
  text-align: center;
  padding: 40px;
  color: #dc2626;
}

/* Venice Pricing Tables */
.vpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0 24px;
}

.vpt-table th,
.vpt-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(128,128,128,0.2);
}

.vpt-table th {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.7;
  background: rgba(128,128,128,0.05);
}

.vpt-table td code {
  font-size: 12px;
  background: rgba(128,128,128,0.12);
  padding: 3px 8px;
  border-radius: 4px;
}

.vpt-table .vpt-price {
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}

.vpt-table td.vpt-price {
  color: inherit;
  opacity: 0.8;
}

.vmb-res-select,
.vpt-res-select {
  margin-right: 8px;
}

.vpt-res-select {
  color: inherit;
}

.vpt-table td.vpt-price .vpt-res-select {
  color: var(--tw-prose-body, #374151);
}

.dark .vpt-table td.vpt-price .vpt-res-select,
[data-theme="dark"] .vpt-table td.vpt-price .vpt-res-select {
  color: #e5e5e5;
}

.vpt-beta {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.vpt-beta-row {
  opacity: 0.85;
}

.vpt-upgraded {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.vpt-upgraded-row {
  opacity: 0.85;
}

.vpt-beta-note {
  font-size: 13px;
  color: #f59e0b;
  margin: 16px 0 24px;
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 6px;
  border-left: 3px solid #f59e0b;
}

.vpt-beta-note a {
  color: inherit;
  text-decoration: underline;
}

.vpt-tooltip {
  position: relative;
  cursor: help;
}

.vpt-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 14px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: #18181b;
  white-space: normal;
  width: 280px;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.vpt-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fafafa;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 10000;
}

.dark .vpt-tooltip::after,
[data-theme="dark"] .vpt-tooltip::after {
  background: #18181b;
  border-color: #3f3f46;
  color: #fafafa;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.dark .vpt-tooltip::before,
[data-theme="dark"] .vpt-tooltip::before {
  border-top-color: #18181b;
}

.vpt-tooltip:hover::after,
.vpt-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

#pricing-tables-placeholder,
#pricing-tables-placeholder * {
  overflow: visible !important;
}

.vpt-table {
  overflow: visible;
}

.vpt-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  opacity: 0.35;
  vertical-align: middle;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s;
  position: relative;
}

.vpt-copy-btn:hover {
  opacity: 0.7;
}

.vpt-copy-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vpt-copy-btn .check-icon {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s, transform 0.15s;
}

.vpt-copy-btn.copied .copy-icon {
  opacity: 0;
}

.vpt-copy-btn.copied .check-icon {
  opacity: 1;
  transform: scale(1);
}

.vpt-copy-btn.copied {
  opacity: 0.7;
}

#pricing-tables-placeholder h3 {
  margin-top: 32px;
}

#pricing-tables-placeholder h4 {
  margin-top: 24px;
}

/* Dynamic placeholder visibility - override the generic [id$="-placeholder"] hide rule */
#deprecation-tracker-placeholder,
#traits-list-placeholder {
  visibility: visible !important;
  overflow: visible !important;
  height: auto !important;
}

/* Deprecation status labels */
.vpt-status-retiring {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(251, 191, 36, 0.15);
  color: #f59e0b;
}

.vpt-status-deprecated {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Chat pricing list - OpenRouter style */
.vpt-list {
  display: flex;
  flex-direction: column;
}

.vpt-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.vpt-row:last-child {
  border-bottom: none;
}

.vpt-extended-line {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 6px;
  padding-left: 2px;
}

.vpt-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}

.vpt-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vpt-model-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--tw-prose-headings, inherit);
}

.vpt-model-id {
  font-size: 11px;
  background: rgba(128, 128, 128, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0.7;
}

.vpt-moderation {
  margin-left: 6px;
  background: rgba(130, 115, 150, 0.12);
  color: #8a7ea0;
}

.dark .vpt-moderation {
  background: rgba(150, 135, 170, 0.1);
  color: #a098b8;
}

.vpt-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
}

.vpt-row-right {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.vpt-row-bottom {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.vpt-context-right {
  margin-left: auto;
}

.vpt-video-note {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 16px;
}

.vpt-video-note a {
  color: #125DA3;
}

.vpt-price-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vpt-price-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.5;
  font-weight: 500;
}

.vpt-price-value {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
}

.vpt-context-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(128, 128, 128, 0.12);
  color: inherit;
  opacity: 0.8;
}

.vpt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.vpt-section-info {
  font-size: 14px;
  opacity: 0.7;
}

.vpt-endpoint {
  font-size: 12px;
  background: rgba(128, 128, 128, 0.12);
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0.8;
}

.vpt-res-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vpt-cap-tag {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.12);
  color: #71717a;
}

.dark .vpt-cap-tag {
  color: #a1a1aa;
}

/* Capability icons for pricing page */
.vpt-cap {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}

.vpt-cap:hover {
  opacity: 1;
}

.vpt-cap-icon,
.vpt-cap .vmb-cap-icon {
  width: 14px;
  height: 14px;
}

/* Compact tooltips for pricing capability icons */
.vpt-cap.vpt-tooltip::after {
  white-space: nowrap;
  width: auto;
  max-width: none;
  padding: 6px 10px;
  font-size: 13px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  color: #18181b;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.vpt-cap.vpt-tooltip:hover::after {
  opacity: 1;
}

.dark .vpt-cap.vpt-tooltip::after {
  background: #18181b;
  border-color: #3f3f46;
  color: #fafafa;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  /* Toolbar */
  .vmb-toolbar {
    gap: 8px;
  }
  
  .vmb-search {
    font-size: 16px; /* Prevent iOS zoom */
    padding: 8px 10px;
    border-radius: 6px;
  }
  
  /* Filters wrap on mobile. (Must not use overflow-x:auto here -- it would clip
     the absolutely-positioned dropdown panels.) */
  .vmb-controls {
    margin-bottom: 12px;
  }

  /* The vertical divider reads oddly once controls wrap onto multiple rows. */
  .vmb-controls-divider {
    display: none;
  }

  .vmb-dd {
    flex: 1 1 auto;
  }

  .vmb-dd-panel {
    min-width: 100%;
  }
  
  /* Model cards */
  .vmb-model {
    padding: 14px 0;
  }

  /* Hide the provider avatar on mobile to give the row content full width. */
  .vmb-model-avatar {
    display: none;
  }

  .vmb-model-shell {
    gap: 0;
    margin-inline: 0;
    padding: 0;
  }
  
  /* Header row: name left, badges right */
  .vmb-model-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }
  
  .vmb-model-left {
    flex: 1;
    min-width: 0;
  }
  
  .vmb-model-right {
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }
  
  /* Info: stack into 2 rows on mobile */
  .vmb-model-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  /* Row 1: Pricing & context */
  .vmb-info-left {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  
  .vmb-dot {
    display: none;
  }
  
  /* Row 2: Caps left, date right - full width */
  .vmb-info-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .vmb-release-date {
    margin-left: auto;
  }
  
  .vmb-caps {
    gap: 6px;
  }
  
  /* Show context in bottom row on mobile */
  .vmb-context-desktop {
    display: none;
  }
  
  .vmb-context-mobile {
    display: inline;
  }
  
  /* Hide model ID on mobile - copy button on name already copies it */
  .vmb-model-id {
    display: none;
  }
  
  .vmb-pricing {
    font-size: 11px;
  }
  
  /* Hide rate limit badge on mobile */
  .vmb-ratelimit-badge {
    display: none;
  }
  
  /* Smaller badges */
  .vmb-privacy-badge,
  .vmb-uncensored-badge,
  .vmb-beta-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
  
  /* Tooltips: position better on mobile */
  .vmb-tooltip::after {
    left: 0;
    transform: none;
    max-width: 200px;
    width: auto;
  }
  
  .vmb-cap.vmb-tooltip::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  #venice-model-browser .vmb-model-name,
  #venice-model-browser a.vmb-model-name,
  #venice-model-browser a.vmb-model-name:link,
  #venice-model-browser a.vmb-model-name:visited,
  #venice-model-browser span.vmb-model-name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  .vmb-pricing {
    font-size: 12px;
  }
  
  .vmb-context {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #venice-model-browser .vmb-model-name,
  #venice-model-browser a.vmb-model-name,
  #venice-model-browser a.vmb-model-name:link,
  #venice-model-browser a.vmb-model-name:visited,
  #venice-model-browser span.vmb-model-name {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  
  .vmb-pricing {
    font-size: 12px;
  }
  
  .vmb-context {
    font-size: 12px;
  }
  
  .vmb-context {
    font-size: 11px;
  }
  
  /* Pricing on its own line if needed */
  .vmb-pricing .vmb-pipe {
    display: none;
  }
  
  .vmb-pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    line-height: 1.5;
  }
}

/* ===== TTS Voice Picker ===== */

#tts-voice-picker-placeholder {
  visibility: visible !important;
  overflow: visible !important;
  height: auto !important;
}

.vtp-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  font-family: inherit;
}

.vtp-row-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .vtp-row-controls {
    grid-template-columns: 1fr;
  }
}

.vtp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.vtp-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.vtp-model-select,
.vtp-search {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background: rgba(128,128,128,0.06);
  border: 1px solid rgba(128,128,128,0.25);
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}

.vtp-model-select {
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.vtp-model-select:focus,
.vtp-search:focus {
  border-color: rgba(128,128,128,0.45);
  background-color: rgba(128,128,128,0.09);
}

.vtp-search::placeholder {
  color: rgba(128,128,128,0.55);
}

.vtp-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vtp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vtp-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(128,128,128,0.1);
  color: inherit;
  white-space: nowrap;
}

.vtp-pill code {
  font-size: 12px;
  background: none;
  padding: 0;
  border: none;
  color: inherit;
}

.vtp-pill-id {
  background: rgba(18, 93, 163, 0.1);
  color: #125DA3;
}

.vtp-blurb {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
}

.vtp-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 4px;
}

.vtp-list-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.vtp-count {
  font-size: 12px;
  opacity: 0.55;
  white-space: nowrap;
}

.vtp-voice-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(128,128,128,0.18);
  border-radius: 10px;
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}

.vtp-voice {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid rgba(128,128,128,0.12);
  background: transparent;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s;
}

.vtp-voice:last-child {
  border-bottom: none;
}

.vtp-voice:hover {
  background: rgba(128,128,128,0.06);
}

.vtp-voice:focus-visible {
  outline: 2px solid #125DA3;
  outline-offset: -2px;
}

.vtp-voice-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
}

.vtp-voice-meta {
  font-size: 13px;
  opacity: 0.6;
  min-width: 0;
}

.vtp-voice-action {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  position: relative;
  color: rgba(128,128,128,0.7);
}

.vtp-voice:hover .vtp-voice-action {
  opacity: 1;
}

.vtp-action-copied {
  display: none;
}

.vtp-voice.copied .vtp-voice-action {
  opacity: 1;
  color: #125DA3;
}

.vtp-voice.copied .vtp-action-copy {
  display: none;
}

.vtp-voice.copied .vtp-action-copied {
  display: inline;
}

.vtp-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  opacity: 0.55;
}

.vtp-hint {
  margin: 0;
  font-size: 12px;
  opacity: 0.55;
  line-height: 1.5;
}

.vtp-hint code {
  font-size: 12px;
  background: rgba(128,128,128,0.1);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Privacy mode cards */
.venice-privacy-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
  margin: 14px 0 18px;
  padding-left: 28px;
}

.venice-privacy-mode-grid::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 7px;
  width: 1px;
  background: linear-gradient(180deg, rgba(18, 93, 163, 0.22), rgba(18, 93, 163, 0.55), rgba(18, 93, 163, 0.22));
}

.venice-privacy-level-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  color: #125DA3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.venice-privacy-level-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(18, 93, 163, 0.55), rgba(18, 93, 163, 0));
}

.venice-privacy-mode-card {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
}

.venice-privacy-mode-card::before {
  content: "";
  position: absolute;
  top: 28px;
  left: -27px;
  width: 13px;
  height: 13px;
  border: 3px solid var(--background, #fff);
  border-radius: 999px;
  background: #125DA3;
  box-shadow: 0 0 0 1px rgba(18, 93, 163, 0.28);
}

.dark .venice-privacy-mode-card,
[data-theme="dark"] .venice-privacy-mode-card {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.11);
}

.venice-privacy-mode-header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.venice-privacy-mode-name {
  font-size: clamp(21px, 2.3vw, 25px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: inherit;
}

.venice-privacy-mode-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: #125DA3;
}

.venice-privacy-mode-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  opacity: 0.72;
}

@media (max-width: 900px) {
  .venice-privacy-mode-grid {
    grid-template-columns: 1fr;
  }

  .venice-privacy-mode-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .venice-privacy-mode-grid {
    padding-left: 22px;
  }

  .venice-privacy-mode-card {
    padding: 20px;
  }

  .venice-privacy-mode-card::before {
    left: -24px;
  }

}

/* Wider left-hand navigation sidebar.
   Mintlify defaults the sidebar to w-56 (14rem) and offsets the content with lg:pl-56.
   Both must be bumped together so the widened nav doesn't overlap the page content. */
@media (min-width: 1024px) {
  nav#sidebar-content {
    width: 18rem !important;
  }

  #body-content {
    padding-left: 18rem !important;
  }

  /* Widen the central content column (Mintlify defaults it to max-w-[696px])
     and center it in the viewport.

     Mintlify centers content with margin-left:max(0px,calc(50vw-348px-14rem)),
     where 348px is half its default 696px content width and 14rem is its
     default sidebar width. Since we widened both the sidebar (18rem) and the
     content (820px -> half = 410px), we recompute the formula with our own
     constants. It's purely viewport-based (50vw) and pairs with the inherited
     margin-right:auto, so the column sits in the same place whether or not the
     right-hand "On this page" table of contents is present -- no layout shift. */
  #content-area {
    max-width: 820px !important;
    margin-left: max(0px, calc(50vw - 410px - 18rem)) !important;
    margin-right: auto !important;
  }

  /* Taller top navigation bar.
     Mintlify sets the navbar content row to h-12 (48px) with items-center, and
     paints the bottom border on an absolute h-full background layer. Growing the
     row height increases the header height while items-center keeps the logo,
     tabs, and actions vertically centered. */
  header .items-center.h-12 {
    height: 5rem !important;
  }

  /* Remove the navbar bottom border (lives on the absolute background layer). */
  header .w-full.h-full.border-b {
    border-bottom: 0 !important;
  }

  /* Frosted-glass navbar: drop the fill to 60% opacity and blur what scrolls
     under it. The fill is the absolute inset-0 layer painted with the
     background-light/dark tokens; color-mix keeps it tokenized while applying
     the 60% alpha. */
  header .absolute.inset-0.bg-background-light {
    background-color: color-mix(in srgb, var(--color-background-light) 60%, transparent) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .dark header .absolute.inset-0.bg-background-light,
  [data-theme="dark"] header .absolute.inset-0.bg-background-light {
    background-color: color-mix(in srgb, var(--color-background-dark) 60%, transparent) !important;
  }

  /* The fixed sidebar and sticky "On this page" TOC are offset from the top by
     the header height (Mintlify's default 48px). Since the header is now 80px,
     bump both offsets to match so the taller header doesn't overlap them. */
  nav#sidebar-content {
    top: 5rem !important;
  }

  #content-side-layout {
    top: 5rem !important;
  }

  /* Add breathing room at the bottom of the scrollable sidebar so the last
     nav item isn't clipped against the viewport edge (Mintlify defaults the
     scroll container to pb-4 / 16px). */
  #navigation-items {
    padding-bottom: 5rem !important;
  }

  /* Hide the "Try Venice" CTA in the top navbar. We hide the wrapping <ul>, not
     just the <li>: an empty-but-present <ul> stays a flex item and injects a
     phantom gap between the Ask AI and theme buttons, making the icon spacing
     look uneven. */
  header ul:has(#topbar-cta-button) {
    display: none !important;
  }

  /* Even out the header icon-button spacing. Mintlify puts search + Ask AI in a
     gap-2.5 (0.625rem) group while the theme toggle is a gap-2 (0.5rem) sibling,
     so the gaps differ. Normalize the group's gap to 0.5rem so all three
     circles are evenly spaced. */
  header div:has(> #search-bar-entry) {
    column-gap: 0.5rem !important;
  }

  /* Double the header logo size (Mintlify defaults it to h-6 / 24px). The
     taller 5rem navbar has room for it. */
  header .nav-logo {
    height: 3rem !important;
  }

  /* Force the search + Ask AI entries to always be compact icon-circle buttons.
     Mintlify keeps both collapsed (w-9, centered, no padding) below a 1500px
     navbar container and only expands them (label + ⌘K / ⌘I) via
     @[1500px]/navbar utilities. Those overrides are !important and live in the
     `utilities` cascade layer, so an unlayered !important rule can't beat them
     (unlayered !important is the lowest-priority important tier). We join the
     same `utilities` layer and rely on the higher specificity of an id selector
     to win, pinning the collapsed state. */
  @layer utilities {
    header #search-bar-entry,
    header #assistant-entry {
      width: 2.25rem !important;
      padding: 0 !important;
      justify-content: center !important;
    }

    /* Hide the search "Search... ⌘K" and assistant "Ask Assistant ⌘I" labels
       so only the icons remain. */
    header #search-bar-entry .truncate.min-w-0,
    header #search-bar-entry > span,
    header #assistant-entry > span {
      display: none !important;
    }
  }

  /* The language selector natively renders in the left group (next to the logo).
     We relocate it via JS (see model-search.js) into the right actions cluster,
     just left of the search / Ask AI / theme icon group, so it lays out in
     natural flex flow -- resilient to Mintlify adding or removing header buttons
     (e.g. the AI assistant) instead of colliding with a hardcoded offset. This
     just adds a small gap between the selector and the icon group. */
  header div:has(> #localization-select-trigger) {
    margin-right: 0.5rem;
  }

  /* Demos landing page: hide the left sidebar and let the content column center
     in the full viewport. The Luna theme doesn't support `mode: "center"`, and
     `mode: "custom"` strips the page title/container, so we scope the change to
     this route via the `data-current-path` attribute Mintlify sets on <html>.
     This keeps the native title, prose container, and footer -- just without
     the redundant sidebar (the landing page's cards handle navigation). */
  html[data-current-path="/guides/projects/overview"] nav#sidebar-content {
    display: none !important;
  }

  html[data-current-path="/guides/projects/overview"] #body-content {
    padding-left: 0 !important;
  }

  html[data-current-path="/guides/projects/overview"] #content-area {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Also hide the (empty) right-hand "On this page" column on the landing page.
     It otherwise keeps reserving ~18rem, so the content column centers within
     the leftover space and reads as shifted left rather than viewport-centered. */
  html[data-current-path="/guides/projects/overview"] #content-side-layout {
    display: none !important;
  }

  /* Hide the "Demos" eyebrow above the page title -- redundant on the landing
     page since the title now reads "Demos & Projects". Add padding above the
     header to reclaim the vertical space the eyebrow (h-5 + 0.625rem gap) left
     behind, so the title sits at roughly the same offset as other pages. */
  html[data-current-path="/guides/projects/overview"] #header .eyebrow {
    display: none !important;
  }

  html[data-current-path="/guides/projects/overview"] #header {
    padding-top: 1.875rem;
  }
}

/* Hide the prev/next pagination footer on the Demos landing page -- it's an
   index/grid, not a linear reading page, so "Next: <first demo>" is misleading. */
html[data-current-path="/guides/projects/overview"] #pagination {
  display: none !important;
}

/* Hide the assistant's floating "Ask a question" bar pinned to the bottom of the
   page. Mintlify has no toggle to remove just this bar -- disabling the
   assistant would also remove the header Ask AI button we want to keep -- so we
   hide only the floating bar here and rely on the header button as the entry
   point. Targets the bar itself (its sticky wrapper is pointer-events-none). */
.chat-assistant-floating-input {
  display: none !important;
}

/* Add space above the footer's top divider so the pagination ("Next") box isn't
   touching the divider line. margin-top pushes the footer + its border-t down
   (padding-top would only add space below the divider, not above it). */
#footer {
  margin-top: 2.5rem !important;
}

/* ===== Demos landing page: rich project cards ===== */
.venice-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.venice-demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(128,128,128,0.2);
  background: rgba(128,128,128,0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.venice-demo-card:hover {
  border-color: rgba(18,93,163,0.4);
  background: rgba(18,93,163,0.04);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.dark .venice-demo-card:hover,
[data-theme="dark"] .venice-demo-card:hover {
  border-color: rgba(96,165,250,0.4);
  background: rgba(96,165,250,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.venice-demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.venice-demo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #125DA3;
  background: rgba(18,93,163,0.1);
}

.dark .venice-demo-icon,
[data-theme="dark"] .venice-demo-icon {
  color: #6ba7e0;
  background: rgba(96,165,250,0.14);
}

.venice-demo-lang {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(128,128,128,0.25);
  opacity: 0.75;
}

.venice-demo-title {
  margin: 0 0 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.venice-demo-desc {
  margin: 0 0 14px !important;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.7;
}

.venice-demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.venice-demo-tag {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(128,128,128,0.1);
  opacity: 0.85;
  white-space: nowrap;
}

.venice-demo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(128,128,128,0.15);
}

.venice-demo-link {
  font-size: 13.5px;
  font-weight: 600;
  color: #125DA3 !important;
  text-decoration: none !important;
  /* Mintlify's prose a:hover grows border-bottom 1px -> 2px, which shifts the
     card content on hover. Pin it off so the tile stays stable. */
  border-bottom: 0 !important;
}

.dark .venice-demo-link,
[data-theme="dark"] .venice-demo-link {
  color: #6ba7e0 !important;
}

/* Nudge the arrow right on card hover as a "the whole card is a link" signifier. */
.venice-demo-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.venice-demo-card:hover .venice-demo-arrow {
  transform: translateX(4px);
}

/* Stretched-link: the primary "Read the guide" link covers the whole card, so
   the entire tile is clickable while keeping a single semantic primary link. */
.venice-demo-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.venice-demo-repo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.venice-demo-repo:hover {
  opacity: 1;
}

.venice-demo-byline {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.45;
}

@media (max-width: 768px) {
  .venice-demo-grid {
    grid-template-columns: 1fr;
  }
}

/* Code block surface color.
   Mintlify's `dark:bg-codeblock` utility hardcodes #0B0C0E (rgb 11 12 14),
   which is a hair lighter than the site's dark surface token
   `--color-background-dark` (rgb 9 11 14 / #090B0E). That arbitrary ~2-level
   mismatch reads as an "off" grey. Repoint the code block background at the
   system token so the block stays in sync with the theme surface.

   The utility is an !important rule inside the `utilities` cascade layer, and
   an unlayered !important loses to a layered one. So we join the same layer and
   win on specificity. The class is repeated in the selector to bump specificity
   above the base utility without relying on incidental extra classes -- this
   covers every `dark:bg-codeblock` surface (code blocks, Accordions, etc.). */
@layer utilities {
  .dark .dark\:bg-codeblock.dark\:bg-codeblock,
  [data-theme="dark"] .dark\:bg-codeblock.dark\:bg-codeblock {
    background-color: var(--color-background-dark) !important;
  }
}

/* Active header tab uses the Venice action color.
   Mintlify marks the selected tab with `bg-gray-950/[0.03]` (a 3% black overlay)
   plus near-black text -- barely distinguishable from the unselected tabs in
   light mode. Repoint the active pill to a brand-tinted background with brand
   text so the current section is obvious. The `bg-gray-950/[0.03]` class is
   present on the active tab in both themes, so we use it as the active hook. */
@layer utilities {
  header a.link.bg-gray-950\/\[0\.03\] {
    background-color: rgba(18, 93, 163, 0.12) !important;
    color: #125DA3 !important;
  }

  .dark header a.link.bg-gray-950\/\[0\.03\],
  [data-theme="dark"] header a.link.bg-gray-950\/\[0\.03\] {
    background-color: rgba(96, 165, 250, 0.16) !important;
    color: #6ba7e0 !important;
  }
}