@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  scroll-behavior: smooth;
}

/* Wskaźnik aktywnej zakładki — pływający, zaokrąglony pasek zamiast ciągłej linii
   stykającej się z sąsiednimi zakładkami. Kolor = currentColor, więc podąża za
   text-blue-600 (i za skórką portalu, bez dodatkowej konfiguracji per-strona). */
.tab-underline { position: relative; }
.tab-underline::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 3px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.7);
  transition: opacity .2s ease, transform .2s ease;
}
.tab-underline.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  animation: tab-underline-breathe-h 2.4s ease-in-out infinite;
}
@keyframes tab-underline-breathe-h {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.8); }
}

/* Wariant dla górnego menu — na mobile pasek pionowy z lewej, na desktopie (md+)
   poziomy pod spodem; oba warianty "pływają" z przerwą zamiast dotykać sąsiadów. */
.nav-tab-underline { position: relative; }
.nav-tab-underline::before,
.nav-tab-underline::after {
  content: '';
  position: absolute;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
}
.nav-tab-underline::before { left: 0; top: 22%; bottom: 22%; width: 3px; }
.nav-tab-underline::after { left: 14%; right: 14%; bottom: -1px; height: 3px; }
.nav-tab-underline.is-active::before,
.nav-tab-underline.is-active::after { opacity: 1; }
.nav-tab-underline.is-active::before { animation: tab-underline-breathe-v 2.4s ease-in-out infinite; }
.nav-tab-underline.is-active::after { animation: tab-underline-breathe-h 2.4s ease-in-out infinite; }
@keyframes tab-underline-breathe-v {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.78); }
}
@media (min-width: 768px) {
  .nav-tab-underline::before { display: none; }
}
@media (max-width: 767.98px) {
  .nav-tab-underline::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-underline.is-active::after,
  .nav-tab-underline.is-active::before,
  .nav-tab-underline.is-active::after { animation: none; }
}

/* Ukrycie natywnej nakładki Chrome "Obraz w obrazie" / kontrolek na tłach wideo (banery, miniaturki tła profilu) */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-picture-in-picture-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Jednokolorowe ikony SVG w module "Rozwijaj swoją firmę" (goals/moduły/branże) —
   skalują się jak font ikonowy: 1em = font-size elementu, w którym są osadzone. */
.gc-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* Ukrycie paska przewijania w poziomych listach kategorii */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Delikatny podnoszący hover na kartach */
.card-hover {
  transition: box-shadow .15s ease, transform .15s ease;
}

/* Samouczek — podświetlenie elementu, na który wskazuje aktualny krok przewodnika */
.samouczek-highlight {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
  border-radius: 14px;
  transition: outline-color .2s ease;
}

/* Samouczek — potrząśnięcie chmurki, gdy użytkownik kliknie coś poza Dalej/Pomiń */
@keyframes samouczek-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.samouczek-shake {
  animation: samouczek-shake .4s ease;
}

/* Prezentacja — automatyczny pokaz portalu do nagrywania wideo: podświetlenie
   omawianego elementu, fioletowe (nawiązanie do skórki "Fioletowy AI") */
.prezentacja-highlight {
  outline: 3px solid #7c3aed;
  outline-offset: 4px;
  border-radius: 14px;
  transition: outline-color .2s ease;
}
.card-hover:hover {
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .12);
  transform: translateY(-1px);
}

/* Auto-ukrywanie górnego i dolnego paska przy scrollu w dół (tylko mobile, jak FB/IG) */
header, #bottom-nav {
  transition: transform .25s ease;
}
.pd-bar-hide-up { transform: translateY(-100%); }
.pd-bar-hide-down { transform: translateY(100%); }

/* Efekt rozmycia tła pod KAŻDYM wyskakującym oknem — obecnym i przyszłym.
   Wystarczy, że modal ma atrybut [data-modal] (standard w całym portalu,
   patrz main.js initModals()), a rozmycie zadziała automatycznie w każdej
   skórce, bez dodatkowego kodu per-modal. */
