:root {
  --bg-color: #0b1428;
  --glass-bg: rgba(18, 26, 44, 0.55);
  --glass-bg-hover: rgba(22, 34, 56, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(155, 89, 182, 0.35);
  --purple-accent: #9b59b6;
  --purple-bright: #c084fc;
  --purple-glow: rgba(155, 89, 182, 0.25);
  --text-main: #ffffff;
  --text-muted: #98a8c8;
  --radius: 18px;
  --shadow-glass: 0 8px 40px rgba(0, 0, 0, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 120px;
}

body::before, body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body::before {
  top: -30%; left: -20%; width: 70%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.2), transparent 70%);
}
body::after {
  bottom: -20%; right: -20%; width: 60%; height: 70%;
  background: radial-gradient(ellipse at center, rgba(52, 152, 219, 0.14), transparent 70%);
}

/* === Верхняя панель === */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2.5rem;
  background: rgba(10, 18, 34, 0.45);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 100;
}
.logo {
  font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(155, 89, 182, 0.35); font-size: 1.1rem;
  color: #fff; text-decoration: none;
}

/* === Основная сетка === */
.page-layout {
  max-width: 1440px; margin: 0 auto; padding: 2rem;
  display: grid; grid-template-columns: 260px 1fr; gap: 2rem;
  position: relative; z-index: 1;
}

/* === Стекло === */
.glass-block {
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
}

/* === Левое меню === */
.sidebar { align-self: stretch; display: flex; flex-direction: column; gap: 1.2rem; }
.sidebar .glass-block {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px; padding: 1.4rem 1.2rem; box-shadow: none;
}
.menu { display: flex; flex-direction: column; gap: 0.7rem; }
.menu-item {
  color: var(--text-muted); text-decoration: none;
  padding: 0.8rem 1.1rem; border: 1px solid transparent;
  border-radius: 14px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 0.95rem;
}
.menu-item:hover, .menu-item.active {
  background: rgba(155, 89, 182, 0.14);
  border-color: rgba(155, 89, 182, 0.4);
  color: var(--purple-accent);
  box-shadow: 0 0 16px rgba(155, 89, 182, 0.22);
  transform: translateX(4px);
}

/* === Пункт «Трансляции» === */
.menu-item-live {
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-item-live .live-dot {
  width: 10px;
  height: 10px;
  background-color: #ff4757;
  border: 2px solid rgba(255, 71, 87, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 71, 87, 0.7);
  animation: pulse-dot 1.5s infinite ease-in-out;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 6px rgba(255, 71, 87, 0.5); }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 14px rgba(255, 71, 87, 0.9); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 6px rgba(255, 71, 87, 0.5); }
}

