/* =========================
   SV Armor Sets — styles
   ========================= */

/* Шапка */
.sv-armorsets__header{margin:6px 0 14px}
.sv-armorsets__controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px;margin-bottom:16px}
.sv-filter__label{font-size:12px;opacity:.8}
.sv-select{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent}
.sv-armorsets__stats{margin-left:auto;font-size:12px;opacity:.8}

/* Сетка карточек */
.sv-set-grid{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.sv-set-grid{grid-template-columns:1fr}}

/* Карточка-секция */
.sv-setcard{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:20px;
}
.sv-setcard:hover{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}

/* Header карточки */
.sv-setcard__header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.sv-setcard__title{margin:0 0 6px 0;font-size:20px;letter-spacing:.2px}
.sv-setcard__titlewrap{display:flex;flex-direction:column;gap:10px}
.sv-setcard__meta{display:flex;gap:8px;flex-wrap:wrap}
.sv-setcard__cover{width:42px;height:42px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.sv-setcard__cover img{display:block;width:100%;height:100%;object-fit:cover}
.sv-cover-ph{display:block;width:100%;height:100%;border:1px dashed rgba(255,255,255,.2);border-radius:12px;opacity:.6}

/* Бейджи / чипы */
.sv-badge,
.sv-chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 10px;border-radius:999px;
  line-height:1;white-space:nowrap;vertical-align:middle;letter-spacing:.2px
}
.sv-badge{font-size:11px;border:1px solid rgba(255,255,255,.18)}
.sv-badge--heavy{background:rgba(255,0,0,.06)}
.sv-badge--light{background:rgba(255,255,0,.06)}
.sv-badge--robe{background:rgba(0,128,255,.06)}
.sv-chip{font-size:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.sv-chip--grade{font-weight:600}
.sv-grade--d{background:rgba(120,180,255,.10);border-color:rgba(120,180,255,.25)}
.sv-grade--c{background:rgba(120,255,200,.10);border-color:rgba(120,255,200,.25)}
.sv-grade--b{background:rgba(255,230,150,.10);border-color:rgba(255,230,150,.25)}
.sv-grade--a{background:rgba(255,170,120,.10);border-color:rgba(255,170,120,.25)}
.sv-grade--s{background:rgba(255,120,160,.10);border-color:rgba(255,120,160,.25)}

/* Панель фильтра */
.sv-gradebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.sv-gradebtn{
  -webkit-appearance:none;appearance:none;border:none;outline:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:999px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.12), rgba(255,255,255,.04) 60%, rgba(255,255,255,.03) 100%),
    rgba(20,22,26,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.35);
  color:inherit;font-size:14px;line-height:1;
  transition:transform .12s ease,box-shadow .15s ease,background .2s ease,opacity .2s ease
}
.sv-gradebtn::before{
  content:attr(data-grade);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-weight:700;font-size:12px;letter-spacing:.4px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 3px rgba(0,0,0,.35);color:rgba(255,255,255,.9)
}
.sv-gradebtn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 18px rgba(0,0,0,.35)}
.sv-gradebtn.is-active{
  background:radial-gradient(140% 140% at 0% 0%, rgba(0,160,255,.25), rgba(0,160,255,.10) 40%, rgba(0,160,255,.06) 100%),
             rgba(20,22,26,.75);
  box-shadow:0 0 0 1px rgba(0,160,255,.35) inset, 0 10px 28px rgba(0,160,255,.18)
}
/* оттенки активной */
.sv-gradebtn--s.is-active{box-shadow:0 0 0 1px rgba(255,120,160,.45) inset,0 10px 28px rgba(255,120,160,.18)}
.sv-gradebtn--a.is-active{box-shadow:0 0 0 1px rgba(255,170,120,.45) inset,0 10px 28px rgba(255,170,120,.18)}
.sv-gradebtn--b.is-active{box-shadow:0 0 0 1px rgba(255,230,150,.45) inset,0 10px 28px rgba(255,230,150,.18)}
.sv-gradebtn--c.is-active{box-shadow:0 0 0 1px rgba(120,255,200,.45) inset,0 10px 28px rgba(120,255,200,.18)}
.sv-gradebtn--d.is-active{box-shadow:0 0 0 1px rgba(120,180,255,.45) inset,0 10px 28px rgba(120,180,255,.18)}
.sv-gradebtn.is-disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.3)}
.sv-gradebtn.is-disabled::before{opacity:.7}

