/* Old Steam community look (~2012-2015) */
:root {
  --steam-bg: #1b2838;
  --steam-panel: #2a3f5f;
  --steam-panel-dark: #1b2838;
  --steam-border: #3d5a80;
  --steam-blue: #66c0f4;
  --steam-text: #c7d5e0;
  --steam-muted: #8f98a0;
  --steam-header: #171a21;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--steam-bg);
  color: var(--steam-text);
  line-height: 1.4;
  font-size: 13px;
}

.steam-header {
  background: var(--steam-header);
  border-bottom: 1px solid #000;
  padding: 0;
}
.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.steam-logo {
  font-weight: bold;
  font-size: 22px;
  color: #fff;
  letter-spacing: 1px;
  font-family: Arial Black, Arial, sans-serif;
}
.header-title {
  color: var(--steam-blue);
  font-size: 14px;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
}

.panel {
  background: var(--steam-panel);
  border: 1px solid var(--steam-border);
  border-radius: 3px;
  padding: 14px;
  margin-bottom: 16px;
}

h1, h2, h3 {
  color: #fff;
  margin: 0 0 10px 0;
  font-weight: normal;
}
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; color: var(--steam-blue); }

a { color: var(--steam-blue); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

.search-box form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.search-box input[type="text"] {
  flex: 1;
  padding: 6px 8px;
  background: #1b2838;
  border: 1px solid #3d5a80;
  color: #fff;
  font-size: 13px;
}
.search-box button, form button {
  padding: 6px 16px;
  background: linear-gradient(to bottom, #67c1f5 5%, #417a9b 95%);
  border: 1px solid #67c1f5;
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
}
.search-box button:hover, form button:hover {
  background: linear-gradient(to bottom, #8fd8ff 5%, #417a9b 95%);
}

.section-title {
  margin: 20px 0 10px 0;
  border-bottom: 1px solid #3d5a80;
  padding-bottom: 4px;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.listing-card {
  background: var(--steam-panel);
  border: 1px solid var(--steam-border);
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.listing-card:hover {
  border-color: var(--steam-blue);
  background: #2f4a73;
}

.listing-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.avatar, .avatar-large {
  width: 40px;
  height: 40px;
  border: 1px solid #3d5a80;
  background: #1b2838;
  flex-shrink: 0;
}
.avatar-large { width: 64px; height: 64px; }
.persona-link {
  color: #66c0f4;
  text-decoration: none;
  font-weight: bold;
}
.persona-link:hover {
  text-decoration: underline;
}
.listing-title { color: var(--steam-blue); font-size: 12px; margin-top: 2px; }
.listing-title a { color: var(--steam-blue); }

.item-row {
  display: flex;
  gap: 4px;
  margin: 6px 0;
  flex-wrap: wrap;
  align-items: center;
  text-decoration: none;
}
.item-thumb-wrap {
  position: relative;
  display: inline-block;
}
.item-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #1b2838;
  border: 1px solid #3d5a80;
  display: block;
}
.quality-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  font-size: 9px;
  font-weight: bold;
  padding: 0 2px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  line-height: 1;
}
.amount-badge {
  position: absolute;
  top: 1px;
  left: 1px;
  font-size: 9px;
  font-weight: bold;
  padding: 0 2px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  line-height: 1;
}
.quality-unusual { color: #8650ac; }
.quality-strange { color: #cf6a32; }
.quality-vintage { color: #476291; }
.quality-genuine { color: #4d7455; }
.quality-collectors { color: #aa0000; }

.listing-desc {
  font-size: 12px;
  color: var(--steam-muted);
  margin-top: 6px;
  flex: 1;
}
.listing-footer {
  margin-top: 8px;
  text-align: right;
}
.view-offer {
  font-size: 12px;
  color: var(--steam-blue);
}
.view-offer:hover { color: #fff; }
.item-row.large .item-box {
  text-align: center;
  width: 80px;
}
.item-row.large img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #1b2838;
  border: 1px solid #3d5a80;
}
.item-name { font-size: 11px; margin-top: 2px; color: var(--steam-muted); }

.listing-desc {
  font-size: 12px;
  color: var(--steam-muted);
  margin-top: 6px;
}

.profile-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.nav-links { margin-bottom: 12px; }

form label { display: block; margin: 10px 0 4px 0; color: #fff; }
form input, form textarea {
  width: 100%;
  padding: 6px 8px;
  background: #1b2838;
  border: 1px solid #3d5a80;
  color: #fff;
  font-size: 13px;
}

.item-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.item-check {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1b2838;
  padding: 4px;
  border: 1px solid #3d5a80;
  cursor: pointer;
  font-size: 12px;
}
.item-check img { width: 32px; height: 32px; object-fit: contain; }
.item-check input { margin: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th, td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #3d5a80;
}
th { color: var(--steam-blue); background: #1b2838; }
.ip-cell { font-family: Consolas, monospace; color: #fff; }
.small { font-size: 11px; color: var(--steam-muted); word-break: break-all; }

/* Item picker */
.search-results {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #3d5a80;
  background: #1b2838;
  margin-top: 4px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  cursor: pointer;
}
.search-result:hover { background: #2f4a73; }
.search-result img { width: 32px; height: 32px; object-fit: contain; }

.selected-items { margin: 12px 0; }
.selected-item {
  display: flex;
  gap: 10px;
  background: #1b2838;
  border: 1px solid #3d5a80;
  padding: 8px;
  margin-bottom: 6px;
  align-items: flex-start;
}
.selected-item img { width: 48px; height: 48px; object-fit: contain; }
.item-controls { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.item-controls select, .item-controls button {
  padding: 4px 6px;
  background: #2a3f5f;
  border: 1px solid #3d5a80;
  color: #fff;
  font-size: 12px;
}

.quality-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 3px;
  background: #333;
  color: #fff;
}
.quality-unusual { background: #8650ac; }
.quality-strange { background: #cf6a32; }
.quality-vintage { background: #476291; }
.quality-genuine { background: #4d7455; }

.item-thumb-wrap { position: relative; display: inline-block; }
.item-meta { font-size: 10px; color: var(--steam-muted); }
.item-meta .quality { color: #8650ac; }
.item-meta .effect { color: #cf6a32; }

/* Inventory grid reuse */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.item {
  background: var(--steam-panel);
  border: 1px solid var(--steam-border);
  padding: 6px;
  text-align: center;
}
.item img { max-width: 100%; height: 64px; object-fit: contain; }