/* ============================================== */
/* === НОВИНКИ под навигацией === */
/* ============================================== */
.novelty-block {
  max-height: none; overflow: visible;
}
.novelty-block::-webkit-scrollbar { width: 6px; }
.novelty-block::-webkit-scrollbar-track { background: transparent; }
.novelty-block::-webkit-scrollbar-thumb { background: rgba(155, 89, 182, 0.4); border-radius: 3px; }
.novelty-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding-bottom: 0.7rem; margin-bottom: 0.7rem;
  border-bottom: 1px solid rgba(155, 89, 182, 0.25);
}
.novelty-title {
  font-size: 0.95rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--purple-bright); text-shadow: 0 0 10px rgba(155, 89, 182, 0.4);
}
.novelty-item {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.4rem 0.55rem; margin-bottom: 0.3rem;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; cursor: pointer; font-family: inherit;
  text-align: left; transition: all 0.25s ease;
}
.novelty-item:hover {
  background: rgba(155, 89, 182, 0.14);
  border-color: rgba(155, 89, 182, 0.4);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.18);
  transform: translateX(4px);
}
.novelty-item img {
  width: 30px; height: 30px; border-radius: 8px; object-fit: contain;
  background: linear-gradient(135deg, #1e2940, #14203a);
  padding: 2px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.novelty-item-name {
  flex: 1; min-width: 0;
  font-size: 0.78rem; color: var(--text-muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.25s ease;
}
.novelty-item:hover .novelty-item-name { color: var(--purple-accent); }
.novelty-item-price {
  font-size: 0.75rem; font-weight: 700; color: var(--purple-bright);
  white-space: nowrap; flex-shrink: 0;
}
.novelty-item.owned .novelty-item-price { color: #2ecc71; }
.novelty-empty {
  padding: 1rem 0.5rem; text-align: center;
  color: var(--text-muted); font-size: 0.82rem;
}

/* === Центральная область === */
.main-area { display: flex; flex-direction: column; gap: 1.5rem; }

/* === Авторизация, профиль (для header.js) === */
.top-bar-right { display: flex; align-items: center; gap: 0.5rem; }
.auth-buttons { display: flex; align-items: center; gap: 0.5rem; }
.btn-auth {
  padding: 0.5rem 1.2rem; border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 0.9rem; font-family: inherit; transition: all 0.25s ease;
}
.btn-auth:hover {
  background: rgba(155, 89, 182, 0.14);
  border: 1px solid rgba(155, 89, 182, 0.35);
  color: var(--purple-accent);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.2);
}
.profile-block { position: relative; display: none; }
.profile-block.active { display: flex; }
.profile-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; border: 1px solid transparent;
  border-radius: 14px; cursor: pointer; transition: all 0.25s ease;
}
.profile-header:hover {
  background: rgba(155, 89, 182, 0.14);
  border: 1px solid rgba(155, 89, 182, 0.35);
}
.profile-header:hover .profile-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(155, 89, 182, 0.35); flex-shrink: 0; min-width: 34px;
}
.profile-name { color: #fff; font-size: 0.9rem; font-weight: 500; }
.profile-dropdown {
  position: absolute; top: 100%; right: 0; min-width: 200px;
  background: rgba(14, 22, 40, 0.85);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(155, 89, 182, 0.2);
  border-radius: 16px; padding: 0.5rem; margin-top: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: all 0.25s ease; z-index: 100;
}
.profile-dropdown-item {
  display: block; width: 100%; padding: 0.6rem 1rem;
  border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: #ccc; cursor: pointer; font-size: 0.9rem; font-family: inherit;
  text-align: left; transition: all 0.25s ease;
}
.profile-dropdown-item:hover {
  background: rgba(155, 89, 182, 0.14);
  border: 1px solid rgba(155, 89, 182, 0.3);
  color: var(--purple-accent);
}

/* === Модальные окна header.js (вход, регистрация, профиль, пополнение) === */
.auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.auth-modal.open { display: flex; }
.auth-modal-content {
  background: rgba(16, 24, 42, 0.85);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid rgba(155, 89, 182, 0.2);
  border-radius: 22px;
  padding: 2.2rem;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
}
.auth-modal-content h3 {
  color: #fff;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.4rem;
}
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  color: #ccc;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
.form-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid rgba(155, 89, 182, 0.15);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-input:focus {
  outline: none;
  border-color: rgba(155, 89, 182, 0.5);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.2);
}
.form-file {
  width: 100%;
  padding: 0.45rem;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid rgba(155, 89, 182, 0.15);
  border-radius: 12px;
  color: #ccc;
  font-size: 0.85rem;
  box-sizing: border-box;
}
.btn-primary {
  width: 100%;
  padding: 0.75rem;
  background: rgba(155, 89, 182, 0.25);
  border: 1px solid rgba(155, 89, 182, 0.45);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.25s ease;
}
.btn-primary:hover {
  background: rgba(155, 89, 182, 0.4);
  box-shadow: 0 0 18px rgba(155, 89, 182, 0.35);
}
.btn-cancel {
  margin-top: 0.75rem;
  width: 100%;
  background: transparent;
  color: #888;
  border: none;
  cursor: pointer;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
}
.btn-cancel:hover { color: #aaa; }
.auth-error {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: none;
}
.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: transparent;
  color: #888;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
}
.modal-close-btn:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}
.edit-profile-header { text-align: center; margin-bottom: 1.5rem; }
.edit-profile-nickname { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.edit-profile-avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.edit-profile-avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(155, 89, 182, 0.3);
  background: #2a3650;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.edit-profile-avatar-hint {
  color: #666;
  font-size: 0.78rem;
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* === Поиск === */
.search-container { position: relative; flex: 1; max-width: 420px; margin: 0 2rem; }
.search-box {
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(155, 89, 182, 0.45);
  border-radius: 9999px; padding: 0.5rem 1.1rem;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.18); transition: all 0.25s ease;
}
.search-box:focus-within {
  border-color: var(--purple-accent);
  box-shadow: 0 0 18px rgba(155, 89, 182, 0.4);
  background: rgba(255, 255, 255, 0.06);
}
.search-icon { color: rgba(155, 89, 182, 0.8); margin-right: 0.55rem; flex-shrink: 0; }
#globalSearch {
  background: transparent; border: none; outline: none;
  color: var(--text-main); width: 100%; font-size: 0.9rem; font-family: inherit;
}
#globalSearch::placeholder { color: var(--text-muted); opacity: 0.6; }
.search-dropdown {
  position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0;
  background: rgba(14, 22, 40, 0.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(155, 89, 182, 0.22); border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  z-index: 1000; overflow: hidden; max-height: 400px; overflow-y: auto;
}
.search-result-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: all 0.2s ease;
}
.search-result-item:hover { background: rgba(155, 89, 182, 0.14); }
.search-result-item:last-child { border-bottom: none; }
.search-result-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.search-result-artist {
  font-size: 0.9rem; font-weight: 600; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-title {
  font-size: 0.8rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.15rem;
}
.search-no-results { padding: 1.2rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.search-dropdown::-webkit-scrollbar { width: 6px; }
.search-dropdown::-webkit-scrollbar-track { background: transparent; }
.search-dropdown::-webkit-scrollbar-thumb { background: rgba(155, 89, 182, 0.3); border-radius: 3px; }

/* === Футер === */
.footer-bar {
  grid-column: 1 / -1; width: 100%; margin: 2rem 0 0; padding: 0.8rem 2rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 26, 44, 0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(155, 89, 182, 0.4); border-radius: 9999px;
  box-shadow: 0 0 18px rgba(155, 89, 182, 0.4), 0 0 10px rgba(155, 89, 182, 0.2);
}
.footer-content { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.footer-text { font-size: 0.95rem; font-weight: 600; color: #fff; text-shadow: 0 0 8px rgba(155, 89, 182, 0.5); }
.footer-link {
  font-size: 0.95rem; font-weight: 500; color: var(--purple-accent);
  text-decoration: none; transition: color 0.25s ease, text-shadow 0.25s ease;
}
.footer-link:hover { color: #b370c7; text-shadow: 0 0 12px rgba(155, 89, 182, 0.7); }

/* ============================================== */
/* === СТИЛИ МАГАЗИНА === */
/* ============================================== */

/* --- Hero (без изменений) --- */
.shop-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.8rem 2rem; flex-wrap: wrap;
}
.shop-hero-glow {
  position: absolute; top: -70%; right: -10%;
  width: 55%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.28), transparent 65%);
  pointer-events: none;
  animation: hero-glow-float 9s ease-in-out infinite alternate;
}
@keyframes hero-glow-float {
  from { transform: translateX(0); opacity: 0.85; }
  to { transform: translateX(-40px); opacity: 1; }
}
.shop-hero-main { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.shop-hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  align-self: flex-start;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  background: rgba(155, 89, 182, 0.15);
  border: 1px solid rgba(155, 89, 182, 0.4);
  color: var(--purple-bright); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.shop-hero-title {
  font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.15;
  background: linear-gradient(120deg, #fff 30%, var(--purple-bright) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shop-hero-sub { color: var(--text-muted); font-size: 1rem; max-width: 560px; }
.shop-hero-actions { position: relative; margin-top: 0.6rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.shop-btn-glow {
  padding: 0.75rem 1.6rem; border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 700; color: #fff;
  background: linear-gradient(120deg, rgba(155, 89, 182, 0.85), rgba(93, 47, 168, 0.85));
  box-shadow: 0 0 22px rgba(155, 89, 182, 0.45);
  transition: all 0.25s ease;
}
.shop-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(155, 89, 182, 0.65); }
.shop-btn-ghost {
  padding: 0.75rem 1.6rem; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--text-muted); background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}
.shop-btn-ghost:hover { color: #fff; border-color: rgba(155, 89, 182, 0.5); background: rgba(155, 89, 182, 0.1); }

/* --- Баланс и кнопка админа (без изменений) --- */
.shop-hero-side { position: relative; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.balance-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: 9999px;
  background: rgba(8, 14, 28, 0.6);
  border: 1px solid rgba(155, 89, 182, 0.35);
  color: #e9d5ff; font-size: 0.92rem; font-weight: 600;
  box-shadow: inset 0 0 12px rgba(155, 89, 182, 0.08);
  white-space: nowrap;
}
.btn-topup {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: 9999px; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--purple-bright);
  background: rgba(8, 14, 28, 0.6);
  border: 1px solid rgba(155, 89, 182, 0.55);
  box-shadow: inset 0 0 12px rgba(155, 89, 182, 0.08);
  transition: all 0.25s ease; white-space: nowrap;
}
.btn-topup:hover {
  color: #fff;
  background: rgba(155, 89, 182, 0.3);
  border-color: rgba(155, 89, 182, 0.7);
  box-shadow: 0 0 16px rgba(155, 89, 182, 0.35);
}

.btn-admin-add {
  padding: 0.55rem 1.1rem; border-radius: 9999px; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  color: #fff; background: transparent;
  border: 1px solid rgba(155, 89, 182, 0.55);
  transition: all 0.25s ease; white-space: nowrap;
}
.btn-admin-add:hover {
  background: rgba(155, 89, 182, 0.25);
  box-shadow: 0 0 16px rgba(155, 89, 182, 0.4);
}

/* --- Вкладки: стиль как у кнопки админа, на одной линии --- */
.shop-tabs {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.9rem;
}

.shop-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.2rem; border-radius: 9999px; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--text-muted); background: transparent;
  border: 1px solid rgba(155, 89, 182, 0.4);
  transition: all 0.25s ease; white-space: nowrap;
}
.shop-tab:hover {
  color: #fff; background: rgba(155, 89, 182, 0.15);
  border-color: rgba(155, 89, 182, 0.55);
}
.shop-tab.active {
  color: #fff;
  background: linear-gradient(120deg, rgba(155, 89, 182, 0.55), rgba(93, 47, 168, 0.55));
  border-color: rgba(155, 89, 182, 0.7);
  box-shadow: 0 0 18px rgba(155, 89, 182, 0.4);
}
.shop-tab-count {
  font-size: 0.72rem; font-weight: 700; color: var(--purple-bright);
  padding: 0.05rem 0.5rem; border-radius: 9999px;
  background: rgba(8, 14, 28, 0.5);
  border: 1px solid rgba(155, 89, 182, 0.3);
}
.shop-tab.active .shop-tab-count { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

/* --- Панели вкладок --- */
.shop-tab-panel {
  margin-top: 1.4rem;
  animation: tab-in 0.3s ease;
}
@keyframes tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Сетка: карточки без изменений, со скроллом --- */
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.8rem;
}
.shop-grid-scroll {
  max-height: 600px; overflow-y: auto;
  padding: 0.3rem 0.5rem 0.3rem 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 89, 182, 0.4) transparent;
}
.shop-grid-scroll::-webkit-scrollbar { width: 6px; }
.shop-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.shop-grid-scroll::-webkit-scrollbar-thumb { background: rgba(155, 89, 182, 0.4); border-radius: 3px; }
.shop-empty {
  grid-column: 1 / -1; text-align: center; padding: 1.6rem 1rem;
  color: var(--text-muted); font-size: 0.9rem;
  border: 1px dashed rgba(155, 89, 182, 0.25); border-radius: 14px;
}

/* --- Карточка товара (без изменений) --- */
.shop-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px; padding: 0.45rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.shop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(155, 89, 182, 0.45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 18px rgba(155, 89, 182, 0.22);
}
.shop-card-face {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1c2640, #131d36);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.shop-card-face::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(155, 89, 182, 0.14), transparent 60%);
  pointer-events: none;
}
.shop-card-face img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: 8%; position: relative; z-index: 1;
  transition: filter 0.35s ease, transform 0.35s ease;
  filter: brightness(0.9);
}
.shop-card:hover .shop-card-face img {
  filter: brightness(1.1) saturate(1.15); transform: scale(1.06);
}
.shop-card-info h3 {
  font-size: 0.76rem; color: #fff; font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.25s ease;
}
.shop-card:hover .shop-card-info h3 { color: var(--purple-bright); }
.shop-card-price {
  font-size: 0.72rem; color: var(--purple-bright); font-weight: 700;
  text-align: center;
}

