/* «Функции SKINAURA» — the four account tabs Wishlist, Мои охоты, Цены, Комплекты (src/js/account/wishlist.js,
   hunts.js, prices.js, loadouts.js; the shared parts in account/tools-ui.js).

   One language for all four, by the owner's instruction of 06.10.2026: «не создавать для них четыре совершенно
   разных дизайн-системы — они должны ощущаться одной частью продукта». So there is one row (.acc-tools-item),
   one head, one empty state and one way of saying «этот экземпляр уже недоступен» — the tabs differ only in the
   buttons at the end of a row. Same light language as the rest of the account: white panels on the paper, the
   hairline border, the brand blue only where it means something. */

/* ---- the group in the account's own navigation ---- */
.acc-tabs__group {
  margin: 18px 0 8px;
  padding: 0 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- the head of a tab: title left, its controls right ---- */
.acc-tools__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.acc-tools__head .acc-tab__title { margin: 0; }
.acc-tools__head-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-tools__games .segmented__item { min-height: 32px; padding: 0 14px; }

/* ---- states ---- */
.acc-tools__state { margin: 0; }
.acc-tools__state--loading { display: grid; gap: 10px; }
.acc-tools__sk { display: block; height: 84px; border-radius: var(--radius-md); }
.acc-tools__said { margin: 0 0 12px; }

/* ---- one saved item, the row the four tabs share ---- */
.acc-tools-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-tools-item {
  display: grid;
  grid-template-columns: auto 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.acc-tools-item:not(:has(.acc-tools-item__pick)) { grid-template-columns: 92px minmax(0, 1fr) auto; }
/* an instance that has been sold is never dropped from the list — it goes quiet and says so */
.acc-tools-item.is-gone { background: var(--surface-2); }
.acc-tools-item.is-gone .acc-tools-item__media { opacity: .55; }
.acc-tools-item__pick { display: grid; place-items: center; }
.acc-tools-item__media {
  display: grid;
  place-items: center;
  width: 92px;
  height: 68px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-3);
}
.acc-tools-item__media img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.acc-tools-item__body { min-width: 0; }
.acc-tools-item__name {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.acc-tools-item__name:hover { text-decoration: underline; text-underline-offset: .2em; }
.acc-tools-item__detail { margin: 3px 0 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-3); }
.acc-tools-item__gone { margin: 5px 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.acc-tools-item__note { margin: 3px 0 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--accent-ink); }
.acc-tools-item__right { display: grid; justify-items: end; gap: 8px; }
.acc-tools-item__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acc-tools__price { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); white-space: nowrap; }
.acc-tools__price--old { font-size: var(--fs-base); font-weight: 400; color: var(--ink-3); text-decoration: line-through; }
.acc-tools__drop { padding-inline: 10px; color: var(--ink-3); }
.acc-tools__drop:hover { color: var(--danger); }

/* ---- the bulk bar: «Выбрано: 4» ---- */
.acc-tools__bar {
  position: sticky;
  top: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-tint);
}
.acc-tools__bar-count { font-size: var(--fs-base); font-weight: 600; color: var(--accent-ink); }
.acc-tools__bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Мои охоты ---- */
.acc-hunt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.acc-hunt.is-paused { background: var(--surface-2); }
.acc-hunt__game { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.acc-hunt__name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.625rem;
  line-height: .95;
  text-transform: uppercase;
  font-synthesis: none;
  color: var(--ink);
}
.acc-hunt__terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.acc-hunt__term {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-2);
}
.acc-hunt__side { display: grid; justify-items: end; gap: 6px; }
.acc-hunt__count { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink-3); }
.acc-hunt__count.is-on { color: var(--ink); }
.acc-hunt__fresh { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); }
.acc-hunt__paused { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.acc-hunt__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 4px; }