[data-modal] {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Dropdowny */
[data-dropdown-panel] {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
[data-dropdown-panel].open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Wrapper wstrzykiwany przez include.js nie może tworzyć własnego pudełka —
   inaczej "sticky" nagłówka nie ma w rodzicu miejsca, by się przykleić. */
[data-include="/partials/header.html"] {
  display: contents;
}

/* Placeholder "logo" firmy - inicjał w kolorowym kółku */
.company-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  border-radius: .75rem;
  flex-shrink: 0;
}

/* Tło wideo profilu (funkcja Premium) — działa niezależnie od skórki, więc style
   nie są w themes.css. Kontener #profile-cover ma domyślnie płaski gradient;
   po wybraniu filmu w Ustawieniach profile-bg.js dokłada .profile-cover--video
   oraz elementy .profile-cover-video / -overlay / -caption. */
#profile-cover { transition: height .2s ease; }
/* Wyższy baner w trybie wideo — okładka jest bardzo szeroka względem wysokości,
   więc zbyt niski kontener "zjada" kadr filmu (object-fit:cover mocno przycina
   górę/dół). Większa wysokość pokazuje wyraźnie więcej sceny. */
/* !important: musi wygrać z narzuconą wysokością Tailwindowych klas h-32/sm:h-44
   na tym samym elemencie (Tailwind CDN dokleja swój <style> na końcu <head>,
   więc bez !important kolejność źródła daje mu pierwszeństwo). */
.profile-cover--video { height: 20rem !important; }
@media (min-width: 640px) { .profile-cover--video { height: 26rem !important; } }
@media (min-width: 1024px) { .profile-cover--video { height: 30rem !important; } }
.profile-cover-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  /* Czysto dekoracyjne tło — bez natywnych nakładek przeglądarki (Picture-in-Picture,
     zdalne odtwarzanie/cast), które potrafią wyskakiwać po najechaniu kursorem. */
  pointer-events: none;
}
.profile-cover-video::-webkit-media-controls,
.profile-cover-video::-webkit-media-controls-panel,
.profile-cover-video::-webkit-media-controls-overlay-play-button,
.profile-cover-video::-webkit-media-controls-picture-in-picture-button,
.profile-cover-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Własny film z YouTube jako tło profilu — ten sam kadr i tę samą dekoracyjną
   rolę co .profile-cover-video, tylko jako <iframe> zamiast <video>. */
.profile-cover-yt {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none;
  transform: scale(1.35);
}
.profile-cover-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, rgba(15, 8, 30, .15) 0%, rgba(15, 8, 30, .3) 55%, rgba(15, 8, 30, .75) 100%);
}
/* Podpis siedzi w górnej/środkowej części banera — dolny pas okładki jest
   zawsze zasłonięty przez zdjęcie profilowe (nachodzi z ujemnym marginesem),
   więc podpis musi trzymać się z dala od tej strefy niezależnie od wysokości. */
.profile-cover-caption {
  position: absolute; left: 0; right: 0; top: 3.25rem;
  margin: 0; padding: 0 1.5rem;
  color: #fff;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
  letter-spacing: .01em;
}
@media (min-width: 640px) { .profile-cover-caption { font-size: 1.4rem; top: 4.5rem; } }
@media (min-width: 1024px) { .profile-cover-caption { font-size: 1.6rem; top: 5.5rem; } }

/* Warianty koloru/efektu podpisu — wybierane w Ustawieniach (max 8 opcji).
   "gold" i "rainbow" migoczą (gradient tekstu animowany przesunięciem tła). */