/* Куплено */
.shop-card.owned {
  border-color: rgba(46, 204, 113, 0.3);
  background: rgba(46, 204, 113, 0.04);
}
.shop-card.owned .shop-card-face {
  border-color: rgba(46, 204, 113, 0.35);
  box-shadow: 0 0 14px rgba(46, 204, 113, 0.12);
}
.shop-card.owned::before {
  content: '✓';
  position: absolute; top: 8px; left: 8px; z-index: 5;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(46, 204, 113, 0.9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}
.shop-card.owned .shop-card-price { color: #2ecc71; }

/* --- Кнопки (без изменений) --- */
.shop-buy-btn {
  width: 100%; padding: 0.42rem 0.3rem;
  background: rgba(155, 89, 182, 0.18);
  border: 1px solid rgba(155, 89, 182, 0.45);
  border-radius: 9px; color: #fff; font-size: 0.72rem;
  cursor: pointer; font-family: inherit; font-weight: 700;
  transition: all 0.25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-buy-btn:hover {
  background: rgba(155, 89, 182, 0.4);
  box-shadow: 0 0 14px rgba(155, 89, 182, 0.4);
}
.shop-buy-btn:disabled {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.4);
  color: #2ecc71; cursor: default;
}
.shop-buy-btn.worn {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.45);
  color: #2ecc71;
}

/* --- Админ-кнопки на карточке (без изменений) --- */
.shop-card-admin-btns {
  position: absolute; top: 8px; right: 8px;
  display: none; gap: 0.3rem; z-index: 5;
}
.shop-card.show-admin .shop-card-admin-btns { display: flex; }
.shop-card-admin-btn {
  width: 24px; height: 24px; border-radius: 7px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; opacity: 0.85;
}
.shop-card-admin-btn.edit { background: rgba(155, 89, 182, 0.75); color: #fff; }
.shop-card-admin-btn.edit:hover { background: rgba(155, 89, 182, 1); opacity: 1; box-shadow: 0 0 10px rgba(155, 89, 182, 0.5); }
.shop-card-admin-btn.delete { background: rgba(231, 76, 60, 0.75); color: #fff; }
.shop-card-admin-btn.delete:hover { background: rgba(231, 76, 60, 1); opacity: 1; box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
.shop-card-admin-btn svg { width: 11px; height: 11px; }

/* --- Модалки магазина --- */
.shop-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 1000; align-items: center; justify-content: center;
}
.shop-modal.open { display: flex; }
.shop-modal-content {
  background: rgba(16, 24, 42, 0.9);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: 1px solid rgba(155, 89, 182, 0.25);
  border-radius: 22px; padding: 2.2rem;
  width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(155, 89, 182, 0.12);
  position: relative;
  animation: shop-modal-in 0.25s ease;
}

/* === ДОБАВЛЕНО 29.10.2026: скроллбар модалки редактирования — фиолетовый,
в цвет проекта, вместо системного белого === */
.shop-modal-content::-webkit-scrollbar { width: 6px; }
.shop-modal-content::-webkit-scrollbar-track { background: transparent; }
.shop-modal-content::-webkit-scrollbar-thumb { background: rgba(155, 89, 182, 0.4); border-radius: 3px; }
.shop-modal-content::-webkit-scrollbar-thumb:hover { background: rgba(155, 89, 182, 0.6); }
.shop-modal-content { scrollbar-width: thin; scrollbar-color: rgba(155, 89, 182, 0.4) transparent; }
/* === /ДОБАВЛЕНО === */


@keyframes shop-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.shop-modal-content h3 {
  color: #fff; margin-bottom: 1.4rem; text-align: center; font-size: 1.35rem;
}
.shop-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%;
  background: transparent; color: #888; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease; z-index: 10;
}
.shop-modal-close:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.3); color: #e74c3c;
}

