/* Калькулятор Trade-Up — оформление в том же ключе, что и остальные инструменты,
   с фиолетовым акцентом исходной страницы. */

.tu-page { position: relative; width: 100%; overflow-x: hidden }
.tu-page *, .tu-page *::before, .tu-page *::after { box-sizing: border-box }
.tu-bg { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 700px; overflow: hidden; pointer-events: none }
.tu-bg::before {
  content: ''; position: absolute; left: 50%; top: -128px; width: 700px; height: 700px;
  transform: translateX(-50%); border-radius: 9999px; opacity: .25; filter: blur(120px);
  background: radial-gradient(circle, hsla(270, 76%, 60%, .5) 0%, transparent 70%);
}
.tu-content { position: relative; z-index: 10; width: 100%; max-width: 980px; margin: 0 auto; padding: 48px 24px 96px }

/* ---- шапка ---- */
.tu-header { margin-bottom: 36px; text-align: center }
.tu-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(192, 132, 252, .3); border-radius: 9999px; padding: 4px 12px;
  background: rgba(192, 132, 252, .1); color: #d8b4fe;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.tu-badge svg { width: 12px; height: 12px }
.tu-title { margin: 16px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05 }
.tu-gradient {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, hsla(270, 76%, 70%, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tu-lead { max-width: 640px; margin: 16px auto 0; color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.6 }

/* ---- редкости ---- */
.tu-rarities { margin-bottom: 16px }
.tu-label { margin-bottom: 8px; color: rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.tu-rarity-row { display: flex; flex-wrap: wrap; gap: 8px }
.tu-rarity {
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 6px; padding: 6px 12px;
  background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .45);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.tu-rarity:hover { color: rgba(255, 255, 255, .75) }
.tu-rarity.is-on { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c) }
.tu-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: rgba(255, 255, 255, .5); font-size: 12px }
.tu-note[hidden] { display: none }
.tu-note svg { width: 14px; height: 14px; flex: none; color: #fbbf24 }

/* ---- поле контракта ---- */
.tu-board { border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; padding: 20px; background: linear-gradient(135deg, #15171c, #0d0f13) }
.tu-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px }
.tu-slot {
  position: relative; display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; padding: 10px; color: rgba(255, 255, 255, .3); text-align: center;
}
.tu-slot.is-empty {
  border: 1px dashed rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02);
  font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.tu-slot.is-empty:hover { border-color: rgba(192, 132, 252, .4); background: rgba(192, 132, 252, .04); color: rgba(216, 180, 254, .8) }
.tu-slot.is-empty svg { width: 20px; height: 20px }
.tu-slot.is-empty span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase }
/* Заполненный слот: цветная подложка редкости, картинка, износ и точный float. */
.tu-slot.is-filled {
  justify-content: flex-start;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(255, 255, 255, .02));
}
.tu-slot.is-filled img { width: 100%; height: 54px; object-fit: contain }
.tu-slot-noimg { display: block; width: 100%; height: 54px; border-radius: 8px; background: rgba(255, 255, 255, .04) }
.tu-slot.is-filled b {
  width: 100%; overflow: hidden; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tu-slot.is-filled i {
  width: 100%; overflow: hidden; color: rgba(255, 255, 255, .4); font-size: 9px; font-style: normal;
  white-space: nowrap; text-overflow: ellipsis;
}
.tu-slot-remove {
  position: absolute; right: 6px; top: 6px; display: grid; width: 20px; height: 20px; place-items: center;
  border: 0; border-radius: 6px; padding: 0; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .55); cursor: pointer;
}
.tu-slot-remove svg { width: 11px; height: 11px }
.tu-slot-remove:hover { background: rgba(248, 113, 113, .22); color: #fca5a5 }
.tu-wear {
  width: 100%; margin-top: auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; padding: 4px 6px;
  background: #0e1014; color: #fff; font-family: inherit; font-size: 10px; outline: none;
}
.tu-float { display: flex; width: 100%; align-items: center; gap: 5px }
.tu-float span { color: rgba(255, 255, 255, .35); font-size: 9px; font-weight: 700; text-transform: uppercase }
.tu-float input {
  width: 100%; min-width: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; padding: 4px 6px;
  background: #0e1014; color: #fff; font-family: inherit; font-size: 10px; outline: none;
}
.tu-float input:focus, .tu-wear:focus { border-color: rgba(192, 132, 252, .5) !important; box-shadow: none !important }

/* Covert: входов пять, и они занимают ту же ширину, что десять у прочих ступеней. */
.tu-slots.is-five { grid-template-columns: repeat(5, 1fr) }

.tu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px }
.tu-foot-left { display: flex; align-items: center; gap: 14px }
.tu-counter { color: rgba(255, 255, 255, .45); font-size: 12px; font-weight: 600 }
.tu-ghost { border: 0; background: none; color: rgba(255, 255, 255, .35); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer }
.tu-ghost:hover { color: #fca5a5 }
.tu-ghost[hidden] { display: none }
.tu-calc {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 12px 22px;
  background: hsl(270, 76%, 60%); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px hsla(270, 76%, 60%, .9); cursor: pointer;
  transition: filter .2s, transform .1s;
}
.tu-calc svg { width: 14px; height: 14px }
.tu-calc:hover:not(:disabled) { filter: brightness(1.08) }
.tu-calc:active:not(:disabled) { transform: scale(.98) }
.tu-calc:disabled { opacity: .45; cursor: not-allowed }
.tu-error { margin: 12px 0 0; color: #fca5a5; font-size: 12.5px }
.tu-error[hidden] { display: none }

/* ---- результаты ---- */
.tu-result { margin-top: 28px }
.tu-result[hidden] { display: none }
.tu-result-title { margin: 0 0 14px; font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em }
.tu-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px }
.tu-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 14px; background: rgba(255, 255, 255, .02);
}
.tu-card span { color: rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.tu-card b { color: #fff; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums }
.tu-card.is-up b { color: #4ade80 }
.tu-card.is-down b { color: #f87171 }

.tu-outs { display: flex; flex-direction: column; gap: 8px }
.tu-out {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255, 255, 255, .06); border-left: 3px solid var(--c); border-radius: 12px;
  padding: 12px 14px; background: rgba(255, 255, 255, .02);
}
.tu-out img { width: 72px; height: 54px; flex: none; object-fit: contain }
.tu-out-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px }
.tu-out-copy b { overflow: hidden; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis }
.tu-out-copy i { color: rgba(255, 255, 255, .4); font-size: 11px; font-style: normal }
.tu-bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .07) }
.tu-bar u { display: block; height: 100%; background: var(--c); text-decoration: none }
.tu-out-meta { display: flex; min-width: 108px; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right }
.tu-out-meta b { color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums }
.tu-out-meta span { color: rgba(255, 255, 255, .4); font-size: 10.5px; font-variant-numeric: tabular-nums }
.tu-out-meta em { color: #4ade80; font-size: 12px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums }
.tu-fine { margin: 14px 0 0; color: rgba(255, 255, 255, .3); font-size: 11px; line-height: 1.5 }

/* ---- окно выбора скина ---- */
.tu-modal {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 20px 20px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px);
}
.tu-modal[hidden] { display: none }
.tu-modal-box {
  display: flex; width: min(560px, 100%); max-height: calc(100vh - 100px); flex-direction: column; gap: 12px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 16px; background: #0e1014;
  box-shadow: 0 40px 90px -40px #000;
}
.tu-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.tu-modal-head strong { color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
.tu-modal-close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 8px; padding: 0; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .5); cursor: pointer }
.tu-modal-close svg { width: 14px; height: 14px }
.tu-modal-close:hover { background: rgba(255, 255, 255, .1); color: #fff }
.tu-search { position: relative; display: block }
.tu-search svg { position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: rgba(255, 255, 255, .35); pointer-events: none }
.tu-search input {
  width: 100%; height: 44px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 0 14px 0 40px;
  background: rgba(255, 255, 255, .02); color: #fff; font-family: inherit; font-size: 13px; outline: none;
}
.tu-search input:focus { border-color: rgba(192, 132, 252, .5) !important; box-shadow: none !important }
.tu-results { display: flex; min-height: 120px; flex: 1; flex-direction: column; overflow-y: auto }
.tu-hit {
  display: flex; align-items: center; gap: 10px;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); padding: 8px 6px;
  background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer;
  transition: background .15s;
}
.tu-hit:hover { background: rgba(192, 132, 252, .08) }
.tu-hit img { width: 54px; height: 40px; flex: none; object-fit: contain }
.tu-hit-noimg { display: block; width: 54px; height: 40px; flex: none; border-radius: 6px; background: rgba(255, 255, 255, .05) }
.tu-hit-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px }
.tu-hit-copy b { overflow: hidden; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis }
.tu-hit-copy i { overflow: hidden; color: rgba(255, 255, 255, .38); font-size: 10.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis }
.tu-hit-price { flex: none; color: #4ade80; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums }
.tu-state { padding: 26px; color: rgba(255, 255, 255, .35); font-size: 12.5px; text-align: center }

@media (max-width: 860px) {
  .tu-title { font-size: 34px }
  .tu-content { padding: 32px 14px 72px }
  .tu-slots { grid-template-columns: repeat(2, 1fr) }
  .tu-summary { grid-template-columns: repeat(2, 1fr) }
  .tu-board { padding: 14px }
  .tu-out img { width: 56px; height: 42px }
  .tu-out-meta { min-width: 86px }
  .tu-modal { padding: 60px 12px 12px }
}