/* ZALP shop — окно магазина скинов (стиль zalp-cartoon). Всё под #zs-root, классы zs-*. */
#zs-root {
  --zs-ink: var(--z-ink, #1a1340);
  --zs-out: var(--z-outline, 0 2px 0 #1a1340, 2px 0 0 #1a1340, -2px 0 0 #1a1340, 0 -2px 0 #1a1340, 0 4px 0 #1a1340);
  --zs-out-sm: var(--z-outline-sm, 0 1px 0 #1a1340, 1px 0 0 #1a1340, -1px 0 0 #1a1340, 0 -1px 0 #1a1340, 0 2px 0 #1a1340);
  --zs-btn-shadow: var(--z-btn-shadow, inset 0 -5px 0 rgba(0, 0, 0, .2), inset 0 3px 0 rgba(255, 255, 255, .4), 0 4px 0 #1a1340);
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 18px 18px;
  background: rgba(20, 12, 60, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #fff;
  font: 600 16px/1.3 var(--z-font, "Rubik", "Montserrat", system-ui, sans-serif);
  text-align: left;
  opacity: 0;
  transition: opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
#zs-root[hidden] { display: none; }
#zs-root.zs-open { opacity: 1; }
#zs-root *,
#zs-root *::before,
#zs-root *::after {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
}
#zs-root img { max-width: none; }
#zs-root button { margin: 0; font-family: inherit; -webkit-appearance: none; appearance: none; }
#zs-root .zs-ico { width: 1em; height: 1em; flex: none; }
#zs-root .zs-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- окно ---------- */
#zs-root .zs-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1120px;
  height: min(840px, 100%);
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, var(--z-panel-top, #4b3cc4) 0%, var(--z-panel-mid, #3527a0) 55%, var(--z-panel-bot, #2a1e84) 100%);
  border: 4px solid var(--zs-ink);
  border-radius: 28px;
  box-shadow: var(--z-panel-shadow, 0 6px 0 #1a1340, 0 16px 30px rgba(12, 6, 48, .45), inset 0 3px 0 rgba(255, 255, 255, .16));
  outline: none;
  transform: translateY(16px) scale(.97);
  transition: transform .26s cubic-bezier(.2, 1.5, .4, 1);
}
#zs-root.zs-open .zs-modal { transform: none; }

/* ---------- шапка ---------- */
#zs-root .zs-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 14px 16px 10px 210px;
}
#zs-root .zs-hero {
  position: absolute;
  left: 8px;
  top: -54px;
  width: 196px;
  height: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 6px 0 rgba(26, 19, 64, .5));
  pointer-events: none;
  animation: zs-float 3.6s ease-in-out infinite;
}
#zs-root .zs-titles { flex: 1; min-width: 0; }
#zs-root .zs-title {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  color: var(--z-yellow, #ffd21f);
  text-transform: uppercase;
  text-shadow: var(--zs-out);
  white-space: nowrap;
}
#zs-root .zs-sub {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  text-shadow: var(--zs-out-sm);
  opacity: .95;
}
#zs-root .zs-bal {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px 0 8px;
  margin-left: 12px;
  border: 3px solid var(--zs-ink);
  border-radius: 25px;
  background: rgba(10, 6, 40, .55);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25), 0 3px 0 rgba(26, 19, 64, .6);
  white-space: nowrap;
}
#zs-root .zs-bal img {
  width: 46px;
  height: 46px;
  margin: -8px 0 -8px -20px;
  filter: drop-shadow(0 3px 0 rgba(26, 19, 64, .7));
}
#zs-root .zs-bal-n {
  min-width: 2ch;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  text-shadow: var(--zs-out-sm);
  font-variant-numeric: tabular-nums;
}
#zs-root .zs-bal.zs-bump { animation: zs-bump .5s ease; }
#zs-root .zs-float {
  position: absolute;
  right: 10px;
  top: 100%;
  font-size: 20px;
  font-weight: 900;
  color: #ff8d9b;
  text-shadow: var(--zs-out-sm);
  pointer-events: none;
  animation: zs-floatout 1.2s ease-out forwards;
}
#zs-root .zs-float-up { color: #9dff8f; }
#zs-root .zs-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 3px solid var(--zs-ink);
  border-radius: 50%;
  background: linear-gradient(180deg, #ff7a8a, var(--z-red, #ff4d63) 55%, var(--z-red-dk, #d4213d));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--zs-ink);
  cursor: pointer;
  transition: transform .1s, filter .12s;
}
#zs-root .zs-x svg { width: 26px; height: 26px; }
#zs-root .zs-x:hover { filter: brightness(1.08); transform: rotate(8deg); }
#zs-root .zs-x:active { transform: translateY(2px); }

