
html, body { background:#21201e; color:#fcf5e8; }
.indep-notice {
  position:relative; z-index:250; background:#141311; color:#cfc6b8;
  font-size:12.5px; line-height:1.45; text-align:center; padding:8px 16px;
  border-bottom:1px solid #3a362f;
}
.indep-notice a { color:#f5c71b; margin:0 6px; text-decoration:none; }
.indep-notice a:hover { text-decoration:underline; }
.navigation-menu.ready { opacity:1 !important; pointer-events:auto !important; }
.mega-menu.mounted .mega-menu__list { opacity:1 !important; }
.trade[data-v-a39541f6] {
  --inventory-height: calc(100svh - 4.75rem - var(--mega-menu-height, 0px) - 2.35rem) !important;
}
.sm-local-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:2px; padding:2px 2px 28px; width:100%;
}
.sm-skin {
  appearance:none; border:0; margin:0; padding:0; text-align:left; cursor:pointer;
  position:relative; aspect-ratio:.86; width:100%; color:#aea89b; overflow:hidden;
  background:linear-gradient(180deg,#45413c 0%, #2e2c28 70%, #262420 100%);
  border-bottom:3px solid var(--rarity, #b0c3d9); font:inherit;
}
.sm-skin:hover { background:#4e4a45; }
.sm-skin__wash {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 36%, var(--glow, rgba(255,255,255,.18)), transparent 58%);
  opacity:.55;
}
.sm-skin__art {
  position:absolute; left:4%; right:4%; top:12%; height:52%;
  display:flex; align-items:center; justify-content:center;
  color:var(--rarity, #d7d2c8);
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.45));
}
.sm-skin__art svg, .sm-skin__art img { width:100%; height:100%; object-fit:contain; }
.sm-skin__price {
  position:absolute; top:7px; right:8px; color:#fcf5e8; font-weight:700;
  font-size:12px; font-variant-numeric:tabular-nums; z-index:2;
}
.sm-skin__lock {
  position:absolute; top:8px; left:8px; z-index:2; font-size:10px; font-weight:700; color:#ffd845;
}
.sm-skin__label {
  position:absolute; left:8px; right:8px; bottom:8px; z-index:2;
  display:flex; flex-direction:column; gap:1px; font-weight:600; line-height:1.15;
}
.sm-skin__weapon { font-size:11px; color:#aea89b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-skin__name { font-size:13px; color:#fcf5e8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-skin__meta { display:flex; gap:6px; align-items:center; margin-top:2px; font-size:10px; color:#9a958b; }
.sm-skin__st { color:#f89407; }
.sm-skin__sv { color:#ffd701; }
.steam-modal[hidden], .cookie-banner[hidden] { display:none !important; }
.steam-modal {
  position:fixed; inset:0; z-index:400; background:rgba(18,18,17,.8);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.steam-modal__card {
  width:min(420px, 100%); background:#302e2a; color:#fcf5e8; border-radius:12px;
  padding:1.5rem 1.35rem 1.25rem; box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.steam-modal__card h2 { margin:0 0 .5rem; font-size:1.35rem; font-weight:650; }
.steam-modal__card p { margin:0 0 1.25rem; color:#aea89b; }
.steam-modal__card button, .cookie-banner button {
  background:#f5c71b; color:#21201e; border:0; border-radius:8px; font-weight:700;
  padding:.7rem 1rem; cursor:pointer; font:inherit;
}
.steam-modal__card button:hover, .cookie-banner button:hover { filter:brightness(1.05); }
.cookie-banner {
  position:fixed; left:12px; right:12px; bottom:12px; z-index:380;
  background:#21201e; color:#fcf5e8; border:1px solid #3f3c38; border-radius:12px;
  padding:14px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.cookie-banner p { margin:0; color:#cfc6b8; font-size:14px; max-width:720px; }
.cookie-banner a { color:#f5c71b; }
.cookie-banner__actions { display:flex; gap:8px; }
.cookie-banner__ghost { background:transparent !important; color:#fcf5e8 !important; border:1px solid #7b776f !important; }
.policy-shell { min-height:100vh; background:#21201e; }
.policy-main { max-width:760px; margin:0 auto; padding:2rem 1.25rem 7rem; color:#fcf5e8; line-height:1.6; }
.policy-main h1 { font-size:2rem; margin:0 0 .75rem; }
.policy-main p, .policy-main li { color:#d9d1c5; }
.policy-main a { color:#f5c71b; }
.policy-nav { display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin:1.25rem 0 0; padding:0; list-style:none; }
.policy-back { display:inline-block; margin-bottom:1rem; color:#f5c71b; font-weight:700; text-decoration:none; }

.steam-modal { backdrop-filter: blur(3px); }
.steam-modal__card {
  position: relative; text-align: center; width: min(440px, 100%) !important;
  background: #2a2825; border: 1px solid #3f3c38; border-radius: 16px;
  padding: 2rem 1.5rem 1.35rem;
}
.steam-modal__x {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  background: transparent !important; color: #aea89b !important; border: 0; border-radius: 8px;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.steam-modal__x:hover { color: #fcf5e8 !important; background: #3f3c38 !important; }
.steam-modal__badge {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px;
  background: #f5c71b; display: flex; align-items: center; justify-content: center;
}
.steam-modal__card h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.steam-modal__card p { font-size: 15px; line-height: 1.45; }
.steam-modal__signin {
  width: 100%; height: 3rem; margin: 0; border: 0; border-radius: .25rem;
  background: #f5c71b !important; color: #3b2600 !important; cursor: pointer;
  font-weight: 700; font-size: 1rem;
}
.steam-modal__signin:hover { background: #ffd845 !important; }
.steam-modal__signin:active { background: #ffe379 !important; }
.steam-modal__signin-label { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.steam-modal__close {
  display: block; width: 100%; margin-top: 10px; background: transparent !important;
  color: #aea89b !important; border: 0 !important; font-weight: 600; cursor: pointer; padding: .45rem;
}
.steam-modal__close:hover { color: #fcf5e8 !important; }

/* sm-trade-fit */
/* Viewport-locked trade: header stays, each inventory pane scrolls inside. */
html:has(.trade),
body:has(.trade) {
  height: 100%;
  overflow: hidden;
}
body:has(.trade) {
  display: flex;
  flex-direction: column;
}
body:has(.trade) #__nuxt,
body:has(.trade) #__layout,
body:has(.trade) #__layout > div,
body:has(.trade) .layout.layout--wide {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body:has(.trade) .layout.layout--wide > .footer,
body:has(.trade) footer.footer {
  display: none;
}
body:has(.trade) .trade.main {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow: hidden;
}
body:has(.trade) .trade__menu,
body:has(.trade) .trade__condition {
  flex: 0 0 auto;
}
body:has(.trade) .trade__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow: hidden;
  align-items: stretch;
}
body:has(.trade) .inventory-base {
  height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
body:has(.trade) .inventory-base > .cart-static,
body:has(.trade) .inventory-base > .inventory-toolbar {
  flex: 0 0 auto;
}
body:has(.trade) .inventory-grid,
body:has(.trade) [data-cart=STATIC] .inventory-grid[data-v-198316e3] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  position: relative;
}
body:has(.trade) .inventory-grid > .scrollable-content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.trade) .inventory-grid .vue-recycle-scroller.scrollable-content__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
body:has(.trade) .inventory-grid__after {
  pointer-events: none;
}

/* Receive grid matches the live column: ~6 sharp cards, name + price under the art. */
.sm-local-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  padding: 3px 3px 16px;
  width: 100%;
  align-content: start;
}
@media (max-width: 1100px) {
  .sm-local-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sm-local-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sm-skin {
  display: flex;
  flex-direction: column;
  aspect-ratio: 0.86;
  min-height: 0;
  background: #3a3834;
  border-bottom: 3px solid var(--rarity, #b0c3d9);
  cursor: pointer;
}
.sm-skin:hover { background: #484540; }
.sm-skin__wash { opacity: .28; }
.sm-skin__art {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  width: 100%;
  padding: 8px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-skin__art img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  display: block;
}
.sm-skin__label {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  flex: 0 0 auto;
  padding: 2px 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sm-skin__weapon,
.sm-skin__name {
  display: inline;
  font-size: 12px;
  font-weight: 650;
  color: #fcf5e8;
  white-space: nowrap;
}
.sm-skin__weapon::after { content: " "; }
.sm-skin__meta {
  display: inline;
  margin: 0 0 0 4px;
  font-size: 12px;
  font-weight: 650;
  color: #d7d1c6;
}
.sm-skin__meta span:last-child { display: none; }
.sm-skin__price {
  position: static;
  order: 3;
  display: block;
  flex: 0 0 auto;
  padding: 0 8px 6px;
  text-align: left;
  color: #fcf5e8;
  font-size: 13px;
  font-weight: 750;
  z-index: 2;
}
/* /sm-trade-fit */

/* Modal sign-in is an anchor; reset it to the full-width gold button. */
a.steam-modal__signin {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 3rem;
  margin: 0;
  padding: 0 1rem;
  border: 0;
  border-radius: .25rem;
  background: #f5c71b !important;
  color: #3b2600 !important;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.25px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
a.steam-modal__signin:hover {
  background: #ffd845 !important;
  color: #3b2600 !important;
  text-decoration: none;
}
a.steam-modal__signin:active {
  background: #ffe379 !important;
  color: #3b2600 !important;
  text-decoration: none;
}
a.steam-modal__signin:visited,
a.steam-modal__signin:focus {
  color: #3b2600 !important;
  text-decoration: none;
}
a.steam-modal__signin .steam-modal__signin-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  height: 100%;
  line-height: 1;
}
a.steam-modal__signin .steam-modal__signin-label svg {
  display: block;
  flex: 0 0 auto;
}
