/* ==========================================================================
   DropHub — личный кабинет

   Оформление снято со страницы кейса (cases.css): та же единица --u, та же
   палитра панелей и кнопок, те же радиусы и заголовки. Раздел не должен
   выглядеть пришитым сбоку — человек попадает сюда прямо из открытия
   кейсов, и разрыв в стиле читался бы как другой сайт.

   Переменные продублированы, а не унаследованы: cases.css задаёт их на
   .cs-page, и подключать весь файл ради шести значений незачем.

   Компоновка прежняя: верхний ряд из трёх карточек (счёт, лучший предмет,
   любимый кейс), под ним вкладки со счётчиками и одна панель содержимого.
   ========================================================================== */

.pf-page {
  --u: clamp(7.5px, .8vw, 11.5px);
  --cs-ink: #06090F;          /* самый тёмный фон: поля ввода */
  --cs-panel: #12141D;        /* панели — как полосы на странице кейса */
  --cs-edge: #262D42;         /* кромка панели: на тон светлее заливки */
  --cs-btn: #20273F;          /* кнопка обычная */
  --cs-btn-dim: #151A2B;      /* кнопка тихая */
  --cs-text-dim: #8C9CC6;
  --cs-gold: #6DEA5D;         /* деньги: зелёный кнопок действия */
  --cs-green: #6DEA5D;        /* действие */
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto; padding: calc(1.6 * var(--u)) 0 calc(5 * var(--u));
  display: flex; flex-direction: column; gap: calc(2.4 * var(--u));
  font-family: var(--f-body);
}

/* Блоки прячутся атрибутом hidden, а у части из них задан свой display —
   он сильнее браузерного [hidden]{display:none}, и без этой строки
   скрытое (форма трейд-ссылки, сообщение об ошибке) оставалось бы на
   виду. */
.pf-page [hidden] { display: none !important; }

/* ─────────── панели ───────────
   Заливка панелей темнее фона страницы совсем немного, и на камуфляже
   они читались как пятно, а не как блок. Осветлять заливку не стали —
   пробовали, раздел переставал быть похож на страницу кейса. Вместо
   этого очерчен край: рамка на тон светлее, тень под блоком и светлая
   линия по верхней кромке. Блок выглядит приподнятым над фоном, а цвет
   остаётся прежним. */