/* --- Форма магазина --- */
.shop-form-group { margin-bottom: 1rem; }
.shop-form-label { display: block; color: #ccc; margin-bottom: 0.4rem; font-size: 0.9rem; }
.shop-form-input {
  width: 100%; padding: 0.65rem 0.9rem;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid rgba(155, 89, 182, 0.15);
  border-radius: 12px; color: #fff; font-size: 0.95rem; font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.shop-form-input:focus {
  outline: none; border-color: rgba(155, 89, 182, 0.5);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.2);
}
.shop-form-input option { background: #0b1428; color: #fff; }

/* --- Зона загрузки файла --- */
.shop-file-zone {
  width: 100%; padding: 1.5rem 1rem;
  background: rgba(8, 14, 28, 0.5);
  border: 2px dashed rgba(155, 89, 182, 0.3);
  border-radius: 14px; cursor: pointer; text-align: center;
  transition: all 0.25s ease;
}
.shop-file-zone:hover, .shop-file-zone.dragover {
  border-color: rgba(155, 89, 182, 0.65);
  background: rgba(155, 89, 182, 0.08);
  box-shadow: 0 0 16px rgba(155, 89, 182, 0.18);
}
.shop-file-text {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--text-muted); font-size: 0.85rem;
}
.shop-file-text svg { color: rgba(155, 89, 182, 0.5); }
.shop-file-zone.has-file { border-color: rgba(46, 204, 113, 0.45); border-style: solid; }
.shop-file-zone.has-file .shop-file-text span { color: #2ecc71; }

/* --- Превью в редактировании --- */
.shop-edit-preview { display: flex; justify-content: center; margin-bottom: 1rem; }
.shop-edit-preview img {
  width: 80px; height: 80px; object-fit: contain;
  background: linear-gradient(135deg, #1e2940, #14203a);
  border-radius: 12px; border: 1px solid rgba(155, 89, 182, 0.25);
}

/* --- Кнопки формы --- */
.shop-btn-primary {
  width: 100%; padding: 0.75rem;
  background: linear-gradient(120deg, rgba(155, 89, 182, 0.55), rgba(93, 47, 168, 0.55));
  border: 1px solid rgba(155, 89, 182, 0.55);
  border-radius: 12px; color: #fff; font-size: 0.95rem;
  cursor: pointer; font-family: inherit; font-weight: 700;
  transition: all 0.25s ease; margin-top: 0.4rem;
}
.shop-btn-primary:hover {
  box-shadow: 0 0 20px rgba(155, 89, 182, 0.45);
  filter: brightness(1.15);
}
.shop-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.shop-btn-cancel {
  margin-top: 0.6rem; width: 100%; background: transparent;
  color: #888; border: none; cursor: pointer; padding: 0.6rem;
  font-family: inherit; font-size: 0.9rem;
}
.shop-btn-cancel:hover { color: #aaa; }

/* --- Тост --- */
.shop-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(16, 24, 42, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(155, 89, 182, 0.45);
  border-radius: 14px; padding: 0.8rem 1.4rem;
  color: #fff; font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(155, 89, 182, 0.25);
  opacity: 0; pointer-events: none; z-index: 2000;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 90vw; text-align: center;
}
.shop-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.shop-toast.err { border-color: rgba(231, 76, 60, 0.55); }
.shop-toast.ok { border-color: rgba(46, 204, 113, 0.55); }

/* --- Счётчики в заголовках блоков магазина --- */
.shop-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.45rem;
  margin-left: 0.5rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  color: var(--purple-bright);
  background: rgba(155, 89, 182, 0.12);
  border: 1px solid rgba(155, 89, 182, 0.35);
  box-shadow: inset 0 0 8px rgba(155, 89, 182, 0.08);
  vertical-align: middle;
}

/* === ДОБАВЛЕНО 27.10.2026: красивые карточки тарифов премиума === */
.premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
  max-height: 600px; overflow-y: auto;
  padding: 0.4rem 0.6rem 0.4rem 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 89, 182, 0.4) transparent;
}
.premium-grid::-webkit-scrollbar { width: 6px; }
.premium-grid::-webkit-scrollbar-track { background: transparent; }
.premium-grid::-webkit-scrollbar-thumb { background: rgba(155, 89, 182, 0.4); border-radius: 3px; }