/* ===== Bonuses — сетка карточек ===== */
.sv-setcard__bonus{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px 18px;
  align-items:stretch;
  margin-top:8px;
  margin-bottom:18px;
  padding:0;
  background:transparent;border:none;box-shadow:none
}
@media (max-width:640px){.sv-setcard__bonus{grid-template-columns:1fr}}

.sv-bonusrow{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
  min-height:88px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  margin:0 6px; /* общий боковой зазор */
}
.sv-bonusrow__heading{font-size:16px;font-weight:700;letter-spacing:.2px;margin:0 0 6px 0}
.sv-bonusrow__desc{font-size:13.5px;line-height:1.55;opacity:.95;margin:0}

/* Цветовые модификаторы бонусов */
.sv-bonusrow--primary{
  border-color:rgba(71,179,255,.35);
  background:linear-gradient(180deg,rgba(71,179,255,.10),rgba(71,179,255,.03));
  box-shadow:inset 0 0 0 1px rgba(71,179,255,.10)
}
.sv-bonusrow--shield{
  border-color:rgba(255,211,84,.35);
  background:linear-gradient(180deg,rgba(255,211,84,.10),rgba(255,211,84,.03));
  box-shadow:inset 0 0 0 1px rgba(255,211,84,.08)
}
.sv-bonusrow--enchant{
  border-color:rgba(140,225,170,.35);
  background:linear-gradient(180deg,rgba(140,225,170,.10),rgba(140,225,170,.03));
  box-shadow:inset 0 0 0 1px rgba(140,225,170,.08)
}

/* ===== Список деталей ===== */
.sv-setcard__list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
/* одинаковые боковые поля у списков деталей и у блока бонусов */
.sv-setcard__list,
.sv-setcard__bonus{
  padding-left: 12px;
  padding-right: 12px;
}

/* сама строка предмета: без «асимметрии» внутри */
.sv-row{
  /* было: padding:12px 16px; padding-left:6px; padding-right:6px; */
  padding: 12px;                 /* одинаковые внутренние края */
  margin-left: 0;
  margin-right: 0;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

.sv-row__icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.sv-row__icon img{display:block;width:36px;height:36px;border-radius:10px;object-fit:cover}
.sv-icon-ph{width:46px;height:46px;border-radius:10px;border:1px dashed rgba(255,255,255,.18);opacity:.6}
.sv-row__body{display:flex;flex-direction:column}
.sv-row__title{font-size:14px;margin:0}
.sv-row__id{font-size:12px;opacity:.72;margin-top:6px}

/* ===== Пилюли статов/ID ===== */
.sv-row__id{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sv-idpill{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:999px;line-height:1;white-space:nowrap;
  font-size:12.5px;letter-spacing:.2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)
}
.sv-idpill--id{background:rgba(0,160,255,.08);border-color:rgba(0,160,255,.28)}
.sv-idpill--stat{background:rgba(0,160,255,.08);border-color:rgba(0,160,255,.28)}
.sv-idpill--text{background:rgba(255,255,255,.04)}
.sv-idpill__label{opacity:.8;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.sv-idpill__unit{opacity:.85;font-weight:600}
.sv-idpill__num{font-variant-numeric:tabular-nums;font-weight:700;opacity:.95}

/* Нежное жёлтое inline-выделение + идеальное центрирование текста */
.sv-row__title mark.sv-mark{
  display: inline-flex;             /* даёт нам центрирование */
  align-items: center;              /* по вертикали */
  justify-content: center;          /* по горизонтали */
  padding: .18em .45em;             /* симметричные отступы */
  line-height: 1;                   /* чтобы не «тянуло» вверх/вниз */
  vertical-align: middle;           /* аккуратная линия базиса в строке */

  background: linear-gradient(180deg, rgba(255,217,94,.14), rgba(255,217,94,.08));
  color: inherit;
  border: 1px solid rgba(255,217,94,.22);
  border-radius: .35em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* чуть ярче при ховере */
.sv-row__title mark.sv-mark:hover{
  background: linear-gradient(180deg, rgba(255,217,94,.20), rgba(255,217,94,.12));
  border-color: rgba(255,217,94,.30);
}