/* Top Action Bar */
.inv-action-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.inv-action-bar__left { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-action-bar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.inv-action-bar__selected {
  font-size: 13px; color: var(--text2);
  padding: 6px 12px;
  background: var(--surface2); border-radius: var(--r-sm);
  white-space: nowrap;
}
.inv-action-bar__selected strong { color: var(--primary); }

/* Filter bar */
.inv-filter-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}

/* Inventory Grid */
.inv-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.inv-skin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  cursor: pointer;
  position: relative;
  transition: all .2s var(--ease-out);
  overflow: hidden;
}
.inv-skin-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.inv-skin-card.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 0 2px rgba(75,124,255,.3);
}
.inv-skin-card__checkbox {
  position: absolute; top: 8px; left: 8px;
  width: 20px; height: 20px;
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; transition: all .15s;
  z-index: 2;
}
.inv-skin-card.selected .inv-skin-card__checkbox {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.inv-skin-card__img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: contain; margin-bottom: 8px;
}
.inv-skin-card__weapon { font-size: 11px; color: var(--text3); margin-bottom: 1px; }
.inv-skin-card__name   { font-size: 12px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-skin-card__price  { font-size: 14px; font-weight: 800; color: var(--warning); }
.inv-skin-card__float  { font-size: 10px; color: var(--text3); margin-top: 2px; }
.inv-skin-card__rarity { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }

/* Withdraw panel */
.withdraw-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  margin-top: 24px;
}
.withdraw-methods {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 16px;
}
.withdraw-method {
  padding: 16px 12px; text-align: center;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  cursor: pointer; transition: all .2s;
}
.withdraw-method:hover, .withdraw-method.active {
  border-color: var(--primary); background: var(--primary-dim);
}
.withdraw-method__icon { font-size: 28px; margin-bottom: 8px; }
.withdraw-method__name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.withdraw-method__time { font-size: 11px; color: var(--text3); }

/* Steam section */
.steam-section {
  background: linear-gradient(135deg, rgba(62,118,188,.12), transparent);
  border: 1px solid rgba(62,118,188,.2);
  border-radius: var(--r-xl);
  padding: 28px;
  margin-top: 24px;
  display: flex; align-items: center; gap: 24px;
}
.steam-icon-wrap {
  width: 80px; height: 80px; flex-shrink: 0;
  background: rgba(62,118,188,.15);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.steam-info { flex: 1; }
.steam-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--success); font-weight: 600; margin-top: 6px; }
.steam-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }

/* Sort/View controls */
.view-controls { display: flex; gap: 4px; }
.view-btn {
  width: 32px; height: 32px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-size: 14px;
}
.view-btn.active { background: var(--primary-dim); border-color: var(--primary); }

/* Pagination */
.pagination { display: flex; align-items: center; gap: 6px; margin-top: 24px; justify-content: center; }
.page-btn {
  width: 36px; height: 36px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.page-btn:hover, .page-btn.active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }

/* Selected summary bar (sticky bottom) */
.selected-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  transform: translateY(100%);
  transition: transform .3s var(--ease-out);
  box-shadow: 0 -8px 32px rgba(0,0,0,.3);
}
.selected-bar.show { transform: translateY(0); }
.selected-bar__info { flex: 1; }
.selected-bar__count { font-size: 14px; font-weight: 700; }
.selected-bar__value { font-size: 22px; font-weight: 800; color: var(--warning); }
.selected-bar__actions { display: flex; gap: 8px; }

@media (max-width: 768px) {
  .inv-main-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .withdraw-methods { grid-template-columns: 1fr 1fr; }
  .steam-section { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .inv-main-grid { grid-template-columns: repeat(3, 1fr); }
}