.premium-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.55rem;
  background: linear-gradient(160deg, rgba(155, 89, 182, 0.14), rgba(255, 255, 255, 0.03) 55%);
  border: 1px solid rgba(155, 89, 182, 0.4);
  border-radius: 16px;
  box-shadow: inset 0 0 20px rgba(155, 89, 182, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.premium-card:hover {
  transform: translateY(-4px);
  border-color: rgba(155, 89, 182, 0.75);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(155, 89, 182, 0.3);
}

/* картинка тарифа — 16:9, любая пропорция подгоняется без искажений */
.premium-card-face {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1c2640, #131d36);
  border: 1px solid rgba(155, 89, 182, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.premium-card-face::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(155, 89, 182, 0.18), transparent 65%);
  pointer-events: none;
}
.premium-card-face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 1;
  transition: filter 0.35s ease, transform 0.35s ease;
  filter: brightness(0.9);
}
.premium-card:hover .premium-card-face img {
  filter: brightness(1.1) saturate(1.15); transform: scale(1.05);
}
.premium-no-img {
  position: relative; z-index: 1;
  font-size: 2.6rem;
  filter: drop-shadow(0 0 12px rgba(155, 89, 182, 0.6));
}

/* текстовая часть */
.premium-card-body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.15rem; }
.premium-card-body h3 {
  font-size: 1.05rem; font-weight: 800; color: #fff; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.25s ease;
}
.premium-card:hover .premium-card-body h3 { color: var(--purple-bright); }
.premium-card-days {
  font-size: 0.82rem; color: var(--text-muted);
  text-align: center;
}
.premium-card-price {
  font-size: 1.15rem; font-weight: 800; text-align: center;
  color: var(--purple-bright);
  text-shadow: 0 0 12px rgba(155, 89, 182, 0.45);
}
.premium-card-price.free { color: #2ecc71; text-shadow: 0 0 12px rgba(46, 204, 113, 0.4); }

/* активная подписка: зелёная рамка + галочка в углу, как у товаров */
.premium-card.owned {
  border-color: rgba(46, 204, 113, 0.45);
  background: linear-gradient(160deg, rgba(46, 204, 113, 0.1), rgba(255, 255, 255, 0.03) 55%);
}
.premium-card.owned::before {
  content: '✓';
  position: absolute; top: 14px; left: 14px; z-index: 6;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(46, 204, 113, 0.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.55);
}
.premium-owned {
  font-size: 0.78rem; color: #2ecc71; font-weight: 700;
  text-align: center; margin-top: 0.15rem;
}
.premium-warn {
  font-size: 0.75rem; color: #e67e22; font-weight: 600;
  text-align: center; margin-top: 0.1rem;
  animation: prem-warn-pulse 1.8s ease-in-out infinite;
}
@keyframes prem-warn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* кнопка покупки чуть крупнее, чем у товаров */
.premium-card .shop-buy-btn {
  padding: 0.55rem 0.4rem; font-size: 0.8rem; border-radius: 10px;
}
.premium-card .shop-buy-btn.owned {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.45);
}
.premium-card .shop-buy-btn.owned:hover {
  background: rgba(231, 76, 60, 0.14);
  border-color: rgba(231, 76, 60, 0.5);
  box-shadow: 0 0 14px rgba(231, 76, 60, 0.35);
}

