:root {
  --bg: #0e0e10;
  --surface: #18181c;
  --surface-2: #222228;
  --line: rgba(255, 255, 255, 0.06);
  --text: #f4f4f6;
  --hint: #8f8f99;
  --accent: #e0182d;
  --accent-2: #ff3b5c;
  --accent-rgb: 224, 24, 45;
  --danger: #ff4d5e;
  --radius: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

a { color: var(--accent-2); }

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- Шапка ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 14, 16, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 6px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  min-width: 0;
}

.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.5), 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

.stats { display: flex; gap: 6px; flex-shrink: 0; }

.stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.stat svg { width: 16px; height: 16px; color: var(--accent-2); }

#nav {
  display: flex;
  gap: 6px;
  padding: 6px 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

#nav::-webkit-scrollbar { display: none; }

.tab {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--hint);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.tab.active {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

/* ---------- Общее ---------- */

#app { padding: 14px 14px 48px; }

h1 { font-size: 24px; margin: 0 0 8px; word-break: break-word; }
h2 { font-size: 17px; margin: 22px 0 10px; color: var(--hint); font-weight: 600; }
p { margin: 6px 0; white-space: pre-wrap; word-break: break-word; }

.muted { color: var(--hint); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- Карточки коллекций ---------- */

.grid { display: flex; flex-direction: column; gap: 14px; }

.card {
  --tint: #ff3b5c;
  --tint-rgb: 255, 59, 92;
  position: relative;
  display: block;
  min-height: 150px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s;
}

a.card:active { transform: scale(0.985); }

.t-mixed { --tint: #ff3b5c; --tint-rgb: 255, 59, 92; }
.t-image { --tint: #ff4f8b; --tint-rgb: 255, 79, 139; }
.t-audio { --tint: #2fd39a; --tint-rgb: 47, 211, 154; }
.t-video { --tint: #8b7cff; --tint-rgb: 139, 124, 255; }
.t-sticker { --tint: #ffd23d; --tint-rgb: 255, 210, 61; }
.t-link { --tint: #4da3ff; --tint-rgb: 77, 163, 255; }

.card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--tint-rgb), 0.3) 0%, rgba(var(--tint-rgb), 0.08) 50%, var(--surface) 100%);
}

.card-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 14, 16, 0.92) 0%, rgba(14, 14, 16, 0.6) 55%, rgba(14, 14, 16, 0.3) 100%),
    linear-gradient(135deg, rgba(var(--tint-rgb), 0.22), transparent 60%);
}

.card-content { position: relative; padding: 20px 76px 20px 20px; }
.card.has-tag .card-content { padding-top: 48px; }

.card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }

.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(var(--tint-rgb), 0.16);
  border: 1px solid rgba(var(--tint-rgb), 0.38);
  color: var(--tint);
  flex-shrink: 0;
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-desc {
  margin-top: 10px;
  color: var(--hint);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--tint-rgb), 0.14);
  border: 1px solid rgba(var(--tint-rgb), 0.35);
  color: var(--tint);
  font-size: 13px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill.ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
  color: var(--hint);
  font-weight: 600;
}

.tag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
}

.tag.muted-tag { background: rgba(255, 255, 255, 0.1); color: var(--text); box-shadow: none; }

.arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ---------- Страница коллекции ---------- */

.head {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), var(--surface) 60%);
  border: 1px solid var(--line);
}

.head-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.head.with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 14, 16, 0.35) 0%, rgba(14, 14, 16, 0.92) 100%);
}

.head > :not(.head-bg) { position: relative; z-index: 2; }

.badge {
  display: inline-block;
  margin: 8px 6px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
}

