/* Раздел «Темы для TURZX»: тёмная витрина. Цвет каждой карточки приходит
   из самой темы через переменную --tz-accent, заданную в разметке. */
:root {
  --tz-bg: #08090C;
  --tz-panel: #101218;
  --tz-line: #1E212B;
  --tz-ink: #ECEDF2;
  --tz-muted: #8E93A3;
  --tz-accent: #51D6C9;

  --tz-pad: clamp(20px, 5vw, 64px);
  --tz-r: 18px;
  --tz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --tz-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tz-bg);
  color: var(--tz-ink);
  font-family: var(--tz-font);
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Живое свечение на фоне: три пятна, медленно плывут */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.aurora span {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.30;
  animation: tz-drift 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: #17A2FF; top: -20vmax; left: -15vmax; }
.aurora span:nth-child(2) { background: #C4521F; bottom: -25vmax; right: -10vmax; animation-duration: 34s; }
.aurora span:nth-child(3) { background: #7A2BE2; top: 35%; left: 45%; animation-duration: 42s; opacity: 0.22; }

@keyframes tz-drift {
  to { transform: translate3d(6vmax, -4vmax, 0) scale(1.15); }
}

.top {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--tz-pad) var(--tz-pad) 0;
  font-family: var(--tz-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-muted);
}
.top__home { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.top__home:hover { border-color: var(--tz-accent); }
.top__here { color: var(--tz-ink); }

main { max-width: 1240px; margin: 0 auto; padding: 0 var(--tz-pad) 4rem; }

/* Шапка раздела */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 2rem; max-width: 46rem; }
.hero__kicker {
  margin: 0 0 0.8em;
  font-family: var(--tz-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tz-accent);
}
.hero__title {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.hero__accent {
  background: linear-gradient(100deg, #51D6C9, #FBF060 35%, #F53362 70%, #8A51D6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tz-shift 9s linear infinite;
}
@keyframes tz-shift { to { background-position: 300% 0; } }

.hero__lead { margin: 1.2em 0 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #C8CBD6; }
.hero__note { margin: 1.2em 0 0; color: var(--tz-muted); font-size: 0.9375rem; }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 2rem 0 0;
  padding: 1.2rem 1.4rem;
  list-style: none;
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-r);
  background: rgba(16, 18, 24, 0.6);
  backdrop-filter: blur(6px);
}
.stats li { display: flex; flex-direction: column; }
.stats b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 0.8125rem; color: var(--tz-muted); }

/* Отбор */
.filters {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.5rem 0 1rem;
  padding: 0.9rem 0;
  background: linear-gradient(var(--tz-bg) 70%, rgba(8, 9, 12, 0));
}
.chip {
  padding: 0.45em 1em;
  border: 1px solid var(--tz-line);
  border-radius: 999px;
  background: rgba(16, 18, 24, 0.8);
  color: var(--tz-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.chip:hover { color: var(--tz-ink); border-color: #38404F; transform: translateY(-1px); }
.chip.is-on {
  color: #08090C;
  background: var(--tz-ink);
  border-color: var(--tz-ink);
  font-weight: 600;
}

.group { margin: 3rem 0 0; }
.group.is-off { display: none; }
.group__title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
}
.group__sub { margin: 0.4em 0 1.8em; color: var(--tz-muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

/* Карточка темы */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tz-line);
  border-radius: var(--tz-r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 40%), var(--tz-panel);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--tz-ease) var(--tz-delay, 0ms),
              transform 0.6s var(--tz-ease) var(--tz-delay, 0ms),
              border-color 0.3s, box-shadow 0.35s;
}
.card.is-in { opacity: 1; transform: none; }
.card.is-off { display: none; }

.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.35s;
}
.card:hover {
  border-color: color-mix(in srgb, var(--tz-accent) 55%, var(--tz-line));
  box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--tz-accent) 70%, transparent),
              0 0 0 1px color-mix(in srgb, var(--tz-accent) 25%, transparent);
  transform: translateY(-6px);
}

