/* =====================================================
       INVENTORY BAR — из inventory-страницы
    ===================================================== */

    /* =====================================================
       TOP NAV — из inventory-страницы
    ===================================================== */
    /* =====================================================
       CONTRACTS PAGE
    ===================================================== */
    .contracts-page { min-height: calc(100vh - 160px); padding-bottom: 40px; }

    .contracts-page .breadcrumb-home {
      background: transparent;
      border: 0;
      border-radius: 0;
      color: #e2a915;
    }

    .contracts-page .breadcrumb-home:hover {
      background: transparent;
      border: 0;
      color: #e2a915;
    }

    .contracts-page .breadcrumb-home svg {
      fill: none;
      stroke: currentColor;
    }

    .page-title {
      text-align: center; font-size: 28px; font-weight: 800;
      text-transform: uppercase; letter-spacing: 3px;
      padding: 24px 24px 0; color: #fff;
    }

    /* SELECTED SLOTS */
    .contract-slots-section { padding: 24px 24px 0; display: flex; justify-content: center; }
    .contract-slots-wrapper { width: 100%; max-width: 1200px; }
    .contract-slots-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
    .contract-slots-grid.has-items { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; justify-content: stretch; }

    .empty-slot {
      width: 110px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
    }
    .empty-slot-circle {
      width: 90px; height: 90px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 70%);
      display: flex; align-items: center; justify-content: center; opacity: 0.35;
    }
    .empty-slot-circle img { width: 50px; height: 50px; opacity: 0.5; filter: grayscale(1); }
    .empty-slot-line { width: 90px; height: 2px; background: rgba(255,255,255,0.06); border-radius: 1px; }

    .contract-slot {
      position: relative; border-radius: 10px;
      background: linear-gradient(180deg, #1e1e32 0%, #16162a 100%);
      border: 1px solid #2a2a50; padding: 8px 6px 10px;
      display: flex; flex-direction: column; align-items: center;
      min-height: 110px; cursor: default; transition: all 0.2s; overflow: hidden;
    }
    .contract-slot.yellow { border-color: rgba(255,215,0,0.25); }
    .contract-slot.purple { border-color: rgba(151,93,248,0.25); }
    .contract-slot.red    { border-color: rgba(235,75,75,0.25); }
    .contract-slot.blue   { border-color: rgba(75,105,255,0.25); }
    .contract-slot.gray   { border-color: rgba(136,136,170,0.25); }
    .contract-slot::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 0 0 10px 10px; }
    .contract-slot.yellow::after { background: #FFD700; }
    .contract-slot.purple::after { background: #975DF8; }
    .contract-slot.red::after    { background: #eb4b4b; }
    .contract-slot.blue::after   { background: #4b69ff; }
    .contract-slot.gray::after   { background: #8888aa; }

    .slot-img-wrap {
      width: 100%; height: 52px;
      display: flex; align-items: center; justify-content: center;
      position: relative; border-radius: 6px; overflow: hidden; margin-bottom: 6px;
    }
    .slot-gun-svg { width: 56px; height: 38px; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
    .slot-price { font-size: 9px; color: #4BB543; font-weight: 600; display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
    .slot-name { font-size: 8px; color: #8888aa; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .slot-subname { font-size: 8px; color: #fff; font-weight: 600; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .slot-remove {
      position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
      background: rgba(235,75,75,0.15); border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; opacity: 0; transition: all 0.2s;
    }
    .contract-slot:hover .slot-remove { opacity: 1; }
    .slot-remove:hover { background: rgba(235,75,75,0.35); }
    .slot-remove svg { width: 12px; height: 12px; fill: #eb4b4b; }

    @keyframes slotAddIn {
      0%   { opacity: 0; transform: scale(0.5) translateY(20px); }
      60%  { transform: scale(1.08) translateY(-3px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .contract-slot.anim-in { animation: slotAddIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }

    /* STATS BAR */
    .contract-stats-bar { padding: 16px 24px 0; max-width: 1248px; margin: 0 auto; }
    .stats-bar-inner {
      background: linear-gradient(180deg, #1a1a2e 0%, #141420 100%);
      border: 1px solid #2a2a40; border-radius: 12px;
      padding: 14px 20px; display: flex; align-items: center; gap: 0; width: 100%;
    }
    .stat-item {
      display: flex; flex-direction: column; gap: 3px; padding: 0 20px;
      border-right: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
    }
    .stat-item:first-child { padding-left: 0; }
    .stat-label { font-size: 11px; color: #687894; text-transform: uppercase; letter-spacing: 0.5px; }
    .stat-value { font-size: 14px; color: #fff; font-weight: 700; display: flex; align-items: center; gap: 4px; }
    .stat-sublabel { font-size: 10px; color: #4a4a6a; }
    .coin-dot { width: 10px; height: 10px; display: inline-block; }
    .coin-dot svg { width: 10px; height: 10px; fill: #4BB543; }

    .stat-range { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
    .range-num { color: #fff; }
    .range-sep { color: #4a4a6a; }
    .range-num.high { color: #FFD700; }

    .balance-slider-wrap {
      flex: 1; padding: 0 20px; display: flex; flex-direction: column; gap: 6px; min-width: 200px;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .balance-slider-label { font-size: 11px; color: #687894; text-transform: uppercase; letter-spacing: 0.5px; }
    .balance-slider-row { display: flex; align-items: center; gap: 10px; }
    .balance-slider-track {
      flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px;
      position: relative; cursor: pointer;
    }
    .balance-slider-fill {
      position: absolute; left: 0; top: 0; height: 100%;
      background: linear-gradient(90deg, #4BB543, #6dd663); border-radius: 3px;
      transition: width 0.3s ease;
    }
    .balance-slider-thumb {
      position: absolute; top: 50%; transform: translate(-50%, -50%);
      width: 16px; height: 16px; border-radius: 50%;
      background: #fff; border: 3px solid #4BB543;
      box-shadow: 0 0 8px rgba(75,181,67,0.5); cursor: grab; transition: left 0.3s ease;
    }
    .balance-slider-thumb:active { cursor: grabbing; }
    .balance-amount {
      font-size: 14px; color: #fff; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 4px;
    }

    .balance-spinners { display: flex; gap: 4px; }
    .spinner-btn {
      width: 24px; height: 24px; border-radius: 6px; border: 1px solid #2a2a40;
      background: transparent; display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #8888aa; transition: all 0.15s; user-select: none;
    }
    .spinner-btn:hover { border-color: #4a4a7a; color: #fff; background: rgba(255,255,255,0.04); }
    .spinner-btn:active { transform: scale(0.92); }
    .spinner-btn svg { width: 12px; height: 12px; fill: currentColor; }

    .create-contract-btn-wrap { padding-left: 20px; flex-shrink: 0; }
    .create-contract-btn {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      border: none; border-radius: 10px; padding: 0 28px;
      color: #1a1a2e; font-weight: 800; font-size: 14px; letter-spacing: 1px;
      text-transform: uppercase; cursor: pointer; transition: all 0.2s;
      height: 48px; white-space: nowrap;
      display: flex; align-items: center; gap: 8px;
    }
    .create-contract-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.45); }
    .create-contract-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
    .create-contract-btn img { width: 16px; height: 16px; }

    /* CONTRACT RESULT inline */
    .contract-result-section {
      display: none; padding: 24px; width: 100%; position: relative;
      background: radial-gradient(ellipse at center, rgba(255,215,0,0.06) 0%, transparent 60%);
    }
    .contract-result-section.active { display: flex; flex-direction: column; align-items: center; }
    .result-stage {
      width: 100%; min-height: 360px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
      position: relative;
    }
    .result-circle-wrap { position: relative; opacity: 0; transform: scale(0.6); }
    .result-circle-wrap.show { animation: resultPop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    @keyframes resultPop {
      0%   { opacity: 0; transform: scale(0.6); }
      60%  { opacity: 1; transform: scale(1.08); }
      100% { opacity: 1; transform: scale(1); }
    }
    .result-circle {
      width: 180px; height: 180px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, rgba(20,20,40,0.7) 70%);
      border: 2px solid rgba(255,215,0,0.6);
      box-shadow: 0 0 0 4px rgba(255,215,0,0.18), 0 0 60px rgba(255,215,0,0.35);
      display: flex; align-items: center; justify-content: center;
      animation: winGlow 2.4s ease-in-out infinite;
    }
    @keyframes winGlow {
      0%, 100% { box-shadow: 0 0 0 4px rgba(255,215,0,0.18), 0 0 60px rgba(255,215,0,0.35); }
      50%       { box-shadow: 0 0 0 6px rgba(255,215,0,0.3),  0 0 80px rgba(255,215,0,0.5); }
    }
    .result-circle img { width: 110px; height: 75px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)); }
    .result-wear { font-size: 13px; color: #8888aa; opacity: 0; }
    .result-wear.show { animation: fadeUp 0.4s 0.2s ease forwards; }
    .result-name { font-size: 22px; color: #fff; font-weight: 700; opacity: 0; }
    .result-name.show { animation: fadeUp 0.4s 0.3s ease forwards; }
    .result-price { font-size: 18px; color: #FFD700; font-weight: 800;
      padding: 0 28px 10px; border-bottom: 2px solid #FFD700; opacity: 0;
      display: flex; align-items: center; gap: 6px;
    }
    .result-price.show { animation: fadeUp 0.4s 0.4s ease forwards; }
    .result-price svg { width: 13px; height: 13px; fill: #FFD700; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .result-actions { display: flex; gap: 10px; margin-top: 16px; opacity: 0; }
    .result-actions.show { animation: fadeUp 0.4s 0.5s ease forwards; }
    .result-take-back-btn {
      width: 44px; height: 44px; border-radius: 8px;
      background: #1e1e30; border: 1px solid #2a2a40;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #8888aa; transition: all 0.2s;
    }
    .result-take-back-btn:hover { color: #fff; border-color: #4a4a7a; }
    .result-take-back-btn svg { width: 18px; height: 18px; fill: currentColor; }
    .result-sell-btn {
      background: linear-gradient(135deg, #FFD700, #FFA500); border: none; border-radius: 8px;
      padding: 0 28px; height: 44px; color: #1a1a2e; font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.2s;
      display: flex; align-items: center; gap: 6px;
    }
    .result-sell-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,215,0,0.4); }
    .result-sell-btn svg { width: 12px; height: 12px; fill: currentColor; }
    .result-swap-btn, .result-settings-btn {
      width: 44px; height: 44px; border-radius: 8px;
      background: linear-gradient(135deg, #FFD700, #FFA500); border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #1a1a2e; transition: all 0.2s;
    }
    .result-swap-btn:hover, .result-settings-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,215,0,0.4); }
    .result-swap-btn svg, .result-settings-btn svg { width: 18px; height: 18px; fill: currentColor; }
    .result-settings-btn { background: #1e1e30; border: 1px solid #2a2a40; color: #8888aa; }
    .result-settings-btn:hover { color: #fff; border-color: #4a4a7a; }

    .spark {
      position: absolute; width: 4px; height: 4px; border-radius: 50%;
      background: #FFD700; pointer-events: none; z-index: 9999;
      animation: sparkFly 0.9s ease-out forwards;
    }
    @keyframes sparkFly {
      0%   { opacity: 1; transform: translate(0,0) scale(1); }
      100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
    }

    /* AVAILABLE ITEMS */
    .available-section { padding: 32px 24px 0; }
    .section-title {
      font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
      text-align: center; color: #fff; margin-bottom: 20px;
    }
    .available-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }

    .skin-card {
      position: relative;
      background: linear-gradient(180deg, #1e1e32 0%, #16162a 100%);
      border: 1px solid #2a2a40; border-radius: 10px;
      padding: 8px 6px 10px;
      display: flex; flex-direction: column; align-items: center;
      cursor: pointer; transition: all 0.2s; overflow: hidden;
    }
    .skin-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; }
    .skin-card.yellow::before { background: #FFD700; }
    .skin-card.purple::before { background: #975DF8; }
    .skin-card.red::before    { background: #eb4b4b; }
    .skin-card.blue::before   { background: #4b69ff; }
    .skin-card.gray::before   { background: #8888aa; }
    .skin-card:hover { transform: translateY(-3px); border-color: #4a4a7a; }
    .skin-card:hover .skin-card-bg {
      background: radial-gradient(circle at center, rgba(75,181,67,0.55) 0%, rgba(75,181,67,0.25) 45%, transparent 70%) !important;
    }
    .skin-card:hover .skin-card-cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .skin-card.selected {
      border-color: #4BB543 !important;
      box-shadow: 0 0 0 1px rgba(75,181,67,0.4), 0 4px 16px rgba(75,181,67,0.15);
    }
    .skin-card.selected .skin-card-cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(80,80,110,0.85); box-shadow: 0 0 0 2px rgba(120,120,160,0.4); }
    .skin-card.selected:hover .skin-card-bg {
      background: radial-gradient(circle at center, rgba(120,120,160,0.4) 0%, transparent 70%) !important;
    }

    .skin-card-price-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 3px; min-height: 14px; }
    .skin-card-price { font-size: 11px; color: #4BB543; font-weight: 600; display: flex; align-items: center; gap: 3px; }
    .skin-card-price svg { width: 9px; height: 9px; fill: #4BB543; }

    .skin-card-img-wrap {
      width: 100%; height: 58px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden; border-radius: 6px; margin-bottom: 5px;
    }
    .skin-card-bg {
      position: absolute; inset: 0;
      background: radial-gradient(circle at center, rgba(255,215,0,0.08) 0%, transparent 70%);
      transition: background 0.25s ease;
    }
    .skin-card.purple .skin-card-bg { background: radial-gradient(circle at center, rgba(151,93,248,0.15) 0%, transparent 70%); }
    .skin-card.red    .skin-card-bg { background: radial-gradient(circle at center, rgba(235,75,75,0.15) 0%, transparent 70%); }
    .skin-card.blue   .skin-card-bg { background: radial-gradient(circle at center, rgba(75,105,255,0.15) 0%, transparent 70%); }
    .skin-card.yellow .skin-card-bg { background: radial-gradient(circle at center, rgba(255,215,0,0.15) 0%, transparent 70%); }
    .skin-card.gray   .skin-card-bg { background: radial-gradient(circle at center, rgba(136,136,170,0.12) 0%, transparent 70%); }

    .skin-card-img { position: relative; width: 68%; height: 80%; object-fit: contain; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

    .skin-card-cursor {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0.7);
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(75,181,67,0.85); box-shadow: 0 0 0 2px rgba(75,181,67,0.4);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: all 0.25s ease; z-index: 2; pointer-events: none;
      overflow: hidden;
    }
    .skin-card.selected .skin-card-cursor { background: rgba(80,80,110,0.85); box-shadow: 0 0 0 2px rgba(120,120,160,0.4); }
    .skin-card-cursor img { width: 18px; height: 18px; object-fit: contain; }

    .skin-card-name { font-size: 9px; color: #8888aa; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1px; }
    .skin-card-subname { font-size: 9px; color: #fff; font-weight: 600; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .skin-card-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; pointer-events: none; z-index: 0; }

    /* =====================================================
       STATS SECTION (под контрактами)
    ===================================================== */
/* =====================================================
       FOOTER — из inventory-страницы
    ===================================================== */
/* =====================================================
       RESPONSIVE
    ===================================================== */
    @media (max-width: 1400px) {
      .available-grid { grid-template-columns: repeat(10, 1fr); }
      .contract-slots-grid.has-items { grid-template-columns: repeat(10, 1fr); }
    }
    @media (max-width: 1200px) {
      .available-grid { grid-template-columns: repeat(8, 1fr); }
      .stats-bar-inner { flex-wrap: wrap; gap: 12px; }
    }
    @media (max-width: 1024px) and (min-width: 768px) {
      .available-grid { grid-template-columns: repeat(8, 1fr); }
      .contract-slots-grid.has-items { grid-template-columns: repeat(5, 1fr); }
    }
    @media (max-width: 992px) {
      .available-grid { grid-template-columns: repeat(6, 1fr); }
      .contract-slots-grid.has-items { grid-template-columns: repeat(5, 1fr); }
    }
    @media (max-width: 767px) {
      .available-grid { grid-template-columns: repeat(4, 1fr); }
      .contract-slots-grid.has-items { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 480px) {
      .available-grid { grid-template-columns: repeat(3, 1fr); }
      .contract-slots-grid.has-items { grid-template-columns: repeat(3, 1fr); }
    }