.badge.danger {
  color: var(--danger);
  background: rgba(255, 77, 94, 0.12);
  border-color: rgba(255, 77, 94, 0.35);
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.item img, .item video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.item.sticker img, .item.sticker video { object-fit: contain; padding: 6px; }
.item video[controls] { object-fit: contain; background: #000000; }
.item.audio, .item.link, .item.wide { grid-column: 1 / -1; }

.track { padding: 12px 14px; }
.track-title { padding-right: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track audio { width: 100%; margin-top: 8px; }

.link-item {
  display: block;
  padding: 14px 76px 14px 14px;
  color: #4da3ff;
  text-decoration: none;
  word-break: break-all;
}

.caption {
  padding: 6px 10px 8px;
  font-size: 12px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}

.tool svg { width: 15px; height: 15px; }
.tool.done { background: rgba(47, 211, 154, 0.85); }
.tool:disabled { opacity: 0.5; }

/* ---------- Кнопки и формы ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28);
}

.btn:disabled { opacity: 0.6; cursor: default; }

.btn.secondary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}

.btn.danger {
  background: rgba(255, 77, 94, 0.12);
  border: 1px solid rgba(255, 77, 94, 0.35);
  color: var(--danger);
  box-shadow: none;
}

.btn.wide { width: 100%; margin-top: 14px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

input:focus, textarea:focus, select:focus { border-color: rgba(var(--accent-rgb), 0.7); }
input::placeholder, textarea::placeholder { color: var(--hint); }
input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--accent); }

textarea { min-height: 100px; resize: vertical; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 6px; color: var(--hint); font-size: 13px; }

.range-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.range-row span { white-space: nowrap; }

.toolbar, .row { display: flex; gap: 8px; margin-bottom: 14px; }
.toolbar select { max-width: 40%; }
.row { margin-top: 12px; flex-wrap: wrap; }
.row input { flex: 1 1 140px; }
.row select { flex: 0 0 140px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 14px 0;
}

.panel input, .panel select { background: var(--surface-2); }
.limits { margin-top: 8px; }

.vis-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  cursor: pointer;
}

.vis-option:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), var(--surface) 70%);
}

.vis-option input { width: auto; margin-top: 3px; accent-color: var(--accent); }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.empty { grid-column: 1 / -1; text-align: center; color: var(--hint); padding: 48px 10px; }
.loader { text-align: center; color: var(--hint); padding: 48px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 14px;
  z-index: 100;
  max-width: 90%;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- Минималистичные кнопки ---------- */

.btn {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
}

.btn.secondary:active { background: rgba(255, 255, 255, 0.06); }

.btn.danger {
  background: transparent;
  border: 1px solid rgba(255, 77, 94, 0.4);
  color: var(--danger);
}

.actions { gap: 6px; }

/* ---------- Музыкальные строки ---------- */

.item.audio {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.item.audio .tools { position: static; flex-shrink: 0; }
.item.audio .tool { background: transparent; color: var(--hint); width: 34px; height: 34px; }
.item.audio .tool svg { width: 18px; height: 18px; }

.track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  cursor: pointer;
}

.play {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.track.active .play { background: var(--accent); }
.track-info { flex: 1; min-width: 0; }

.track-title {
  padding: 0;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track.active .track-title { color: var(--accent-2); }
.track-sub { font-size: 12px; color: var(--hint); margin-top: 2px; }

.bar {
  display: none;
  position: relative;
  height: 4px;
  margin-top: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: height 0.15s ease;
}

.bar::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: -12px;
  bottom: -12px;
}

.track.active .bar { display: block; }

.bar i {
  display: block;
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent-2);
}

.bar i::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 50%;
  width: 34px;
  height: 12px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 240 550 185'%3E%3Cpath d='M130 368C150 330 210 280 275 268L452 318L380 378C300 395 200 385 130 368Z' fill='%23e0182d'/%3E%3Cpath d='M262 250L605 278L430 372L380 397L372 378L452 318C400 280 330 268 262 250Z' fill='%23111'/%3E%3Cpath d='M66 388C120 320 190 262 262 250L275 268C210 280 150 330 128 368C200 385 300 395 365 382L378 378L395 385C380 405 330 418 270 414C190 410 110 395 66 388Z' fill='%23eee'/%3E%3Ccircle cx='282' cy='327' r='60' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
  transition: transform 0.15s ease;
}
.bar.seeking { height: 8px; }
.bar.seeking i::after { transform: scale(1.7); }
.track.seeking .track-sub { color: var(--accent-2); font-weight: 600; }

.bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent-2); }

/* ---------- Просмотр картинок ---------- */

.item.image img, .item.sticker img { cursor: zoom-in; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  touch-action: none;
}

.lb.open { background: rgba(0, 0, 0, 0.92); }

.lb img {
  position: absolute;
  object-fit: contain;
  transition: transform 0.3s ease;
  transform-origin: 0 0;
  will-change: transform;
}
 
/* ---------- Просмотр видео ---------- */

.item.video video { cursor: zoom-in; }

.vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vplay svg { width: 20px; height: 20px; }

.lb video {
  position: absolute;
  background: #000000;
  transition: transform 0.3s ease;
  transform-origin: 0 0;
  will-change: transform;
}

.vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vplay svg { width: 18px; height: 18px; margin-left: 3px; }

.item.video { overflow: hidden; }

/* ---------- Окно новостей ---------- */

.news {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.8);
}

.news-card {
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 22px 20px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), var(--surface) 55%);
  border: 1px solid var(--line);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.18);
}

.news-card h1 { font-size: 22px; margin: 0 0 4px; }
.news-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.news-sec b { display: block; margin-bottom: 4px; color: var(--accent-2); font-size: 14px; }
.news-sec span { color: var(--text); font-size: 14px; line-height: 1.45; }

/* ---------- Карточки медиа: капсула и появление ---------- */

.item.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.item.rv.rv-in { opacity: 1; transform: none; }

.item.image img, .item.video video { transition: filter 1.1s ease; }
.item.rv:not(.rv-in) img, .item.rv:not(.rv-in) video { filter: blur(9px) brightness(0.5); }

.item.image::after, .item.video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 14, 16, 0.55) 100%);
}

.item.rv.rv-in::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-18deg);
  animation: sheen 1.4s ease 0.15s 1 both;
}
@keyframes sheen { from { left: -60%; } to { left: 130%; } }

.cap {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  pointer-events: none;
}
.cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; }
.cap b, .cap span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.7s ease, opacity 0.5s ease; }
.cap span { color: var(--hint); font-weight: 500; }
.cap.open b { max-width: 24px; opacity: 1; }
.cap.open span { max-width: 56px; opacity: 1; }
.cap.open { gap: 3px; }

@media (prefers-reduced-motion: reduce) {
  .item.rv { opacity: 1; transform: none; transition: none; }
  .item.rv:not(.rv-in) img, .item.rv:not(.rv-in) video { filter: none; }
  .item.rv.rv-in::before { animation: none; display: none; }
  .cap b, .cap span { transition: none; }
}

/* ---------- Нижняя панель вкладок ---------- */

#nav {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 2px;
  width: auto;
  max-width: calc(100% - 24px);
  padding: 6px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(24, 24, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1);
}
#nav.nav-hide { transform: translateX(-50%) translateY(150%); }

#nav .tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hint);
  box-shadow: none;
  transition: color 0.3s;
}
#nav .tab svg { width: 21px; height: 21px; }
#nav .tab em { display: none; font-style: normal; font-size: 13px; font-weight: 600; }
#nav .tab.active { color: #ffffff; background: transparent; box-shadow: none; }
#nav .tab.active em { display: inline; }

#nav .tab.plus {
  width: 48px;
  padding: 0;
  margin: 0 4px;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.4);
  transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);
}
#nav .tab.plus em { display: none; }
#nav .tab.plus:active { transform: scale(0.9) rotate(90deg); }

.nav-drop {
  position: absolute;
  top: 6px;
  height: 44px;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 59, 92, 0.9), rgba(224, 24, 45, 0.9));
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
  transition: left 0.5s cubic-bezier(.3, .8, .2, 1), width 0.5s cubic-bezier(.3, .8, .2, 1);
}