/* ---------- вкладки ---------- */
#zs-root .zs-tabs {
  display: flex;
  gap: 8px;
  margin: 0 16px;
  padding: 10px 8px 8px;
  border: 3px solid var(--zs-ink);
  border-radius: 20px;
  background: rgba(10, 6, 40, .35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .18);
}
#zs-root[data-st="auth"] .zs-tabs,
#zs-root[data-st="error"] .zs-tabs,
#zs-root[data-st="auth"] .zs-tools,
#zs-root[data-st="error"] .zs-tools,
#zs-root[data-st="auth"] .zs-bal,
#zs-root[data-st="error"] .zs-bal { display: none; }
#zs-root[data-st="loading"] .zs-tabs:empty { min-height: 72px; }
#zs-root[data-st="loading"] .zs-tools { visibility: hidden; }
#zs-root .zs-tab {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 50px;
  padding: 4px 10px 4px 6px;
  border: 3px solid var(--zs-ink);
  border-radius: 15px;
  background: linear-gradient(180deg, #6e5fe6 0%, #5444cc 55%, #4434b4 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 var(--zs-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.05;
  text-shadow: var(--zs-out-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s, filter .12s;
}
#zs-root .zs-tab img { flex: none; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(26, 19, 64, .6)); }
#zs-root .zs-tab-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#zs-root .zs-tab:hover { filter: brightness(1.1); }
#zs-root .zs-tab:active { transform: translateY(2px); }
#zs-root .zs-tab.zs-on {
  background: linear-gradient(180deg, var(--z-yellow-hi, #ffe970) 0%, var(--z-yellow, #ffd21f) 48%, var(--z-orange, #ff9a00) 100%);
  transform: translateY(-1px);
}
#zs-root .zs-tab.zs-on img { animation: zs-wiggle .5s ease; }
#zs-root .zs-tab-n {
  position: absolute;
  top: -10px;
  right: -7px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid var(--zs-ink);
  border-radius: 11px;
  background: #2a1e84;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
#zs-root .zs-tab.zs-on .zs-tab-n { background: var(--z-red, #ff4d63); }

/* ---------- панель сортировки ---------- */
#zs-root .zs-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 6px;
}
#zs-root .zs-sort-sel,
#zs-root .zs-chip {
  height: 38px;
  border: 3px solid var(--zs-ink);
  border-radius: 13px;
  background-color: rgba(10, 6, 40, .5);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2);
}
#zs-root .zs-sort-sel {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 34px 0 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 16px;
}
#zs-root .zs-sort-sel option { color: #1a1340; background: #fff; font-weight: 700; }
#zs-root .zs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 8px;
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-chk {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--zs-ink);
  border-radius: 6px;
  background: rgba(255, 255, 255, .15);
  color: transparent;
  font-size: 15px;
  font-style: normal;
}
#zs-root .zs-chip.zs-on .zs-chk { background: var(--z-green, #3fd13a); color: #fff; }
#zs-root .zs-coll {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  text-shadow: var(--zs-out-sm);
  white-space: nowrap;
}
#zs-root .zs-coll b { font-size: 15px; font-weight: 900; }
#zs-root .zs-coll-bar {
  position: relative;
  display: block;
  width: 110px;
  height: 14px;
  border: 2px solid var(--zs-ink);
  border-radius: 7px;
  background: rgba(10, 6, 40, .6);
  overflow: hidden;
}
#zs-root .zs-coll-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, #7dff6a, var(--z-green, #3fd13a));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
  transition: width .5s;
}

/* ---------- тело со скроллом ---------- */
#zs-root .zs-body {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 6px;
  padding: 8px 12px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--z-purple, #a06bff) transparent;
}
#zs-root .zs-body::-webkit-scrollbar { width: 10px; }
#zs-root .zs-body::-webkit-scrollbar-thumb { background: var(--z-purple, #a06bff); border: 2px solid var(--zs-ink); border-radius: 6px; }
#zs-root .zs-view { min-height: 100%; display: flex; flex-direction: column; }
#zs-root .zs-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 2px 10px;
  font-size: 20px;
  font-weight: 900;
  color: var(--z-yellow, #ffd21f);
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-sec:first-child { margin-top: 4px; }
#zs-root .zs-sec img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(26, 19, 64, .6)); }
#zs-root .zs-sec i {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(10, 6, 40, .5);
  color: #fff;
  font-size: 13px;
  font-style: normal;
}
#zs-root .zs-sec::after {
  content: "";
  flex: 1;
  height: 4px;
  margin-left: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
#zs-root .zs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px 14px;
}

/* ---------- редкость (цвет по цене) ---------- */
#zs-root .zs-t-common { --zs-a: #9aa4c8; --zs-b: #56608a; --zs-c: #dfe5ff; }
#zs-root .zs-t-uncommon { --zs-a: #5fd97c; --zs-b: #22874a; --zs-c: #c8ffd3; }
#zs-root .zs-t-rare { --zs-a: #4fbdff; --zs-b: #1b62cf; --zs-c: #c9ecff; }
#zs-root .zs-t-epic { --zs-a: #c08aff; --zs-b: #6c30d8; --zs-c: #ecdcff; }
#zs-root .zs-t-legend { --zs-a: #ffd84a; --zs-b: #f2711a; --zs-c: #fff3c2; }

/* ---------- карточка ---------- */
#zs-root .zs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 3px solid var(--zs-ink);
  border-radius: 20px;
  background: linear-gradient(180deg, #4536b8 0%, #33259c 100%);
  box-shadow: 0 5px 0 var(--zs-ink), inset 0 2px 0 rgba(255, 255, 255, .14);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}
