/* Стили новых экранов, которых не было в эталоне. Цвета и формы — из его палитры (legacy.css). */

.kpc-auth-page {
  position: fixed;
  overflow-y: auto;
  background: radial-gradient(ellipse at 75% 0, #3d2b5e 0, transparent 55%), #0b0619;
}

.kpc-auth-form {
  display: grid;
  gap: 12px;
  text-align: left;
  margin: 4px 0 12px;
}

.kpc-auth-field {
  display: grid;
  gap: 6px;
  color: #e0c9ed;
  font-size: 12px;
  font-weight: 700;
}

.kpc-auth-field input {
  width: 100%;
  border: 1px solid #9966b4;
  border-radius: 14px;
  padding: 12px 14px;
  background: #2a1d3d;
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.kpc-auth-field input:focus-visible {
  border-color: #f4a8ff;
  box-shadow: 0 0 0 3px #d56cff40;
}

.kpc-auth-field small {
  color: #bfa6d6;
  font-weight: 500;
}

.kpc-auth-error {
  margin: 0 !important;
  color: #ff9fbf !important;
  font-weight: 700;
}

.kpc-auth-note {
  border: 1px solid #9966b4;
  border-radius: 14px;
  padding: 12px;
  background: #49315e;
}

.kpc-auth-submit {
  width: 100%;
  margin-top: 4px;
}

.kpc-auth-switch {
  margin: 4px 0 0;
}

.kpc-auth-or {
  margin: 14px 0 4px;
  color: #bfa6d6;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kpc-auth-provider:disabled {
  opacity: 0.55;
  cursor: default;
}

.kpc-pack-odds {
  margin: 12px 0 16px;
}

.kpc-pack-odds .rarities small {
  display: block;
  color: #bfa6d6;
  font-size: 11px;
}

/* ── Соцчасть: элементы, которых не было в эталоне ─────────────────────────────────────── */

.social-avatar,
.social-modal-avatar,
.p2-friend-avatar {
  overflow: hidden;
}

.kpc-social-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.social-modal-profile .p10-wall {
  margin-top: 16px;
  text-align: left;
}

.kpc-social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.kpc-social-links button {
  border: 1px solid #75558d;
  border-radius: 12px;
  background: transparent;
  padding: 8px 12px;
  color: #c9a9dc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kpc-social-subtabs button {
  padding: 8px 12px;
  font-size: 12px;
}

.kpc-rank-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kpc-rank-row {
  display: grid;
  grid-template-columns: 44px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #5d4373;
  border-radius: 16px;
  background: #2a1d3d;
  padding: 8px 12px;
}

.kpc-rank-row.me {
  border-color: #d78aeb;
  background: #3b2552;
}

.kpc-rank-row .social-avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-width: 2px;
  font-size: 16px;
}

.kpc-rank-place {
  text-align: center;
  color: #f5e8ff;
  font-weight: 900;
}

.kpc-rank-name {
  display: grid;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.kpc-rank-name,
.kpc-rank-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpc-rank-name small,
.kpc-rank-value small {
  color: #bfa3d3;
  font-size: 11px;
  font-weight: 600;
}

.kpc-rank-value {
  color: #ffd76a;
  white-space: nowrap;
}

.kpc-trade-side {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  text-align: left;
}

.kpc-trade-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px;
}

.kpc-trade-pick .modal-input {
  margin: 0;
}

.kpc-trade-pick button {
  border: 1px solid #d78aeb;
  border-radius: 12px;
  background: #71458f;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.kpc-trade-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kpc-trade-lines button {
  border: 1px solid #75558d;
  border-radius: 20px;
  background: #342443;
  padding: 6px 10px;
  color: #f5e8ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kpc-trade-lines span {
  margin-left: 4px;
  color: #d78aeb;
}

.kpc-trades {
  display: grid;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  text-align: left;
}

.kpc-trade {
  display: grid;
  gap: 8px;
  border: 1px solid #5d4373;
  border-radius: 16px;
  background: #2a1d3d;
  padding: 12px;
}

.kpc-trade--pending {
  border-color: #d78aeb;
}

.kpc-trade-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.kpc-trade-head small,
.kpc-trade-body em {
  color: #bfa3d3;
}

.kpc-trade-body {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.kpc-trade-actions {
  display: flex;
  gap: 8px;
}

.kpc-trade-actions button {
  flex: 1;
  margin: 0;
}

.p2-trade-entry {
  cursor: pointer;
}

.kpc-trades-all {
  margin-top: 8px;
}

/* В эталоне кнопки v19 перекрывали фон активной вкладки (!important), и выбранная вкладка
   ничем не отличалась. Возвращаем подсветку из правила .social-tabs button.active. */
#app .social-tabs button.active {
  border-color: #d78aeb !important;
  background-image: linear-gradient(160deg, #8a52ad 0%, #5d3577 100%) !important;
}

/* ── Биржа: то, чего не было в эталоне (поиск, график, стакан, история) ─────────────────── */
.market-toolbar {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
}

.market-toolbar input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #795b8a;
  background: #2a1d36;
  color: #f9edff;
  font: inherit;
}

.market-toolbar select {
  width: auto;
  margin: 0;
}

.market-denied {
  margin-bottom: 14px;
  padding: 18px;
}

.market-actions button:disabled {
  opacity: 0.55;
  cursor: default;
}

.market-history ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.market-history li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.market-history li small {
  color: #c9b6d8;
}

.market-link {
  background: none;
  border: 0;
  padding: 0;
  color: #f3d3ff;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.market-side {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff12;
}

.market-side.sell {
  color: #9be8b4;
}

.market-side.buy {
  color: #f3c1ff;
}

.market-modal {
  display: grid;
  gap: 12px;
  text-align: left;
}

.market-modal h2 {
  margin: 0 0 4px;
}

.market-modal-head {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: start;
}

.market-stats {
  display: grid;
  gap: 3px;
  font-size: 12px;
  color: #c9b6d8;
}

.market-stats b {
  color: #f3d3ff;
}

.market-chart {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #21172c;
}

.market-chart-empty {
  padding: 26px 12px;
  text-align: center;
  font-size: 12px;
  color: #c9b6d8;
}

.market-chart-band {
  fill: #b381d133;
}

.market-chart-line {
  fill: none;
  stroke: #e0a2ef;
  stroke-width: 2;
}

.market-chart-dot {
  fill: #f3d3ff;
}

.market-chart text {
  fill: #c9b6d8;
  font-size: 9px;
}

.market-book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.market-book > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff09;
  font-size: 13px;
}