.mp { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
#app { padding-bottom: 110px; }

@media (prefers-reduced-motion: reduce) {
  #nav, .nav-drop, #nav .tab.plus { transition: none; }
}

/* ---------- Аудио: появление, заливка, волна ---------- */

.item.audio {
  --p: 0%;
  --i: 0;
  background-image: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16) var(--p), transparent var(--p));
  animation: ar-in 0.7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes ar-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

.play { transition: transform 0.25s ease, box-shadow 0.5s ease, background 0.3s; }
.track:active .play { transform: scale(0.92); }
.track.active .play { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.18); }

.item.audio { position: relative; overflow: hidden; }
.item.audio.wave::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: skewX(-18deg);
  animation: sheen 1s ease 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .item.audio { animation: none; }
  .item.audio.wave::after { animation: none; display: none; }
}

/* ---------- Альбом: подгрузка фото и шапка ---------- */

.item.pw {
  background: linear-gradient(110deg, #18181c 30%, #25252c 50%, #18181c 70%);
  background-size: 250% 100%;
  animation: sk 2.8s linear infinite;
}
.item.pw.ld { animation: none; background: var(--surface); }
@keyframes sk { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.item.pw img, .item.pw video {
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 0.9s ease var(--d, 0ms), transform 1.4s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), filter 1.1s ease;
}
.item.pw.ld img, .item.pw.ld video { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .item.pw, .head-bg, .head > :not(.head-bg) { animation: none; }
  .item.pw img, .item.pw video { opacity: 1; transform: none; transition: none; }
}

.head, .head-bg, .head > * { animation: none !important; }

/* ===== Форма коллекции: оформление ===== */
.fx-in{opacity:0;transform:translateY(14px);animation:fxIn .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes fxIn{to{opacity:1;transform:none}}

.fx-rel{position:relative}
.fx-count{position:absolute;right:46px;top:2px;font-style:normal;font-size:12px;color:#7c7c86;transition:color .3s}
.fx-count.warn{color:#ff4d5e}
.fx-dice{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.06);font-size:18px;cursor:pointer;transition:transform .35s,background .3s}
.fx-dice:active{transform:rotate(180deg) scale(.9);background:rgba(255,45,70,.25)}
.fx-rel input{padding-right:52px}

.field input:focus,.field textarea:focus{border-color:#ff2d46 !important;box-shadow:0 0 0 3px rgba(255,45,70,.16);outline:0;transition:box-shadow .3s,border-color .3s}

.tt-row{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 18px}
.tt{flex:1 1 auto;min-width:76px;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#c9c9d1;font:inherit;font-size:14px;cursor:pointer;transition:transform .2s,border-color .3s,background .3s,box-shadow .3s,color .3s}
.tt:active{transform:scale(.94)}
.tt.on{border-color:#ff2d46;background:rgba(255,45,70,.14);color:#fff;box-shadow:0 0 18px rgba(255,45,70,.25)}

.vis-option{transition:transform .3s,border-color .3s,background .3s,box-shadow .3s}
.vis-option:has(input:checked){transform:translateX(4px);box-shadow:0 0 22px rgba(255,45,70,.18)}
.vis-option:active{transform:scale(.985)}

#coverPreview .card{animation:fxBreath 4.5s ease-in-out infinite}
@keyframes fxBreath{0%,100%{box-shadow:0 0 0 rgba(255,45,70,0)}50%{box-shadow:0 0 26px rgba(255,45,70,.22)}}

#submitBtn{transition:opacity .4s,filter .4s,transform .2s,box-shadow .4s}
#submitBtn.fx-mute{opacity:.45;filter:saturate(.5)}
#submitBtn:not(.fx-mute){animation:fxGlow 3s ease-in-out infinite}
#submitBtn:active{transform:scale(.98)}
@keyframes fxGlow{0%,100%{box-shadow:0 0 0 rgba(255,45,70,0)}50%{box-shadow:0 0 22px rgba(255,45,70,.45)}}

@media (prefers-reduced-motion:reduce){
  .fx-in{animation:none;opacity:1;transform:none}
  #coverPreview .card,#submitBtn{animation:none !important}
}

/* ===== Форма коллекции 2: аврора, иконки, кнопка ===== */
@property --h{syntax:"<number>";inherits:true;initial-value:350}
#form{transition:--h .9s ease}

#coverPreview .card{animation:none !important}
.fx-in2{animation:fxFrom .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*90ms + 250ms)}
@keyframes fxFrom{from{opacity:0;transform:translateY(16px)}}

/* аврора за превью */
.fx-cover{position:relative;isolation:isolate}
.fx-cover::before,.fx-cover::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);pointer-events:none}
.fx-cover::before{left:0;top:12%;width:55%;height:60%;background:hsl(var(--h) 85% 55% / .26);animation:fxDrift 15s ease-in-out infinite alternate}
.fx-cover::after{right:0;top:30%;width:50%;height:55%;background:hsl(calc(var(--h) + 40) 80% 55% / .2);animation:fxDrift 19s ease-in-out -6s infinite alternate-reverse}
@keyframes fxDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(35%,-12%) scale(1.25)}}
.fx-tilt{transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}

/* кто видит */
.vis-wrap{position:relative}
.vis-wrap .vis-option{position:relative;border-color:rgba(255,255,255,.08) !important;background:rgba(255,255,255,.03) !important;box-shadow:none !important;transform:none !important;display:flex;align-items:center;gap:14px}
.vis-wrap .vis-option input{display:none}
.vis-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:#8d8d97;font-style:normal;transition:color .4s,background .4s,transform .4s}
.vis-ic svg{width:24px;height:24px;overflow:visible}
.vis-option.sel .vis-ic{color:#ff4d5e;background:rgba(255,45,70,.14);transform:scale(1.06)}
.vis-ic .sh{transition:transform .5s cubic-bezier(.3,1.4,.4,1);transform:translateY(-2.5px)}
.vis-option.sel .vis-ic .sh{transform:none}
.vis-option.sel .vis-ic .lk{animation:fxSway 4s ease-in-out infinite;transform-origin:12px 12px}
@keyframes fxSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.vis-ic .mer{transform-box:fill-box;transform-origin:center}
.vis-option.sel .vis-ic .mer{animation:fxSpin 5s ease-in-out infinite alternate}
@keyframes fxSpin{0%{transform:scaleX(.15)}100%{transform:scaleX(1)}}
.vis-glide{position:absolute;left:0;right:0;top:0;height:0;opacity:0;border-radius:18px;border:1.5px solid rgba(255,70,90,.85);background:linear-gradient(120deg,rgba(255,45,70,.10),rgba(255,120,90,.05));box-shadow:0 0 28px rgba(255,45,70,.16);pointer-events:none;overflow:hidden;z-index:2;transition:transform .55s cubic-bezier(.3,1.15,.4,1),height .4s}
.vis-glide::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);animation:fxSweep 6s ease-in-out infinite}
@keyframes fxSweep{0%{left:-50%}55%,100%{left:130%}}

