.skeleton {
  position: relative;
  overflow: hidden;
  background: #e2e8f0;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: shimmer 1.1s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

:root {
  --models-bg: #171717;
  --models-surface: #212121;
  --models-surface-2: #2f2f2f;
  --models-surface-3: #303030;
  --models-line: rgba(255, 255, 255, 0.09);
  --models-line-strong: rgba(255, 255, 255, 0.16);
  --models-text: #f4f4f4;
  --models-muted: #b4b4b4;
  --models-faint: #8f8f8f;
  --models-teal: #1198a8;
  --models-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html {
  color-scheme: dark;
}

body {
  background: var(--models-bg);
  color: var(--models-text);
  text-rendering: geometricPrecision;
}

body > header {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(23, 23, 23, 0.82) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

body > header img[src$="logo.svg"] {
  filter: brightness(0) invert(1) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
}

body > header .text-slate-900,
body > header .text-slate-800,
body > header .text-slate-700,
body > header .text-slate-600,
body > header .text-slate-500,
body > footer .text-slate-900,
body > footer .text-slate-800,
body > footer .text-slate-700,
body > footer .text-slate-600,
body > footer .text-slate-500,
.models-page .text-slate-900,
.models-page .text-slate-800,
.models-page .text-slate-700,
.models-page .text-slate-600,
.models-page .text-slate-500 {
  color: var(--models-muted) !important;
}

body > header .font-extrabold,
body > header .font-bold,
body > footer .font-extrabold,
body > footer .font-bold,
.models-page h1,
.models-page h2,
.models-page h3,
.models-page .font-extrabold,
.models-page .font-bold,
.models-page .font-semibold {
  color: var(--models-text) !important;
}

body > header a:hover,
body > footer a:hover,
.models-page a:hover {
  color: #fff !important;
}

body > header .bg-white,
body > header .bg-white\/80,
body > header .bg-white\/95,
body > header .bg-slate-50,
body > header .bg-brand-50,
body > header .border-slate-200,
body > header .border-slate-300,
body > header .border-brand-100,
body > footer,
body > footer .bg-white {
  border-color: var(--models-line) !important;
  background: rgba(33, 33, 33, 0.78) !important;
}

body > header .bg-slate-900,
body > header .bg-brand-50 {
  background: rgba(255, 255, 255, 0.09) !important;
}

body > header .text-brand-700,
.models-page .text-brand-700 {
  color: #8edce5 !important;
}

body > header #creditValue {
  color: #fff !important;
}

body > header #mobileMenuPanel,
body > header #userMenuPanel {
  border-color: var(--models-line) !important;
  background: rgba(23, 23, 23, 0.96) !important;
  box-shadow: var(--models-shadow);
}

.models-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.06), transparent 26rem),
    radial-gradient(circle at 18% 14%, rgba(17, 152, 168, 0.12), transparent 24rem),
    linear-gradient(180deg, #171717 0%, #1d1d1d 48%, #171717 100%);
}

.models-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 70%);
  pointer-events: none;
}

.models-page > nav a,
.models-page > nav li {
  color: var(--models-muted) !important;
}

.models-hero {
  border-color: var(--models-line) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 28rem),
    radial-gradient(circle at 20% 82%, rgba(17, 152, 168, 0.15), transparent 24rem);
}

.models-hero-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--models-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.065), transparent 19rem),
    rgba(33, 33, 33, 0.56);
  box-shadow: var(--models-shadow);
  backdrop-filter: blur(18px);
  padding: clamp(1.35rem, 3vw, 2rem);
}

.models-hero-badge,
.models-hero-stats span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--models-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #d9f8fb;
  font-size: 0.76rem;
  font-weight: 750;
}

.models-hero-badge {
  margin-bottom: 1rem;
  padding: 0.42rem 0.8rem;
}

.models-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.models-hero-stats span {
  padding: 0.42rem 0.75rem;
  color: var(--models-muted);
}

.models-page input[type="search"],
.models-page input[type="text"],
.models-page input[type="number"],
.models-page select,
.models-page textarea {
  border-color: var(--models-line-strong) !important;
  background: var(--models-surface-3) !important;
  color: var(--models-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.models-page input::placeholder {
  color: var(--models-faint) !important;
}

.models-page input:focus,
.models-page select:focus,
.models-page textarea:focus {
  border-color: rgba(142, 220, 229, 0.62) !important;
  box-shadow: 0 0 0 4px rgba(17, 152, 168, 0.16) !important;
}

#desktopSidebar > div,
#emptyState,
#mobileDrawer > div:last-child {
  border-color: var(--models-line) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.055), transparent 16rem),
    rgba(33, 33, 33, 0.86) !important;
  box-shadow: var(--models-shadow) !important;
  backdrop-filter: blur(18px);
}

#openFiltersBtn,
#closeDrawerBtn,
#pagination button,
#pagination span,
#groupFiltersDesktop label,
#groupFiltersMobile label,
#typeFiltersDesktop label,
#typeFiltersMobile label {
  border-color: var(--models-line) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--models-text) !important;
  box-shadow: none !important;
}

#groupFiltersDesktop label:hover,
#groupFiltersMobile label:hover,
#typeFiltersDesktop label:hover,
#typeFiltersMobile label:hover,
#openFiltersBtn:hover,
#closeDrawerBtn:hover,
#pagination button:hover:not(:disabled) {
  border-color: var(--models-line-strong) !important;
  background: rgba(255, 255, 255, 0.085) !important;
}

#groupFiltersDesktop input,
#groupFiltersMobile input,
#typeFiltersDesktop input,
#typeFiltersMobile input {
  accent-color: var(--models-teal);
}

#groupFiltersDesktop label span,
#groupFiltersMobile label span,
#typeFiltersDesktop label span,
#typeFiltersMobile label span {
  color: var(--models-muted) !important;
}

#groupFiltersDesktop label span:last-child,
#groupFiltersMobile label span:last-child {
  border-color: var(--models-line) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #d9f8fb !important;
}

#modelsGrid > article,
#modelsGrid > div {
  border-color: var(--models-line) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.05), transparent 14rem),
    rgba(33, 33, 33, 0.86) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

#modelsGrid > article {
  border-radius: 24px !important;
}

#modelsGrid > article:hover {
  border-color: var(--models-line-strong) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28) !important;
}

#modelsGrid img {
  background: var(--models-surface-2);
}

#modelsGrid article .bg-slate-100,
#modelsGrid article .bg-white {
  border-color: var(--models-line) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

#modelsGrid article h3 {
  color: var(--models-text) !important;
}

#modelsGrid article p,
#modelsGrid article .text-slate-500,
#modelsGrid article .text-slate-600 {
  color: var(--models-muted) !important;
}

#modelsGrid article a,
#pagination button.bg-slate-900,
#pagination button.border-slate-900 {
  border: 1px solid rgba(244, 244, 244, 0.12) !important;
  background: #f4f4f4 !important;
  color: #171717 !important;
}

#modelsGrid article a:hover {
  background: #fff !important;
  transform: translateY(-1px);
}

#modelsGrid article a .text-slate-400 {
  color: rgba(23, 23, 23, 0.42) !important;
}

.skeleton {
  background: rgba(255, 255, 255, 0.075);
}

#drawerBackdrop {
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(4px);
}

body > footer {
  margin-top: 0 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: #171717 !important;
}

body > footer a {
  border-color: var(--models-line) !important;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .models-page *,
  body > header *,
  body > footer * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .models-hero-panel {
    border-radius: 24px;
  }

  #modelsGrid > article {
    border-radius: 22px !important;
  }
}