/* Скинченджер v2 - интерфейс в стиле xplay.gg (разметка: skins/index.php, логика: skins/weapons.js).
   Откат: skins/index.php.bak_v1 + skins/weapons.js.bak_v1, этот файл можно просто не подключать. */
:root { --sk2-panel: #16151c; --sk2-card: #1b1a22; --sk2-line: rgba(255,255,255,.07); --sk2-mut: #979aa6; }

/* ---------- Левая колонка ---------- */
.sk-layout { gap: 14px; }
.sk-sidebar { width: 250px; }
.sk2-coll { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; text-align: left;
  background: var(--sk2-panel); border: 1px solid var(--sk2-line); border-radius: 12px; color: #fff; font-family: inherit; transition: border-color .15s; }
.sk2-coll:hover { border-color: rgba(var(--p-rgb), .45); }
.sk2-coll b { display: block; font-size: .92rem; font-weight: 800; }
.sk2-coll small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--sk2-mut); margin-top: 2px; }
.sk2-coll small i { width: 6px; height: 6px; border-radius: 50%; background: #e4ae39; }
.sk2-coll > i { color: var(--sk2-mut); }
.sk2-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sk2-nav-i { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #fff; cursor: pointer; text-align: left; font-family: inherit; transition: background .15s, border-color .15s; }
.sk2-nav-i:hover { background: rgba(255,255,255,.03); }
.sk2-nav-i.act { background: var(--sk2-panel); border-color: var(--sk2-line); }
.sk2-nav-i > i { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #c9ccd4; border-radius: 9px; }
.sk2-nav-i.act > i { color: #e4ae39; }
.sk2-nav-i b { display: block; font-size: .88rem; font-weight: 800; }
.sk2-nav-i small { display: block; font-size: .72rem; color: var(--sk2-mut); line-height: 1.3; }
.sk-card { background: var(--sk2-panel); backdrop-filter: none; border-color: var(--sk2-line); border-radius: 12px; }

/* ---------- Верхняя полоса: категории + поиск ---------- */
.sk2-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; margin-bottom: 12px; background: var(--sk2-panel); border: 1px solid var(--sk2-line); border-radius: 14px; }
.sk2-cats { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 10px; background: #111216; border: 1px solid rgba(255,255,255,.06); }
.sk2-cat { width: 66px; height: 34px; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #62666f; font-size: 1rem; transition: background .15s, border-color .15s, color .15s; }
.sk2-cat img { max-width: 54px; max-height: 26px; object-fit: contain; filter: brightness(0) invert(.55); transition: filter .15s; }
.sk2-cat:hover img { filter: brightness(0) invert(.85); } .sk2-cat:hover { color: #fff; }
.sk2-cat.act { background: rgba(228,174,57,.1); border-color: rgba(228,174,57,.55); color: #e4ae39; }
.sk2-cat.act img { filter: brightness(0) invert(1); }
.sk2-sec-title { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: #fff; font-weight: 800; font-size: .95rem; }
.sk2-sec-title i { color: #e4ae39; }
.sk2-search { position: relative; margin-left: auto; width: 240px; max-width: 100%; }
.sk2-search input { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--sk2-line); border-radius: 10px; padding: .6rem .8rem .6rem 2.2rem; color: #fff; font-size: .84rem; font-family: inherit; outline: none; }
.sk2-search input:focus { border-color: rgba(var(--p-rgb), .6); }
.sk2-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--sk2-mut); font-size: .8rem; }

/* ---------- Сетка карточек ---------- */
.sk-grid-wrap { background: var(--sk2-panel); backdrop-filter: none; border-color: var(--sk2-line); border-radius: 14px; padding: 12px; }
.sk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 700px) { .sk-grid { grid-template-columns: repeat(2, 1fr); } }
.sk-item { display: flex; flex-direction: column; align-items: center; min-height: 150px; padding: 12px 10px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.05); border-bottom: 2px solid var(--rc, rgba(255,255,255,.1));
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--rc, #6b7280) 20%, transparent), transparent 72%), var(--sk2-card); }
.sk-item:hover { border-color: rgba(255,255,255,.12); border-bottom-color: var(--rc, rgba(255,255,255,.25)); transform: translateY(-2px); }
.sk-item.on { background: radial-gradient(90% 70% at 50% 30%, rgba(var(--p-rgb), .22), transparent 72%), var(--sk2-card); border-color: rgba(var(--p-rgb), .7); box-shadow: 0 0 0 1px rgba(var(--p-rgb), .5); }
.sk-item img { height: 84px; margin: 4px 0 10px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.sk-item .sk2-w { font-size: .72rem; color: var(--sk2-mut); margin-top: auto; }
.sk-item .sk2-n { font-size: .84rem; color: #fff; font-weight: 700; }
.sk-item .sk2-n:only-of-type { margin-top: auto; }
.sk-eq { background: rgba(var(--p-rgb), .9); font-size: .56rem; }
.sk-cat-head { color: #c9ccd4; font-size: .74rem; border-bottom: 0; padding: .7rem .2rem .1rem; }
.sk-drill-head { background: var(--sk2-card); border-color: var(--sk2-line); }
.sk-back { color: var(--sk2-mut); }
/* компактные списки (музыка/пины) */
.sk-grid.sk-grid-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.sk-item-compact { min-height: 0; flex-direction: row; padding: .55rem .7rem; border-bottom-width: 1px; background: var(--sk2-card); }
.sk-item-compact img { margin: 0; height: 38px; width: 38px; }
.sk-item-compact .sk2-n { margin: 0; font-weight: 600; }

/* ---------- Окно редактора ---------- */
.sk2-ed-backdrop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,6,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: skFade .16s ease; }
.sk2-ed-wrap { display: flex; gap: 12px; align-items: stretch; max-height: calc(100vh - 40px); max-width: 100%; animation: skPop .22s cubic-bezier(.2,.9,.25,1.05); }
.sk2-ed, .sk2-pick { background: var(--sk2-panel); border: 1px solid var(--sk2-line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.sk2-ed { width: 480px; max-width: 100%; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sk2-ed-title { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: #fff; }
.sk2-ed-title .w { color: var(--sk2-mut); } .sk2-ed-title .sep { color: #55586a; }
.sk2-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--sk2-mut); cursor: pointer; flex-shrink: 0; }
.sk2-x:hover { color: #fff; background: rgba(255,255,255,.1); }
.sk2-ed-prev { position: relative; height: 210px; border-radius: 12px; border: 1px solid var(--sk2-line); display: flex; align-items: center; justify-content: center; padding: 0 60px 0 14px;
  background-color: #111016; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 14px 14px; }
.sk2-ed-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: filter .15s; }
.sk2-ed-img img { max-width: 100%; max-height: 170px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.sk2-ed-team { position: absolute; left: 10px; bottom: 10px; }
.sk2-ed-team span { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: .72rem; font-weight: 800; border: 1px solid; }
.sk2-ed-team .ct { color: #60a5fa; border-color: rgba(96,165,250,.4); background: rgba(59,130,246,.12); }
.sk2-ed-team .t { color: #eab308; border-color: rgba(234,179,8,.4); background: rgba(234,179,8,.12); }
.sk2-rail { position: absolute; right: 10px; top: 10px; bottom: 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sk2-slot { width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.35); color: #7c8090; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s, color .15s; }
.sk2-slot:hover { color: #fff; border-color: rgba(228,174,57,.6); }
.sk2-slot.act { border-color: #e4ae39; color: #e4ae39; box-shadow: 0 0 0 1px rgba(228,174,57,.4); }
.sk2-slot.filled img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sk2-slot.kc { margin-top: 6px; }
.sk2-row { display: grid; grid-template-columns: 1fr 150px; gap: 14px; align-items: end; }
.sk2-ed label { display: block; color: var(--sk2-mut); font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.sk2-q { display: flex; gap: 6px; }
.sk2-q button { flex: 1; min-width: 0; height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); color: #d4d7dd; font-size: .78rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: .15s; }
.sk2-q button:hover { border-color: rgba(255,255,255,.2); color: #fff; }
.sk2-q button.on { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); color: #fff; }
.sk2-q button.lock { color: #eab308; border-color: rgba(234,179,8,.25); background: rgba(234,179,8,.05); font-size: .7rem; }
.sk2-q button.lock i { font-size: .6rem; margin-right: 2px; }
.sk2-st-in { display: flex; gap: 6px; }
.sk2-st-t { flex: 0 0 auto; height: 38px; padding: 0 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); color: var(--sk2-mut); font-size: .68rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.sk2-st-t.on { background: linear-gradient(135deg,#f97316,#ea580c); border-color: transparent; color: #fff; }
.sk2-st-in input { width: 100%; min-width: 0; height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.2); color: #fff; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .82rem; outline: none; }
.sk2-st-in input:disabled { opacity: .45; }
.sk2-lr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sk2-lr label { margin: 0; } .sk2-lr label span { color: #6f7383; font-weight: 600; margin-left: 6px; }
.sk2-num { width: 92px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); color: #fff; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .85rem; font-weight: 700; outline: none; -moz-appearance: textfield; }
.sk2-num::-webkit-outer-spin-button, .sk2-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk2-num:focus, .sk2-text:focus, .sk2-st-in input:focus { border-color: rgba(var(--p-rgb), .7); }
.sk2-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--track, rgba(255,255,255,.14)); outline: none; margin: 6px 0; }
.sk2-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #1b1a22; box-shadow: 0 0 0 1px rgba(255,255,255,.4); cursor: pointer; }
.sk2-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 4px solid #1b1a22; cursor: pointer; }
.sk2-text { width: 100%; height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.2); color: #fff; padding: 0 12px; font-family: inherit; font-size: .85rem; outline: none; }
.sk2-text::placeholder { color: #5f6272; }
.sk2-btns { display: grid; grid-template-columns: 1fr 140px; gap: 10px; margin-top: 2px; }
.sk2-accept, .sk2-reset { height: 50px; border-radius: 10px; font-family: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; transition: transform .15s, filter .15s; }
.sk2-accept { border: 0; color: #fff; background: linear-gradient(135deg, var(--p), var(--s)); box-shadow: 0 10px 24px -10px rgba(var(--p-rgb), .8); }
.sk2-accept:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sk2-reset { border: 1px solid rgba(255,255,255,.14); background: transparent; color: #fff; }
.sk2-reset:hover { background: rgba(255,255,255,.05); }
.sk2-ed-status { min-height: 1em; text-align: center; font-size: .78rem; color: var(--sk2-mut); margin-top: -6px; }
.sk2-ed .sk-wear-hint { margin-top: -6px; }

/* ---------- Панель наклеек / брелков ---------- */
.sk2-pick { width: 470px; max-width: 100%; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sk2-pick-top { display: flex; align-items: center; gap: 8px; }
.sk2-pick-top .sk2-search { margin: 0; flex: 1; width: auto; }
.sk2-pick-mode { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--sk2-line); }
.sk2-pick-mode button { width: 34px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--sk2-mut); cursor: pointer; }
.sk2-pick-mode button.on { background: rgba(255,255,255,.12); color: #fff; }
.sk2-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sk2-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; border: 1px solid var(--sk2-line); background: rgba(255,255,255,.03); color: #d4d7dd; font-size: .74rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.sk2-chips button i { width: 8px; height: 8px; border-radius: 50%; }
.sk2-chips button.on { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.sk2-pick-sub { font-size: .72rem; color: #6f7383; }
.sk2-pick-grid { flex: 1; min-height: 200px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: start; padding-right: 3px; }
.sk2-pick-grid::-webkit-scrollbar { width: 6px; } .sk2-pick-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 6px; }
.sk2-tile { background: var(--sk2-card); border: 1px solid var(--sk2-line); border-radius: 9px; padding: 8px 6px 6px; text-align: center; cursor: pointer; transition: border-color .15s, transform .15s; min-width: 0; }
.sk2-tile:hover { border-color: rgba(255,255,255,.2); transform: translateY(-1px); }
.sk2-tile.on { border-color: #e4ae39; box-shadow: 0 0 0 1px rgba(228,174,57,.35); }
.sk2-tile img { width: 100%; height: 62px; object-fit: contain; }
.sk2-tile span { display: block; margin-top: 4px; font-size: .68rem; color: #cfd3da; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk2-tile.none { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sk2-mut); }
.sk2-tile.none i { font-size: 1.4rem; height: 62px; display: flex; align-items: center; }
.sk2-pick .sk-pager { margin-top: 0; padding-top: 8px; }

@media (max-width: 1000px) { .sk-sidebar { width: 100%; } .sk2-nav { flex-direction: row; flex-wrap: wrap; } .sk2-nav-i { flex: 1 1 45%; } }
@media (max-width: 980px) {
  .sk2-ed-backdrop { align-items: flex-start; overflow-y: auto; padding: 12px; }
  .sk2-ed-wrap { flex-direction: column; max-height: none; width: 100%; }
  .sk2-ed, .sk2-pick { width: 100%; }
  .sk2-pick-grid { max-height: 60vh; }
}
@media (max-width: 520px) {
  .sk2-row { grid-template-columns: 1fr; }
  .sk2-search { width: 100%; margin-left: 0; }
  .sk2-cat { width: 52px; }
  .sk2-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* подсказки внутри сетки - на всю ширину */
.sk-grid > .sk-wear-hint, .sk-grid > .sk-back, .sk-grid > .sk-drill-head, .sk-grid > .sk-msg { grid-column: 1 / -1; }
.sk-grid > .sk-wear-hint { display: block; line-height: 1.5; padding: .6rem .8rem; border-radius: 10px; background: rgba(234,179,8,.06); border: 1px solid rgba(234,179,8,.2); }
.sk-grid > .sk-wear-hint i { margin-right: .35rem; }

/* ---------- Наборы экипировки («Коллекции» как на xplay) ---------- */
.sk2-coll-box { margin-bottom: 12px; background: var(--sk2-panel); border: 1px solid var(--sk2-line); border-radius: 12px; overflow: hidden; }
.sk2-coll-box .sk2-coll { border: 0; border-radius: 0; background: transparent; }
.sk2-coll-box .sk2-coll > i { transition: transform .2s; }
.sk2-coll-box.open .sk2-coll > i { transform: rotate(180deg); }
.sk2-coll-box.busy { opacity: .6; pointer-events: none; }
.sk2-pl { padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.sk2-pl[hidden] { display: none; }
.sk2-pl-msg { color: var(--sk2-mut); font-size: .78rem; padding: 8px; }
.sk2-pi { position: relative; display: flex; align-items: center; border-radius: 10px; transition: background .15s; }
.sk2-pi:hover { background: rgba(255,255,255,.03); }
.sk2-pi.act { background: linear-gradient(90deg, rgba(228,174,57,.12), rgba(228,174,57,.03)); box-shadow: inset 0 0 0 1px rgba(228,174,57,.25); }
.sk2-pi-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 8px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font-family: inherit; }
.sk2-pi-main b { display: block; font-size: .85rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk2-pi-main small { display: block; font-size: .72rem; color: var(--sk2-mut); }
.sk2-pi-main span { min-width: 0; }
.sk2-dot { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--dc, #3a3a44); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.sk2-pi.act .sk2-dot { background: var(--dc, #e4ae39); box-shadow: 0 0 0 3px rgba(228,174,57,.25); }
.sk2-pi-more { flex: 0 0 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--sk2-mut); cursor: pointer; }
.sk2-pi-more:hover { background: rgba(255,255,255,.08); color: #fff; }
.sk2-pi-menu { position: absolute; right: 4px; top: calc(100% - 2px); z-index: 20; min-width: 220px; padding: 5px; border-radius: 10px; background: #1f1e27; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.sk2-pi-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: #dcdce4; font-size: .8rem; font-weight: 600; text-align: left; cursor: pointer; font-family: inherit; }
.sk2-pi-menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.sk2-pi-menu button.bad { color: #f87171; }
.sk2-pi-menu button i { width: 14px; text-align: center; opacity: .8; }
.sk2-pl-add { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-top: 2px; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px; background: none; color: #d4d7dd; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: inherit; text-align: left; }
.sk2-pl-add span { display: flex; flex-direction: column; line-height: 1.25; }
.sk2-pl-add small { color: var(--sk2-mut); font-weight: 600; font-size: .7rem; }
.sk2-pl-add > i { flex: 0 0 14px; text-align: center; }
.sk2-pl-add:hover { border-color: rgba(228,174,57,.5); color: #fff; }
.sk2-pl-sep { margin: 10px 8px 4px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #6f7383; }
.sk2-pl-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--sk2-line); border-radius: 10px; background: rgba(255,255,255,.03); color: #d4d7dd; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.sk2-pl-link .fa-arrow-right { margin-left: auto; font-size: .7rem; }
.sk2-pl-link:hover { color: #fff; border-color: rgba(255,255,255,.18); }

/* ===== главный экран «Всё оружие» как на xplay: надетое в цвете, остальное силуэтами ===== */
.sk-item.sk2-eqc { position: relative; overflow: hidden; border-bottom: 2px solid var(--rc, #6b7280);
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--rc, #6b7280) 24%, transparent) 100%), var(--sk2-card); }
.sk-item.sk2-eqc img { position: relative; z-index: 0; }
.sk2-hov { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .15s;
  background: linear-gradient(135deg, rgba(10,10,14,.82) 0 48%, rgba(10,10,14,0) 48.2%); }
.sk-item.sk2-eqc:hover .sk2-hov, .sk-item.sk2-eqc:focus-within .sk2-hov { opacity: 1; pointer-events: auto; }
.sk2-hov button { position: absolute; display: grid; place-items: center; cursor: pointer; font-family: inherit; }
.sk2-hov-g { top: 10px; left: 10px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255,255,255,.08); color: #d1d5db; font-size: 1rem; }
.sk2-hov-g:hover { background: rgba(255,255,255,.18); color: #fff; }
.sk2-hov-x { right: 10px; bottom: 34px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); color: #fff; font-size: .85rem; }
.sk2-hov-x:hover { background: #ef4444; border-color: #ef4444; }
.sk-item.sk2-sil { background: var(--sk2-card); border-bottom-color: rgba(255,255,255,.05); }
.sk-item.sk2-sil img { filter: brightness(0) invert(.36); opacity: .85; }
.sk-item.sk2-sil:hover img { filter: brightness(0) invert(.55); }
.sk-item.sk2-sil .sk2-n { color: #7b8090; font-weight: 600; margin-top: auto; }
.sk-item.sk2-sil:hover .sk2-n { color: #c9ccd4; }
.sk-item.sk2-more { justify-content: center; gap: 12px; }
.sk-item.sk2-more > i { font-size: 1.9rem; color: #4b5060; margin-top: auto; }
.sk-item.sk2-more:hover > i { color: #9ca3af; }
.sk-grid > .sk2-all-hint { grid-column: 1 / -1; color: var(--sk2-mut); font-size: .85rem; padding: .2rem .2rem .4rem; }
/* иконки категорий - силуэты CS2 через mask, цвет = цвет кнопки (серый, при выборе жёлтый) */
.sk2-ico { display: block; width: 54px; height: 22px; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.sk2-cat:hover { color: #a3a7b1; background: rgba(255,255,255,.03); }
.sk2-cat.act { background: rgba(228,174,57,.06); border-color: #e4ae39; color: #e4ae39; }

/* длинные названия не вылезают за карточку: переносятся внутри, слишком длинные слова рвутся */
.sk-item > span, .sk-item .sk2-w, .sk-item .sk2-n { max-width: 100%; box-sizing: border-box; text-align: center; overflow-wrap: anywhere; word-break: normal; line-height: 1.25; white-space: normal; }
.sk-item .sk2-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-item .sk-compat { max-width: 100%; white-space: normal; }
.sk-loadout-slot > div { min-width: 0; }
.sk-loadout-slot .nm, .sk-loadout-slot .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-drill-head > div { min-width: 0; }
.sk-drill-head .wname, .sk-drill-head .cur { overflow-wrap: anywhere; }
/* ===== как у xplay: оверлей карточки, значки сторон, выбор стороны в окне настройки ===== */
.sk2-hov { background: linear-gradient(to bottom right, rgba(12,12,16,.88) 0 49.6%, rgba(12,12,16,.25) 50.4% 100%); }
.sk2-hov-g { top: 12px; left: 12px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #e5e7eb; }
.sk2-hov-g:hover { background: transparent; color: #fff; transform: rotate(30deg); transition: transform .2s; }
.sk2-hov-g svg, .sk2-hov-x svg { width: 100%; height: 100%; display: block; }
.sk2-hov-x { right: 14px; bottom: 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.75); }
.sk2-hov-x:hover { background: transparent; color: #ef4444; }
.sk2-hov-line { position: absolute; inset: 30% 30%; pointer-events: none;
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #e4ae39 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.sk2-tm-i { display: block; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.sk2-tm-i.t { --ico: url(/skins/img/cat_team_t.svg); color: #e4ae39; }
.sk2-tm-i.ct { --ico: url(/skins/img/cat_team_ct.svg); color: #5b9bd5; }
.sk2-tm-i.both { --ico: url(/skins/img/cat_team_both.svg); color: #c9ccd4; }
.sk2-tb { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; z-index: 1; opacity: .9; }
.sk2-tb.both { width: 34px; }
.sk2-ed-team { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.sk2-tm { width: 34px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; display: grid; place-items: center; opacity: .55; transition: opacity .15s, background .15s; }
.sk2-tm:hover { opacity: .9; }
.sk2-tm.on { opacity: 1; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.sk2-tm .sk2-tm-i { width: 20px; height: 20px; }
.sk2-tm .sk2-tm-i.both { width: 28px; }
/* v5: оверлей точно как у xplay - граница «/», верх-лево темнее, низ-право светлее, золотой отрезок по диагонали */
.sk2-hov { background: linear-gradient(to bottom right, rgba(27,27,31,.97) 0 50%, rgba(54,54,60,.96) 50% 100%); }
.sk2-hov-line { inset: 32%; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #e4ae39 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.sk2-hov-g { top: 14px; left: 14px; width: 28px; height: 28px; color: #7d818a; }
.sk2-hov-g:hover { color: #d1d5db; transform: none; }
.sk2-hov-x { right: 14px; bottom: 14px; width: 28px; height: 28px; color: #e5e7eb; }
.sk2-hov-x:hover { color: #ef4444; }
.sk-item.sk2-eqc:hover .sk2-tb { opacity: 0; }
/* выбор стороны в окне настройки - ярче и крупнее */
.sk2-ed-team { background: rgba(20,20,26,.85); border-color: rgba(255,255,255,.16); padding: 4px; gap: 4px; }
.sk2-tm { width: 40px; height: 34px; opacity: .8; }
.sk2-tm:hover { opacity: 1; background: rgba(255,255,255,.06); }
.sk2-tm.on { opacity: 1; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.sk2-tm .sk2-tm-i { width: 24px; height: 24px; }
.sk2-tm .sk2-tm-i.both { width: 34px; }
.sk2-tm-i.t { color: #f5c24f; }
.sk2-tm-i.ct { color: #7fb5ff; }
.sk2-tm-i.both { color: #e5e7eb; }
/* v6: как у xplay - оба значка серые, белеет тот, на который навёлся; фон полупрозрачный с размытием */
.sk2-hov { background: linear-gradient(to bottom right, rgba(22,22,26,.8) 0 50%, rgba(62,62,68,.72) 50% 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sk2-hov-g, .sk2-hov-x { color: #8a8e97; transition: color .12s; }
.sk2-hov-g:hover, .sk2-hov-x:hover { color: #ffffff; transform: none; }
.sk2-hov-line { background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d9a63a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
/* v7: оверлей карточки - аккуратно, как у xplay */
.sk2-hov { opacity: 0; transition: opacity .18s ease;
  background: linear-gradient(to bottom right, rgba(16,16,20,.82) 0 50%, rgba(70,70,78,.58) 50% 100%);
  -webkit-backdrop-filter: blur(5px) saturate(.9); backdrop-filter: blur(5px) saturate(.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit; }
.sk2-hov-line { display: none; }
.sk2-hov-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sk2-hov-svg line { stroke: #e2ad3f; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(226,173,63,.55));
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .35s ease .05s; }
.sk-item.sk2-eqc:hover .sk2-hov-svg line { stroke-dashoffset: 0; }
.sk2-hov-g { top: 13px; left: 13px; width: 24px; height: 24px; color: #9a9ea7; transition: color .12s, transform .2s; }
.sk2-hov-x { right: 13px; bottom: 13px; width: 26px; height: 26px; color: #9a9ea7; transition: color .12s, transform .15s; }
.sk2-hov-g:hover { color: #fff; transform: rotate(35deg); }
.sk2-hov-x:hover { color: #fff; transform: scale(1.08); }
.sk2-hov-g:focus-visible, .sk2-hov-x:focus-visible { outline: 2px solid #e2ad3f; outline-offset: 3px; border-radius: 50%; }
/* v7.1: ближе к xplay - крупнее иконки, линия длиннее и толще, сильнее размытие */
.sk2-hov { background: linear-gradient(to bottom right, rgba(14,14,17,.86) 0 50%, rgba(66,66,72,.66) 50% 100%);
  -webkit-backdrop-filter: blur(10px) saturate(.85); backdrop-filter: blur(10px) saturate(.85); }
.sk2-hov-svg line { stroke: #f0b63f; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(240,182,63,.45)); }
.sk2-hov-g { top: 12px; left: 12px; width: 30px; height: 30px; }
.sk2-hov-x { right: 12px; bottom: 12px; width: 32px; height: 32px; }.sk2-hov { inset: -1px -1px -2px -1px; }
.sk2-hov-svg line { stroke: #ecc25c; filter: drop-shadow(0 0 4px rgba(236,194,92,.4)); }
.sk2-hov-x { right: 11px; bottom: 11px; width: 34px; height: 34px; }.sk2-hov-svg line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }.sk2-hov { background: linear-gradient(to bottom right, rgba(14,14,17,.74) 0 50%, rgba(66,66,72,.62) 50% 100%); }
.sk2-hov-g { width: 34px; height: 34px; top: 11px; left: 11px; }
/* виды перчаток (как у xplay): серые картинки, цветные при наведении */
.sk-item.sk2-gtype img { filter: grayscale(1) brightness(1.15) drop-shadow(0 8px 12px rgba(0,0,0,.45)); transition: filter .2s; }
.sk-item.sk2-gtype:hover img, .sk-item.sk2-gtype.on img { filter: none; }
.sk-item.sk2-gtype .sk2-n { margin-top: auto; }
.sk-item.sk2-gtype .sk2-w { margin-top: 2px; }

/* v8: квадратные карточки как у xplay + однотонный размытый оверлей */
.sk-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
.sk-grid:not(.sk-grid-compact) > .sk-item:not(.sk-item-compact) { aspect-ratio: 1 / 1; min-height: 0; padding: 12px 10px 12px; overflow: hidden;
  border: 0; border-bottom: 1px solid var(--rc, rgba(255,255,255,.06)); border-radius: 12px;
  background: radial-gradient(110% 75% at 50% 105%, color-mix(in srgb, var(--rc, #6b7280) 34%, transparent), transparent 70%), #16171c; }
.sk-grid > .sk-item:not(.sk-item-compact) img { height: auto; max-height: 58%; width: 86%; object-fit: contain; margin: 4px auto 6px; flex: 1 1 auto; min-height: 0; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk2-w { font-size: .74rem; color: #9aa0a8; margin-top: auto; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk2-n { font-size: .9rem; font-weight: 600; color: #fff; }
.sk-grid > .sk-item:not(.sk-item-compact):hover { transform: none; background: radial-gradient(110% 75% at 50% 105%, color-mix(in srgb, var(--rc, #6b7280) 44%, transparent), transparent 72%), #1a1b21; }
.sk-grid > .sk-item.on:not(.sk-item-compact) { box-shadow: inset 0 0 0 1px rgba(var(--p-rgb), .75); }
.sk-grid > .sk-item.sk2-sil { background: #16171c; border-bottom-color: transparent; }
.sk-grid > .sk-item .sk-compat { font-size: .6rem; margin-top: 2px; }
.sk2-hov { background: rgba(17,17,21,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }
.sk2-hov-svg line { stroke: #e9b949; stroke-width: 2; filter: none; }
.sk2-hov-g { color: #8d9199; }
.sk2-hov-x { color: #8d9199; }.sk-grid > .sk-item:not(.sk-item-compact) img { max-height: 50%; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk2-n { line-height: 1.2; flex: 0 0 auto; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk-compat { flex: 0 0 auto; line-height: 1.2; }
.sk-grid > .sk-item.sk2-sil .sk2-n { color: #7b8090; font-weight: 500; }
.sk-grid > .sk-item.sk2-sil:hover .sk2-n { color: #c9ccd4; }
/* v9: подписи в квадратных карточках - оружие в одну строку, название скина мельче и выше */
.sk-grid > .sk-item:not(.sk-item-compact) { padding-bottom: 16px; }
.sk-grid > .sk-item:not(.sk-item-compact) img { max-height: 48%; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk2-w { font-size: .7rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; flex: 0 0 auto; width: 100%; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk2-n { font-size: .82rem; line-height: 1.2; margin-top: 2px; }
.sk-grid > .sk-item:not(.sk-item-compact) .sk-compat { margin-top: 3px; font-size: .56rem; }
/* карточка только с названием (ножи, виды) - название прижато к низу, как у остальных */
.sk-grid > .sk-item:not(.sk-item-compact) > img + .sk2-n { margin-top: auto; }
/* v10: чистый оверлей как у xplay - без диагональной линии, аккуратные иконки по углам */
.sk2-hov { background: linear-gradient(to top, rgba(8,8,11,.72), rgba(8,8,11,.28) 55%, rgba(8,8,11,.10)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.sk2-hov-svg { display: none; }
.sk2-hov-g, .sk2-hov-x { width: 30px; height: 30px; border-radius: 9px; background: rgba(0,0,0,.42); color: #d7dbe2; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: color .12s, background .12s; }
.sk2-hov-g { top: 10px; left: 10px; }
.sk2-hov-x { top: auto; bottom: 10px; right: 10px; border-radius: 9px; }
.sk2-hov-g:hover { color: #fff; background: rgba(255,255,255,.18); transform: none; }
.sk2-hov-x:hover { color: #fff; background: #ef4444; transform: none; }
/* v11: акцент интерфейса — цвет пользователя (--p) вместо золотого. Редкость предметов и team-цвета (КТ синий / Т жёлтый) НЕ трогаем. */
.sk2-coll small i { background: var(--p) !important; }
.sk2-nav-i.act > i { color: var(--p) !important; }
.sk2-sec-title i { color: var(--p) !important; }
.sk2-cat.act { background: rgba(var(--p-rgb),.10) !important; border-color: rgba(var(--p-rgb),.55) !important; color: var(--p) !important; }
.sk2-slot:hover { border-color: rgba(var(--p-rgb),.6) !important; }
.sk2-slot.act { border-color: var(--p) !important; color: var(--p) !important; box-shadow: 0 0 0 1px rgba(var(--p-rgb),.4) !important; }
.sk2-tile.on { border-color: var(--p) !important; box-shadow: 0 0 0 1px rgba(var(--p-rgb),.35) !important; }
.sk-grid > .sk-wear-hint { background: rgba(var(--p-rgb),.06) !important; border-color: rgba(var(--p-rgb),.2) !important; }
.sk2-pi.act { background: linear-gradient(90deg, rgba(var(--p-rgb),.12), rgba(var(--p-rgb),.03)) !important; box-shadow: inset 0 0 0 1px rgba(var(--p-rgb),.25) !important; }
.sk2-pi.act .sk2-dot { background: var(--dc, var(--p)) !important; box-shadow: 0 0 0 3px rgba(var(--p-rgb),.25) !important; }
.sk2-pl-add:hover { border-color: rgba(var(--p-rgb),.5) !important; color: #fff !important; }
.sk2-hov-g:focus-visible, .sk2-hov-x:focus-visible { outline-color: var(--p) !important; }
/* v12: подсветка всей карточки в цвет скина (рамка + мягкое свечение), как в референсе */
.sk-grid:not(.sk-grid-compact) > .sk-item:not(.sk-item-compact){
  border: 1px solid color-mix(in srgb, var(--rc,#6b7280) 55%, transparent) !important;
  background: radial-gradient(120% 85% at 50% 42%, color-mix(in srgb, var(--rc,#6b7280) 20%, transparent), transparent 72%), #16171c !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc,#6b7280) 22%, transparent), 0 10px 26px -10px color-mix(in srgb, var(--rc,#6b7280) 55%, transparent) !important;
}
.sk-grid:not(.sk-grid-compact) > .sk-item:not(.sk-item-compact):hover{
  border-color: color-mix(in srgb, var(--rc,#6b7280) 88%, transparent) !important;
  background: radial-gradient(120% 85% at 50% 42%, color-mix(in srgb, var(--rc,#6b7280) 30%, transparent), transparent 72%), #1a1b21 !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc,#6b7280) 42%, transparent), 0 16px 36px -10px color-mix(in srgb, var(--rc,#6b7280) 75%, transparent) !important;
}
.sk-grid > .sk-item.on:not(.sk-item-compact){
  border-color: rgba(var(--p-rgb),.9) !important;
  box-shadow: 0 0 0 1px rgba(var(--p-rgb),.6), 0 12px 30px -10px rgba(var(--p-rgb),.5) !important;
}
/* v13: ярче логотипы команд (селектор сторон сверху и в редакторе скинов) */
.sk2-tm { opacity: 1 !important; }
.sk2-tm .sk2-tm-i { filter: brightness(1.15) saturate(1.1); }
.sk-team .sk2-tm-i { filter: brightness(1.1) drop-shadow(0 0 2px currentColor); }
/* v14: убрать метки совместимости (CS2 + CS:GO / только CS2) с карточек скинов */
.sk-compat { display: none !important; }
/* v15: значки сторон на карточках - крупнее и читаемые на любом фоне */
.sk2-tb { width: 24px !important; height: 24px !important; top: 8px !important; right: 8px !important; opacity: 1 !important; z-index: 3 !important;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.95)) drop-shadow(0 1px 4px rgba(0,0,0,.85)); }
.sk2-tb.both { width: 46px !important; }
.sk2-tb.t { color: #ffc94d !important; }
.sk2-tb.ct { color: #8fc1ff !important; }
.sk2-tb.both { color: #ffffff !important; }