/* админ-кнопки чуть ниже галочки, чтобы не соприкасались */
.premium-card .shop-card-admin-btns { top: 14px; }
.premium-card.show-admin .shop-card-admin-btns { display: flex; }
/* === /ДОБАВЛЕНО === */

/* === Адаптив === */
@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; padding: 1rem; gap: 1.2rem; }
  .top-bar { padding: 0.8rem 1rem; }
  .search-container { display: none; }
  .sidebar { position: static; }
  .shop-hero { padding: 1.4rem 1.3rem; }
  .shop-hero-title { font-size: 1.5rem; }
  .shop-tabs { gap: 0.45rem; }
  .shop-tab { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.7rem; }
  .shop-grid-scroll { max-height: 480px; }
  /* === ДОБАВЛЕНО 27.10.2026: премиум-сетка на планшетах === */
  .premium-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; max-height: 480px; }
  /* === /ДОБАВЛЕНО === */
  .shop-modal-content { padding: 1.6rem; max-height: 95vh; }
  .auth-modal-content { padding: 1.6rem; max-height: 95vh; }
  body { padding-bottom: 90px; }
}

@media (max-width: 500px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .shop-card-info h3 { font-size: 0.7rem; }
  .shop-card-admin-btn { width: 22px; height: 22px; }
  .shop-card-admin-btn svg { width: 10px; height: 10px; }
  /* === ДОБАВЛЕНО 27.10.2026: премиум-сетка на телефонах — 2 колонки === */
  .premium-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .premium-card-body h3 { font-size: 0.9rem; }
  .premium-card-price { font-size: 1rem; }
  .premium-owned { font-size: 0.68rem; }
  .premium-warn { font-size: 0.65rem; }
  /* === /ДОБАВЛЕНО === */
}


