/* PZDCFlix UI — общий дизайн всех страниц сайта.
   Цвета берутся из палитры главной (pz-palette.js ставит переменные на <html>),
   здесь только запасные значения = палитра по умолчанию (PANTONE 7506, светлая).
   Размеры компактные и одни на всех страницах: шапка 52px, контролы 34px,
   радиусы 12/9px, текст 14/12/11px. */
:root {
  color-scheme: light;
  --bg: #faf3e6;
  --panel: #fdfbf6;
  --border: #c1b191;
  --text: #28251f;
  --muted: #6d6659;
  --surface-0: #fbf7ef;
  --surface-1: #fcf9f3;
  --surface-2: #f9f2e3;
  --surface-3: #f7ecd7;
  --surface-4: #f4e6cb;
  --accent: #7a6337;
  --accent-rgb: 122 99 55;
  --accent-soft: rgba(122, 99, 55, 0.12);
  --accent-medium: rgba(122, 99, 55, 0.22);
  --accent-strong: rgba(122, 99, 55, 0.45);
  --accent-bright: hsl(40 45% 44%);
  --accent-dark: hsl(40 38% 23%);
  --accent-contrast: #ffffff;
  --pz-hairline: rgba(122, 99, 55, 0.18);
  --pz-glow: rgba(122, 99, 55, 0.2);

  --pz-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pz-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --pz-r: 12px;
  --pz-r-sm: 9px;
  --pz-ctl-h: 34px;
  --pz-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --pz-line: var(--pz-hairline);
  --pz-gold: #d99a16;
  --pz-red: #e5484d;
}
html[data-theme="dark"] { color-scheme: dark; --pz-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35); --pz-gold: #ffc53d; --pz-red: #ff5b63; }
html[data-theme="aero"] { --pz-shadow: 0 1px 2px rgb(10 70 90 / 0.08), 0 10px 28px rgb(10 70 90 / 0.14); }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 var(--pz-font);
  -webkit-font-smoothing: antialiased;
}
html[data-theme="aero"] body {
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.95) 0 7%, transparent 18%),
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.72) 0 5%, transparent 16%),
    linear-gradient(180deg, #69d5f4 0%, #c9f5ff 58%, #7ed971 76%, #41ad55 100%);
  background-attachment: fixed;
}
a { color: inherit; }
a, button, input { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden, [hidden] { display: none !important; }

/* Шапка и меню разделов — в pz-top.css (их подключает и главная). */

/* ---------- раскладка ---------- */
.pz-page {
  width: 100%;
  max-width: var(--pz-page-w, 1180px);
  margin: 0 auto;
  padding: 22px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
}
.pz-narrow { --pz-page-w: 640px; }
.pz-head { display: grid; gap: 6px; margin: 4px 0 18px; }
.pz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pz-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px var(--pz-glow); }
.pz-title { margin: 0; font-size: clamp(24px, 3.2vw, 32px); font-weight: 820; line-height: 1.1; letter-spacing: -0.035em; }
.pz-title em { color: var(--accent); font-style: normal; }
.pz-lead { max-width: 60ch; margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pz-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 2px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pz-label small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; opacity: 0.85; }

/* ---------- поверхности ---------- */
.pz-card {
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r);
  background: var(--surface-1);
  box-shadow: var(--pz-shadow);
}
.pz-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pz-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r);
  background: var(--surface-1);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
a.pz-row:hover { border-color: var(--accent-strong); background: var(--surface-2); }
.pz-row-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border-radius: var(--pz-r-sm);
  background: var(--surface-3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.pz-row-main { display: grid; min-width: 0; flex: 1; gap: 1px; }
.pz-row-main strong { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pz-row-main small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- контролы ---------- */
.pz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--pz-ctl-h);
  padding: 0 13px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r-sm);
  background: var(--surface-3);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.1s;
}
.pz-btn:hover { background: var(--surface-4); }
.pz-btn:active { transform: translateY(1px); }
.pz-btn-accent {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark));
  color: var(--accent-contrast);
}
.pz-btn-accent:hover { background: linear-gradient(135deg, var(--accent-bright), var(--accent-dark)); filter: brightness(1.07); }
.pz-btn:disabled { cursor: not-allowed; opacity: 0.5; filter: grayscale(0.4); }
.pz-icon-btn { width: var(--pz-ctl-h); padding: 0; }
.pz-icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pz-chips { display: flex; gap: 6px; overflow-x: auto; padding: 1px; scrollbar-width: none; }
.pz-chips::-webkit-scrollbar { display: none; }
.pz-chip {
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--pz-line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pz-chip:hover { background: var(--surface-3); color: var(--text); }
.pz-chip.active, .pz-chip[aria-pressed="true"] { border-color: var(--accent-medium); background: var(--accent-soft); color: var(--accent); }

.pz-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--pz-ctl-h);
  padding: 0 11px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r-sm);
  background: var(--surface-1);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pz-search:focus-within { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.pz-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.pz-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.pz-search input::placeholder { color: var(--muted); opacity: 0.8; }

.pz-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ---------- подвал и тост ---------- */
.pz-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  max-width: var(--pz-page-w, 1180px);
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--pz-line);
  color: var(--muted);
  font-size: 12px;
}
.pz-foot nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pz-foot a { color: var(--muted); text-decoration: none; }
.pz-foot a:hover { color: var(--accent); }
.pz-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px);
  padding: 9px 15px;
  border: 1px solid var(--accent-medium);
  border-radius: 999px;
  background: var(--surface-1);
  box-shadow: var(--pz-shadow);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s, transform 0.2s;
}
.pz-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Картинки проявляются по загрузке, пока грузятся — мерцающая подложка. */
.pz-shimmer {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
  animation: pz-shimmer 1.4s linear infinite;
}
@keyframes pz-shimmer { to { background-position: -150% 0; } }

@media (max-width: 640px) {
  .pz-page { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}