.profile-cover-caption.caption-color-white { color: #ffffff; }
.profile-cover-caption.caption-color-rose { color: #f472b6; }
.profile-cover-caption.caption-color-sky { color: #60a5fa; }
.profile-cover-caption.caption-color-emerald { color: #34d399; }
.profile-cover-caption.caption-color-red { color: #f87171; }
.profile-cover-caption.caption-color-violet { color: #c084fc; }
.profile-cover-caption.caption-color-gold,
.profile-cover-caption.caption-color-rainbow {
  color: transparent;
  background-repeat: repeat;
  /* Szerokość 300%, wysokość zablokowana na 100% — gwarantuje, że przelewający się
     kolor przesuwa się wyłącznie w poziomie, niezależnie od długości napisu. */
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: caption-shimmer 3s linear infinite;
}
.profile-cover-caption.caption-color-gold {
  background-image: linear-gradient(90deg, #fff8e1 0%, #ffffff 15%, #f5d485 35%, #b8860b 50%, #f5d485 65%, #ffffff 85%, #fff8e1 100%);
}
.profile-cover-caption.caption-color-rainbow {
  background-image: linear-gradient(90deg, #f87171, #fbbf24, #34d399, #60a5fa, #c084fc, #f87171);
}
@keyframes caption-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* Próbki kolorów podpisu (Ustawienia) */
.caption-swatch {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background-size: 200% auto;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
  cursor: pointer;
}
.caption-swatch.is-selected { border-color: #7c3aed; box-shadow: 0 0 0 2px #7c3aed, inset 0 0 0 2px rgba(255,255,255,.7); }

/* Miniaturki w wyborze tła (Ustawienia) */
.bg-thumb {
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0f0a1f;
  cursor: pointer;
  border: 2px solid transparent;
}
.bg-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Czysto dekoracyjne miniaturki — bez natywnych nakładek przeglądarki (Picture-in-Picture,
     zdalne odtwarzanie/cast), które potrafią wyskakiwać po najechaniu kursorem. */
  pointer-events: none;
}
.bg-thumb video::-webkit-media-controls,
.bg-thumb video::-webkit-media-controls-panel,
.bg-thumb video::-webkit-media-controls-overlay-play-button,
.bg-thumb video::-webkit-media-controls-picture-in-picture-button,
.bg-thumb video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.bg-thumb.is-selected { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }
.bg-thumb-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .35rem .5rem;
  font-size: .7rem; font-weight: 600; color: #fff;
  background-image: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
.bg-thumb-lock {
  position: absolute; inset: 0;
  background: rgba(10, 6, 20, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  color: #fff; text-align: center; padding: .5rem;
}

/* ==========================================================================
   Globalne mikro-interakcje portalu (niezależne od skórki — kolory akcentu
   pochodzą z --brand, więc automatycznie dopasowują się do aktywnego motywu)
   ========================================================================== */


/* --- Przycisk "Powrót na górę" z pierścieniem postępu przewijania --- */
#pd-back-to-top {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 70;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#pd-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (max-width: 767px) {
  /* Nie zasłaniaj dolnego paska nawigacji na mobile */
  #pd-back-to-top { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}
#pd-back-to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#pd-back-to-top .pd-ring-bg { fill: none; stroke: rgba(15, 23, 42, .1); stroke-width: 3; }
#pd-back-to-top .pd-ring-fg {
  fill: none; stroke: var(--brand, #2563eb); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  transition: stroke-dashoffset .12s linear;
}
#pd-back-to-top .pd-arrow { position: relative; font-size: 1.05rem; font-weight: 800; color: var(--brand, #2563eb); line-height: 1; }
#pd-back-to-top:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, .26); }

/* --- Puls / rozchodzące się fale — sygnalizuje aktywność (powiadomienia, czat) --- */
.pd-pulse { position: relative; }
.pd-pulse::before,
.pd-pulse::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 9999px;
  border: 1.5px solid var(--brand, #2563eb);
  opacity: 0;
  animation: pd-pulse-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.pd-pulse::after { animation-delay: 1.2s; }
@keyframes pd-pulse-ring {
  0% { transform: scale(.75); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --- Oddychające karty premium — subtelna pulsująca skala (transform, tanie do animowania) --- */
.pd-breathing { animation: pd-breathe 3.6s ease-in-out infinite; box-shadow: 0 4px 16px rgba(99, 102, 241, .16); }
@keyframes pd-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

/* --- Wstążka "Nowość" po przekątnej — wymaga position:relative + overflow:hidden na rodzicu --- */
.pd-ribbon-new {
  position: absolute; top: 13px; right: -35px;
  width: 140px;
  text-align: center;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(244, 63, 94, .45);
  animation: pd-ribbon-pulse 2.4s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes pd-ribbon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }

/* --- Pasek postępu "w toku" — przesuwający się połysk sugerujący aktywny proces --- */
.pd-progress-loading { position: relative; overflow: hidden; }
.pd-progress-loading::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: pd-progress-sweep 1.7s ease-in-out infinite;
}
@keyframes pd-progress-sweep {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* --- Fala SVG oddzielająca stopkę — trzy warstwy, różne prędkości, pętla w nieskończoność.
   Warstwa 3 (biała, na wierzchu) tworzy falisty "brzeg" wtapiający się w tło stopki,
   zamiast twardego, prostego cięcia między kolorową falą a białą sekcją stopki. --- */
.pd-wave-wrap {
  position: relative;
  height: 88px;
  overflow: hidden;
  line-height: 0;
}
.pd-wave { position: absolute; bottom: -1px; left: 0; width: 200%; height: 100%; }
.pd-wave-1 { fill: var(--brand-light, rgba(37, 99, 235, .07)); animation: pd-wave-move 16s linear infinite; }
.pd-wave-2 { fill: var(--brand-100, rgba(37, 99, 235, .12)); animation: pd-wave-move 10s linear infinite reverse; opacity: .8; }
.pd-wave-3 { fill: #fff; animation: pd-wave-move 22s linear infinite; }
@keyframes pd-wave-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Pasek "giełdowy" pod falami — pogoda i kursy, przewija się w nieskończoność
   jak pasek informacyjny w wiadomościach. Wartości symulowane w przeglądarce
   (assets/js/main.js: initMarketTicker), bez realnych zapytań do zewnętrznych API. --- */
.pd-ticker-bar {
  background: #0f172a;
  border-top: 2px solid var(--brand, #2563eb);
  overflow: hidden;
  white-space: nowrap;
}
.pd-ticker-track {
  display: inline-flex;
  align-items: center;
  padding: 7px 0;
  animation: pd-ticker-scroll 30s linear infinite;
}
.pd-ticker-bar:hover .pd-ticker-track { animation-play-state: paused; }
@keyframes pd-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.pd-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  padding: 0 1.1rem;
}
.pd-ticker-item .pd-ticker-label { color: #7dd3fc; font-weight: 700; letter-spacing: .02em; }
.pd-ticker-up { color: #4ade80; }
.pd-ticker-down { color: #f87171; }
.pd-ticker-sep { color: rgba(255, 255, 255, .2); }

/* --- Ticker aktywności, który "wyłania się" z fal — czysto dekoracyjny i losowy
   (assets/js/main.js: initFooterTicker), nic tu nie pochodzi z żadnej bazy danych. --- */
.pd-wave-ticker { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pd-wave-ticker-item {
  position: absolute;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .92);
  border-radius: 9999px;
  padding: 3px 10px 3px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-dark, #2563eb);
  white-space: nowrap;
  opacity: 0;
  animation: pd-ticker-rise 4.2s ease-in-out forwards;
}
.pd-ticker-icon { font-size: 14px; line-height: 1; }
@keyframes pd-ticker-rise {
  0% { opacity: 0; transform: translateY(10px) scale(.85); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  55% { opacity: 1; transform: translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateY(-56px) scale(.9); }
}
/* Bąbelek "zjedzony" przez rybę — szybko znika zamiast zwykłego wypłynięcia. */
.pd-ticker-eaten { animation: pd-ticker-eaten .26s ease-in forwards !important; }
@keyframes pd-ticker-eaten {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.3); }
}
/* Gruba rybka, która od czasu do czasu przepływa i "połyka" bąbelki. */
.pd-wave-fish {
  position: absolute;
  left: -10%;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15));
  animation: pd-fish-swim 4.2s linear forwards;
}
.pd-fish-flip { transform: scaleX(-1); }
@keyframes pd-fish-swim {
  from { left: -10%; }
  to { left: 105%; }
}

/* --- Pulsujące pinezki na mapie (Turyngia) --- */
.pd-map-pin { cursor: pointer; }
.pd-map-pin circle.pd-pin-core { fill: var(--brand, #2563eb); }
.pd-map-pin circle.pd-pin-ring {
  fill: none;
  stroke: var(--brand, #2563eb);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pd-map-pulse 2.2s ease-out infinite;
}
.pd-map-pin:hover circle.pd-pin-core { r: 7; }
.pd-map-pin text {
  font-size: 8px; font-weight: 700; fill: #475569;
  paint-order: stroke; stroke: #fff; stroke-width: 3px;
}
@keyframes pd-map-pulse {
  0% { transform: scale(.5); opacity: .8; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* --- Rozkład ocen: paski wypełniające się przy wejściu sekcji na ekran --- */
.pd-rating-bar-track { background: rgba(15, 23, 42, .08); border-radius: 9999px; overflow: hidden; height: 8px; }
.pd-rating-bar-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  width: 0%;
  transition: width 1s cubic-bezier(.22, .9, .3, 1);
}
.pd-rating-bar-fill.is-filled { width: var(--fill, 0%); }

/* --- Trasa SVG rysująca się podczas scrollowania (Przejazdy) --- */
.pd-route-path {
  fill: none;
  stroke: var(--brand, #2563eb);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--route-len, 1000);
  stroke-dashoffset: var(--route-len, 1000);
  transition: stroke-dashoffset .1s linear;
}

/* --- Kafelek "Zmień wygląd" — podgląd innych skórek portalu z przełącznikiem
   lewo/prawo. Podgląd renderuje prawdziwy mini-układ strony wewnątrz elementu
   z atrybutem [data-theme], więc automatycznie dziedziczy właściwe zmienne
   --brand z themes.css — bez osobnej tabeli kolorów na skórkę. --- */
.theme-switch-stage {
  overflow: hidden;
  background: #f3f4f6;
}
.theme-switch-mock-page {
  position: absolute;
  inset: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .35s ease;
}
.theme-switch-mock-nav {
  height: 11px;
  width: 46%;
  border-radius: 5px;
  background: var(--brand, #2563eb);
}
.theme-switch-mock-hero {
  flex: 1;
  border-radius: 10px;
  background: var(--brand-light, rgba(37, 99, 235, .1));
  border: 1px solid var(--brand-100, rgba(37, 99, 235, .18));
}
.theme-switch-mock-row {
  display: flex;
  gap: 6px;
}
.theme-switch-mock-card {
  flex: 1;
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(0, 0, 0, .06);
}
.theme-switch-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .92);
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .15s ease, background .15s ease;
  z-index: 2;
}
.theme-switch-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.theme-switch-arrow.left { left: 8px; }
.theme-switch-arrow.right { right: 8px; }
.theme-switch-swatch-dot {
  width: 8px; height: 8px; border-radius: 9999px; display: inline-block; flex-shrink: 0;
}