/* кнопка */
#submitBtn.fx-go,#submitBtn.fx-go:not(.fx-mute){position:relative;overflow:hidden;background:linear-gradient(110deg,#ff2d46,#ff6a4d,#e0102c,#ff2d46) !important;background-size:260% 100%;animation:fxFlow 10s linear infinite}
@keyframes fxFlow{0%{background-position:0 0}100%{background-position:260% 0}}
#submitBtn.fx-go::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:fxSweep 5s ease-in-out infinite}
#submitBtn.fx-go.fx-mute{opacity:.5;filter:saturate(.5)}
#submitBtn.fx-go.fx-mute,#submitBtn.fx-go.fx-mute::after{animation-play-state:paused}
.fx-hint{text-align:center;font-size:13px;color:#7c7c86;margin-top:10px;transition:color .4s}
.fx-hint.ok{color:#ff7a88}

@media (prefers-reduced-motion:reduce){
  .fx-cover::before,.fx-cover::after,.vis-glide::after,#submitBtn.fx-go,#submitBtn.fx-go::after,.vis-option.sel .vis-ic .lk,.vis-option.sel .vis-ic .mer{animation:none !important}
  .fx-in2{animation:none}
}

/* ===== Форма: зона фона и ползунок ===== */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.cz{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:12px;border-radius:20px;background:rgba(255,255,255,.035);cursor:pointer;overflow:hidden;transition:background .4s,transform .25s}
.cz::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:20px;background:conic-gradient(from var(--a),rgba(255,45,70,0) 0 55%,rgba(255,70,90,.95) 80%,rgba(255,45,70,0) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:czRun 7s linear infinite;pointer-events:none}
@keyframes czRun{to{--a:360deg}}
.cz:active{transform:scale(.985)}
.cz.drag{background:rgba(255,45,70,.12)}
.cz.has{background:rgba(255,45,70,.07)}
.cz-ic{flex:0 0 auto;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(255,45,70,.13);color:#ff4d5e;animation:czFloat 5s ease-in-out infinite}
.cz-ic svg{width:26px;height:26px}
@keyframes czFloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
.cz-tx{display:flex;flex-direction:column;gap:3px}
.cz-tx b{font-size:16px;font-weight:600}
.cz-tx small{font-size:13px;color:#8d8d97}

.fx-range{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;outline:0;margin:6px 0}
.fx-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#ff2d46 var(--p,50%),rgba(255,255,255,.1) var(--p,50%))}
.fx-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-14px;border:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23161216' stroke='%23ff2d46' stroke-width='1.5'/%3E%3Cpath d='M6 16c3-5 6-7 10-7s7 2 10 7c-3 5-6 7-10 7s-7-2-10-7z' fill='%23f5eeee'/%3E%3Ccircle cx='16' cy='16' r='4.5' fill='%23ff2d46'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23111'/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:0 0 16px rgba(255,45,70,.35);transition:transform .2s}
.fx-range:active::-webkit-slider-thumb{transform:scale(1.15)}

@media (prefers-reduced-motion:reduce){.cz::before,.cz-ic{animation:none}}

/* ===== Кнопка фона как у «Кто видит» ===== */
.cz{gap:14px;padding:14px 16px;margin:14px 0 6px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);box-shadow:none;animation:fxFrom .6s cubic-bezier(.2,.8,.2,1) backwards;transition:border-color .5s,background .5s,box-shadow .5s,transform .25s}
.cz::before{display:none}
.cz::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);animation:fxSweep 6s ease-in-out infinite;pointer-events:none;opacity:0;transition:opacity .5s}
.cz-ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.05);color:#8d8d97;animation:none;transition:color .4s,background .4s,transform .4s}
.cz-tx b{font-size:16px;font-weight:600;color:#f1ecec}
.cz-tx small{font-size:13.5px;color:#8d8d97}
.cz.has{border:1.5px solid rgba(255,70,90,.85);background:linear-gradient(120deg,rgba(255,45,70,.10),rgba(255,120,90,.05));box-shadow:0 0 28px rgba(255,45,70,.16)}
.cz.has::after{opacity:1}
.cz.has .cz-ic{color:#ff4d5e;background:rgba(255,45,70,.14);transform:scale(1.06)}
.cz.drag{border-color:rgba(255,70,90,.85);background:rgba(255,45,70,.12)}
@media (prefers-reduced-motion:reduce){.cz,.cz::after{animation:none}}

/* ===== Ползунок с настоящим глазом ===== */
.fx-range::-webkit-slider-thumb{width:58px;height:34px;margin-top:-14px;border:0;border-radius:0;background:url("/eye.png") center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 8px rgba(255,45,70,.55))}

/* ===== Загрузка файлов в альбоме ===== */
.up-panel{position:relative;overflow:hidden;isolation:isolate}
.up-panel::before{content:"";position:absolute;z-index:-1;left:-10%;top:-30%;width:60%;height:90%;border-radius:50%;filter:blur(46px);background:rgba(255,45,70,.16);animation:fxDrift 16s ease-in-out infinite alternate;pointer-events:none}

.up-btn{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;border:1.5px solid rgba(255,70,90,.85);background:linear-gradient(120deg,rgba(255,45,70,.12),rgba(255,120,90,.05));box-shadow:0 0 28px rgba(255,45,70,.16);cursor:pointer;overflow:hidden;transition:transform .25s,box-shadow .4s}
.up-btn:active{transform:scale(.985)}
.up-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);animation:fxSweep 6s ease-in-out infinite;pointer-events:none}
.up-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,45,70,.14);color:#ff4d5e}
.up-ic svg{width:24px;height:24px;overflow:visible}
.up-ic .ar{animation:upRise 3.6s ease-in-out infinite}
@keyframes upRise{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2.5px)}}
.up-tx{display:flex;flex-direction:column;gap:3px}
.up-tx b{font-size:16px;font-weight:600;color:#f6f0f0}
.up-tx small{font-size:13.5px;color:#9a9aa4}

.up-limits{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.up-limits span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:12.5px;color:#8d8d97;animation:fxFrom .6s cubic-bezier(.2,.8,.2,1) backwards}
.up-limits span:nth-child(2){animation-delay:.07s}
.up-limits span:nth-child(3){animation-delay:.14s}
.up-limits span:nth-child(4){animation-delay:.21s}
.up-limits span:nth-child(5){animation-delay:.28s}
.up-limits b{color:#e8dfe0;font-weight:600}

#progress:empty{display:none}
#progress:not(:empty){position:relative;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(255,45,70,.07);border:1px solid rgba(255,70,90,.25);color:#f1d6da;overflow:hidden;animation:fxFrom .5s cubic-bezier(.2,.8,.2,1)}
#progress:not(:empty)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:35%;background:linear-gradient(90deg,transparent,#ff2d46,transparent);animation:upLine 2.4s ease-in-out infinite}
@keyframes upLine{0%{left:-35%}100%{left:100%}}

.up-link{margin-top:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);overflow:hidden}
.up-link summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;font-weight:600;color:#e8dfe0}
.up-link summary::-webkit-details-marker{display:none}
.up-ic.sm{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.06);color:#9a9aa4;transition:color .4s,background .4s}
.up-ic.sm svg{width:19px;height:19px}
.up-link[open] .up-ic.sm{color:#ff4d5e;background:rgba(255,45,70,.14)}
.up-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid #8d8d97;border-bottom:2px solid #8d8d97;transform:rotate(45deg) translateY(-2px);transition:transform .4s}
.up-link[open] .up-chev{transform:rotate(225deg) translateY(-2px)}
.up-link form{padding:4px 14px 14px;animation:fxFrom .45s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){.up-panel::before,.up-btn::after,.up-ic .ar,.up-limits span,#progress::after{animation:none !important}}

/* ===== Роль редактора в ленте ===== */
.pill.ed{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;color:#fff;background:linear-gradient(120deg,rgba(255,45,70,.55),rgba(255,110,90,.35));border:1px solid rgba(255,90,105,.7)}
.pill.ed svg{width:13px;height:13px;flex:0 0 auto;animation:edWrite 4.5s ease-in-out infinite;transform-origin:20% 90%}
@keyframes edWrite{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-14deg)}88%{transform:rotate(8deg)}}
.pill.ed::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);animation:fxSweep 6s ease-in-out infinite;pointer-events:none}
.card.is-editor{box-shadow:inset 0 0 0 1px rgba(255,70,90,.28),0 6px 26px rgba(255,45,70,.10)}
@media (prefers-reduced-motion:reduce){.pill.ed svg,.pill.ed::after{animation:none}}

/* ===== Без пульсации карточек и превью ===== */
.card,.card::before,.card::after,.card *,.card *::before,.card *::after{animation-iteration-count:1 !important}
#coverPreview .card{animation:none !important}

/* ===== Без дыхания у закреплённых ===== */
.card,.head,.head-bg,.card.pinned,.head.pinned{animation-name:none !important}
.card::before,.card::after,.head::before,.head::after{animation-name:none !important}

/* ===== Роли в карточке: Вы · Редактор / Владелец ===== */
.pill.me{display:inline-flex;align-items:center;gap:7px;animation:fxFrom .6s cubic-bezier(.2,.8,.2,1) backwards}
.me-dot{position:relative;flex:0 0 auto;width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor}
.me-dot::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:currentColor}
.pill.me-ed{color:#fff;background:linear-gradient(120deg,rgba(255,45,70,.45),rgba(255,110,90,.28));border:1px solid rgba(255,90,105,.65)}
.pill.me-ow{color:#f4ecec;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.pill.me-ow .me-dot{color:#ff4d5e}
.card .pill.ghost{font-weight:500}

/* ===== Фильтр во вкладке «Мои» ===== */
.flt{position:relative;display:flex;gap:2px;padding:4px;margin:0 0 16px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.flt button{position:relative;z-index:1;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#8d8d97;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .35s}
.flt button.on{color:#fff}
.flt button b{min-width:20px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:600;transition:background .35s}
.flt button.on b{background:rgba(255,255,255,.22)}
.flt-drop{position:absolute;z-index:0;left:0;top:4px;height:40px;width:0;border-radius:999px;background:linear-gradient(135deg,rgba(255,59,92,.9),rgba(224,24,45,.9));box-shadow:0 4px 14px rgba(224,24,45,.3);transition:transform .5s cubic-bezier(.3,.8,.2,1),width .5s cubic-bezier(.3,.8,.2,1)}
.fl-i.fl-show{animation:fxFrom .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
.fl-i{margin-bottom:14px}
.fl-sec .grid{gap:0}
@media (prefers-reduced-motion:reduce){.flt-drop{transition:none}.fl-i.fl-show{animation:none}}

/* ===== Значки ролей: корона и карандаш ===== */
.me-dot{width:14px;height:14px;border:0;border-radius:0;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.me-dot::after{display:none}
.me-ed .me-dot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5a2 2 0 0 1 3 3L8 19l-4 1z'/%3E%3C/svg%3E")}
.me-ow .me-dot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5L3 8z'/%3E%3C/svg%3E")}
.pill.me-ow .me-dot,.badge.me-ow .me-dot{color:#ff4d5e}

/* ===== Форма: список людей ===== */
.pp-body{margin-top:6px}
.pp-hint{padding:18px 14px;border-radius:16px;border:1px dashed rgba(255,255,255,.1);color:#8d8d97;font-size:13.5px;text-align:center}
.pp-search{margin-bottom:10px}
.pp-count{margin:0 2px 12px;font-size:12.5px;color:#8d8d97}
.pp-list{display:flex;flex-direction:column;gap:8px}
.pp-row{display:grid;grid-template-columns:42px 1fr auto;gap:4px 12px;align-items:center;padding:11px 12px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);animation:fxFrom .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*55ms)}
.pp-av{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,45,70,.13);color:#ff4d5e;font-weight:700;font-size:17px}
.pp-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.pp-info b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-info small{font-size:12px;color:#8d8d97;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-pill{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#9a9aa4;transition:background .5s,color .5s,border-color .5s}
.pp-pill.r-editor{color:#fff;background:linear-gradient(120deg,rgba(255,45,70,.45),rgba(255,110,90,.28));border-color:rgba(255,90,105,.65)}
.pp-pill.r-owner{color:#f4ecec;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.pp-pill.r-blocked{color:#ff4d5e;background:rgba(255,77,94,.1);border-color:rgba(255,77,94,.4)}
.pp-btns{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
.pp-btns:empty{display:none}
.pp-b,.pp-more{padding:8px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#e8dfe0;font:inherit;font-size:13px;cursor:pointer;transition:background .3s,transform .2s}
.pp-b:active,.pp-more:active{transform:scale(.96);background:rgba(255,255,255,.07)}
.pp-b.bad{border-color:rgba(255,77,94,.4);color:#ff4d5e}
.pp-b:disabled{opacity:.5}
.pp-more{width:100%;margin-top:4px;color:#9a9aa4}
@media (prefers-reduced-motion:reduce){.pp-row{animation:none}}

/* ===== Форма: описание ===== */
.fd-wrap{position:relative}
.fd-wrap textarea{resize:none;overflow:hidden;min-height:96px;padding-bottom:30px;transition:height .25s ease,border-color .3s,box-shadow .3s}
.fd-count{position:absolute;right:14px;bottom:10px;font-style:normal;font-size:12px;color:#7c7c86;pointer-events:none;transition:color .3s}
.fd-count.warn{color:#ff4d5e}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px;max-height:120px;overflow:hidden;transition:max-height .45s ease,opacity .35s ease,margin .45s ease}
.fd-chips.fd-off{max-height:0;opacity:0;margin:0}
.fd-chip{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#c9c9d1;font:inherit;font-size:13px;cursor:pointer;animation:fxFrom .5s cubic-bezier(.2,.8,.2,1) backwards;transition:background .3s,border-color .3s,transform .2s}
.fd-chip:nth-child(2){animation-delay:.06s}
.fd-chip:nth-child(3){animation-delay:.12s}
.fd-chip:nth-child(4){animation-delay:.18s}
.fd-chip:active{transform:scale(.95);background:rgba(255,45,70,.14);border-color:rgba(255,90,105,.6)}
@media (prefers-reduced-motion:reduce){.fd-chip{animation:none}}

/* ===== Правки: кнопка фона, ползунок, плеер, ширина ===== */
#app{overflow-x:clip}

/* кнопка фона: компактная */
.cz{display:flex;padding:10px 14px;gap:12px;margin:12px 0 4px;border-radius:16px;min-height:0;border:1px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.025);box-shadow:none}
.cz::before,.cz::after{display:none}
.cz-ic{width:38px;height:38px;border-radius:12px;background-size:cover;background-position:center;animation:none;transform:none}
.cz-ic svg{width:21px;height:21px}
.cz-ic.pic svg{display:none}
.cz-tx b{font-size:15px}
.cz-tx small{font-size:12.5px}
.cz.has{border:1px solid rgba(255,90,105,.55);background:rgba(255,45,70,.06);box-shadow:none}
.cz.has .cz-ic{transform:none}
.cz:not(.has):active .cz-ic{transform:rotate(-8deg) scale(.92)}
.cz-hint{margin-top:10px;font-size:12px;line-height:1.45;opacity:.55}

/* превью без повторного появления */
#coverPreview .pill,#coverPreview .badge,#coverPreview .card *{animation:none !important}

/* ползунок: заливка до глаза, без обводки */
.fx-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#ff2d46 calc(29px + var(--pf,.5)*(100% - 58px)),rgba(255,255,255,.1) 0)}
.field input.fx-range:focus,.fx-range:focus{box-shadow:none !important;border-color:transparent !important;outline:0}

/* плеер уходит вниз вместе с панелью */
.mp{transition:bottom .45s cubic-bezier(.2,.7,.2,1)}
body.nav-off .mp{bottom:calc(12px + env(safe-area-inset-bottom)) !important}

/* ===== Правки 31: линия, плеер, кнопка загрузки, точки ===== */

/* линия кончается там, где начинается глаз, и глаз ничего не перекрывает */
.fx-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ff2d46 calc(var(--pf,.5)*(100% - 58px)),rgba(255,255,255,.1) 0)}
.bar{margin-right:34px}
.bar i::after{right:-34px}
.mp .bar{margin:9px 34px 0 18px;width:calc(100% - 70px)}

/* плеер едет за панелью плавно */
.mp{transition:bottom .6s cubic-bezier(.22,.8,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease !important}
#nav{transition:transform .6s cubic-bezier(.22,.8,.2,1)}

/* кнопка загрузки как кнопка фона */
.up-btn{padding:10px 14px;gap:12px;border-radius:16px;border:1px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.025);box-shadow:none}
.up-btn::after{display:none}
.up-btn .up-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.05);color:#8d8d97}
.up-btn .up-ic svg{width:21px;height:21px}
.up-btn .up-ic .ar{animation:none}
.up-btn .up-tx b{font-size:15px}
.up-btn .up-tx small{font-size:12.5px}
.up-btn:active .up-ic{transform:translateY(-2px) scale(.94)}
.up-cap{margin:14px 2px -6px;font-size:12.5px;color:#8d8d97}

/* список людей: цветные точки вместо аватарок */
.pp-row{grid-template-columns:14px 1fr auto}
.pp-dot{width:10px;height:10px;border-radius:50%;background:#6b6b75;justify-self:center;transition:background .5s,box-shadow .5s}
.pp-dot.r-owner{background:#f4ecec}
.pp-dot.r-editor{background:#ff2d46;box-shadow:0 0 10px rgba(255,45,70,.7)}
.pp-dot.r-viewer{background:#3ddc97;box-shadow:0 0 10px rgba(61,220,151,.5)}
.pp-dot.r-none{background:#6b6b75}
.pp-dot.r-blocked{background:#ff8a3d;box-shadow:0 0 10px rgba(255,138,61,.5)}
.pp-pill{max-width:170px;text-align:center;line-height:1.25}
.pp-row.pend{border-color:rgba(255,90,105,.4)}

/* ===== Откат сдвига глаза ===== */
.bar{margin-right:0}
.bar i::after{right:-17px}
.mp .bar{margin:9px 0 0 18px;width:calc(100% - 36px)}
.fx-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ff2d46 calc(29px + var(--pf,.5)*(100% - 58px)),rgba(255,255,255,.1) 0)}

/* ===== Скругление начала линии ===== */
.bar{border-radius:999px}
.bar i{border-radius:999px 0 0 999px;background:linear-gradient(90deg,#ff5a73,var(--accent-2))}
.mp .bar{overflow:visible}
.mp .bar i{border-radius:999px}

/* ===== Ползунок: дорожка точно от глаза до глаза ===== */
.fx-range::-webkit-slider-runnable-track{
  height:6px;
  border-radius:0;
  background:linear-gradient(90deg,
    transparent 0 29px,
    #ff2d46 29px calc(29px + var(--pf,.5)*(100% - 58px)),
    rgba(255,255,255,.12) calc(29px + var(--pf,.5)*(100% - 58px)) calc(100% - 29px),
    transparent calc(100% - 29px));
}

/* ===== Мини-плеер: линия начинается у левого края ===== */
.mp .bar{margin:9px 0 0 0 !important;padding:0 !important;width:calc(100% - 18px) !important;border-radius:999px !important}
.mp .bar i{border-radius:999px 0 0 999px !important}

/* ===== Мини-плеер: линия по центру между краем и кнопкой ===== */
.mp .bar{margin:9px 0 0 0 !important;width:100% !important}

/* ===== Подарки и казна ===== */
.gf-back{position:fixed;inset:0;z-index:9000;background:rgba(5,5,8,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;animation:gfFade .35s ease both}
@keyframes gfFade{from{opacity:0}to{opacity:1}}
@keyframes gfUp{from{transform:translateY(100%)}to{transform:none}}
.gf-sheet{position:relative;overflow:hidden;width:100%;box-sizing:border-box;padding:20px 16px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;animation:gfUp .5s cubic-bezier(.2,.8,.2,1) both;
  background:linear-gradient(180deg,rgba(38,38,48,.9),rgba(14,14,18,.97));border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.gf-sheet::before{content:"";position:absolute;left:50%;top:-90px;width:320px;height:180px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,200,120,.22),transparent);pointer-events:none}
.gf-handle{position:relative;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:-8px auto 14px;touch-action:none;cursor:grab}
.gf-handle::after{content:"";position:absolute;left:-90px;right:-90px;top:-16px;bottom:-26px}
.gf-title{text-align:center;font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}
.gf-sub{text-align:center;font-size:13px;color:#9a9aa6;margin-bottom:16px}
.gf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gf-item{position:relative;padding:14px 8px 12px;border-radius:20px;border:1px solid rgba(var(--c-rgb),.28);color:#fff;font-family:inherit;text-align:center;
  background:radial-gradient(90% 80% at 50% 0%,rgba(var(--c-rgb),.20),rgba(255,255,255,.03) 70%);
  opacity:0;animation:gfIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--i)*.08s);transition:transform .2s ease,box-shadow .3s ease}
@keyframes gfIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.gf-item:active{transform:scale(.95);box-shadow:0 0 28px rgba(var(--c-rgb),.35)}
.gf-ico{height:64px;display:flex;align-items:center;justify-content:center;animation:gfFloat 5s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s);filter:drop-shadow(0 6px 14px rgba(var(--c-rgb),.35))}
.gf-ico svg{height:60px;width:auto}
.gf-ico img{height:60px;width:auto;display:block}
@keyframes gfFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
.gf-n{font-size:14px;font-weight:600;margin-top:8px;display:block}
.gf-p{display:inline-block;margin-top:8px;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:700;color:rgb(var(--c-rgb));background:rgba(var(--c-rgb),.14)}

.gf-stage{position:fixed;inset:0;z-index:9500;pointer-events:none;overflow:hidden}
.gf-dim{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.gf-big{position:absolute;left:50%;top:50%;width:120px;transform:translate(-50%,-50%)}
.gf-big svg,.gf-big img{width:100%;height:auto;display:block}
.gf-cap{position:absolute;left:0;right:0;top:calc(50% + 120px);text-align:center;color:#e9e4d8;font-size:15px;letter-spacing:.14em}
.gf-flame{transform-box:fill-box;transform-origin:50% 100%;animation:gfFlame 1.5s ease-in-out infinite}
@keyframes gfFlame{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.93,1.07) rotate(2deg)}50%{transform:scale(1.05,.95) rotate(-2deg)}75%{transform:scale(.96,1.05) rotate(1deg)}}
.gf-bubble{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);background:#fff;color:#111;font-weight:800;font-size:14px;padding:4px 10px;border-radius:12px;white-space:nowrap}

.gf-gor .gf-aL{animation:gfBeatL .5s ease-in-out infinite}
.gf-gor .gf-aR{animation:gfBeatR .5s ease-in-out infinite;animation-delay:.25s}
@keyframes gfBeatL{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-4px)}}
@keyframes gfBeatR{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-4px)}}
.gf-gor .gf-mouth{transform-box:fill-box;transform-origin:50% 0;animation:gfRoar .5s ease-in-out infinite}
@keyframes gfRoar{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.25)}}
.gf-gor .gf-chest{animation:gfThump .25s ease-in-out infinite alternate}
@keyframes gfThump{from{opacity:.25}to{opacity:.85}}
.gf-gor .gf-wave{animation:gfWave .5s ease-out infinite}
@keyframes gfWave{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.gf-ico .gf-gor *,.gf-mini .gf-gor *{animation:none !important}

.gf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.gf-bar:empty{display:none}
.gf-lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8d8d98;margin-right:2px}
.gf-chip{position:relative;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border-radius:999px;border:1px solid rgba(var(--c-rgb),.32);
  background:radial-gradient(120% 140% at 20% 0%,rgba(var(--c-rgb),.22),rgba(255,255,255,.03) 70%);box-shadow:0 0 18px -6px rgba(var(--c-rgb),.55);
  animation:gfChipIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.09s)}
.gf-chip b{font-size:14px;font-weight:800;color:rgb(var(--c-rgb));font-variant-numeric:tabular-nums}
.gf-mini{display:flex;animation:gfBob 5s ease-in-out infinite;animation-delay:calc(var(--i)*-1.2s)}
.gf-mini svg,.gf-mini img{height:22px;width:auto;display:block}
@keyframes gfChipIn{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes gfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

.fd-sheet{position:relative;overflow:hidden;width:100%;box-sizing:border-box;padding:12px 18px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,rgba(40,34,26,.94),rgba(14,13,12,.98));border-top:1px solid rgba(255,214,140,.22);box-shadow:0 -20px 60px rgba(0,0,0,.55);animation:gfUp .5s cubic-bezier(.2,.8,.2,1) both}
.fd-sheet::before{content:"";position:absolute;left:50%;top:-100px;width:340px;height:200px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,190,90,.28),transparent);pointer-events:none}
.fd-title{text-align:center;font-size:19px;font-weight:700;color:#fff;margin-bottom:4px}
.fd-sub{text-align:center;font-size:13px;line-height:1.45;color:#a79f90;margin-bottom:18px}
.fd-bar{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 2px}
.fd-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#ff9a2e,#ffd23d);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.fd-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:200% 100%;animation:fdShine 3.6s ease-in-out infinite}
@keyframes fdShine{from{background-position:200% 0}to{background-position:-100% 0}}
.fd-total{text-align:center;margin:12px 0 4px;font-size:30px;font-weight:800;color:#ffd23d;text-shadow:0 0 24px rgba(255,190,60,.4)}
.fd-goals{margin:10px 0 18px;display:flex;flex-direction:column;gap:6px}
.fd-goal{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#8d8678}
.fd-goal.on{color:#ffe08a}
.fd-goal b{font-weight:700;white-space:nowrap}
.fd-until{margin:-6px 0 14px;text-align:center;font-size:12px;color:#ffe08a;letter-spacing:.02em}
.fd-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fd-p{padding:12px 0;border-radius:16px;border:1px solid rgba(255,214,140,.25);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-weight:700;transition:transform .2s,box-shadow .3s,background .3s}
.fd-p:active{transform:scale(.95)}
.fd-p.sel{background:rgba(255,190,60,.18);border-color:#ffd23d;box-shadow:0 0 22px rgba(255,190,60,.3)}
.fd-own{margin-top:10px;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font:inherit;text-align:center}
.fd-go{margin-top:14px;width:100%;padding:15px;border:0;border-radius:18px;font:inherit;font-weight:800;color:#2a1a00;background:linear-gradient(135deg,#ffb347,#ffd23d);box-shadow:0 8px 28px rgba(255,170,50,.35)}
.fd-go:disabled{opacity:.5}
.fd-note{margin-top:14px;text-align:center;font-size:13px;line-height:1.45;color:#a79f90}
.fd-coin{position:fixed;z-index:9500;pointer-events:none;font-size:26px;bottom:-30px}

@media (prefers-reduced-motion:reduce){.gf-ico,.gf-item,.gf-sheet,.gf-back,.gf-chip,.gf-mini,.fd-sheet,.fd-fill::after{animation:none;opacity:1}}

.fd-goal{align-items:flex-start}
.fd-goal span{min-width:0}
.fd-goal b{font-size:12px;color:#a79f90}
.fd-goal.on b{color:#ffe08a}

/* ===== Мини-плеер: линия и глаз ===== */
.mp .bar{display:block !important;margin:9px 0 0 0 !important;padding:0 !important;width:calc(100% - 17px) !important;overflow:visible !important}
.mp .bar i{min-width:17px !important}