.market-book p {
  margin: 4px 0 0;
  display: flex;
  justify-content: space-between;
}

.market-book small {
  color: #c9b6d8;
}

.market-panes {
  margin: 0;
}

.market-panes button {
  flex: 1;
}

.market-preview {
  margin: 0;
}

.market-own {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #ffffff14;
  font-size: 13px;
}

.market-own p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.market-own button {
  width: auto;
  margin: 0;
  padding: 6px 10px;
}

/* Та же история, что с .social-tabs: v19 гасит подсветку активного режима биржи и главной кнопки. */
#app .market-actions button.active,
#app .market-actions button[data-market-open] {
  border-color: #b381d1 !important;
  background-image: linear-gradient(160deg, #7d4f9b 0%, #5a3672 100%) !important;
}

#modal-root .market-panes button.active {
  border-color: #b381d1 !important;
  background-image: linear-gradient(160deg, #7d4f9b 0%, #5a3672 100%) !important;
}

/* Название карты в истории сделок — ссылка, а не кнопка: снимаем рамку и фон v19. */
#app .market-history .market-link {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
}
/*
 * Раскладка для компьютера (ширина от 1100px). В эталоне на любом экране — колонка телефона 832px
 * с нижним меню; здесь меню становится боковой панелью слева, контент занимает остальную ширину.
 * На телефоне и планшете ничего не меняется: всё внутри media-запроса. Экран входа (без меню)
 * остаётся колонкой по центру — сетка включается только при наличии .nav.
 *
 * Сетка #app: строка 1 — шапка на всю ширину; столбец 1 — меню (липкое, тянется на все строки);
 * столбец 2 — секции страницы (у некоторых страниц их несколько подряд, каждая в своей строке).
 * Правила меню перебивают стили эталона и v19 с !important, поэтому здесь тоже #app и !important.
 */
@media (min-width: 1100px) {
  #app.app:has(> .nav) {
    --side: 232px;
    max-width: 1280px;
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    padding: 0 24px 40px;
  }

  #app:has(> .nav) > * {
    grid-column: 2;
    min-width: 0;
  }

  #app > .top {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 -24px 20px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Меню: вертикальная панель. Растягивается на 40 строк сетки, пустые строки нулевой высоты. */
  #app > .nav {
    grid-column: 1;
    grid-row: 2 / span 40;
    position: sticky !important;
    top: 20px;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px !important;
    padding: 12px !important;
    border: 1px solid #b56bc94d !important;
    border-radius: 26px;
    box-shadow: 0 14px 40px #0a071e55 !important;
  }

  #app .nav button {
    flex: none !important;
    width: 100%;
    max-width: none !important;
    height: 58px !important;
    min-height: 0 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  #app .nav button .nav-icon {
    width: 32px !important;
    height: 32px !important;
  }

  #app .nav button .nav-label {
    font-size: 16px !important;
    white-space: nowrap;
  }

  /* Полоски активной вкладки эталона рассчитаны на горизонтальное меню: ставим одну слева. */
  #app .nav button.selected:before {
    top: 14px;
    bottom: 14px;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #a85de0, #f174cb);
  }

  #app .nav button.selected:after {
    display: none;
  }

  #app .nav button:hover {
    transform: translateX(2px);
  }

  /* v19 красит все кнопки одинаково — в боковом меню текущий раздел должен быть виден сразу. */
  #app .nav button.selected {
    background: linear-gradient(150deg, #713276 0%, #4c2a6e 100%) !important;
    border-color: #e58ad7 !important;
    box-shadow:
      inset 0 0 0 1px #e58ad755,
      0 0 18px #e85ac733 !important;
  }

  /* Внизу больше нет меню — отступы под него не нужны. */
  .toast {
    bottom: 32px;
  }

  .notice-panel {
    right: max(24px, calc((100vw - 1232px) / 2));
  }
}