#zs-root .zs-card:hover { transform: translateY(-4px); box-shadow: 0 9px 0 var(--zs-ink), inset 0 2px 0 rgba(255, 255, 255, .14); }
#zs-root .zs-anim .zs-card { animation: zs-cardin .38s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
#zs-root .zs-card.zs-eq { border-color: #0d5c12; box-shadow: 0 5px 0 var(--zs-ink), 0 0 0 3px var(--z-green, #3fd13a), inset 0 2px 0 rgba(255, 255, 255, .14); }
#zs-root .zs-art {
  position: relative;
  aspect-ratio: 1 / .84;
  border-bottom: 3px solid var(--zs-ink);
  background:
    radial-gradient(circle at 50% 50%, var(--zs-c) 0, rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--zs-a), var(--zs-b));
  overflow: hidden;
}
#zs-root .zs-art::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
#zs-root .zs-t-legend .zs-art::after,
#zs-root .zs-t-epic .zs-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: zs-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
#zs-root .zs-t-epic .zs-art::after { animation-duration: 5s; opacity: .7; }
#zs-root .zs-fit {
  position: absolute;
  left: 50%;
  top: 53%;
  height: 76%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform .2s cubic-bezier(.2, 1.5, .4, 1);
}
#zs-root .zs-card:hover .zs-fit { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); }
#zs-root .zs-pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 0 rgba(26, 19, 64, .55));
  -webkit-user-drag: none;
  pointer-events: none;
}
#zs-root .zs-pic-outfit { transform: rotate(-90deg); }
#zs-root .zs-pic-crosshair { filter: drop-shadow(0 0 1.5px #1a1340) drop-shadow(0 0 1px #1a1340) drop-shadow(0 2px 0 rgba(26, 19, 64, .8)); }
#zs-root .zs-pic-fallback { left: 15%; top: 15%; width: 70%; height: 70%; transform: none; opacity: .9; }
#zs-root .zs-tier {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 8px 3px;
  border: 2px solid var(--zs-ink);
  border-radius: 9px;
  background: rgba(26, 19, 64, .55);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-new {
  position: absolute;
  right: 4px;
  top: 3px;
  z-index: 2;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(26, 19, 64, .6));
  animation: zs-wiggle 1.8s ease-in-out infinite;
}
#zs-root .zs-eqb {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid var(--zs-ink);
  border-radius: 50%;
  background: var(--z-green, #3fd13a);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 2px 0 var(--zs-ink);
}
#zs-root .zs-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 10px 12px;
}
#zs-root .zs-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: var(--zs-out-sm);
  word-break: break-word;
}
#zs-root .zs-kind {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  color: rgba(255, 255, 255, .78);
}
#zs-root .zs-kind img { width: 18px; height: 18px; object-fit: contain; }
#zs-root .zs-act {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}
#zs-root .zs-price {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-price img { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 rgba(26, 19, 64, .6)); }
#zs-root .zs-price small { margin-left: auto; font-size: 12px; font-weight: 800; color: #ffb3bd; white-space: nowrap; }
#zs-root .zs-price-poor b { color: #ffc2ca; }
#zs-root .zs-have {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  font-size: 14px;
  font-weight: 900;
  color: #a8ff9a;
  text-shadow: var(--zs-out-sm);
}

/* ---------- кнопки ---------- */
#zs-root .zs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border: 3px solid var(--zs-ink);
  border-radius: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-shadow: var(--zs-out-sm);
  box-shadow: var(--zs-btn-shadow);
  cursor: pointer;
  transition: transform .08s, filter .12s;
}
#zs-root .zs-btn:hover { filter: brightness(1.08); }
#zs-root .zs-btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 3px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--zs-ink); }
#zs-root .zs-btn:focus-visible,
#zs-root .zs-tab:focus-visible,
#zs-root .zs-chip:focus-visible,
#zs-root .zs-sort-sel:focus-visible,
#zs-root .zs-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#zs-root .zs-btn[disabled] { cursor: default; }
#zs-root .zs-btn-cancel[disabled] { filter: grayscale(.6) brightness(.8); }
#zs-root .zs-btn[disabled]:active { transform: none; box-shadow: var(--zs-btn-shadow); }
#zs-root .zs-btn-buy { background: linear-gradient(180deg, var(--z-yellow-hi, #ffe970) 0%, var(--z-yellow, #ffd21f) 45%, var(--z-orange, #ff9a00) 100%); }
#zs-root .zs-btn-equip { background: linear-gradient(180deg, #6cc6ff 0%, var(--z-blue, #31a8ff) 50%, var(--z-blue-dk, #1b63e0) 100%); }
#zs-root .zs-btn-on { background: linear-gradient(180deg, #7cf06a 0%, var(--z-green, #3fd13a) 55%, var(--z-green-dk, #1f9a22) 100%); }
#zs-root .zs-btn-info { background: linear-gradient(180deg, #c99bff 0%, var(--z-purple, #a06bff) 55%, var(--z-purple-dk, #6a38dc) 100%); font-size: 14px; }
#zs-root .zs-btn-cancel { background: linear-gradient(180deg, #ff8796 0%, var(--z-red, #ff4d63) 55%, var(--z-red-dk, #d4213d) 100%); }
#zs-root .zs-btn-poor {
  background: linear-gradient(180deg, #8c82bd 0%, #6a5f9e 55%, #554a86 100%);
  color: #ffd9de;
  font-size: 13.5px;
}
#zs-root .zs-btn-big { width: auto; min-width: 220px; min-height: 52px; padding: 10px 26px; font-size: 19px; border-radius: 16px; }
#zs-root .zs-spin {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: zs-rot .7s linear infinite;
}

