/* Steam Game Info Grabber — Steam-inspired dark theme */
.ttb-steam { --steam:#1B2838; --steam2:#171a21; --accent:#66C0F4; --muted:#9aa8b4; --card:#0f172a; --ring:#66C0F4;
  color:#e6eef5; background:var(--steam2); padding:20px; border-radius:16px; box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset; }
.ttb-steam a { color: var(--accent); text-decoration:none; } .ttb-steam a:hover { text-decoration:underline; }

.ttb-steam-header { margin-bottom: 18px; }
.ttb-steam-title { margin:0 0 4px; font-size:24px; font-weight:800; letter-spacing:.2px; }
.ttb-steam-sub { margin:0; color: var(--muted); }

.ttb-steam-inputs { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin:14px 0 10px; }
.ttb-field { display:flex; flex-direction:column; gap:6px; flex: 1; min-width: 280px; }
.ttb-field input { background:#0b1222; border:1px solid #1f2a44; color:#e5e7eb; border-radius:10px; padding:10px 12px; outline:none; }
.ttb-field input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px rgba(102,192,244,0.25); }

.ttb-actions { display:flex; gap:10px; flex-wrap:wrap; }
.ttb-btn { background: var(--accent); color:#0a141f; border:none; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; }
.ttb-btn:hover { filter: brightness(1.05); }
.ttb-btn.ttb-ghost { background:#0b1222; border:1px solid #1f2a44; color:#cfeaff; }

.ttb-status { margin-top:10px; font-size:14px; color:#cfeaff; }
.ttb-status.ok { color:#86efac; }
.ttb-status.err { color:#fda4af; }

.ttb-steam-result { margin-top:16px; display:grid; gap:16px; }
.ttb-card { background: #101a2f; border:1px solid #1f2a44; border-radius:14px; padding:14px; }

.ttb-head .ttb-head-main { display:flex; gap:16px; align-items:flex-start; }
.ttb-cover-wrap { width:460px; max-width:48vw; }
.ttb-cover { width:100%; height:auto; border-radius:10px; border:1px solid #1f2a44; background:#0b1222; }
.ttb-head-text { display:flex; flex-direction:column; gap:8px; }
.ttb-item-title { font-size:22px; font-weight:900; }
.ttb-meta-row { display:flex; gap:8px; align-items:center; color: var(--muted); }
.ttb-id { background:#0c2034; border:1px solid #1f2a44; border-radius:999px; padding:2px 10px; font-size:12px; }
.ttb-dot::before { content:"•"; color:#475569; margin:0 4px; }

.ttb-head-side { text-align:right; min-width: 200px; display:flex; justify-content: space-between; gap:6px; }
.ttb-price { font-size:22px; font-weight:900; color:#d4f0ff; }
.ttb-discount { color:#8effc1; font-weight:800; }

.ttb-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (max-width: 1000px){ .ttb-grid { grid-template-columns: 1fr; } .ttb-cover-wrap{ width:100%;} .ttb-head .ttb-head-main{ flex-direction:column;} .ttb-head-side{ text-align:left; } }

.ttb-specs { display:grid; grid-template-columns: 1fr 2fr; gap:10px; }
.ttb-spec { display:contents; }
.ttb-spec-k { background:#0b1222; border:1px solid #1f2a44; padding:8px 10px; border-radius:10px; color:#cbd5e1; }
.ttb-spec-v { background:#0f1528; border:1px dashed #273142; padding:8px 10px; border-radius:10px; color:#e2e8f0; }

.ttb-gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.ttb-gallery img { width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid #1e293b; transition: transform .1s ease; background:#0b1222; }
.ttb-gallery a:hover img { transform: scale(1.02); }

.ttb-tags { display:flex; gap:8px; flex-wrap:wrap; }
.ttb-tag { background:#0c2034; border:1px solid #1f2a44; padding:4px 10px; border-radius:999px; font-size:12px; color:#cfeaff; }

.ttb-description { white-space: pre-wrap; background:#0f1528; border:1px solid #1e293b; border-radius:10px; padding:10px; color:#dbe5ef; }

.ttb-sysreq > div { margin-bottom: 8px; }

@media print {
  .ttb-steam { background:white; color:black; box-shadow:none; }
  .ttb-btn, .ttb-steam-inputs, .ttb-status { display:none !important; }
  .ttb-card { break-inside: avoid; }
}

.ttb-description iframe { width:100%; height:auto; aspect-ratio:16/9; display:block; border:0; }

#ttb-steam-appid { text-align: center; }