/* DOMCOM - Tailwind Compatibility Stylesheet */
.fixed { position: fixed !important; }
.absolute { position: absolute !important; }
.relative { position: relative !important; }
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 9999 !important; }

.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.hidden, [hidden] { display: none !important; }

.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }

.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row !important; }
  .md\:items-center { align-items: center !important; }
  .md\:justify-between { justify-content: space-between !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }

.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem !important; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem !important; }

.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.h-full { height: 100% !important; }
.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.max-h-\[90vh\] { max-height: 90vh !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-hidden { overflow: hidden !important; }

.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }

.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.pb-4 { padding-bottom: 1rem !important; }

.border { border: 1px solid #e5e7eb !important; }
.border-b { border-bottom: 1px solid #e5e7eb !important; }
.border-t { border-top: 1px solid #e5e7eb !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 9999px !important; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.35) !important; }

.bg-white { background-color: #ffffff !important; }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.65) !important; backdrop-filter: blur(2px); }
.bg-gray-50 { background-color: #f9fafb !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-gray-200 { background-color: #e5e7eb !important; }
.bg-teal-600 { background-color: #0d9488 !important; }
.bg-teal-700 { background-color: #0f766e !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.bg-emerald-700 { background-color: #047857 !important; }
.bg-blue-50 { background-color: #eff6ff !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }
.bg-indigo-600 { background-color: #4f46e5 !important; }
.bg-indigo-700 { background-color: #4338ca !important; }
.bg-amber-600 { background-color: #d97706 !important; }
.bg-amber-700 { background-color: #b45309 !important; }
.bg-rose-50 { background-color: #fff1f2 !important; }
.bg-rose-100 { background-color: #ffe4e6 !important; }

.text-white { color: #ffffff !important; }
.text-gray-900 { color: #111827 !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065f46 !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.text-blue-800 { color: #1e40af !important; }
.text-rose-700 { color: #be123c !important; }
.text-rose-800 { color: #9f1239 !important; }

.border-gray-200 { border-color: #e5e7eb !important; }
.border-gray-300 { border-color: #d1d5db !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-blue-200 { border-color: #bfdbfe !important; }
.border-rose-200 { border-color: #fecdd3 !important; }

/* Dark Theme Overrides */
[data-theme="dark"] .dark\:bg-gray-700, .dark .dark\:bg-gray-700 { background-color: #374151 !important; }
[data-theme="dark"] .dark\:bg-gray-800, .dark .dark\:bg-gray-800 { background-color: #1f2937 !important; }
[data-theme="dark"] .dark\:bg-gray-900, .dark .dark\:bg-gray-900 { background-color: #111827 !important; }
[data-theme="dark"] .dark\:bg-emerald-950\/40, .dark .dark\:bg-emerald-950\/40 { background-color: rgba(6, 78, 59, 0.4) !important; }
[data-theme="dark"] .dark\:bg-emerald-900\/40, .dark .dark\:bg-emerald-900\/40 { background-color: rgba(6, 78, 59, 0.4) !important; }
[data-theme="dark"] .dark\:bg-blue-900\/40, .dark .dark\:bg-blue-900\/40 { background-color: rgba(30, 58, 138, 0.4) !important; }
[data-theme="dark"] .dark\:bg-rose-950\/40, .dark .dark\:bg-rose-950\/40 { background-color: rgba(76, 5, 25, 0.4) !important; }

[data-theme="dark"] .dark\:text-white, .dark .dark\:text-white { color: #ffffff !important; }
[data-theme="dark"] .dark\:text-gray-100, .dark .dark\:text-gray-100 { color: #f3f4f6 !important; }
[data-theme="dark"] .dark\:text-gray-200, .dark .dark\:text-gray-200 { color: #e5e7eb !important; }
[data-theme="dark"] .dark\:text-gray-300, .dark .dark\:text-gray-300 { color: #d1d5db !important; }
[data-theme="dark"] .dark\:text-gray-400, .dark .dark\:text-gray-400 { color: #9ca3af !important; }
[data-theme="dark"] .dark\:text-emerald-200, .dark .dark\:text-emerald-200 { color: #a7f3d0 !important; }
[data-theme="dark"] .dark\:text-emerald-300, .dark .dark\:text-emerald-300 { color: #6ee7b7 !important; }
[data-theme="dark"] .dark\:text-blue-300, .dark .dark\:text-blue-300 { color: #93c5fd !important; }
[data-theme="dark"] .dark\:text-rose-200, .dark .dark\:text-rose-200 { color: #fecdd3 !important; }

[data-theme="dark"] .dark\:border-gray-600, .dark .dark\:border-gray-600 { border-color: #4b5563 !important; }
[data-theme="dark"] .dark\:border-gray-700, .dark .dark\:border-gray-700 { border-color: #374151 !important; }
[data-theme="dark"] .dark\:border-gray-800, .dark .dark\:border-gray-800 { border-color: #1f2937 !important; }
[data-theme="dark"] .dark\:border-emerald-800, .dark .dark\:border-emerald-800 { border-color: #065f46 !important; }
[data-theme="dark"] .dark\:border-blue-800, .dark .dark\:border-blue-800 { border-color: #1e40af !important; }
[data-theme="dark"] .dark\:border-rose-800, .dark .dark\:border-rose-800 { border-color: #9f1239 !important; }

/* Marketplace listings grid and cards */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.marketplace-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  transition: all 0.2s ease;
}
.marketplace-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}
.marketplace-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.marketplace-card-image {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--surface-2, #f3f4f6);
  overflow: hidden;
}
.marketplace-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marketplace-card-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-2, #f3f4f6), var(--surface-3, #e5e7eb));
}
.marketplace-card-no-image-icon {
  font-size: 3rem;
  opacity: 0.5;
}
.marketplace-card-category {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 0.75rem;
  border-radius: 999px;
}
.listing-type-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .02em;
}
.listing-type-badge--offer {
  background: rgba(16,185,129,0.85);
  color: #fff;
}
.listing-type-badge--seek {
  background: rgba(99,102,241,0.85);
  color: #fff;
}
.marketplace-card-body {
  padding: 14px;
}
.marketplace-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.3;
}
.marketplace-card-description {
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
  margin: 0 0 10px;
  line-height: 1.4;
}
.marketplace-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.marketplace-card-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary, #2563eb);
}
.marketplace-card-date {
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
}
.marketplace-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e5e7eb);
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .marketplace-card-title {
    font-size: 0.9rem;
  }
  .marketplace-card-description {
    display: none;
  }
  .marketplace-card-author {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MISSING UTILITIES — added 2026-09-12

   An audit found 195 Tailwind-looking classes used across the templates that
   this shim never implemented, so they silently did nothing. The top of that
   list was pure typography — text-xs used 127 times, font-semibold 83,
   text-sm 71, font-medium 71 — which is why table headers, billing figures
   and marketplace cards had no visual hierarchy at all.

   Colours deliberately resolve to the project's own tokens instead of
   Tailwind's palette: a literal #6b7280 would be invisible in dark theme,
   whereas var(--color-text-muted) tracks both. That keeps one design system
   rather than grafting a second one on.

   !important matches the convention already used above, so specificity
   behaves predictably against site.css.
══════════════════════════════════════════════════════════════════════ */

/* ── Type scale ── */
.text-xs   { font-size: .75rem !important;  line-height: 1.35 !important; }
.text-sm   { font-size: .875rem !important; line-height: 1.45 !important; }
.text-base { font-size: 1rem !important;    line-height: 1.55 !important; }
.text-lg   { font-size: 1.125rem !important; line-height: 1.5 !important; }
.text-xl   { font-size: 1.25rem !important; line-height: 1.4 !important; }
.text-2xl  { font-size: 1.5rem !important;  line-height: 1.3 !important; }
.text-3xl  { font-size: 1.875rem !important; line-height: 1.25 !important; }

/* ── Weight & family ── */
.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }
.font-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }

/* ── Casing, tracking, alignment ── */
.uppercase   { text-transform: uppercase !important; }
.lowercase   { text-transform: lowercase !important; }
.capitalize  { text-transform: capitalize !important; }
.tracking-tight  { letter-spacing: -.01em !important; }
.tracking-wide   { letter-spacing: .025em !important; }
.tracking-wider  { letter-spacing: .05em !important; }
.tracking-widest { letter-spacing: .1em !important; }
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.leading-none    { line-height: 1 !important; }
.leading-tight   { line-height: 1.25 !important; }
.leading-snug    { line-height: 1.375 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

/* ── Half-step spacing the original shim skipped ── */
.p-0\.5  { padding: .125rem !important; }
.px-0\.5 { padding-left: .125rem !important;  padding-right: .125rem !important; }
.py-0\.5 { padding-top: .125rem !important;   padding-bottom: .125rem !important; }
.px-1\.5 { padding-left: .375rem !important;  padding-right: .375rem !important; }
.py-1\.5 { padding-top: .375rem !important;   padding-bottom: .375rem !important; }
.px-2\.5 { padding-left: .625rem !important;  padding-right: .625rem !important; }
.py-2\.5 { padding-top: .625rem !important;   padding-bottom: .625rem !important; }
.px-5    { padding-left: 1.25rem !important;  padding-right: 1.25rem !important; }
.py-5    { padding-top: 1.25rem !important;   padding-bottom: 1.25rem !important; }
.pt-4    { padding-top: 1rem !important; }
.pb-4    { padding-bottom: 1rem !important; }
.pt-6    { padding-top: 1.5rem !important; }
.pb-6    { padding-bottom: 1.5rem !important; }
.h-3 { height: .75rem !important; }
.h-4 { height: 1rem !important; }
.w-3 { width: .75rem !important; }
.w-4 { width: 1rem !important; }

/* ── Vertical rhythm ── */
.space-y-1 > * + * { margin-top: .25rem !important; }
.space-y-2 > * + * { margin-top: .5rem !important; }
.space-y-3 > * + * { margin-top: .75rem !important; }
.space-y-4 > * + * { margin-top: 1rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }

.items-baseline { align-items: baseline !important; }

/* ── Semantic colour, mapped to project tokens so dark theme holds ── */
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--color-text-muted) !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--color-text) !important; }
.text-blue-600, .text-blue-700   { color: var(--color-info) !important; }
.text-teal-600, .text-teal-700   { color: var(--color-primary) !important; }
.text-amber-700, .text-amber-800 { color: var(--alert-warn-text) !important; }
.text-red-600, .text-red-700     { color: var(--color-error) !important; }
.text-emerald-600, .text-green-600, .text-green-700 { color: var(--color-success) !important; }
.text-indigo-700 { color: var(--color-info) !important; }

.bg-amber-50, .bg-amber-100 { background-color: var(--alert-warn-bg) !important; }
.bg-indigo-50, .bg-blue-50  { background-color: var(--color-info-bg) !important; }
.border-gray-100, .border-gray-200 { border-color: var(--color-border) !important; }
.rounded { border-radius: var(--radius-sm) !important; }

/* Guarded by [data-theme="dark"], matching the convention the original shim
   already used. Unguarded they applied in BOTH themes and, sitting later in the
   file, beat the light-variant class on the same element:  resolved to the bright dark-mode teal on a white card in
   light theme (2.49:1, an AA failure). */
[data-theme="dark"] .dark\:text-gray-400,
[data-theme="dark"] .dark\:text-gray-500 { color: var(--color-text-muted) !important; }
[data-theme="dark"] .dark\:text-gray-200,
[data-theme="dark"] .dark\:text-gray-300 { color: var(--color-text) !important; }
[data-theme="dark"] .dark\:text-blue-400   { color: var(--color-info) !important; }
[data-theme="dark"] .dark\:text-amber-300  { color: var(--color-warning) !important; }

/* ── Interaction ── */
.transition, .transition-colors {
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, opacity .18s ease !important;
}
.cursor-pointer { cursor: pointer !important; }

.hover\:underline:hover      { text-decoration: underline !important; }
.hover\:bg-gray-100:hover    { background-color: var(--color-surface-soft) !important; }
.hover\:bg-teal-700:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-emerald-700:hover { background-color: var(--color-primary-strong) !important; color: #fff !important; }
.hover\:text-gray-600:hover,
.hover\:text-gray-800:hover  { color: var(--color-text) !important; }

/* Focus rings were missing entirely — a WCAG 2.4.7 failure on every control
   that relied on focus:ring-*. */
/* Order matters and this pairing is the whole point: Tailwind's idiom is
   , i.e. drop the UA outline and draw a ring
   instead. outline-none therefore has to come FIRST; with it last it won at
   equal specificity and left those controls with no focus indicator at all —
   worse than before, since the UA default had been showing. */
.focus\:outline-none:focus { outline: none !important; }

.focus\:ring-2:focus,
.focus\:ring-teal-500:focus,
.focus\:ring-blue-500:focus {
  outline: 2px solid var(--color-primary-light) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .transition, .transition-colors { transition: none !important; }
}

/* ── Second batch: low-frequency but visible ── */
/* overflow-x-auto matters most: without it the billing tables simply clipped
   on a phone instead of scrolling. */
.overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-hidden { overflow: hidden !important; }

.divide-y > * + * { border-top: 1px solid var(--color-border) !important; }
.divide-gray-200 > * + * { border-color: var(--color-border) !important; }

.border-dashed      { border-style: dashed !important; }
.border-amber-200   { border-color: var(--alert-warn-border) !important; }


.p-5   { padding: 1.25rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 1.2 !important; }

[data-theme="dark"] .dark\:text-teal-400   { color: var(--color-primary-light) !important; }
[data-theme="dark"] .dark\:text-rose-300   { color: var(--color-error) !important; }
[data-theme="dark"] .dark\:text-indigo-300 { color: var(--color-info) !important; }
[data-theme="dark"] .dark\:bg-blue-900\/30,
[data-theme="dark"] .dark\:bg-gray-800\/60,
[data-theme="dark"] .dark\:bg-gray-750 {
  background-color: var(--color-surface-soft) !important;
}
[data-theme="dark"] .dark\:bg-emerald-900\/30 { background-color: var(--color-success-bg) !important; }
[data-theme="dark"] .dark\:bg-amber-900\/30   { background-color: var(--alert-warn-bg) !important; }
[data-theme="dark"] .dark\:border-amber-800 { border-color: var(--alert-warn-border) !important; }
.hover\:bg-gray-50\/50:hover { background-color: var(--color-surface-soft) !important; }
.hover\:text-blue-600:hover  { color: var(--color-info) !important; }

@media (min-width: 640px) {
  .sm\:text-3xl { font-size: 1.875rem !important; line-height: 1.25 !important; }
}