/* ---------- состояния: загрузка / вход / ошибка / пусто ---------- */
#zs-root .zs-skel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 300px;
  padding: 0 10px 12px;
  border: 3px solid rgba(26, 19, 64, .7);
  border-radius: 20px;
  background: rgba(10, 6, 40, .28);
  overflow: hidden;
}
#zs-root .zs-skel i { display: block; height: 52%; margin: 0 -10px 4px; background: rgba(255, 255, 255, .08); border-bottom: 3px solid rgba(26, 19, 64, .5); }
#zs-root .zs-skel b { display: block; height: 16px; width: 80%; border-radius: 8px; background: rgba(255, 255, 255, .1); }
#zs-root .zs-skel b + b { width: 50%; height: 12px; }
#zs-root .zs-skel s { display: block; margin-top: auto; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .1); }
#zs-root .zs-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: zs-sheen 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}
#zs-root .zs-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 540px;
  margin: auto;
  padding: 18px 12px 24px;
  text-align: center;
  animation: zs-cardin .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
#zs-root .zs-state-art {
  width: 250px;
  max-width: 70%;
  height: auto;
  filter: drop-shadow(0 6px 0 rgba(26, 19, 64, .5));
  animation: zs-float 3.6s ease-in-out infinite;
}
#zs-root .zs-state-sad { filter: grayscale(.45) drop-shadow(0 6px 0 rgba(26, 19, 64, .5)); animation: none; transform: rotate(-3deg); }
#zs-root .zs-state-sm .zs-state-art { width: 170px; }
#zs-root .zs-state-title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--z-yellow, #ffd21f);
  text-shadow: var(--zs-out);
}
#zs-root .zs-state-text { font-size: 16px; font-weight: 700; line-height: 1.45; text-shadow: var(--zs-out-sm); opacity: .95; }
#zs-root .zs-state .zs-btn { margin-top: 6px; }

/* ---------- подвал ---------- */
#zs-root .zs-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 14px;
  border-top: 3px solid rgba(26, 19, 64, .45);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
}
#zs-root .zs-foot img { width: 26px; height: 26px; flex: none; }

/* ---------- подтверждение / успех ---------- */
#zs-root .zs-pop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 16px 16px;
  background: rgba(8, 4, 30, .55);
  animation: zs-fade .16s ease;
}
#zs-root .zs-pop[hidden] { display: none; }
#zs-root .zs-dlg {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 92px 22px 22px;
  border: 4px solid var(--zs-ink);
  border-radius: 26px;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, var(--z-panel-top, #4b3cc4) 0%, var(--z-panel-mid, #3527a0) 55%, var(--z-panel-bot, #2a1e84) 100%);
  box-shadow: var(--z-panel-shadow, 0 6px 0 #1a1340, 0 16px 30px rgba(12, 6, 48, .45));
  text-align: center;
  animation: zs-popin .36s cubic-bezier(.2, 1.5, .4, 1) both;
}
#zs-root .zs-dlg-art {
  position: absolute;
  left: 50%;
  top: -76px;
  z-index: 1;
  width: 156px;
  height: 156px;
  margin-left: -78px;
  border: 4px solid var(--zs-ink);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, var(--zs-c) 0, rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--zs-a), var(--zs-b));
  box-shadow: 0 6px 0 var(--zs-ink), inset 0 3px 0 rgba(255, 255, 255, .35);
  overflow: hidden;
}
#zs-root .zs-dlg-art .zs-fit { top: 50%; height: 80%; }
#zs-root .zs-win .zs-dlg-art { animation: zs-prize .7s cubic-bezier(.2, 1.6, .4, 1) both; }
#zs-root .zs-dlg-tier {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--zs-ink);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--zs-a), var(--zs-b));
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-dlg-title {
  margin: 10px 0 8px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.12;
  text-shadow: var(--zs-out);
  word-break: break-word;
}
#zs-root .zs-win-title { margin-top: 0; font-size: 40px; color: var(--z-yellow, #ffd21f); animation: zs-bump .6s .25s ease both; }
#zs-root .zs-dlg-sub { font-size: 17px; font-weight: 800; text-shadow: var(--zs-out-sm); }
#zs-root .zs-dlg-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px 0 8px;
  border: 3px solid var(--zs-ink);
  border-radius: 23px;
  background: rgba(10, 6, 40, .55);
  font-size: 26px;
  font-weight: 900;
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-dlg-price img { width: 36px; height: 36px; }
#zs-root .zs-dlg-note { margin-top: 10px; font-size: 14px; font-weight: 700; opacity: .85; }
#zs-root .zs-dlg-err:empty { display: none; }
#zs-root .zs-dlg-err { min-height: 1.2em; margin-top: 6px; font-size: 14px; font-weight: 800; color: #ffc2ca; }
#zs-root .zs-dlg-btns { display: flex; gap: 10px; margin-top: 12px; }
#zs-root .zs-dlg-btns .zs-btn { flex: 1; min-height: 50px; font-size: 18px; }
#zs-root .zs-rays {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 233, 112, .55) 0 10deg, rgba(255, 233, 112, 0) 10deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  pointer-events: none;
  animation: zs-rot 9s linear infinite;
}
#zs-root .zs-confetti { position: absolute; left: 50%; top: 2px; width: 0; height: 0; z-index: 2; pointer-events: none; }
#zs-root .zs-confetti i {
  position: absolute;
  left: -5px;
  top: -8px;
  width: 10px;
  height: 16px;
  border: 2px solid var(--zs-ink);
  border-radius: 3px;
  opacity: 0;
  animation: zs-confetti 1.3s cubic-bezier(.15, .7, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}

