/* Corvus — аккаунт: кнопка в шапке, вход/регистрация, профиль */

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-account {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-secondary);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.06);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.nav-account:hover,
.nav-account.is-on {
  color: var(--text-primary);
  border-color: var(--accent-from);
}

.nav-account.is-on {
  background: linear-gradient(135deg, rgba(110, 110, 118, 0.35), rgba(70, 70, 77, 0.2));
}

.nav-account svg {
  width: 20px;
  height: 20px;
}




.acct-card {
  position: relative;
  width: min(440px, 100%);
  padding: 34px 30px 30px;
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, rgba(33, 33, 33, 0.96), rgba(16, 16, 22, 0.97));
  border: 1px solid var(--stroke-strong);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 80px rgba(110, 110, 118, 0.12);
  animation: acct-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes acct-fade {
  from { opacity: 0; }
}

@keyframes acct-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}



.acct-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-weight: 700;
}

.acct-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.acct-sub {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.acct-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 22px 0 18px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
}

.acct-tabs button {
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
}

.acct-tabs button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

.acct-form {
  display: grid;
  gap: 14px;
}

.acct-form[hidden],
a.acct-submit[hidden] {
  display: none;
}

/* страница сброса пароля: аккуратные отступы между описанием, полями и кнопками */
.acct-card .acct-sub ~ .acct-form {
  margin-top: 22px;
}
.acct-form .acct-error:empty {
  display: none;
}
.acct-form .acct-submit {
  margin-top: 4px;
}
a.acct-submit {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  text-align: center;
}

.acct-form[data-mode="login"] [data-only="register"] {
  display: none;
}

.acct-form[data-mode="register"] [data-only="login"] {
  display: none;
}

.acct-forgot {
  justify-self: start;
  margin-top: -6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acct-forgot:hover {
  color: var(--text-primary);
}

.acct-form label {
  display: grid;
  gap: 6px;
}

.acct-form label span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.acct-form input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.acct-form input:focus {
  outline: none;
  border-color: var(--accent-from);
  box-shadow: 0 0 0 3px rgba(110, 110, 118, 0.25);
}

.acct-error {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.82rem;
  color: var(--error);
}

.acct-submit {
  width: 100%;
}

.acct-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 36px;
  margin-bottom: 22px;
}

.acct-avatar {
  flex: none;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  box-shadow: 0 10px 30px rgba(110, 110, 118, 0.4);
}

.acct-data {
  margin: 0;
  display: grid;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
}

.acct-data > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}

.acct-data > div + div {
  border-top: 1px solid var(--stroke);
}

.acct-data dt {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.acct-data dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.acct-data .mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.acct-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--error);
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.acct-badge.is-on {
  color: var(--ok);
  background: rgba(134, 239, 172, 0.1);
  border-color: rgba(134, 239, 172, 0.3);
}

.acct-activate {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(110, 110, 118, 0.16), rgba(70, 70, 77, 0.07));
  border: 1px solid rgba(194, 194, 194, 0.2);
}