.pf-card, .pf-box {
  border: 1px solid var(--cs-edge);
  border-radius: calc(2 * var(--u));
  background: var(--cs-panel);
  box-shadow: 0 calc(1 * var(--u)) calc(2.6 * var(--u)) rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pf-card { padding: calc(1.6 * var(--u)); }

/* Промежуток между рядами задаётся здесь, а не на .pf-page: её прямой
   ребёнок — эта обёртка, а ряды (верхние карточки, вкладки, панель)
   лежат уже внутри, и flex-gap страницы до них не доставал. */
#pf-in { display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); }

/* ─────────── кнопки ─────────── */

.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(.6 * var(--u));
  height: calc(4.6 * var(--u)); padding: 0 calc(1.8 * var(--u));
  border-radius: calc(1 * var(--u)); border: 0; cursor: pointer;
  font-size: calc(1.3 * var(--u)); font-weight: 700; white-space: nowrap;
  transition: filter .14s, background-color .14s, color .14s, transform .12s;
}
.pf-btn--green { background: var(--cs-green); color: #163712; }
.pf-btn--green:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pf-btn--dark { background: var(--cs-btn-dim); color: #8C9CC6; }
.pf-btn--dark:hover { background: var(--cs-btn); color: #fff; }

/* точка «ссылка не задана» на кнопке трейд-ссылки */
.pf-dot { width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); border-radius: 50%; background: #FF7A7A; }
.pf-dot.is-set { background: var(--cs-green); }

/* ─────────── сообщение о неудачном входе ─────────── */

.pf-alert {
  border-radius: calc(1.2 * var(--u)); background: rgba(255, 122, 122, .1);
  padding: calc(1.2 * var(--u)) calc(1.6 * var(--u));
  font-size: calc(1.3 * var(--u)); color: #FF9E9E;
}
.pf-alert b { color: #fff; }

/* ─────────── верхний ряд ─────────── */

.pf-top {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(2.4 * var(--u));
}

.pf-me { display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); }
.pf-me__row { display: flex; align-items: center; gap: calc(1.2 * var(--u)); flex-wrap: wrap; }
.pf-me__ava {
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); flex: none;
  border-radius: calc(1.4 * var(--u)); overflow: hidden; background: var(--cs-btn-dim);
}
.pf-me__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-me__ava--letter {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(2.6 * var(--u)); font-weight: 900; color: #6777A1;
}
.pf-me__who { min-width: 0; flex: 1 1 calc(12 * var(--u)); }
.pf-me__who b {
  display: block; font-size: calc(1.4 * var(--u)); font-weight: 700; color: #E6EBF6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-me__bal {
  display: block; margin-top: calc(.3 * var(--u));
  font-size: calc(2.4 * var(--u)); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--cs-gold);
}
.pf-me__acts { display: flex; gap: calc(.8 * var(--u)); flex-wrap: wrap; margin-left: auto; }

.pf-trade { display: flex; gap: calc(.8 * var(--u)); flex-wrap: wrap; }
.pf-trade input {
  flex: 1 1 calc(26 * var(--u)); min-width: 0;
  height: calc(4.6 * var(--u)); padding: 0 calc(1.4 * var(--u));
  border: 0; border-radius: calc(1 * var(--u)); background: var(--cs-ink);
  font: inherit; font-size: calc(1.2 * var(--u)); color: #E6EBF6; outline: none;
}
.pf-trade input::placeholder { color: #4E5B80; }

.pf-msg { margin: 0; font-size: calc(1.2 * var(--u)); }
.pf-msg.is-ok  { color: var(--cs-green); }
.pf-msg.is-bad { color: #FF7A7A; }

/* полоска-промо внизу карточки счёта */
.pf-promo {
  display: flex; align-items: center; gap: calc(1 * var(--u)); margin-top: auto;
  border-radius: calc(1.2 * var(--u)); background: rgba(93, 126, 242, .1);
  padding: calc(1.1 * var(--u)) calc(1.4 * var(--u)); text-decoration: none;
  transition: background-color .14s;
}
.pf-promo:hover { background: rgba(93, 126, 242, .2); }
.pf-promo b { font-size: calc(1.3 * var(--u)); font-weight: 700; color: #E6EBF6; }
.pf-promo span { font-size: calc(1.2 * var(--u)); color: var(--cs-text-dim); }
.pf-promo i {
  margin-left: auto; flex: none; font-style: normal;
  font-size: calc(1.2 * var(--u)); font-weight: 700; color: #708FFF;
}

/* ─────────── маленькие карточки ─────────── */

.pf-mini { display: flex; flex-direction: column; gap: calc(.9 * var(--u)); }
.pf-mini__t {
  font-size: calc(1.1 * var(--u)); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #5E6B93;
}
.pf-mini__body { display: flex; align-items: center; gap: calc(1.1 * var(--u)); flex: 1; }
.pf-mini__pic {
  width: calc(8 * var(--u)); height: calc(6 * var(--u)); flex: none;
  border-radius: calc(1 * var(--u)); background: var(--cs-btn-dim);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pf-mini__pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pf-mini__txt { min-width: 0; flex: 1; }
.pf-mini__n {
  font-size: calc(1.3 * var(--u)); font-weight: 700; color: #E6EBF6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-mini__s { margin-top: calc(.2 * var(--u)); font-size: calc(1.2 * var(--u)); color: var(--cs-text-dim); }
.pf-mini__p {
  margin-top: calc(.4 * var(--u)); font-size: calc(1.6 * var(--u)); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--cs-gold);
}
.pf-mini .pf-btn { align-self: flex-start; height: calc(3.8 * var(--u)); padding: 0 calc(1.4 * var(--u)); }

/* ─────────── вкладки ─────────── */

/* Шапка объединённого блока: ни рамки, ни фона, ни линии снизу — блок
   должен читаться как одно целое, а разделитель возвращал бы ему вид
   двух панелей, поставленных вплотную. */
.pf-tabs {
  display: flex; align-items: center; gap: calc(.8 * var(--u)); flex-wrap: wrap;
  padding: calc(.8 * var(--u));
}
.pf-tab {
  display: inline-flex; align-items: center; gap: calc(.7 * var(--u));
  height: calc(4.6 * var(--u)); padding: 0 calc(1.6 * var(--u));
  border: 0; border-radius: calc(1 * var(--u)); cursor: pointer;
  background: transparent; color: #6E7B9F;
  font-size: calc(1.3 * var(--u)); font-weight: 700;
  transition: background-color .14s, color .14s;
}
.pf-tab b {
  font-size: calc(1.1 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 0 calc(.6 * var(--u)); border-radius: calc(.5 * var(--u));
  background: rgba(110, 123, 159, .18); color: #8C9CC6;
}
.pf-tab:hover { color: #fff; }
.pf-tab.is-on { background: var(--cs-btn); color: #fff; }
.pf-tab.is-on b { background: var(--cs-green); color: #163712; }
.pf-sellall { margin-left: auto; }

/* ─────────── содержимое вкладки ─────────── */

.pf-pane { padding: calc(1.6 * var(--u)); }
.pf-pane:empty { display: none; }

.pf-inv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(.6 * var(--u)); }
/* Карточка предмета. От содержимого кейса взяты градиент к цвету
   разряда, цена в углу и цветная метка у левого края; снизу добавлена
   пара действий, поэтому картинка не наложена на подпись, а занимает
   свою строку — иначе кнопки пришлось бы класть поверх скина. */
.pf-item {
  --rar: #4b69ff;
  position: relative; overflow: hidden;
  padding: calc(1.4 * var(--u)) calc(1.2 * var(--u)) calc(1.2 * var(--u));
  border-radius: calc(1.2 * var(--u));
  background: linear-gradient(197deg, #161923 1.11%, color-mix(in srgb, var(--rar) 40%, #161923) 143%);
  display: flex; flex-direction: column; gap: 1px;
}
.pf-item__pic {
  height: calc(8 * var(--u)); margin-bottom: calc(.6 * var(--u));
  display: flex; align-items: center; justify-content: center;
}
.pf-item__pic img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6));
}
.pf-item__p {
  position: absolute; right: calc(1.2 * var(--u)); top: calc(1.2 * var(--u)); z-index: 1;
  font-size: calc(1.1 * var(--u)); font-weight: 700; color: var(--cs-gold);
  font-variant-numeric: tabular-nums;
}
.pf-item__n, .pf-item__s {
  position: relative; z-index: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-item__n { font-size: calc(1.2 * var(--u)); font-weight: 400; opacity: .7; color: #E6EBF6; }
.pf-item__s { font-size: calc(1.3 * var(--u)); font-weight: 500; color: #fff; }
.pf-item::after {
  content: ''; position: absolute; left: 0; top: calc(1.2 * var(--u)); z-index: 1;
  width: 3px; height: calc(2.5 * var(--u)); border-radius: calc(.6 * var(--u)); background: var(--rar);
}

/* Продать — акцентом, вывести — тише: продажа даёт деньги сразу, вывод
   уходит обменом и занимает время. */
.pf-item__act { display: flex; gap: calc(.5 * var(--u)); margin-top: calc(1 * var(--u)); }
.pf-item__act button {
  flex: 1; min-width: 0; height: calc(3.4 * var(--u)); padding: 0;
  border: 0; border-radius: calc(.8 * var(--u)); cursor: pointer;
  font-size: calc(1.1 * var(--u)); font-weight: 700; white-space: nowrap;
  transition: filter .14s, background-color .14s, color .14s;
}
.pf-item__act [data-act="sell"] { background: var(--cs-green); color: #163712; }
.pf-item__act [data-act="sell"]:hover { filter: brightness(1.08); }
.pf-item__act [data-act="wd"] { background: rgba(255, 255, 255, .1); color: #fff; }
.pf-item__act [data-act="wd"]:hover { background: rgba(255, 255, 255, .18); }

.pf-note {
  margin: calc(1.4 * var(--u)) 0 0;
  font-size: calc(1.2 * var(--u)); line-height: 1.5; color: var(--cs-text-dim);
}
.pf-note b { color: #E6EBF6; }

/* пустая вкладка */
.pf-none { display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1 * var(--u)) calc(.4 * var(--u)); }
.pf-none__ico {
  width: calc(6.2 * var(--u)); height: calc(6.2 * var(--u)); flex: none;
  border-radius: calc(1.4 * var(--u)); background: var(--cs-btn-dim);
  display: flex; align-items: center; justify-content: center; color: #4E5B80;
}
.pf-none__ico svg { width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.pf-none__txt { flex: 1; min-width: 0; }
.pf-none__txt b { display: block; font-size: calc(1.5 * var(--u)); font-weight: 700; color: #BDC9EA; }
.pf-none__txt span { display: block; margin-top: calc(.3 * var(--u)); font-size: calc(1.2 * var(--u)); color: var(--cs-text-dim); }

/* ─────────── узкие экраны ─────────── */

@media (max-width: 1040px) {
  .pf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-me { grid-column: 1 / -1; }
  .pf-inv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pf-top { grid-template-columns: minmax(0, 1fr); }
  .pf-me__acts { margin-left: 0; width: 100%; }
  .pf-me__acts .pf-btn { flex: 1; }
  .pf-sellall { margin-left: 0; width: 100%; }
  .pf-inv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}