/* ---------- тост ---------- */
#zs-root .zs-toast {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 7;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border: 3px solid var(--zs-ink);
  border-radius: 16px;
  background: var(--z-green-dk, #1f9a22);
  box-shadow: 0 5px 0 var(--zs-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-shadow: var(--zs-out-sm);
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity .2s, transform .25s cubic-bezier(.2, 1.5, .4, 1);
  pointer-events: none;
}
#zs-root .zs-toast.zs-show { opacity: 1; transform: translate(-50%, 0); }
#zs-root .zs-toast-err { background: var(--z-red-dk, #d4213d); }
#zs-root .zs-toast-warn { background: #d46a00; }
#zs-root .zs-toast-info { background: var(--z-blue-dk, #1b63e0); }

/* ---------- анимации ---------- */
@keyframes zs-rot { to { transform: rotate(360deg); } }
@keyframes zs-fade { from { opacity: 0; } }
@keyframes zs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes zs-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg); } }
@keyframes zs-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes zs-floatout { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(22px); } }
@keyframes zs-cardin { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes zs-popin { from { opacity: 0; transform: translateY(20px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes zs-prize { 0% { transform: scale(.2) rotate(-25deg); } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes zs-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes zs-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  #zs-root *, #zs-root *::before, #zs-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  #zs-root .zs-head { padding-left: 156px; min-height: 84px; }
  #zs-root .zs-hero { width: 146px; top: -36px; }
  #zs-root .zs-title { font-size: 30px; }
  #zs-root .zs-sub { font-size: 13px; }
}
@media (max-width: 1060px) {
  #zs-root .zs-tabs { gap: 6px; padding: 10px 6px 6px; }
  #zs-root .zs-tab { flex: 1 1 0; flex-direction: column; gap: 3px; min-height: 62px; padding: 5px 3px 6px; font-size: 13px; }
  #zs-root .zs-tab-l { max-width: 100%; }
  #zs-root .zs-tab img { width: 30px; height: 30px; }
}
@media (max-width: 760px) {
  #zs-root .zs-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
}
@media (max-height: 720px) and (min-width: 561px) {
  #zs-root { padding-top: 42px; padding-bottom: 10px; }
  #zs-root .zs-head { min-height: 74px; padding-top: 8px; padding-bottom: 6px; padding-left: 150px; }
  #zs-root .zs-hero { width: 136px; top: -34px; }
  #zs-root .zs-title { font-size: 30px; }
  #zs-root .zs-sub { margin-top: 4px; }
  #zs-root .zs-tab { min-height: 44px; }
  #zs-root .zs-tab img { width: 28px; height: 28px; }
  #zs-root .zs-tools { padding-top: 8px; }
  #zs-root .zs-foot { padding-top: 7px; padding-bottom: 9px; font-size: 12px; }
}
/* телефоны: портрет (≤560) и альбомная ориентация (низкий экран) — карточки строкой */
@media (max-width: 560px), (max-height: 500px) {
  #zs-root { padding: 8px; align-items: stretch; }
  #zs-root .zs-modal { height: 100%; border-radius: 22px; }
  #zs-root .zs-sub { display: none; }
  #zs-root .zs-title { overflow: hidden; text-overflow: ellipsis; padding: 2px 0 4px; }
  #zs-root .zs-bal { padding: 0 10px 0 4px; margin-left: 14px; gap: 5px; }
  #zs-root .zs-bal img { width: 32px; height: 32px; margin: -5px 0 -5px -16px; }
  #zs-root .zs-bal-n { font-size: 17px; }
  #zs-root .zs-x svg { width: 21px; height: 21px; }
  #zs-root .zs-sort-sel, #zs-root .zs-chip { font-size: 12px; }
  #zs-root .zs-sort-sel { padding-left: 9px; padding-right: 26px; background-position: right 6px center; text-overflow: ellipsis; }
  #zs-root .zs-chip { gap: 5px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
  #zs-root .zs-chk { flex: none; width: 18px; height: 18px; }
  #zs-root .zs-sec { font-size: 17px; margin: 12px 2px 8px; }
  #zs-root .zs-sec img { width: 28px; height: 28px; }
  #zs-root .zs-card { flex-direction: row; border-radius: 18px; }
  #zs-root .zs-card:hover { transform: none; box-shadow: 0 5px 0 var(--zs-ink), inset 0 2px 0 rgba(255, 255, 255, .14); }
  #zs-root .zs-card.zs-eq:hover { box-shadow: 0 5px 0 var(--zs-ink), 0 0 0 3px var(--z-green, #3fd13a), inset 0 2px 0 rgba(255, 255, 255, .14); }
  #zs-root .zs-art { flex: none; width: 116px; aspect-ratio: auto; min-height: 128px; border-bottom: 0; border-right: 3px solid var(--zs-ink); }
  #zs-root .zs-fit { top: 55%; height: auto; width: 76%; }
  #zs-root .zs-tier { left: 5px; top: 5px; padding: 3px 5px 2px; font-size: 8.5px; }
  #zs-root .zs-new { width: 32px; height: 32px; right: 2px; top: auto; bottom: 2px; }
  #zs-root .zs-eqb { width: 26px; height: 26px; right: 5px; bottom: 5px; font-size: 14px; }
  #zs-root .zs-info { gap: 4px; padding: 8px 10px 10px; }
  #zs-root .zs-name { min-height: 0; font-size: 15px; }
  #zs-root .zs-act { flex-direction: row; align-items: center; gap: 8px; }
  #zs-root .zs-price, #zs-root .zs-have { flex: none; min-height: 0; font-size: 18px; }
  #zs-root .zs-price { gap: 4px; flex-wrap: wrap; max-width: 46%; }
  #zs-root .zs-price img { width: 24px; height: 24px; }
  #zs-root .zs-price small { width: 100%; margin-left: 0; font-size: 11px; }
  #zs-root .zs-have { font-size: 13px; }
  #zs-root .zs-act .zs-btn { flex: 1; width: auto; min-width: 0; min-height: 40px; padding: 5px 6px; font-size: 14.5px; }
  #zs-root .zs-act .zs-btn-poor,
  #zs-root .zs-act .zs-btn-info { font-size: 12px; }
  #zs-root .zs-skel { height: 128px; flex-direction: row; padding: 0; }
  #zs-root .zs-skel i { width: 116px; height: auto; margin: 0; border-bottom: 0; border-right: 3px solid rgba(26, 19, 64, .5); }
  #zs-root .zs-skel b, #zs-root .zs-skel s { display: none; }
  #zs-root .zs-state-title { font-size: 24px; }
  #zs-root .zs-state-text { font-size: 14.5px; }
  #zs-root .zs-rays { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
}
/* телефон, портрет */
@media (max-width: 560px) {
  #zs-root .zs-head { gap: 8px; min-height: 62px; padding: 8px 8px 8px 76px; }
  #zs-root .zs-hero { left: 0; top: -2px; width: 72px; transform: rotate(-6deg); }
  #zs-root .zs-title { font-size: 21px; }
  #zs-root .zs-bal { height: 38px; }
  #zs-root .zs-x { width: 38px; height: 38px; }
  #zs-root .zs-tabs { gap: 6px; margin: 0 8px; padding: 9px 6px 6px; border-radius: 16px; }
  #zs-root .zs-tab { min-height: 52px; padding: 4px 1px 5px; border-radius: 12px; font-size: 10.5px; letter-spacing: -.01em; }
  #zs-root .zs-tab img { width: 28px; height: 28px; }
  #zs-root .zs-tab-n { top: -8px; right: -5px; min-width: 20px; height: 18px; padding: 0 4px; font-size: 10px; }
  #zs-root .zs-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px 10px 4px; }
  #zs-root .zs-sort { min-width: 0; }
  #zs-root .zs-sort-sel, #zs-root .zs-chip { width: 100%; min-width: 0; height: 34px; }
  #zs-root .zs-coll { grid-column: 1 / -1; width: 100%; margin-left: 0; font-size: 12px; }
  #zs-root .zs-coll-bar { flex: 1; width: auto; }
  #zs-root .zs-body { margin: 0 2px; padding: 6px 8px 14px; }
  #zs-root .zs-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #zs-root .zs-foot { padding: 7px 12px 9px; font-size: 11px; line-height: 1.3; gap: 8px; }
  #zs-root .zs-foot img { width: 20px; height: 20px; }
  #zs-root .zs-btn-big { min-width: 0; width: 100%; font-size: 17px; }
  #zs-root .zs-pop { padding: 80px 10px 10px; }
  #zs-root .zs-dlg { padding: 74px 14px 16px; }
  #zs-root .zs-dlg-art { width: 128px; height: 128px; margin-left: -64px; top: -64px; border-radius: 24px; }
  #zs-root .zs-dlg-title { font-size: 21px; }
  #zs-root .zs-win-title { font-size: 34px; }
  #zs-root .zs-dlg-btns .zs-btn { font-size: 16px; min-height: 46px; }
}
@media (max-width: 360px) {
  #zs-root .zs-hero { display: none; }
  #zs-root .zs-head { padding-left: 14px; }
  #zs-root .zs-title { font-size: 20px; }
  #zs-root .zs-tab { font-size: 9.5px; letter-spacing: -.02em; }
  #zs-root .zs-sort-sel, #zs-root .zs-chip { font-size: 11px; }
  #zs-root .zs-art { width: 100px; }
}
/* телефон, альбомная ориентация: низкий экран — всё компактно, подвал скрыт */
@media (max-height: 500px) and (min-width: 561px) {
  #zs-root { padding: 6px 10px; }
  #zs-root .zs-modal { border-radius: 20px; }
  #zs-root .zs-head { gap: 10px; min-height: 50px; padding: 4px 8px 4px 74px; }
  #zs-root .zs-hero { left: 2px; top: -4px; width: 64px; transform: rotate(-6deg); }
  #zs-root .zs-title { font-size: 24px; }
  #zs-root .zs-bal { height: 36px; }
  #zs-root .zs-x { width: 36px; height: 36px; }
  #zs-root .zs-tabs { display: flex; gap: 5px; margin: 0 10px; padding: 8px 5px 5px; border-radius: 14px; }
  #zs-root .zs-tab { flex: 1 1 auto; flex-direction: row; gap: 4px; min-height: 34px; padding: 2px 6px 2px 4px; border-radius: 11px; font-size: 11.5px; }
  #zs-root .zs-tab img { width: 22px; height: 22px; }
  #zs-root .zs-tab-n { top: -8px; right: -5px; min-width: 18px; height: 16px; padding: 0 3px; font-size: 9.5px; }
  #zs-root .zs-tools { padding: 6px 14px 2px; gap: 8px; }
  #zs-root .zs-sort-sel, #zs-root .zs-chip { height: 30px; }
  #zs-root .zs-coll { font-size: 12px; }
  #zs-root .zs-body { padding: 4px 10px 10px; }
  #zs-root .zs-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
  #zs-root .zs-art { min-height: 112px; width: 104px; }
  #zs-root .zs-foot { display: none; }
  #zs-root .zs-state { padding: 6px 12px 10px; gap: 8px; }
  #zs-root .zs-state-art { width: 150px; }
  #zs-root .zs-state-sm .zs-state-art { width: 110px; }
  #zs-root .zs-pop { padding: 54px 10px 6px; }
  #zs-root .zs-dlg { max-width: 380px; padding: 56px 14px 14px; }
  #zs-root .zs-dlg-art { width: 96px; height: 96px; margin-left: -48px; top: -48px; border-radius: 20px; }
  #zs-root .zs-dlg-tier { display: none; }
  #zs-root .zs-dlg-title { margin: 0 0 8px; font-size: 19px; }
  #zs-root .zs-win-title { font-size: 30px; }
  #zs-root .zs-dlg-sub { font-size: 15px; }
  #zs-root .zs-dlg-price { height: 38px; font-size: 21px; }
  #zs-root .zs-dlg-price img { width: 30px; height: 30px; }
  #zs-root .zs-dlg-note { margin-top: 6px; font-size: 13px; }
  #zs-root .zs-dlg-btns .zs-btn { min-height: 42px; font-size: 16px; }
  #zs-root .zs-rays { top: 0; }
  #zs-root .zs-confetti { top: 0; }
}

/* ---------- ЗАЛП: премиум-скины за кристаллы ---------- */
/* окно пакетов кристаллов из ZALP PASS открывается поверх магазина */
#zp-modal.open { z-index: 10100; }

#zs-root .zs-bal-cr { margin-left: auto; padding-right: 8px; }
#zs-root .zs-bal-cr + .zs-bal-co { margin-left: 10px; }
#zs-root .zs-bal-c {
  min-width: 2ch;
  font-size: 24px;
  font-weight: 900;
  color: #d6f3ff;
  text-shadow: var(--zs-out-sm);
  font-variant-numeric: tabular-nums;
}
#zs-root .zs-topup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 2px;
  padding: 0 0 2px;
  border: 3px solid var(--zs-ink);
  border-radius: 50%;
  background: linear-gradient(180deg, #9cf58c 0%, var(--z-green, #3fd13a) 55%, var(--z-green-dk, #1f9a22) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--zs-ink);
  color: #fff;
  font: 900 22px/1 var(--z-font, sans-serif);
  text-shadow: var(--zs-out-sm);
  cursor: pointer;
}
#zs-root .zs-topup:hover { filter: brightness(1.1); transform: scale(1.06); }

#zs-root .zs-card.zs-prem {
  border-color: var(--zs-ink);
  background: linear-gradient(180deg, #4b2fb8 0%, #2a1a7c 100%);
  box-shadow: 0 5px 0 var(--zs-ink), 0 0 0 3px var(--zs-a), 0 0 22px var(--zs-a), inset 0 2px 0 rgba(255, 255, 255, .16);
}
#zs-root .zs-card.zs-prem.zs-t-legend { animation: zs-prem-glow 2.4s ease-in-out infinite; }
#zs-root .zs-anim .zs-card.zs-prem.zs-t-legend { animation: zs-cardin .38s cubic-bezier(.2, 1.4, .4, 1) both, zs-prem-glow 2.4s ease-in-out .4s infinite; }
@keyframes zs-prem-glow {
  0%, 100% { box-shadow: 0 5px 0 var(--zs-ink), 0 0 0 3px var(--zs-a), 0 0 16px var(--zs-a), inset 0 2px 0 rgba(255, 255, 255, .16); }
  50% { box-shadow: 0 5px 0 var(--zs-ink), 0 0 0 3px var(--zs-c), 0 0 34px var(--zs-a), inset 0 2px 0 rgba(255, 255, 255, .16); }
}
#zs-root .zs-prem .zs-art { aspect-ratio: 1 / 1; }
#zs-root .zs-prem-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
#zs-root .zs-card.zs-prem:hover .zs-prem-art { transform: scale(1.07); }
#zs-root .zs-prem-top {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  width: 46px;
  height: 46px;
  padding: 2px;
  border: 3px solid var(--zs-ink);
  border-radius: 50%;
  background: rgba(26, 19, 64, .6);
  transform: rotate(-90deg);
  box-shadow: 0 2px 0 var(--zs-ink);
}
#zs-root .zs-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#zs-root .zs-sparks i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px var(--zs-c));
  opacity: 0;
  animation: zs-spark 2.6s ease-in-out infinite;
  animation-delay: calc(var(--k) * .37s);
}
#zs-root .zs-sparks i:nth-child(1) { left: 10%; top: 14%; }
#zs-root .zs-sparks i:nth-child(2) { left: 78%; top: 10%; width: 18px; height: 18px; }
#zs-root .zs-sparks i:nth-child(3) { left: 86%; top: 52%; }
#zs-root .zs-sparks i:nth-child(4) { left: 14%; top: 66%; width: 10px; height: 10px; }
#zs-root .zs-sparks i:nth-child(5) { left: 46%; top: 6%; width: 10px; height: 10px; }
#zs-root .zs-sparks i:nth-child(6) { left: 28%; top: 40%; width: 8px; height: 8px; }
#zs-root .zs-sparks i:nth-child(7) { left: 66%; top: 78%; width: 12px; height: 12px; }
@keyframes zs-spark {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(80deg); }
  70% { opacity: 0; transform: scale(.4) rotate(140deg); }
}
#zs-root .zs-fx {
  margin: 2px 0 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--zs-c);
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-fx::before { content: "✦ "; color: #fff; }
#zs-root .zs-price-cr b { color: #d6f3ff; }
#zs-root .zs-btn-topup { background: linear-gradient(180deg, #9cf58c 0%, var(--z-green, #3fd13a) 55%, var(--z-green-dk, #1f9a22) 100%); }
#zs-root .zs-dlg-art.zs-prem { overflow: hidden; }
#zs-root .zs-dlg-art.zs-prem .zs-prem-top { width: 38px; height: 38px; right: 4px; bottom: 4px; }
#zs-root .zs-dlg-fx { color: var(--zs-c, #fff3c2); font-weight: 800; }
@media (max-width: 700px) {
  #zs-root .zs-bal-c { font-size: 17px; }
  #zs-root .zs-topup { width: 24px; height: 24px; font-size: 17px; }
  #zs-root .zs-prem .zs-art { aspect-ratio: auto; }
  #zs-root .zs-prem-top { width: 34px; height: 34px; }
}

/* ---------- живой предпросмотр скина ---------- */
#zs-root .zs-pvbtn {
  position: absolute;
  z-index: 4;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 6px;
  border: 3px solid var(--zs-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 100%);
  box-shadow: 0 2px 0 var(--zs-ink);
  color: var(--zs-ink);
  font: 900 12px/1 var(--z-font, sans-serif);
  cursor: pointer;
  opacity: .92;
  transition: transform .12s ease, opacity .12s ease;
}
#zs-root .zs-pvbtn .zs-ico { width: 16px; height: 16px; color: var(--z-green, #3fd13a); }
#zs-root .zs-card:hover .zs-pvbtn,
#zs-root .zs-pvbtn:focus-visible { opacity: 1; transform: scale(1.06); }
#zs-root .zs-prem .zs-pvbtn { bottom: 8px; left: 8px; }

