:root { color-scheme: light; }
html.dark { color-scheme: dark; }

html.dark .dark\:bg-fw-bg { background-color: #232831 !important; }
html.dark .dark\:bg-fw-bg\/80 { background-color: rgba(35, 40, 49, 0.80) !important; }
html.dark .dark\:bg-fw-bg\/70 { background-color: rgba(35, 40, 49, 0.70) !important; }
html.dark .dark\:bg-fw-bg\/60 { background-color: rgba(35, 40, 49, 0.60) !important; }
html.dark .dark\:bg-fw-surface { background-color: #2b313b !important; }
html.dark .dark\:bg-fw-surface\/80 { background-color: rgba(43, 49, 59, 0.80) !important; }
html.dark .dark\:bg-fw-surface\/70 { background-color: rgba(43, 49, 59, 0.70) !important; }
html.dark .dark\:bg-fw-surface\/60 { background-color: rgba(43, 49, 59, 0.60) !important; }
html.dark .dark\:hover\:bg-fw-bg:hover { background-color: #262c36 !important; }
html.dark .dark\:hover\:bg-fw-surface:hover { background-color: #323a46 !important; }
html.dark .dark\:border-fw-border { border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .dark\:text-fw-text { color: rgba(255, 255, 255, 0.86) !important; }
html.dark .dark\:text-fw-muted { color: rgba(255, 255, 255, 0.62) !important; }

h1::first-letter { text-transform: uppercase; }

main h1 {
  font-size: 1.5rem !important;
  letter-spacing: normal !important;
}
main h1::after {
  content: "";
  display: block;
  height: 3px;
  width: 64px;
  border-radius: 999px;
  margin-top: 0.75rem;
  background: linear-gradient(to right, #22C55E, #10B981);
}
main .text-center h1::after { margin-left: auto; margin-right: auto; }

.fw-masonry { column-gap: 16px; }
.fw-masonry > * { break-inside: avoid; margin-bottom: 16px; }

.fw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-content: center; }
@media (min-width: 640px) {
  .fw-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .fw-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .fw-grid { grid-template-columns: repeat(6, 1fr); }
}

.fw-thumb { width: 100%; height: 350px; object-fit: cover; }
.fw-grid-tablet .fw-thumb { height: 260px; }

.fw-card { position: relative; transform: translateZ(0); border-radius: 10px !important; overflow: hidden; }
.fw-card:hover { transform: translateY(-2px); }
.fw-card::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 10px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;
  color: rgba(255,255,255,0.95);
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.00));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.fw-card:not([data-title])::after { display: none; }
.fw-card:hover::after { opacity: 1; transform: translateY(0); }
.fw-card[data-title=""]::after { display: none; }

.fw-fade-in { opacity: 1; transform: none; }
.js .fw-fade-in { opacity: 0; transform: translateY(6px); }
.js .fw-fade-in.fw-loaded { opacity: 1; transform: translateY(0); transition: opacity 450ms ease, transform 450ms ease; }

.fw-skeleton { position: relative; overflow: hidden; }
.fw-skeleton::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(148,163,184,0.20), rgba(148,163,184,0.42), rgba(148,163,184,0.20)); background-size: 240% 100%; animation: fw-shimmer 1.2s ease-in-out infinite; }
html.dark .fw-skeleton::before { background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); }
.fw-skeleton > * { position: relative; z-index: 1; }
@keyframes fw-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 240% 0; } }

.fw-preview-wrap { border-radius: 10px !important; overflow: hidden !important; transform: translateZ(0); display: inline-flex; }
.fw-preview { display: block; max-width: 100%; border-radius: 10px !important; }

.fw-scrollbar::-webkit-scrollbar { height: 10px; width: 10px; }
.fw-scrollbar::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 999px; }
html.dark .fw-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }

@media (prefers-reduced-motion: reduce) {
  .fw-card:hover { transform: none; }
  .fw-fade-in.fw-loaded { transition: none; }
  .fw-skeleton { animation: none; }
}

.fw-ad {
  text-align: center;
  margin: 7px 0;
}

.fw-res-card { transition: transform 180ms ease, box-shadow 180ms ease; }
.fw-res-card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12) !important; }