/* ============================================================
   === ДОБАВЛЕНО 28.10.2026: паки стикеров ===
   Бейдж на карточке + маленькое меню со списком стикеров ===
   ============================================================ */

/* бейдж «пак · N шт» на обложке карточки — вид карточки не меняется */
.shop-card-pack-badge {
  position: absolute;
  bottom: 8px; left: 8px;
  padding: 0.18rem 0.5rem;
  background: rgba(155, 89, 182, 0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  color: #fff; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* кликабельный купленный пак — лёгкий намёк, что по карточке можно кликнуть */
.shop-card.owned { cursor: default; }
.shop-card .shop-buy-btn:enabled { cursor: pointer; }

/* оверлей меню стикеров */
.sticker-pop-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 8, 20, 0.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  animation: sticker-pop-in 0.18s ease;
}
@keyframes sticker-pop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* само меню — маленькая стеклянная плашка */
.sticker-pop {
  width: min(420px, calc(100vw - 2rem));
  max-height: min(480px, calc(100vh - 4rem));
  display: flex; flex-direction: column;
  background: rgba(16, 24, 42, 0.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(155, 89, 182, 0.35);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(155, 89, 182, 0.15);
  padding: 0.9rem;
  animation: sticker-pop-panel-in 0.22s ease;
}
@keyframes sticker-pop-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sticker-pop-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.7rem; flex-shrink: 0;
}
.sticker-pop-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-weight: 700; font-size: 0.95rem;
}
.sticker-pop-count {
  color: var(--purple-bright, #c084fc);
  font-size: 0.78rem; font-weight: 700;
  flex-shrink: 0;
}
.sticker-pop-close {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
  background: transparent; color: #888;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.sticker-pop-close:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.3); color: #e74c3c;
}

/* сетка стикеров внутри меню */
.sticker-pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
  overflow-y: auto;
  padding: 0.15rem;
}
.sticker-pop-item {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}
.sticker-pop-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
}
.sticker-pop-item:hover {
  border-color: rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.12);
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.3);
}
.sticker-pop-item:active { transform: scale(0.96); }

.sticker-pop-foot {
  margin-top: 0.65rem; flex-shrink: 0;
  text-align: center;
  color: var(--text-muted, #98a8c8);
  font-size: 0.74rem;
}

.pack-admin-title { color: #fff; font-weight: 700; margin: 0.8rem 0 0.5rem; font-size: 0.95rem; }
.pack-admin-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 0.4rem; margin-bottom: 0.6rem; max-height: 180px; overflow-y: auto;
}
.pack-admin-item {
  position: relative; width: 100%; aspect-ratio: 1/1;
  background: rgba(8, 14, 28, 0.6);
  border: 1px solid rgba(155, 89, 182, 0.25); border-radius: 9px;
}
.pack-admin-item img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pack-admin-del {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(231, 76, 60, 0.9); color: #fff;
  border: none; cursor: pointer; font-size: 0.75rem; line-height: 1;
  transition: all 0.2s ease;
}
.pack-admin-del:hover { background: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,0.5); }

.sticker-pop-buy { display: block; margin: 0.7rem auto 0; width: auto; padding: 0.5rem 1.6rem; }

/* === ДОБАВЛЕНО 28.10.2026 (вечер): превью пака — больше окно и ровная сетка === */

/* окно превью: шире и выше, чтобы 23 стикера смотрелись без тесноты */
.sticker-pop {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(82vh, 760px);
  padding: 1.1rem;
}

/* сетка: крупнее ячейки, выравнивание по началу, своя прокрутка */
.sticker-pop-grid {
  /* 6 в ряд; высота области = ровно 5 полос (5 ячеек + 4 зазора + поля) */
  grid-template-columns: repeat(6, 1fr);
  gap: 0.7rem;
  align-content: start;
  overflow-y: auto;
  max-height: min(544px, calc(82vh - 140px));
  min-height: 160px;
  padding: 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 89, 182, 0.4) transparent;
}
.sticker-pop-grid::-webkit-scrollbar { width: 6px; }
.sticker-pop-grid::-webkit-scrollbar-track { background: transparent; }
.sticker-pop-grid::-webkit-scrollbar-thumb { background: rgba(155, 89, 182, 0.4); border-radius: 3px; }