#zs-root .zs-dlg.zs-pv {
  max-width: 560px;
  padding: 16px 18px 18px;
}
#zs-root .zs-pv-stage {
  position: relative;
  height: 290px;
  border: 4px solid var(--zs-ink);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 60%),
    radial-gradient(circle at 18% 28%, rgba(46, 92, 22, .28) 0 6px, transparent 7px),
    radial-gradient(circle at 72% 64%, rgba(46, 92, 22, .28) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 80%, rgba(46, 92, 22, .22) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 22%, rgba(46, 92, 22, .22) 0 4px, transparent 5px),
    linear-gradient(180deg, #8cc152 0%, #79ad44 100%);
  background-size: auto, 120px 120px, 140px 140px, 100px 100px, 160px 160px, auto;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .12);
}
#zs-root .zs-prem .zs-pv-stage,
#zs-root .zs-t-legend .zs-pv-stage {
  background-color: #6f9e3f;
}
#zs-root .zs-pv-stage canvas { display: block; width: 100%; height: 100%; }
#zs-root .zs-pv-fail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  text-shadow: var(--zs-out-sm);
}
#zs-root .zs-pv-modes {
  display: flex;
  width: max-content;
  gap: 6px;
  margin: -22px auto 8px;
  position: relative;
  z-index: 2;
  padding: 4px;
  border: 3px solid var(--zs-ink);
  border-radius: 999px;
  background: rgba(26, 19, 64, .85);
}
#zs-root .zs-pv-mode {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cfc8ff;
  font: 900 13px/1 var(--z-font, sans-serif);
  cursor: pointer;
}
#zs-root .zs-pv-mode.zs-on {
  background: linear-gradient(180deg, var(--z-yellow-hi, #ffe970) 0%, var(--z-yellow, #ffd21f) 55%, var(--z-orange, #ff9a00) 100%);
  color: var(--zs-ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
#zs-root .zs-pv .zs-btn-buy img { width: 24px; height: 24px; margin-right: 4px; vertical-align: -5px; }
@media (max-width: 700px) {
  #zs-root .zs-pv-stage { height: 220px; }
  #zs-root .zs-pvbtn { height: 24px; font-size: 11px; padding: 0 8px 0 4px; }
}

/* подсветка предмета, на котором магазин открыли из окна коллекции */
#zs-root .zs-card.zs-focus { outline: 4px solid #ffd21f; outline-offset: 3px; animation: zs-focus .7s ease-in-out 4 alternate; }
@keyframes zs-focus { to { outline-color: rgba(255, 210, 31, .15); outline-offset: 8px; } }