.acct-activate p {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.acct-plans {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.acct-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  font-size: 0.88rem;
}

.acct-plan b {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.acct-logout {
  margin-top: 18px;
}

@media (max-width: 960px) {
  .nav-right {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .acct-card {
    padding: 28px 20px 22px;
  }
}

/* ---------- страница аккаунта ---------- */

.acct-page {
  min-height: 100vh;
}

.acct-auth[hidden],
.acct-profile[hidden],
.acct-activate[hidden] {
  display: none;
}

.acct-auth {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 110px 16px 60px;
}

.acct-auth .glow-a {
  width: 520px;
  height: 520px;
  top: 8%;
  left: 50%;
  margin-left: -260px;
  background: rgba(110, 110, 118, 0.22);
}

.acct-profile {
  position: relative;
  padding: 130px 0 90px;
}

.acct-profile .glow-a {
  width: 560px;
  height: 560px;
  top: 0;
  left: -160px;
  background: rgba(110, 110, 118, 0.18);
}

.acct-profile .wrap {
  position: relative;
}

.acct-page-title {
  margin: 16px 0 36px;
}

.profile-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 166px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  background: radial-gradient(ellipse at 85% 0%, rgba(165, 165, 180, 0.18), transparent 65%), linear-gradient(115deg, #202025, #131317 55%, #27272e);
}
.profile-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(13, 13, 17, 0.12), transparent 65%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.profile-banner-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.28;
  background-image: repeating-linear-gradient(125deg, transparent 0 39px, rgba(255, 255, 255, 0.1) 40px, transparent 41px 80px);
  mask-image: linear-gradient(90deg, transparent 30%, black);
  pointer-events: none;
}
.profile-banner-mark { position: absolute; width: 210px; height: 210px; object-fit: contain; right: 20px; top: -36px; opacity: 0.065; transform: rotate(-14deg); z-index: -1; pointer-events: none; }
.profile-banner-copy { min-width: 0; }
.profile-banner-label { font-size: 0.62rem; letter-spacing: 0.17em; color: #a1a1ac; font-weight: 600; }
.profile-banner h2 { margin: 10px 0 6px; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; overflow-wrap: anywhere; }
.profile-banner p { margin: 0; font-size: 0.76rem; color: #a1a1ac; }
.profile-banner-status { flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); padding: 7px 11px; font-size: 0.66rem; color: #d4d4dd; }
.profile-banner-status.is-premium { border-color: rgba(113, 220, 164, 0.3); color: #8ce8b6; background: rgba(113, 220, 164, 0.07); }
.profile-image-trigger { position: relative; padding: 0; border: 0; overflow: hidden; cursor: pointer; }
.profile-image-trigger img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-image-trigger:hover { outline: 2px solid rgba(255,255,255,0.35); outline-offset: 3px; }
.profile-image-trigger:focus-visible, .profile-banner-change:focus-visible { outline: 2px solid #c2c2d0; outline-offset: -4px; }
.profile-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.profile-banner.has-custom-image::after { background: linear-gradient(90deg, rgba(0,0,0,0.78), rgba(0,0,0,0.18)); }
.profile-banner.has-custom-image .profile-banner-mark, .profile-banner.has-custom-image .profile-banner-grid { opacity: 0; }
.profile-banner-change { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; border-radius: inherit; cursor: pointer; background: transparent; }
.profile-banner-change span { position: absolute; right: 16px; top: 12px; border-radius: 999px; padding: 4px 10px; font-size: 0.64rem; color: #eee; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity .15s; }
.profile-banner-change:hover span, .profile-banner-change:focus-visible span { opacity: 1; }
.profile-image-menu { position: fixed; z-index: 10010; padding: 6px; min-width: 235px; max-width: calc(100vw - 20px); border-radius: 15px; border: 1px solid var(--stroke-strong); background: #202024; box-shadow: 0 18px 60px #0009; }
.profile-image-menu button { display: block; width: 100%; border: 0; border-radius: 9px; padding: 12px; text-align: left; color: var(--text-primary); background: transparent; font-size: 0.8rem; cursor: pointer; }
.profile-image-menu button:hover, .profile-image-menu button:focus-visible { background: #ffffff10; }
.profile-image-menu[hidden], #profile-image-input[hidden], #profile-avatar-image[hidden], #profile-banner-image[hidden] { display: none; }
.profile-image-menu button[hidden] { display: none; }
.profile-image-note { margin: 0; }
@media (max-width: 560px) {
  .profile-banner { min-height: 154px; padding: 22px; flex-wrap: wrap; gap: 14px; }
  .profile-banner-label { font-size: 0.54rem; letter-spacing: 0.12em; }
  .profile-banner-mark { width: 170px; height: 170px; right: -16px; top: -12px; }
}

.acct-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.acct-sidebar {
  display: grid;
  gap: 14px;
}

.acct-side,
.acct-panel {
  border-radius: var(--radius-xl);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.acct-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 24px 26px;
}

.acct-side .acct-avatar {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  font-size: 2.4rem;
  margin-bottom: 18px;
}

.acct-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.acct-side .acct-sub {
  margin: 6px 0 16px;
}

.acct-side .acct-logout {
  margin-top: 24px;
}

.acct-cosmetics-nav {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.acct-cosmetics-nav:hover,
.acct-cosmetics-nav:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  transform: translateY(-2px);
}

.acct-cosmetics-nav-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

.acct-cosmetics-nav-icon svg {
  width: 22px;
  height: 22px;
}

.acct-cosmetics-nav-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.acct-cosmetics-nav-copy b {
  font-family: var(--font-display);
  font-size: 0.88rem;
}

.acct-cosmetics-nav-copy small {
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.35;
}

.acct-cosmetics-nav-arrow {
  color: var(--text-secondary);
  font-size: 1.2rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.acct-cosmetics-nav:hover .acct-cosmetics-nav-arrow {
  color: var(--text-primary);
  transform: translateX(3px);
}

.acct-main {
  display: grid;
  gap: 22px;
}

.acct-panel {
  padding: 28px;
}

.acct-panel-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
}

.acct-activate {
  background: linear-gradient(135deg, rgba(110, 110, 118, 0.18), rgba(70, 70, 77, 0.07));
  border-color: rgba(194, 194, 194, 0.22);
}

.acct-activate-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.acct-activate-head svg {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

.acct-activate-head .acct-panel-title {
  margin-bottom: 6px;
}

.acct-activate-head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.acct-plans {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.acct-plan {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
}

.acct-plan > span:first-child {
  color: var(--text-secondary);
}

.acct-plan > span:last-child {
  justify-content: space-between;
}

.acct-plan b {
  font-size: 1.05rem;
}

@media (max-width: 960px) {
  .acct-grid {
    grid-template-columns: 1fr;
  }

  .acct-plans {
    grid-template-columns: 1fr;
  }
}

.acct-notice {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.acct-notice p {
  margin: 0 0 12px;
}

.acct-verification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}
.acct-verification[hidden] { display: none; }
.acct-verification-copy { flex: 1 1 280px; min-width: 0; }
.acct-verification h2 { margin: 0 0 8px; font-size: 0.98rem; }
.acct-verification p { margin: 0; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.6; overflow-wrap: anywhere; }
.acct-verification .acct-verification-note:not(:empty) { margin-top: 10px; color: var(--text-primary); }
.acct-verification-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-verification-actions .btn { white-space: nowrap; }
.acct-email-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.acct-email-status { font-size: 0.7rem; font-weight: 500; color: #d6b77a; }
.acct-email-status[data-verified="true"] { color: #73cc9a; }

/* ===== косметика в кабинете ===== */
.acct-shop-sub {
  margin: -6px 0 18px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.shop-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.shop-tab:hover {
  color: var(--text-primary);
}

.shop-tab.is-active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

.shop-tab.is-empty:not(.is-active) {
  opacity: 0.6;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
}

.shop-card.is-owned {
  border-color: rgba(134, 239, 172, 0.35);
}

.shop-art {
  display: grid;
  place-items: center;
  height: 110px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  color: var(--text-secondary);
}

.shop-card h3 {
  margin: 0;
  font-size: 0.95rem;
}

.shop-card p {
  margin: 0;
  flex: 1;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.shop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.shop-footer b {
  font-family: var(--font-display);
  font-size: 1rem;
}

.shop-empty {
  grid-column: 1 / -1;
  padding: 26px 0;
  text-align: center;
  color: var(--text-muted);
}

.shop-note {
  min-height: 1.2em;
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.shop-note[data-kind="error"] {
  color: var(--error);
}

.shop-note[data-kind="ok"] {
  color: var(--ok);
}

/* предпросмотр косметики в карточке магазина (рендер персонажа с предметом) */
.shop-art.has-preview {
  height: 210px;
  overflow: hidden;
}

.shop-art img {
  display: block;
  height: 210px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* живая модель: canvas ложится поверх статичной картинки и проявляется после первого кадра */
.shop-spin {
  position: relative;
  display: grid;
  place-items: center;
  height: 210px;
  max-width: 100%;
}

.shop-spin > * {
  grid-area: 1 / 1;
}

.shop-spin canvas {
  display: block;
  height: 210px;
  width: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.shop-spin canvas.is-live {
  opacity: 1;
}

.shop-spin img {
  transition: opacity 0.45s ease;
}

.shop-spin canvas.is-live ~ img,
.shop-spin:has(canvas.is-live) img {
  opacity: 0;
}

/* ===== страница предмета (окно предпросмотра оформлено как в гардеробе лоадера) ===== */
.shop-card {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.shop-card:hover,
.shop-card:focus-visible {
  border-color: var(--stroke-strong);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

/* окно предпросмотра: стили скопированы с .wardrobe-viewport / .wardrobe-viewer из лоадер Corvus (dashboard.css) */
.wardrobe-viewport {
  display: flex;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 75% 50% at 50% 44%, rgba(124, 124, 124, 0.24), transparent 72%),
    radial-gradient(ellipse 130% 70% at 50% 118%, rgba(133, 133, 133, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(8, 7, 12, 0.85), rgba(13, 13, 13, 0.9));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.wardrobe-viewer {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.wardrobe-viewer-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.wardrobe-viewer-canvas:active {
  cursor: grabbing;
}

.wardrobe-viewer-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 20px;
  color: var(--text-muted);
  font-size: 0.82em;
  text-align: center;
  pointer-events: none;
}

.wardrobe-pose-switch {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.wardrobe-pose-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.wardrobe-pose-button:hover {
  color: var(--text-primary);
  border-color: var(--accent-from);
}

.wardrobe-pose-button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

.shop-card-link {
  color: inherit;
  text-decoration: none;
}

.shop-card-link:hover,
.shop-card-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.item-section {
  position: relative;
  padding: 120px 0 90px;
}

.item-section .glow-a {
  width: 560px;
  height: 560px;
  top: 0;
  left: -160px;
  background: rgba(110, 110, 118, 0.14);
}

.item-page {
  min-height: 100vh;
}

.item-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.item-back:hover {
  color: var(--text-primary);
}

.item-layout {
  display: flex;
  align-items: stretch;
  gap: 48px;
}

.item-layout[hidden] {
  display: none;
}

.item-view {
  flex: 0 0 380px;
  height: 600px;
}

.item-info {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}

.item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
}

.item-desc {
  max-width: 520px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.6;
}

.item-buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 14px;
}

.item-price {
  font-family: var(--font-display);
  font-size: 2rem;
}

.item-buy .btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.item-status {
  margin: 40px 0;
  color: var(--text-muted);
  text-align: center;
}

.item-status[hidden] {
  display: none;
}

.item-art {
  display: grid;
  place-items: center;
  width: 100%;
  color: var(--text-secondary);
}

@media (max-width: 820px) {
  .item-section {
    padding-top: 104px;
  }

  .item-layout {
    flex-direction: column;
    gap: 28px;
  }

  .item-view {
    flex: 0 0 auto;
    width: 100%;
    height: min(520px, 72vh);
  }
}

/* Публикация пользовательских товаров */
.market-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.market-heading .acct-panel-title { margin-bottom: 0; }
.market-publish { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #686871 #141418; margin: auto; padding: 28px; color: var(--text-primary); background: #141418; border: 1px solid var(--stroke-strong); border-radius: 24px 0 0 24px; }
.market-publish::-webkit-scrollbar { width: 10px; background: #141418; }
.market-publish::-webkit-scrollbar-track { background: #141418; border-radius: 0; }
.market-publish::-webkit-scrollbar-thumb { background: #686871; border: 2px solid #141418; border-radius: 6px; }
.market-publish #mp-close { width: 36px; min-width: 36px; max-width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; line-height: 1; }
.market-publish::backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); }
.market-publish form, .market-publish label { display: flex; flex-direction: column; gap: 10px; }
.market-publish form { gap: 16px; }
.market-publish input, .market-publish textarea { width: 100%; padding: 12px; border: 1px solid var(--stroke); border-radius: 12px; color: var(--text-primary); background: rgba(255,255,255,.04); font: inherit; box-sizing: border-box; }
.market-publish input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 12px; border: 1px solid var(--stroke-strong); border-radius: 8px; background: #ffffff0d; color: var(--text-primary); font: inherit; cursor: pointer; }
.market-publish input[type="file"]::file-selector-button:hover { background: #ffffff17; }
.market-publish textarea { resize: vertical; }
.market-publish small, .market-payment-rule, .market-seller-summary { color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.market-publish-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.market-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.market-owner-actions .btn { font-size: .7rem; padding: 7px 10px; }
.market-seller-summary { margin-top: 18px; padding: 14px; border: 1px solid var(--stroke); border-radius: 14px; }
.market-publish [hidden] { display: none !important; }
@media (max-width: 560px) { .market-publish { padding: 20px; } .market-publish-row { grid-template-columns: 1fr; } }

/* Подписки Corvus Client: постеры 330×580 с двумя состояниями (off — всегда, on — при наведении) */
.shop-grid.shop-grid-subs,
.plans-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.sub-card {
  position: relative;
  aspect-ratio: 330 / 580;
  /* PNG corners are 50px at 330×580: keep the lower outline aligned when scaled. */
  border-radius: 28px 28px 15.151515% 15.151515% / 28px 28px 8.62069% 8.62069%;
  overflow: hidden;
  isolation: isolate;
  background: #0d0d10;
  border: 1px solid var(--stroke);
}
.sub-art,
.sub-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sub-art img {
  object-fit: cover;
  object-position: bottom;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sub-art .sub-on {
  opacity: 0;
}
.sub-card:hover .sub-on,
.sub-card:focus-within .sub-on,
.sub-card.is-hover .sub-on {
  opacity: 1;
}
.sub-card:hover .sub-off,
.sub-card:focus-within .sub-off,
.sub-card.is-hover .sub-off {
  opacity: 0;
}
.sub-card:hover .sub-art img {
  transform: scale(1.03);
}
.sub-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 26px 20px 28px;
  text-align: center;
}
.sub-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  filter: grayscale(1);
  opacity: 0.8;
  transition: color 0.4s, filter 0.4s, opacity 0.4s;
}
.sub-card:hover .sub-brand,
.sub-card.is-hover .sub-brand {
  color: var(--text-primary);
  filter: none;
  opacity: 1;
}
.sub-body h3 {
  margin: 4px 0 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--text-primary);
}
.sub-body p {
  margin: 0;
  max-width: 240px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.sub-buy {
  margin-top: auto; /* кнопка прижата к низу постера */
  display: inline-block;
  text-decoration: none;
  padding: 11px 30px;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--stroke-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
.sub-card:hover .sub-buy,
.sub-card.is-hover .sub-buy {
  color: #fff;
  border-color: #8b5cf6;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.35);
}
.sub-buy:disabled {
  opacity: 0.6;
  cursor: default;
}
.sub-price {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .shop-grid.shop-grid-subs,
  .plans-grid {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub-art img,
  .sub-brand,
  .sub-buy {
    transition: none;
  }
}

/* Ежедневные бонусы */
.acct-bonus .bonus-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 18px 0 14px;
}
.bonus-status h3 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--text-primary);
}
.bonus-timer {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.bonus-timer b {
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.bonus-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bonus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 330 / 440;
  padding: 18px;
  font: inherit;
  text-align: center;
  color: var(--text-primary);
  border-radius: 28px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.045));
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}
button.bonus-card {
  cursor: pointer;
}
button.bonus-card:hover,
button.bonus-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--stroke-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.bonus-mark {
  width: 46%;
  height: auto;
  opacity: 0.1;
  filter: grayscale(1);
  transition: opacity 0.3s;
}
button.bonus-card:hover .bonus-mark {
  opacity: 0.22;
}
.bonus-card.is-open {
  animation: bonus-flip 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  border-color: var(--rar);
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--rar) 38%, transparent), transparent 70%), rgba(255, 255, 255, 0.03);
}
@keyframes bonus-flip {
  from {
    transform: rotateY(90deg) scale(0.92);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.bonus-rarity-tag {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--rar);
  border-radius: 999px;
}
.bonus-gift {
  font-size: 1.5rem;
  line-height: 1.15;
}
.bonus-details {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.rar-common {
  --rar: #7c6cff;
}
.rar-rare {
  --rar: #38a3f5;
}
.rar-epic {
  --rar: #c04cf0;
}
.rar-mythic {
  --rar: #f0457a;
}
.bonus-h {
  margin: 34px 0 14px;
  font-size: 1.35rem;
  color: var(--text-primary);
}
.bonus-rarity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.bonus-rarity .rar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 12px;
  text-align: center;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: radial-gradient(110% 90% at 50% 100%, color-mix(in srgb, var(--rar) 40%, transparent), transparent 75%), rgba(255, 255, 255, 0.025);
}
.bonus-rarity .rar p {
  margin: 0;
  min-height: 3em;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.bonus-rarity .rar b {
  padding: 9px 20px;
  font-size: 0.85rem;
  color: #fff;
  background: var(--rar);
  border-radius: 999px;
}
.bonus-odds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.odds-tier {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: radial-gradient(110% 80% at 50% 100%, color-mix(in srgb, var(--rar) 28%, transparent), transparent 75%), rgba(255, 255, 255, 0.025);
}
.odds-tier h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--rar);
}
.odds-tier p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 5px 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--stroke);
}
.odds-tier p b {
  flex: none;
  color: var(--text-primary);
}
.bonus-history-wrap {
  overflow-x: auto;
}
.bonus-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.bonus-history th {
  padding: 0 12px 12px 0;
  font-weight: 500;
  text-align: left;
  color: var(--text-muted);
  border-bottom: 1px solid var(--stroke-strong);
}
.bonus-history td {
  padding: 11px 12px 11px 0;
  color: var(--text-primary);
  white-space: nowrap;
}
.bonus-history th:last-child,
.bonus-history td:last-child {
  text-align: right;
  padding-right: 0;
}
.bonus-history td.rar-text {
  font-weight: 700;
  color: var(--rar);
}
.bonus-history td.bonus-ok {
  color: var(--ok);
}
@media (max-width: 760px) {
  .bonus-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .bonus-card {
    padding: 8px;
    border-radius: 18px;
  }
  .bonus-gift {
    font-size: 1rem;
  }
  .bonus-rarity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-card,
  .bonus-card.is-open {
    animation: none;
    transition: none;
  }
}

/* Подписки на главной странице */
.plans-grid {
  display: grid;
  margin-top: 44px;
  max-width: 1000px;
  margin-inline: auto;
}

/* Мои награды: баланс, купоны, перки */
.bonus-wallet {
  display: grid;
  gap: 8px;
}
.wallet-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.9rem;
}
.wallet-row span {
  color: var(--text-muted);
}
.wallet-row b {
  color: var(--text-primary);
  font-weight: 600;
}
.wallet-row small {
  color: var(--text-secondary);
  font-size: 0.8rem;
}
@media (max-width: 700px) {
  .wallet-row {
    grid-template-columns: 1fr;
  }
}

/* Оформление профиля из наград */
.acct-perk-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 2px;
}
.acct-perk-tags:empty {
  display: none;
}
.acct-perk-tags span {
  padding: 3px 10px;
  font-size: 0.74rem;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  color: var(--text-secondary);
}
.acct-perk-tags .perk-title {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}
.acct-avatar[data-frame="gold"] {
  box-shadow: 0 0 0 3px #0d0d10, 0 0 0 5px #fbbf24, 0 0 22px rgba(251, 191, 36, 0.45);
}
.acct-avatar[data-frame="neon"] {
  box-shadow: 0 0 0 3px #0d0d10, 0 0 0 5px #8b5cf6, 0 0 24px rgba(139, 92, 246, 0.6);
}
.acct-avatar[data-frame="frost"] {
  box-shadow: 0 0 0 3px #0d0d10, 0 0 0 5px #7dd3fc, 0 0 22px rgba(125, 211, 252, 0.5);
}
.acct-side[data-effect] {
  position: relative;
  overflow: hidden;
}
.acct-side[data-effect="aurora"]::before,
.acct-side[data-effect="embers"]::before,
.acct-side[data-effect="pulse"]::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
}
.acct-side[data-effect="aurora"]::before {
  background: conic-gradient(from 0deg, rgba(45, 212, 191, 0.18), rgba(139, 92, 246, 0.18), rgba(56, 189, 248, 0.18), rgba(45, 212, 191, 0.18));
  animation: perk-spin 14s linear infinite;
}
.acct-side[data-effect="embers"]::before {
  background: radial-gradient(circle at 50% 110%, rgba(251, 146, 60, 0.32), transparent 60%);
  animation: perk-pulse 3.2s ease-in-out infinite;
}
.acct-side[data-effect="pulse"]::before {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.14), transparent 55%);
  animation: perk-pulse 2.4s ease-in-out infinite;
}
@keyframes perk-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes perk-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .acct-side[data-effect]::before {
    animation: none;
  }
}

/* Баланс */
.balance-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 18px;
  border-radius: 28px;
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(135deg, #14141b, #25263a 55%, #101016);
}
.balance-shader {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
}
.balance-tile-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 36px 32px;
}
.balance-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}
.balance-amount {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 12px;
}
.balance-amount b {
  font-size: clamp(2.8rem, 7vw, 4.4rem);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.balance-amount span {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.balance-flows {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
}
.balance-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
.balance-flow i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.balance-flow.is-in i {
  background: #3fcf5a;
}
.balance-flow.is-out i {
  background: #f1553f;
}
.balance-flow span {
  display: flex;
  flex-direction: column;
}
.balance-flow b {
  font-size: 0.9rem;
}
.balance-flow.is-in b {
  color: #6ee787;
}
.balance-flow.is-out b {
  color: #ff7a66;
}

.balance-form {
  display: grid;
  gap: 18px;
  margin-top: 10px;
}
.balance-field {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.balance-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
}
.balance-input:focus-within {
  border-color: var(--stroke-strong);
}
.balance-input input {
  flex: 1;
  min-width: 0;
  padding: 18px 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  outline: 0;
}
.balance-input em {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.balance-presets,
.balance-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.balance-preset {
  padding: 11px 22px;
  font: inherit;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--stroke-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.balance-preset:hover {
  color: var(--text-primary);
}
.balance-preset.is-active {
  color: #0b0b0e;
  background: #e7e7ee;
  border-color: #e7e7ee;
}
.balance-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.balance-method {
  display: grid;
  gap: 4px;
  padding: 16px 12px;
  font: inherit;
  text-align: center;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  cursor: pointer;
}
.balance-method small {
  color: var(--text-muted);
  font-size: 0.72rem;
}
.balance-method.is-active {
  border-color: var(--stroke-strong);
  background: rgba(255, 255, 255, 0.05);
}
.balance-form .btn {
  justify-self: start;
}
.bal-minus {
  color: #ff7a66;
}

/* Привязки */
.sec-rows {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.sec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
}
.sec-info {
  flex: 1 1 320px;
}
.sec-info b {
  color: var(--text-primary);
}
.sec-info p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sec-confirm {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.04);
}
.sec-confirm label {
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.sec-confirm input {
  padding: 12px 14px;
  font: inherit;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  outline: 0;
}
.sec-confirm-buttons {
  display: flex;
  gap: 8px;
}
@media (max-width: 700px) {
  .balance-tile-body {
    padding: 26px 22px 24px;
  }
}

/* ---------- кабинет: боковое меню и отдельные страницы ---------- */

.acct-main [data-page]:not(.is-on) {
  display: none !important;
}

.acct-nav {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: var(--glass);
  border: 1px solid var(--stroke);
}

.acct-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}

.acct-nav a svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.acct-nav a:hover,
.acct-nav a:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.acct-nav a.is-active {
  color: var(--text-primary);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
}

.acct-nav a.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent-soft);
}

.acct-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0 4px;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.acct-crumbs li + li::before {
  content: "/";
  margin: 0 9px;
  opacity: 0.5;
}

.acct-crumbs a:hover {
  color: var(--text-primary);
}

.acct-crumbs li[aria-current] {
  color: var(--text-secondary);
}

/* ---------- магазин конфигов ---------- */

.cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.cfg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 18px 20px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
}

.cfg-avatar,
.pack-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a42, #1d1d22);
  color: var(--text-primary);
  font-weight: 700;
}

.cfg-avatar {
  width: 92px;
  height: 92px;
  margin-bottom: 8px;
  font-size: 2rem;
}

.cfg-avatar img,
.pack-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cfg-card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.cfg-author,
.cfg-sales {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cfg-desc {
  margin: 6px 0 4px;
  min-height: 2.8em;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.cfg-price {
  font-size: 1.35rem;
  color: var(--ok);
}

.market-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 13px 22px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6c5ce7, #4a3bc0);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(92, 72, 220, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.market-buy:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.market-buy.is-owned {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  color: var(--ok);
}

.market-buy:disabled {
  cursor: default;
  transform: none;
}

.market-buy.is-wide {
  width: auto;
  margin-top: 0;
}

/* ---------- магазин ресурс-паков ---------- */

.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.pack-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
  transition: transform 0.25s, border-color 0.25s;
}

.pack-card:hover {
  transform: translateY(-3px);
  border-color: var(--stroke-strong);
}

.pack-cover {
  position: relative;
  aspect-ratio: 16 / 8.2;
  background: #0b0b0e;
}

.pack-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-price {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pack-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 18px;
}

.pack-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 1.1rem;
}

.pack-text {
  min-width: 0;
}

.pack-text h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.pack-text h3 span {
  font-weight: 400;
  color: var(--text-secondary);
}

.pack-text p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* страница ресурс-пака */

#acct-pack {
  display: grid;
  gap: 22px;
}

.pack-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8.6;
  border-radius: 24px;
  background: #0b0b0e;
}

.pack-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-arrow {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pack-arrow.is-prev {
  left: 14px;
}

.pack-arrow.is-next {
  right: 14px;
}

.pack-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.pack-thumbs button {
  width: 118px;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  opacity: 0.6;
  background: #0b0b0e;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

.pack-thumbs button.is-active {
  opacity: 1;
  border-color: var(--accent-soft);
}

.pack-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.pack-info h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--text-primary);
}

.pack-by {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pack-by .pack-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.pack-by b {
  color: var(--text-primary);
}

.pack-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pack-big-price {
  font-size: 1.7rem;
  color: var(--text-primary);
}

.pack-balance {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pack-balance a {
  color: var(--accent-soft);
  text-decoration: underline;
}

.pack-chip {
  display: inline-block;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid var(--stroke-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.pack-details h3 {
  margin: 22px 0 10px;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.pack-details p {
  margin: 0 0 10px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- окно подтверждения покупки ---------- */

.market-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.market-modal[hidden] {
  display: none;
}

.market-modal-card {
  width: min(640px, 100%);
  padding: 34px;
  border-radius: 30px;
  background: #121216;
  border: 1px solid var(--stroke-strong);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.market-modal-card h3 {
  margin: 0 0 22px;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.market-modal-card h4 {
  margin: 26px 0 12px;
  font-size: 1rem;
  color: var(--text-primary);
}

.mm-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
}

.mm-item .cfg-avatar {
  width: 72px;
  height: 72px;
  margin: 0;
  font-size: 1.6rem;
}

.mm-item-text {
  display: grid;
  gap: 2px;
}

.mm-item-text b {
  font-size: 1.1rem;
  color: var(--text-primary);
}

.mm-item-text span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mm-item-text strong {
  font-size: 1.25rem;
  color: var(--ok);
}

.mm-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
}

.mm-pay div {
  display: grid;
  gap: 2px;
}

.mm-pay b {
  font-size: 1.3rem;
  color: var(--text-primary);
}

.mm-pay span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mm-state {
  padding: 7px 14px;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: #e5484d;
  border-radius: 999px;
}

.mm-state.is-ok {
  background: #2f9e62;
}

.mm-warn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 20px;
  color: var(--text-primary);
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: 20px;
  background: rgba(229, 72, 77, 0.08);
}

.mm-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  margin-top: 22px;
}

.mm-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- прочие страницы ---------- */

.dl-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.dl-os {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.dl-os svg {
  flex: none;
  width: 26px;
  height: 26px;
}

.dl-os span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dl-os b {
  font-size: 1rem;
}

.dl-os small {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dl-os:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.dl-os:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dl-lock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.3px) 0 0 / 12px 12px,
    rgba(255, 255, 255, 0.02);
}

.dl-lock[hidden] {
  display: none;
}

.dl-lock-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.dl-lock-icon svg {
  width: 22px;
  height: 22px;
}

.dl-lock b {
  font-size: 1rem;
}

.dl-lock p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.dl-lock-cta {
  padding: 12px 18px;
  border-radius: 12px;
  background: #ededf0;
  color: #0b0b0e;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.dl-lock-cta:hover {
  background: #fff;
}

@media (max-width: 760px) {
  .dl-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dl-lock {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dl-lock-cta {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 960px) {
  .acct-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acct-nav a.is-active::before {
    left: 0;
  }
}

@media (max-width: 760px) {
  .pack-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pack-buy {
    align-items: flex-start;
  }

  .market-modal-card {
    padding: 22px;
  }

  .mm-actions {
    grid-template-columns: 1fr;
  }
}

/* ---------- Каналы TikTok и YouTube (Привязки аккаунта) ---------- */

.chan-block { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--stroke); border-radius: var(--radius-lg); background: var(--glass); }
.chan-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chan-head .sec-info { min-width: 0; }
.chan-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.chan-empty { color: var(--text-muted); font-size: 0.9rem; }
.chan-item { padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.chan-item-head { display: flex; align-items: center; gap: 12px; }
.chan-link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; color: var(--text-primary); font-weight: 600; text-decoration: none; }
.chan-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.chan-ico { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; }
.chan-badge { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--stroke-strong); color: var(--text-secondary); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.chan-item.is-approved .chan-badge { color: var(--ok); border-color: rgba(134, 239, 172, 0.35); }
.chan-item.is-rejected .chan-badge { color: var(--error); border-color: rgba(248, 113, 113, 0.35); }
.chan-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; color: var(--text-secondary); font-size: 0.88rem; }
.chan-pending code, .chan-code code { padding: 5px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke-strong); color: var(--text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.06em; user-select: all; }
.chan-reason { margin: 8px 0 0; color: var(--text-secondary); font-size: 0.86rem; }

.chan-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 32px; overflow-y: auto; color: var(--text-primary); background: linear-gradient(165deg, rgba(26, 26, 32, 0.99), rgba(14, 14, 18, 0.99)); border: 1px solid var(--stroke-strong); border-radius: 28px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.chan-dialog::backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); }
.chan-dialog form { display: flex; flex-direction: column; gap: 18px; }
.chan-dialog [hidden] { display: none !important; }
.chan-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chan-dialog-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.chan-close { width: 36px; min-width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 10px; }
.chan-field { display: flex; flex-direction: column; gap: 8px; }
.chan-label { font-weight: 700; font-size: 0.95rem; }
.chan-dialog input { width: 100%; padding: 13px 16px; border: 1px solid var(--stroke); border-radius: 14px; color: var(--text-primary); background: rgba(255, 255, 255, 0.04); font: inherit; box-sizing: border-box; outline: none; }
.chan-dialog input::placeholder { color: var(--text-muted); }
.chan-dialog input:focus-visible, .chan-select-btn:focus-visible { border-color: var(--stroke-strong); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }

.chan-select { position: relative; }
.chan-select-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border: 1px solid var(--stroke); border-radius: 14px; color: var(--text-primary); background: rgba(255, 255, 255, 0.04); font: inherit; text-align: left; cursor: pointer; }
.chan-select-btn span { flex: 1; }
.chan-chevron { width: 18px; height: 18px; color: var(--text-secondary); transition: transform 0.15s; }
.chan-select-btn[aria-expanded="true"] .chan-chevron { transform: rotate(180deg); }
.chan-select-list { position: absolute; z-index: 5; inset: calc(100% + 6px) 0 auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--stroke-strong); border-radius: 14px; background: #17171c; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.chan-select-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; outline: none; }
.chan-select-list li:hover, .chan-select-list li:focus-visible { background: rgba(255, 255, 255, 0.08); }
.chan-select-list li[aria-selected="true"] { background: rgba(255, 255, 255, 0.05); }

.chan-howto { padding: 16px 18px; border: 1px solid var(--stroke-strong); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.chan-howto-title { margin: 0 0 8px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }
.chan-howto ol { margin: 0; padding-left: 1.2em; color: var(--text-primary); font-size: 0.92rem; line-height: 1.6; }
.chan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chan-actions .btn { width: 100%; justify-content: center; }
.chan-actions .btn:only-child { grid-column: 1 / -1; }
.chan-code-lead { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.chan-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chan-code code { font-size: 1.15rem; padding: 10px 16px; }
.chan-hint { margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }

@media (max-width: 640px) {
  .chan-head { flex-direction: column; align-items: stretch; }
  .chan-head .sec-info { flex: 0 0 auto; }
  .chan-item-head { flex-wrap: wrap; }
  .chan-dialog { padding: 22px 18px; border-radius: 22px; }
  .chan-actions { grid-template-columns: 1fr; }
}

#chan-step-form, #chan-step-code { display: flex; flex-direction: column; gap: 18px; }
.sec-confirm[hidden] { display: none; }


/* «Мои продукты»: карточка Corvus Client */
.acct-products .acct-shop-sub {
  margin-bottom: 18px;
}

.product-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
  gap: 14px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  transition: border-color 0.25s ease;
}

.product-card.is-active {
  border-color: rgba(134, 239, 172, 0.22);
}

.product-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-card-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-card-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.product-card-title b {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
}

.product-card-title small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.product-card-head .acct-badge {
  flex: none;
  white-space: nowrap;
}

.product-card-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

.product-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.product-key-form {
  display: flex;
  gap: 8px;
}

.product-key-form[hidden] {
  display: none;
}

.product-key-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  outline: 0;
}

.product-key-form input:focus {
  border-color: var(--stroke-strong);
}

.product-card-note {
  margin: -4px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.product-card-note:empty {
  display: none;
}

.product-card-note[data-kind="ok"] {
  color: var(--ok);
}

.product-card-note[data-kind="error"] {
  color: var(--error);
}

.product-keys {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
}

.product-keys[hidden] {
  display: none;
}

.product-key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.product-key span {
  color: var(--text-muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.product-key code {
  overflow: hidden;
  color: var(--text-primary);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

.product-key-copy {
  padding: 6px 11px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  cursor: pointer;
}

.product-key-copy:hover {
  color: var(--text-primary);
}

.product-footnote {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 820px) {
  .product-cards {
    grid-template-columns: 1fr;
  }
}

.product-card-expiry {
  margin: -4px 0 0;
  color: var(--ok);
  font-size: 0.82rem;
}

/* ключ целиком на отдельной строке: в узкой карточке он не обрезается */
.product-key {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 6px;
}

.product-key code {
  grid-column: 1 / -1;
  grid-row: 2;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Поддержка: FAQ, форма тикета, обращения */
.support-faq {
  max-width: none;
  margin: 0 0 8px;
}

.support-faq details p a {
  color: var(--text-primary);
}

.ticket-form {
  display: grid;
  gap: 14px;
}

.ticket-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.ticket-field {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.ticket-field > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ticket-field em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ticket-field select,
.ticket-field input,
.ticket-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  outline: 0;
  transition: border-color 0.2s ease;
}

.ticket-field select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.ticket-field select option {
  color: #f4f4f6;
  background: #16161b;
}

.ticket-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

.ticket-field select:focus,
.ticket-field input:focus,
.ticket-field textarea:focus {
  border-color: var(--stroke-strong);
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.ticket-actions small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.ticket-actions small a {
  color: var(--text-secondary);
}

.ticket-list {
  display: grid;
  gap: 10px;
}

.ticket {
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
}

.ticket summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.ticket summary::-webkit-details-marker {
  display: none;
}

.ticket-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ticket-head b {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-head small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.ticket-status {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ticket.is-answered .ticket-status {
  color: var(--ok);
  background: rgba(134, 239, 172, 0.1);
  border-color: rgba(134, 239, 172, 0.3);
}

.ticket.is-closed {
  opacity: 0.7;
}

.ticket-body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.ticket-message,
.ticket-reply p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ticket-reply {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(134, 239, 172, 0.2);
  background: rgba(134, 239, 172, 0.05);
}

.ticket-reply b {
  color: var(--ok);
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .ticket-row {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== */
/* Маркет: ресурс-паки и конфиги на одной странице (market.js)            */
/* ===================================================================== */

.mk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.mk-head-copy {
  display: grid;
  gap: 8px;
  max-width: 560px;
}

.mk-head .acct-panel-title {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

.mk-head .acct-shop-sub {
  margin: 0;
}

.mk-kicker {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mk-sell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* статистика продавца */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.mk-stats[hidden] {
  display: none;
}

.mk-stat {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 16px;
}

.mk-stat + .mk-stat {
  border-left: 1px solid var(--stroke);
}

.mk-stat-label,
.mk-stat-hint {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.mk-stat b {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.mk-stat-hint {
  color: var(--text-muted);
}

/* панель: вкладки, поиск, сортировка */
.mk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.mk-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
}

.mk-tabs button {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 600;
  transition: color 0.2s, background 0.2s;
}

.mk-tabs button[hidden] {
  display: none;
}

.mk-tabs button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}

.mk-tabs button span {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.7;
}

.mk-tabs button span:empty {
  display: none;
}

.mk-search {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 14px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--input-bg);
  color: var(--text-muted);
  transition: border-color 0.2s;
}

.mk-search:focus-within {
  border-color: var(--accent-from);
}

.mk-search svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.mk-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
}

.mk-sort {
  flex: none;
  height: 42px;
  padding: 0 34px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.86rem;
  appearance: none;
  cursor: pointer;
}

/* сетка карточек */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.mk-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mk-card:hover,
.mk-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--stroke-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.mk-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #141418;
}

.mk-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mk-card:hover .mk-cover img {
  transform: scale(1.04);
}

/* обложки нет: зерно и крупная буква, как фон сайта */
.mk-cover.is-empty,
.mk-stage-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(154, 154, 162, 0.28), transparent 55%),
    radial-gradient(circle at 92% 100%, rgba(92, 92, 100, 0.3), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #111115;
}

.mk-cover-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
}

.mk-stage-empty .mk-cover-letter {
  font-size: 8rem;
}

.mk-type,
.mk-price,
.mk-hidden {
  position: absolute;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.72rem;
  font-weight: 600;
}

.mk-type {
  top: 10px;
  left: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 13, 0.62);
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mk-price {
  right: 10px;
  bottom: 10px;
  background: rgba(244, 244, 246, 0.92);
  color: #0a0a0d;
  font-size: 0.8rem;
  font-weight: 700;
}

.mk-price.is-owned {
  background: rgba(134, 239, 172, 0.92);
}

.mk-price.is-mine {
  background: rgba(10, 10, 13, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
}

.mk-hidden {
  top: 10px;
  right: 10px;
  background: rgba(248, 113, 113, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fca5a5;
}

.mk-body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}

.mk-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mk-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  font-size: 0.66rem;
  font-weight: 700;
}

.mk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.mk-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mk-tag {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--stroke);
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.mk-card.is-skeleton {
  min-height: 290px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 70%) 0 0 / 300% 100%;
  animation: mk-shimmer 1.4s linear infinite;
}

@keyframes mk-shimmer {
  to { background-position: -150% 0; }
}

.mk-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 48px 20px;
  border: 1px dashed var(--stroke-strong);
  border-radius: 20px;
  text-align: center;
}

.mk-empty span {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* страница товара */
.mk-back {
  justify-self: start;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.mk-back:hover {
  color: var(--text-primary);
}

.pack-info {
  display: grid;
  gap: 8px;
  align-content: start;
}

.pack-info h2 {
  margin: 0;
}

.mk-stage-empty {
  aspect-ratio: auto;
  height: clamp(180px, 28vw, 300px);
  border-radius: 20px;
}

@media (max-width: 760px) {
  .mk-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-stat:nth-child(3) {
    border-left: 0;
  }

  .mk-stat:nth-child(n + 3) {
    border-top: 1px solid var(--stroke);
  }

  .mk-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .mk-sort {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-card,
  .mk-cover img,
  .mk-card.is-skeleton {
    transition: none;
    animation: none;
  }
}

/* страница товара: слева описание, справа карточка покупки (не переносится под длинный заголовок) */
#acct-pack .pack-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: start;
  gap: 20px 28px;
}

#acct-pack .pack-info h2 {
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#acct-pack .pack-buy {
  align-items: stretch;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}

#acct-pack .pack-big-price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
}

#acct-pack .pack-buy .market-buy {
  width: 100%;
  justify-content: center;
  text-align: center;
}

#acct-pack .pack-buy .market-owner-actions {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

#acct-pack .pack-buy .market-owner-actions .btn {
  flex: 1 1 auto;
}

#acct-pack .pack-balance {
  text-align: center;
}

@media (max-width: 760px) {
  #acct-pack .pack-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

#acct-pack .pack-buy .market-buy {
  margin-top: 0;
}

#acct-pack .pack-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ===================================================================== */
/* Мастер «Создание товара» (market.js): информация → контент → публикация */
/* ===================================================================== */

.market-publish.mkw {
  width: min(760px, calc(100% - 24px));
  padding: 0;
  border-radius: 26px;
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(170deg, #17171c, #0f0f13);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.mkw form {
  gap: 0;
}

.mkw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px 0;
}

.mkw-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.mkw-close {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.mkw-close:hover {
  color: var(--text-primary);
}

/* шаги */
.mkw-steps {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 22px 30px 4px;
  padding: 0;
  list-style: none;
  position: relative;
}

.mkw-steps::before {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  top: 50%;
  height: 1px;
  background: var(--stroke-strong);
  z-index: 0;
}

.mkw-steps li {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #151519;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.mkw-steps li:first-child {
  padding-left: 0;
}

.mkw-steps li:last-child {
  padding-right: 0;
}

.mkw-steps li span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--stroke-strong);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
}

.mkw-steps li.is-active {
  color: var(--text-primary);
}

.mkw-steps li.is-active span {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
  box-shadow: 0 6px 18px rgba(110, 110, 118, 0.45);
}

.mkw-steps li.is-done {
  color: var(--text-secondary);
}

.mkw-steps li.is-done span {
  border-color: var(--ok);
  color: var(--ok);
}

/* шаг */
.mkw-step {
  display: grid;
  gap: 22px;
  padding: 22px 30px 8px;
}

.mkw-step[hidden] {
  display: none !important;
}

.mkw-field {
  display: grid;
  gap: 9px;
}

.market-publish .mkw-field {
  display: grid;
  flex-direction: unset;
}

.mkw-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mkw-label em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mkw-field > small,
.mkw-drop small {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mkw input:not([type="radio"]):not([type="file"]),
.mkw textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(10, 10, 13, 0.6);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mkw input:not([type="radio"]):not([type="file"]):focus,
.mkw textarea:focus {
  outline: none;
  border-color: var(--accent-from);
  box-shadow: 0 0 0 3px rgba(110, 110, 118, 0.22);
}

/* тип товара */
.mkw-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.market-publish .mkw-type {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.mkw-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mkw-type:hover {
  border-color: var(--stroke-strong);
}

.mkw-type.is-active {
  border-color: rgba(194, 194, 194, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.mkw-type:has(input:focus-visible) {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.mkw-type:has(input:disabled) {
  cursor: default;
}

.mkw-type:has(input:disabled):not(.is-active) {
  opacity: 0.4;
}

.mkw-type-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.mkw-type.is-active .mkw-type-icon {
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
}

.mkw-type-icon svg {
  width: 20px;
  height: 20px;
}

.mkw-type-text {
  display: grid;
  gap: 3px;
}

.mkw-type-text b {
  font-size: 1rem;
}

.mkw-type-text small {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* слоты и лимиты */
.mkw-quota {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
}

.mkw-quota[hidden] {
  display: none;
}

.mkw-quota b {
  font-size: 0.95rem;
}

.mkw-quota p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.mkw-quota .btn {
  margin-top: 6px;
}

.mkw-quota.is-ok {
  border-color: rgba(134, 239, 172, 0.25);
}

.mkw-quota.is-ok b {
  color: var(--ok);
}

.mkw-quota.is-slot {
  border-color: rgba(194, 194, 194, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.mkw-quota.is-blocked {
  border-color: rgba(248, 113, 113, 0.3);
}

/* файлы */
.market-publish .mkw-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 18px;
  border-radius: 16px;
  border: 1px dashed #3a3a44;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.mkw-drop:hover,
.mkw-drop:focus-within {
  border-color: var(--accent-soft);
  background: rgba(255, 255, 255, 0.04);
}

.mkw-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mkw-drop-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.mkw-drop-icon svg {
  width: 20px;
  height: 20px;
}

.mkw-drop b {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.mkw-cover-preview:empty {
  display: none;
}

.mkw-cover-preview img {
  width: 160px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
}

/* публикация */
.mkw-publish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 24px;
  align-items: start;
}

.mkw-publish-form {
  display: grid;
  gap: 16px;
}

.mkw-split {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.mkw-split b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-primary);
}

.mkw-preview {
  display: grid;
  gap: 10px;
}

.mkw-preview .mkw-label {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

.mk-card.is-preview {
  pointer-events: none;
}

/* низ */
.mkw > form > .shop-note {
  margin: 0 30px;
}

.mkw > form > .shop-note:empty {
  display: none;
}

.mkw-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 30px 26px;
}

.mkw-foot .btn {
  min-width: 130px;
}

.mk-lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .mkw-head,
  .mkw-step,
  .mkw-foot {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mkw-steps {
    margin-left: 18px;
    margin-right: 18px;
  }

  .mkw-steps li {
    font-size: 0;
    gap: 0;
  }

  .mkw-types,
  .mkw-publish {
    grid-template-columns: 1fr;
  }
}

.market-publish.mkw #mp-close {
  flex: none;
  display: inline-block;
  border-radius: 8px;
  font-size: 0.9rem;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: none;
}

/* ===================================================================== */
/* Аккаунт в шапке после входа (nav-user.js): аватар, ник, баланс, меню   */
/* ===================================================================== */

.nav-right {
  position: relative;
}

.nav-account.nu-chip {
  width: auto;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  cursor: pointer;
}

.nav-account.nu-chip:hover,
.nav-account.nu-chip[aria-expanded="true"] {
  border-color: rgba(194, 194, 194, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.nu-avatar {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
  font-family: var(--font-display);
  font-size: calc(var(--s) * 0.42);
  font-weight: 700;
  line-height: 1;
}

.nu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Premium: тонкое серебристое кольцо вокруг аватара */
.nu-avatar.is-premium {
  box-shadow: 0 0 0 2px #0e0e12, 0 0 0 3.5px #c9c9d1;
}

.nu-text {
  display: grid;
  line-height: 1.15;
  text-align: left;
  min-width: 0;
}

.nu-text b {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
}

.nu-text span {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.nu-text span:empty {
  display: none;
}

.nu-chevron {
  width: 14px !important;
  height: 14px !important;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.nav-account.nu-chip[aria-expanded="true"] .nu-chevron {
  transform: rotate(180deg);
}

/* меню */
.nu-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 12px);
  right: 0;
  width: 290px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid var(--stroke-strong);
  background: #141418;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: nu-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: top right;
}

@keyframes nu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

.nu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 14px;
}

.nu-who {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nu-who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1rem;
}

.nu-who span {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.nu-plan {
  font-style: normal;
  color: #e4e4ea;
  font-weight: 600;
}

.nu-wallet {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 10px;
  margin: 0 2px 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.nu-wallet:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--stroke-strong);
}

.nu-wallet-label {
  grid-column: 1 / -1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nu-wallet-sum {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.nu-wallet-cta {
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  font-size: 0.74rem;
  font-weight: 600;
}

.nu-list {
  display: grid;
  padding: 4px 0;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 4px;
}

.nu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nu-item svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.nu-item:hover,
.nu-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.nu-logout:hover {
  color: #fca5a5;
}

@media (max-width: 700px) {
  .nav-account.nu-chip {
    padding: 0 4px;
    gap: 0;
    height: 42px;
  }

  .nu-text,
  .nu-chevron {
    display: none;
  }

  /* шапка с backdrop-filter — «fixed» отсчитывается от неё: меню на всю ширину шапки */
  .nu-menu {
    position: fixed;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nu-menu {
    animation: none;
  }
}

/* ===================================================================== */
/* Баланс: пополнение, итог, разбивка кошелька, история (balance.js)      */
/* ===================================================================== */

.bl-head {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.bl-head .acct-panel-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  letter-spacing: -0.02em;
}

.bl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 16px;
  align-items: start;
}

.bl-card {
  border-radius: 24px;
  border: 1px solid var(--stroke);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.bl-form {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 24px;
}

.bl-form > * {
  min-width: 0;
}

.bl-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.bl-label {
  font-size: 0.98rem;
  font-weight: 600;
}

.bl-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bl-methods-head {
  margin-top: 10px;
}

/* суммы */
.bl-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.bl-preset {
  min-width: 0;
  padding: 0 4px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.bl-preset:hover {
  border-color: var(--stroke-strong);
  background: rgba(255, 255, 255, 0.06);
}

.bl-preset.is-active {
  border-color: transparent;
  background: #ececf0;
  color: #0a0a0d;
}

.bl-amount {
  position: relative;
  display: flex;
  align-items: center;
  height: 78px;
  padding: 0 24px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(10, 10, 13, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bl-amount:focus-within {
  border-color: var(--accent-from);
  box-shadow: 0 0 0 3px rgba(110, 110, 118, 0.2);
}

.bl-amount input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.bl-amount em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-muted);
}

/* способы */
.bl-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.bl-method {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}

button.bl-method {
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

button.bl-method:hover {
  border-color: var(--stroke-strong);
}

.bl-method.is-active {
  border-color: rgba(236, 236, 240, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.bl-method-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.bl-method.is-active .bl-method-icon {
  background: #ececf0;
  color: #0a0a0d;
}

.bl-method-icon svg {
  width: 20px;
  height: 20px;
}

.bl-method-text {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bl-method-text b {
  font-size: 0.95rem;
  font-weight: 600;
}

.bl-method-text small {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bl-radio {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #4a4a54;
}

.bl-method.is-active .bl-radio {
  border: 6px solid #ececf0;
}

/* правая колонка */
.bl-side {
  display: grid;
  gap: 16px;
}

.bl-tile.balance-tile {
  margin-top: 0;
  border-radius: 24px;
}

.bl-tile .balance-tile-body {
  padding: 22px 24px;
  gap: 10px;
}

.bl-total {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.bl-total-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.bl-lines {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stroke);
}

.bl-lines div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.bl-lines dt {
  color: var(--text-secondary);
}

.bl-lines dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bl-pay {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.bl-pay span {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.bl-pay b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bl-enough {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(10, 10, 13, 0.4);
}

.bl-enough[hidden] {
  display: none;
}

.bl-enough-title {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bl-enough ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-enough li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}

.bl-enough li b {
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.bl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #ececf0;
  color: #0a0a0d;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, background 0.2s, opacity 0.2s;
}

.bl-submit svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.bl-submit:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

.bl-submit:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.bl-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bl-total .shop-note:empty {
  display: none;
}

.bl-secure {
  display: flex;
  gap: 10px;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.bl-secure svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

/* разбивка кошелька */
.bl-parts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  overflow: hidden;
}

.bl-part {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 14px 16px;
}

.bl-part + .bl-part {
  border-left: 1px solid var(--stroke);
}

.bl-part-label {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.bl-part b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.bl-part small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* история */
.bl-history {
  margin-top: 34px;
}

.bl-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bl-history-head h3 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.bl-ops {
  margin: 0;
  padding: 6px 20px;
  list-style: none;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}

.bl-ops:empty {
  display: none;
}

.bl-op {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.bl-op + .bl-op {
  border-top: 1px solid var(--stroke);
}

.bl-op-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.bl-op.is-in .bl-op-icon {
  background: rgba(134, 239, 172, 0.1);
  color: var(--ok);
}

.bl-op-icon svg {
  width: 18px;
  height: 18px;
}

.bl-op-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bl-op-text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
}

.bl-op-text span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bl-op-sum {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bl-op.is-in .bl-op-sum {
  color: var(--ok);
}

@media (max-width: 1180px) {
  .bl-grid {
    grid-template-columns: 1fr;
  }

  .bl-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

@media (max-width: 1180px) and (min-width: 1000px) {
  .bl-presets {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bl-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .bl-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bl-methods {
    grid-template-columns: 1fr;
  }

  .bl-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bl-part:nth-child(3) {
    border-left: 0;
  }

  .bl-part:nth-child(n + 3) {
    border-top: 1px solid var(--stroke);
  }

  .bl-form,
  .bl-total {
    padding: 18px;
  }

  .bl-ops {
    padding: 4px 14px;
  }

  .bl-op {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .bl-op-icon {
    width: 38px;
    height: 38px;
  }
}

/* ---------- Баланс: шрифт цифр и доводка вида ---------- */
/* Unbounded слишком широкий для сумм: «1 000» упиралось в края, у «139 ₽» разъезжались цифры.
   Для цифр и заголовков страницы баланса — Inter Tight с моноширинными цифрами. */
.bl {
  --bl-font: "Inter Tight", "Inter Display", Inter, var(--font-body);
}

.bl .acct-panel-title,
.bl-total-title,
.bl-history-head h3 {
  font-family: var(--bl-font);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.bl-total-title {
  font-size: 1.35rem;
}

.bl-history-head h3 {
  font-size: 1.75rem;
}

.bl-preset,
.bl-amount input,
.bl-amount em,
.bl-pay b,
.bl-part b,
.bl-op-sum,
.bl-tile .balance-amount b,
.bl-tile .balance-amount span,
.bl-tile .balance-flow b {
  font-family: var(--bl-font);
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-variant-numeric: tabular-nums;
}

.bl-label {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* суммы-пресеты */
.bl-presets {
  gap: 8px;
}

.bl-preset {
  height: 50px;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.bl-preset.is-active {
  background: #f2f2f5;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

/* поле суммы */
.bl-amount {
  height: 88px;
  padding: 0 26px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    rgba(8, 8, 11, 0.7);
}

.bl-amount input {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.bl-amount em {
  font-size: 1.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
}

/* способы оплаты: список в одну колонку */
.bl-methods {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.bl-method {
  position: relative;
  padding: 14px 18px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}

.bl-method-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.bl-method-text b {
  font-size: 0.97rem;
  letter-spacing: -0.01em;
}

/* способ, который пока не подключён: красная плашка «Недоступно» */
.bl-method.is-disabled {
  cursor: not-allowed;
  border-color: rgba(255, 99, 77, 0.3);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 99, 77, 0.035) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, rgba(255, 99, 77, 0.1), rgba(255, 99, 77, 0.02));
}

.bl-method.is-disabled .bl-method-icon {
  border-color: rgba(255, 99, 77, 0.3);
  background: rgba(255, 99, 77, 0.12);
  color: #ff8b78;
}

.bl-method.is-disabled .bl-method-text b {
  color: rgba(255, 255, 255, 0.72);
}

.bl-method.is-disabled .bl-method-text small {
  color: #ff8b78;
  white-space: normal;
}

.bl-off {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 99, 77, 0.4);
  background: rgba(255, 99, 77, 0.14);
  color: #ff8b78;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bl-off::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff634d;
  box-shadow: 0 0 0 3px rgba(255, 99, 77, 0.2);
}

/* плитка «Сейчас на балансе» */
.bl-tile .balance-amount {
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 14px;
}

.bl-tile .balance-amount b {
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.055em;
}

.bl-tile .balance-amount span {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
}

.bl-tile .balance-flow i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.bl-tile .balance-flow b {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

/* итог */
.bl-total {
  gap: 16px;
}

.bl-lines dd {
  font-family: var(--bl-font);
  font-feature-settings: "tnum" 1;
}

.bl-pay {
  align-items: center;
}

.bl-pay b {
  font-size: clamp(2.3rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.bl-enough li b {
  font-family: var(--bl-font);
  font-feature-settings: "tnum" 1;
}

.bl-part b {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bl-op-sum {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

@media (max-width: 640px) {
  /* на телефоне плашка «Недоступно» уходит под текст, чтобы не налезать на название */
  .bl-method.is-disabled {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .bl-method.is-disabled .bl-off {
    margin-left: 56px;
  }

  .bl-preset {
    height: 46px;
  }

  .bl-amount {
    height: 76px;
  }

  .bl-amount input {
    font-size: 2.2rem;
  }
}

/* ===================================================================== */
/* Кабинет 2026-11: компактная карточка игрока, меню с группами,         */
/* активный пункт — светлая плашка, карточки на чёрном с мягким светом.  */
/* ===================================================================== */

.acct-page {
  position: relative;
  isolation: isolate;
}

/* фон кабинета: две мягкие световые полосы и тонкое зерно поверх чёрного */
.acct-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(255, 255, 255, 0.055), transparent 70%),
    radial-gradient(ellipse 50% 60% at 8% 92%, rgba(163, 173, 243, 0.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    #000;
}

.acct-profile {
  padding: 104px 0 80px;
}

.acct-profile .glow-a {
  display: none;
}

.acct-grid {
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
}

.acct-sidebar {
  position: sticky;
  top: 92px;
  gap: 10px;
}

/* карточка игрока: аватар, ник, тариф, выход */
.acct-side {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "ava who out"
    "ava badge out";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  padding: 12px 12px 12px 12px;
  text-align: left;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.acct-side .acct-avatar {
  grid-area: ava;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 14px;
  font-size: 1.1rem;
  box-shadow: none;
}

.acct-side-who {
  grid-area: who;
  min-width: 0;
}

.acct-side .acct-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-side .acct-sub {
  display: none;
}

.acct-side .acct-badge {
  grid-area: badge;
  justify-self: start;
  padding: 2px 8px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.acct-side .acct-logout {
  grid-area: out;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.acct-side .acct-logout svg {
  width: 17px;
  height: 17px;
}

.acct-side .acct-logout:hover {
  color: #ff8b78;
  border-color: rgba(255, 99, 77, 0.35);
  background: rgba(255, 99, 77, 0.08);
}

/* меню */
.acct-nav {
  gap: 2px;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.acct-nav-group {
  padding: 12px 12px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.34);
}

.acct-nav-group:first-child {
  padding-top: 6px;
}

.acct-nav a {
  gap: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.acct-nav a svg {
  width: 19px;
  height: 19px;
}

.acct-nav a:hover,
.acct-nav a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.acct-nav a.is-active {
  color: #0b0b0e;
  font-weight: 600;
  background: #f3f3f5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.acct-nav a.is-active::before {
  display: none;
}

/* точка «в сети» у общего чата */
.acct-nav-live {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(134, 239, 172, 0.12);
  color: var(--ok);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
}

.acct-nav a.is-active .acct-nav-live {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.acct-nav-live[hidden] {
  display: none;
}

/* крошки не нужны: где ты — видно по меню */
.acct-crumbs {
  display: none;
}

/* карточки разделов */
.acct-main {
  gap: 18px;
}

.acct-panel {
  padding: 26px;
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.075);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.acct-panel-title,
.acct-panel > h2.acct-panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* кнопки кабинета: белые основные, тёмные второстепенные */
.acct-main .btn-play {
  background: #f3f3f5;
  color: #0b0b0e;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  text-transform: none;
  letter-spacing: 0;
}

.acct-main .btn-play:hover {
  background: #fff;
}

.acct-main .btn-ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 960px) {
  .acct-sidebar {
    position: static;
  }

  .acct-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acct-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acct-nav-group {
    grid-column: 1 / -1;
  }
}

/* ===================================================================== */
/* Общий чат (chat.js)                                                    */
/* ===================================================================== */

.acct-panel.ch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
}

.ch-main,
.ch-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.ch-main {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: max(520px, calc(100vh - 140px));
  padding: 20px 20px 14px;
}

.ch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--stroke);
}

.ch-head .acct-panel-title {
  margin: 0 0 4px;
}

.ch-head p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.ch-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.ch-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.15);
}

.ch-pill b {
  color: var(--text-primary);
}

.ch-list {
  overflow-y: auto;
  padding: 10px 2px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.ch-empty {
  margin: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.ch-empty[hidden] {
  display: none;
}

.ch-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 4px 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.ch-day::before,
.ch-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stroke);
}

.ch-msg {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 10px;
  padding: 6px 8px;
  border-radius: 14px;
  transition: background 0.15s;
}

.ch-msg.is-grouped {
  margin-top: 0;
  padding-top: 2px;
}

.ch-msg:hover {
  background: rgba(255, 255, 255, 0.03);
}

.ch-ava {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s, 36px);
  height: var(--s, 36px);
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #3a3a42, #1b1b20);
  font-weight: 700;
  font-size: 0.85rem;
  color: #e6e6ea;
}

.ch-ava.is-premium {
  box-shadow: 0 0 0 1.5px rgba(184, 194, 255, 0.55);
}

.ch-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ch-ava-gap {
  width: 36px;
}

.ch-msg-main {
  min-width: 0;
}

.ch-msg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 2px;
}

.ch-nick {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}

.ch-nick:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ch-badge {
  padding: 1px 7px;
  border-radius: 7px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ch-badge.is-premium {
  background: rgba(184, 194, 255, 0.12);
  color: #c9cfff;
}

.ch-badge.is-mod {
  background: rgba(253, 224, 71, 0.12);
  color: #fde68a;
}

.ch-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ch-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ch-text.is-deleted {
  font-style: italic;
  color: var(--text-muted);
}

.ch-mention {
  padding: 0 3px;
  border-radius: 5px;
  color: #c9cfff;
  background: rgba(184, 194, 255, 0.1);
}

.ch-mention.is-me {
  color: #0b0b0e;
  background: #e3e6ff;
}

.ch-msg.is-mine .ch-nick::after {
  content: " · вы";
  font-weight: 400;
  color: var(--text-muted);
}

.ch-del {
  opacity: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.ch-del svg {
  width: 16px;
  height: 16px;
}

.ch-msg:hover .ch-del,
.ch-del:focus-visible {
  opacity: 1;
}

.ch-del:hover {
  color: #ff8b78;
  background: rgba(255, 99, 77, 0.1);
}

.ch-jump {
  position: absolute;
  left: 50%;
  bottom: 86px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #f3f3f5;
  color: #0b0b0e;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.ch-jump svg {
  width: 14px;
  height: 14px;
}

.ch-jump[hidden] {
  display: none;
}

.ch-form {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s;
}

.ch-form:focus-within {
  border-color: rgba(255, 255, 255, 0.28);
}

.ch-form textarea {
  flex: 1;
  min-height: 24px;
  max-height: 140px;
  padding: 8px 0;
  border: 0;
  resize: none;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  outline: none;
}

.ch-form textarea::placeholder {
  color: #5c5c66;
}

.ch-form.is-locked {
  opacity: 0.6;
}

.ch-count {
  align-self: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ch-count[hidden] {
  display: none;
}

.ch-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #f3f3f5;
  color: #0b0b0e;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.ch-send:hover {
  background: #fff;
  transform: translateY(-1px);
}

.ch-send svg {
  width: 18px;
  height: 18px;
}

.ch-note {
  min-height: 1.2em;
  margin: 6px 4px 0;
  font-size: 0.8rem;
  color: #ffb4a6;
}

/* правая колонка */
.ch-side {
  display: grid;
  align-content: start;
  gap: 16px;
}

.ch-card {
  padding: 18px;
}

.ch-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.ch-online {
  display: grid;
  gap: 4px;
  max-height: 360px;
  margin: 0 -6px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.ch-online li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.ch-online li:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ch-online .ch-ava {
  border-radius: 10px;
}

.ch-who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}

.ch-who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
}

.ch-stats {
  display: grid;
  gap: 14px;
}

.ch-stats div {
  display: grid;
  gap: 2px;
}

.ch-stats div + div {
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
}

.ch-stats span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ch-stats b {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ch-stats small {
  font-size: 0.76rem;
  color: var(--ok);
}

@media (max-width: 1100px) {
  .acct-panel.ch {
    grid-template-columns: minmax(0, 1fr);
  }

  .ch-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ch-main {
    height: calc(100vh - 120px);
    padding: 14px 12px 10px;
  }

  .ch-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .ch-head p {
    display: none;
  }
}

/* меню аккаунта в шапке: подписи без капса, белая кнопка пополнения */
.nu-wallet-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-body) !important;
}

.nu-wallet-cta {
  background: #f3f3f5 !important;
  color: #0b0b0e !important;
}

/* карточка игрока: титул и значки из наград — мелкой строкой под ником, слева */
.acct-side .acct-perk-tags {
  justify-content: flex-start;
  gap: 4px;
  margin: 5px 0 0;
}

.acct-side .acct-perk-tags span {
  padding: 1px 7px;
  font-size: 0.66rem;
  line-height: 1.5;
  white-space: nowrap;
}

.acct-side {
  align-items: start;
}

.acct-side .acct-avatar,
.acct-side .acct-logout {
  align-self: center;
}

.acct-side .acct-badge {
  margin-top: 2px;
}

/* карточка игрока: сверху аватар, ник и выход; ниже одной строкой тариф, титул и значки */
.acct-side {
  grid-template-areas:
    "ava who out"
    "chips chips chips";
  row-gap: 10px;
  align-items: center;
}

.acct-side-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
}

.acct-side-chips .acct-badge {
  margin: 0;
}

.acct-side-chips .acct-perk-tags {
  display: contents;
}

.acct-side-chips .acct-badge,
.acct-side-chips .acct-perk-tags span {
  padding: 2px 9px;
  font-size: 0.7rem;
  line-height: 1.5;
}