/* ---- Цены ---- */
.acc-watch {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.acc-watch.is-paused { background: var(--surface-2); }
.acc-watch.is-hit { border-color: var(--success); }
.acc-watch .acc-tools-item__media { width: 92px; height: 68px; }
.acc-watch__body { min-width: 0; }
.acc-watch__nums { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0; }
.acc-watch__nums div { display: flex; align-items: baseline; gap: 7px; }
.acc-watch__nums dt { font-size: var(--fs-sm); color: var(--ink-3); }
.acc-watch__nums dd { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); white-space: nowrap; }
.acc-watch__status { margin: 7px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.acc-watch.is-hit .acc-watch__status { font-weight: 600; color: var(--success); }
.acc-watch__side { display: grid; justify-items: end; gap: 8px; }
.acc-watch__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acc-watch__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acc-watch__edit .input { width: 130px; }
.acc-watch__hint { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- Комплекты: the list ---- */
.acc-loadout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.acc-loadout__game { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.acc-loadout__name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.625rem;
  line-height: .95;
  text-transform: uppercase;
  font-synthesis: none;
}
.acc-loadout__name a { color: var(--ink); text-decoration: none; }
.acc-loadout__name a:hover { text-decoration: underline; text-underline-offset: .15em; }
.acc-loadout__count { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.acc-loadout__side { display: grid; justify-items: end; gap: 4px; }
.acc-loadout__total { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.acc-loadout__avail { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.acc-loadout__actions { display: flex; gap: 6px; margin-top: 6px; }
.acc-loadout-new { display: grid; gap: 8px; margin-bottom: 14px; padding: 16px; }
.acc-loadout-new__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-loadout-new__row .input { flex: 1 1 240px; min-width: 0; }

/* ---- Комплекты: one loadout, the thing the feature exists for ---- */
.acc-lo-head { min-width: 0; }
.acc-lo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-decoration: none;
}
.acc-lo-back:hover { color: var(--accent-ink); }
.acc-lo-sub { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.acc-lo-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-lo-rename .input { flex: 1 1 220px; min-width: 0; }

.acc-lo-board { display: grid; gap: 18px; }
.acc-lo-slot__title {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-3);
}
.acc-lo-slot__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.acc-lo-item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.acc-lo-item.is-gone { background: var(--surface-2); }
.acc-lo-item.is-gone .acc-lo-item__media { opacity: .55; }
.acc-lo-item__media {
  display: grid;
  place-items: center;
  height: 96px;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-3);
}
.acc-lo-item__media img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.acc-lo-item__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.acc-lo-item__name:hover { text-decoration: underline; text-underline-offset: .2em; }
.acc-lo-item__detail { margin: 0; font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); }
.acc-lo-item__price { margin: 2px 0 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.acc-lo-item__gone { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.acc-lo-item__drop { position: absolute; top: 6px; right: 6px; padding: 4px; color: var(--ink-3); }
.acc-lo-item__drop:hover { color: var(--danger); }
/* the empty place: what is still open is as visible as what is there */
.acc-lo-add { display: grid; }
.acc-lo-add__btn {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 150px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}
.acc-lo-add__btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); }

.acc-lo-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin-top: 18px;
  padding: 14px 16px;
}
.acc-lo-total__sum { margin: 0; font-size: var(--fs-base); color: var(--ink-2); }
.acc-lo-total__sum .t-price { font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.acc-lo-total__avail { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---- phones ---- */
@media (max-width: 767.98px) {
  .acc-tools-item,
  .acc-watch {
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
  }
  .acc-tools-item:not(:has(.acc-tools-item__pick)) { grid-template-columns: 68px minmax(0, 1fr); }
  .acc-tools-item__media,
  .acc-watch .acc-tools-item__media { width: 68px; height: 56px; }
  .acc-tools-item__right,
  .acc-watch__side { grid-column: 1 / -1; justify-items: start; }
  .acc-tools-item__actions,
  .acc-watch__actions { justify-content: flex-start; }
  .acc-hunt,
  .acc-loadout { grid-template-columns: minmax(0, 1fr); }
  .acc-hunt__side,
  .acc-loadout__side { justify-items: start; }
  .acc-hunt__actions,
  .acc-loadout__actions { justify-content: flex-start; }
  .acc-lo-slot__items { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
}

/* Signed out, on one of the four tools: no balance header — there is no account to put in it yet. The tabs and
   the tool itself are all there is (pages/account.js OPEN_TABS). */
.acc-page.is-open .acc-head { display: none; }

/* One loadout's name IS the heading of that screen, so unlike a tab's own title (account.css .acc-tab__title,
   hidden because the active tab link already says it) this one is on the page. */
.acc-lo-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: .92;
  text-transform: uppercase;
  font-synthesis: none;
  color: var(--ink);
}
.acc-lo-title:focus { outline: none; }

/* ---- the bell's own page ---- */
.acc-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.acc-note.is-new { border-color: var(--accent); background: var(--accent-tint); }
.acc-note__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
}
.acc-note.is-new .acc-note__mark { background: #FFFFFF; color: var(--accent-ink); }
.acc-note__body { min-width: 0; }
.acc-note__title { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.acc-note__text { margin: 3px 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.acc-note__when { margin: 5px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.acc-note__actions { display: flex; align-items: center; gap: 6px; }

/* «Что присылать»: the island had the surface but no padding of its own, so its heading sat on the very edge
   and the «Email» box ran out of the rounded corner (owner 2026-10-07: «этот островок плохо оформлен»). It is
   padded like the panels around it now, the rows are divided by hairlines that stop short of the edges rather
   than by a border on the last row, and the note is set off by its own rule. */
.acc-note-prefs { margin-top: 22px; padding: 18px 20px 16px; }
.acc-note-prefs .acc-panel__title { font-size: var(--fs-lg); }
.acc-note-prefs__list { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.acc-note-prefs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  min-height: 44px;
  padding: 10px 0;
}
.acc-note-prefs__row + .acc-note-prefs__row { border-top: 1px solid var(--line); }
.acc-note-prefs__group { font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.acc-note-prefs__boxes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.acc-note-prefs__box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.acc-note-prefs__note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-3);
}

/* the bell in the rail */
.rail__badge--notes { background: var(--accent); }