.card__shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
  aspect-ratio: 1 / 2.2;
  overflow: hidden;
}
.card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--tz-ease), filter 0.4s;
}
.card:hover .card__shot img { transform: scale(1.06); filter: saturate(1.15); }

/* Блик, пробегающий по превью */
.card__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--tz-ease);
}
.card:hover .card__sheen { transform: translateX(120%); }

.card__zoom {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tz-accent) 85%, #000);
  color: #08090C;
  font-family: var(--tz-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.card:hover .card__zoom { opacity: 1; transform: none; }

.card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem 1.2rem; }
.card__name { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.card__desc { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--tz-muted); }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0; }

.tag {
  padding: 0.2em 0.65em;
  border: 1px solid var(--tz-line);
  border-radius: 999px;
  font-family: var(--tz-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tz-muted);
}
.tag--kind { color: color-mix(in srgb, var(--tz-accent) 80%, #fff); border-color: color-mix(in srgb, var(--tz-accent) 35%, var(--tz-line)); }
.tag--size { font-variant-numeric: tabular-nums; }

.dl {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.55em 1.2em;
  border-radius: 999px;
  background: var(--tz-accent);
  color: #08090C;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.25s, filter 0.2s;
}
.dl:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 24px -12px var(--tz-accent); }
.dl:active { transform: none; }

/* Установка */
.howto { margin: 4rem 0 0; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--tz-line); border-radius: var(--tz-r); background: rgba(16, 18, 24, 0.7); }
.steps { margin: 1.2rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.7rem; }
.steps code { font-family: var(--tz-mono); font-size: 0.875em; padding: 0.15em 0.45em; border-radius: 6px; background: #0B0D12; border: 1px solid var(--tz-line); }
.howto__note { margin: 1.4rem 0 0; color: var(--tz-muted); font-size: 0.9375rem; }

.foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem var(--tz-pad) 3rem;
  border-top: 1px solid var(--tz-line);
  color: var(--tz-muted);
  font-size: 0.9375rem;
}
.foot a { color: var(--tz-ink); }

/* Просмотр темы целиком */
.lb {
  width: min(1100px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tz-accent) 40%, var(--tz-line));
  border-radius: var(--tz-r);
  background: var(--tz-panel);
  color: var(--tz-ink);
  overflow: hidden;
}
.lb::backdrop { background: rgba(4, 5, 8, 0.82); backdrop-filter: blur(4px); }
.lb__grid { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: clamp(1rem, 3vw, 2rem); max-height: 92vh; align-items: start; }
.lb__shot { max-height: 92vh; overflow: auto; scrollbar-width: thin; background: #000; }
.lb__img { width: 100%; height: auto; background: #000; }
.lb__side { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) 0; overflow: auto; }
.lb__name { margin: 0 0 0.6em; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.lb__desc { margin: 0 0 1.2em; color: #C8CBD6; }
.lb__install { margin: 0 0 1.4em; color: var(--tz-muted); font-size: 0.9375rem; }
.lb__size { margin: 0.9em 0 0; color: var(--tz-muted); font-family: var(--tz-mono); font-size: 0.8125rem; }
.lb__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--tz-line);
  border-radius: 50%;
  background: rgba(8, 9, 12, 0.7);
  color: var(--tz-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lb__close:hover { border-color: var(--tz-accent); }

@media (max-width: 720px) {
  .lb__grid { grid-template-columns: 1fr; }
  .lb__shot { max-height: 52vh; }
  .lb__side { padding: 0 1.2rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .hero__accent { animation: none; }
  .card, .card__shot img, .card__sheen, .dl, .chip { transition: none; }
  .card { opacity: 1; transform: none; }
}

/* На телефоне цели нажатия не меньше 44 точек */
@media (pointer: coarse), (max-width: 720px) {
  .chip { padding: 0.65em 1.1em; font-size: 0.9375rem; }
  .dl { padding: 0.75em 1.4em; }
  .lb__close { width: 2.75rem; height: 2.75rem; }
}