/* ячейка: фиксированная квадратная, картинка строго внутри — ничего не налезает */
.sticker-pop-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}
.sticker-pop-item img {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* === ДОБАВЛЕНО: зелёная кнопка купленного пака === */
.shop-buy-btn.owned-btn {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.45);
  color: #2ecc71;
}
.shop-buy-btn.owned-btn:hover {
  background: rgba(46, 204, 113, 0.28);
  box-shadow: 0 0 14px rgba(46, 204, 113, 0.35);
}

.menu-item .menu-ico { color: var(--purple-accent); margin-right: 6px; vertical-align: -3px; }

/* === ИЗМЕНЕНО 01.11.2026: отступ и защита футера от наложений === */
.footer-bar {
  position: relative;
  z-index: 1;
  clear: both;
  margin-top: 2.5rem;
}
/* === /ИЗМЕНЕНО === */


/* ============================================================
   === ДОБАВЛЕНО 01.11.2026 (вечер): анимированные стикеры .tgs ===
   ============================================================ */
.anim-holder {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1c2640, #131d36);
}
.anim-holder svg, .anim-holder canvas {
  display: block; width: 100%; height: 100%; object-fit: contain;
  position: relative; z-index: 1;
}
.anim-fallback { font-size: 2rem; opacity: 0.75; }

/* лучи — мягкий вращающийся свет на анимированных карточках и ячейках превью */
.anim-rays {
  position: absolute; inset: -60%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(155, 89, 182, 0.16) 12deg, transparent 26deg,
    transparent 60deg, rgba(52, 152, 219, 0.14) 74deg, transparent 90deg,
    transparent 150deg, rgba(155, 89, 182, 0.12) 164deg, transparent 180deg,
    transparent 240deg, rgba(52, 152, 219, 0.12) 254deg, transparent 270deg,
    transparent 330deg, rgba(155, 89, 182, 0.14) 342deg, transparent 360deg);
  border-radius: 50%;
  animation: anim-rays-spin 7s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
@keyframes anim-rays-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* плашка «аним» — на самой обложке, слева сверху */
.anim-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  padding: 0.16rem 0.55rem; border-radius: 9999px;
  background: linear-gradient(120deg, rgba(155, 89, 182, 0.9), rgba(52, 152, 219, 0.85));
  color: #fff; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(155, 89, 182, 0.45);
  pointer-events: none;
}
/* у купленных карточек сдвигаем ниже зелёной галочки */
.shop-card.owned .anim-badge { top: 34px; }

/* мини-плашка «аним» в новинках — рядом с названием */
.novelty-anim-pill {
  display: inline-block; margin-left: 0.35rem;
  padding: 0.05rem 0.4rem; border-radius: 9999px; vertical-align: middle;
  background: linear-gradient(120deg, rgba(155, 89, 182, 0.9), rgba(52, 152, 219, 0.85));
  color: #fff; font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.35);
}

/* держатель в новинках (только пока грузится первый кадр, заменяется картинкой) */
.novelty-anim-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #1e2940, #14203a);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
}

/* ячейки админ-списка и превью редактирования */
.pack-anim-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 1.1rem;
}
.pack-anim-thumb.big { font-size: 2.4rem; }

/* превью пака: держатель на всю ячейку, ничего не уезжает в бок */
.sticker-pop-item.anim-item { position: relative; background: rgba(8, 14, 28, 0.55); }
.sticker-pop-item.anim-item .anim-holder {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit;
}
.sticker-pop-item.anim-item .anim-rays { opacity: 0.5; }
/* === /ДОБАВЛЕНО === */


/* на телефонах окно почти на весь экран, ячейки чуть меньше */
@media (max-width: 480px) {
  .sticker-pop { width: calc(100vw - 1.2rem); max-height: 88vh; padding: 0.9rem; }
  .sticker-pop-grid {
    /* на телефоне тоже 6 в ряд, высота — ровно 5 полос */
    grid-template-columns: repeat(6, 1fr);
    gap: 0.55rem;
    max-height: calc((100vw - 1.2rem - 1.8rem - 2.75rem) / 6 * 5 + 2.8rem);
  }
}
/* === /ДОБАВЛЕНО === */

/* === ИЗМЕНЕНО 02.11.2026 (вечер): лучи в новинках — вид как на большой карточке.
   Обёртка работает как мини-обложка (фон, рамка, скругление — как .anim-holder),
   а лучи НЕ переопределяются вообще: работает родной .anim-rays с его
   inset -60%, мягким градиентом и вращением 7s — один в один как на карточке === */
.novelty-anim-wrap {
  position: relative;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1c2640, #131d36);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.novelty-item .novelty-anim-wrap img,
.novelty-item .novelty-anim-wrap .novelty-anim-thumb {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 8px; object-fit: contain;
  padding: 2px;
  border: none;
  background: transparent !important; /* свет просвечивает сквозь прозрачные места стикера, как на карточке */
}