:root {
  --bg: #07090c;
  --bg-raised: #0b0f14;
  --card-bg: #0e1319;
  --card-border: #222a34;
  --accent: #c9f64a;
  --accent-strong: #e2ff86;
  --accent-glow: rgba(201, 246, 74, 0.16);
  --neon-blue: #7dd3fc;
  --neon-purple: #a78bfa;
  --win: #8ce99a;
  --lose: #ff6b6b;
  --gold: #f6c453;
  --text: #f3f6f8;
  --text-muted: #798492;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #303946 #090c10;
}

::selection {
  background: var(--accent);
  color: #081004;
}

body {
  background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    radial-gradient(900px 480px at 50% -180px, rgba(66, 87, 103, .22), transparent 75%),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  padding-bottom: 72px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .18;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

button,
input,
select {
  font-family: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3,
.brand,
.tab-btn,
.val,
.stat-num {
  font-family: var(--sans);
  letter-spacing: -.02em;
}

/* Live market tape */
.live-drops-bar {
  height: 54px;
  padding: 0;
  gap: 0;
  background: #080b0f;
  border-bottom: 1px solid #1c232c;
}

.drops-track {
  flex: 1;
  height: 100%;
  gap: 0;
  mask-image: linear-gradient(to right, #000 93%, transparent);
}

.drop-item {
  min-width: 170px;
  height: 100%;
  gap: 8px;
  padding: 5px 13px;
  border: 0;
  border-right: 1px solid #1b222b;
  border-bottom: 2px solid var(--r-col, #4b69ff);
  border-radius: 0;
  background: #0a0e13;
  animation: marketTapeIn .38s cubic-bezier(.2, .75, .2, 1);
}

.drop-item img {
  width: 50px;
  height: 38px;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .7));
}

.drop-info { line-height: 1.25; }
.drop-name { max-width: 96px; font-size: 10px; color: #c7ced6; }
.drop-price { margin-top: 2px; color: var(--text); font-family: var(--mono); font-size: 11px; }

@keyframes marketTapeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Navigation */
.navbar {
  min-height: 70px;
  padding: 0 24px;
  background: rgba(8, 11, 15, .92);
  backdrop-filter: blur(22px) saturate(125%);
  border-bottom: 1px solid #252d37;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.brand {
  min-width: max-content;
  gap: 12px;
  display: flex;
  align-items: center;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

.brand .brand-mark {
  display: block;
  height: 44px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  padding: 0;
  margin: 0;
}

.brand .brand-tag {
  margin-left: 2px;
  padding-left: 12px;
  border-left: 1px solid #343d48;
  color: #66717d;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--mono);
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .14em;
  white-space: nowrap;
}

.nav-tabs {
  align-self: stretch;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tab-btn {
  position: relative;
  min-width: 82px;
  justify-content: center;
  padding: 0 15px;
  border: 0 !important;
  border-radius: 0;
  color: #737e8a;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
}

.tab-btn::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.tab-btn:hover {
  color: #e4e9ed;
  background: rgba(255, 255, 255, .018);
}

.tab-btn.active,
.tab-btn.admin-tab.active {
  color: #f5f8fa;
  background: linear-gradient(to top, rgba(201, 246, 74, .055), transparent 62%);
  box-shadow: none;
}

.tab-btn.active::after { transform: scaleX(1); }
.tab-btn.admin-tab { color: #7f8995; }
.tab-btn.admin-tab::after { background: #a78bfa; }

.user-actions { gap: 8px; }

.sound-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid #29323c;
  border-radius: 4px;
  background: #0d1218;
  color: #77828e;
  font-family: var(--mono);
  font-size: 15px;
  transition: color .18s, border-color .18s, background .18s;
}

.sound-toggle:hover {
  color: var(--accent);
  border-color: #526037;
  background: #11170f;
}

.bal-pill {
  min-width: 96px;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #2a333d;
  border-radius: 4px;
  background: #0b1015;
  color: #e8edf1;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

.bal-pill::before {
  content: 'BAL';
  color: #687481;
  font-size: 8px;
  letter-spacing: .1em;
}

.btn-deposit {
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid #9dbf39;
  border-radius: 4px;
  background: var(--accent);
  color: #101408;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .055em;
  box-shadow: none;
}

.btn-deposit:hover {
  transform: translateY(-1px);
  background: var(--accent-strong);
  box-shadow: 0 8px 24px rgba(201, 246, 74, .14);
}

.btn-steam,
.btn-signout {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid #29323c;
  border-radius: 4px;
  background: #10151c;
  color: #aeb7c0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
}

.btn-steam:hover,
.btn-signout:hover {
  border-color: #55616e;
  background: #161d25;
  color: #fff;
}

.user-profile { font-size: 12px; }
.user-avatar { width: 32px; height: 32px; border: 1px solid #47535f; }

.market-status {
  display: flex;
  justify-content: flex-end;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 26px 0;
  color: #67727e;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
}

.market-status > div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid #252c34;
}

.market-status > div:last-child { padding-right: 0; border-right: 0; }
.market-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.market-status strong { color: #aeb8c1; font-weight: 500; }

/* Main shell */
.container {
  max-width: 1440px;
  margin: 16px auto 0;
  padding: 0 26px;
}

.container > section {
  animation: viewIn .35s cubic-bezier(.2, .75, .2, 1);
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  position: relative;
  padding: 22px;
  margin-bottom: 14px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .018), transparent 38%),
    rgba(13, 18, 24, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

.card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 22px;
  width: 42px;
  height: 1px;
  background: var(--accent);
}

.section-title {
  min-height: 26px;
  margin-bottom: 20px;
  color: #e8edf1;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-title > span:first-child::before,
.section-title:not(:has(> span))::before {
  content: '// ';
  color: var(--accent);
}

/* Filters and fields */
.filter-bar { gap: 14px; margin-bottom: 18px; }
.filter-tabs { gap: 4px; }

.filter-btn,
.mult-btn {
  padding: 7px 11px;
  border: 1px solid #29323c;
  border-radius: 3px;
  background: #0a0e13;
  color: #77838f;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .05em;
  transition: color .15s, border-color .15s, background .15s;
}

.filter-btn:hover,
.mult-btn:hover {
  color: #dfe4e8;
  border-color: #48535f;
}

.filter-btn.active {
  border-color: #78922f;
  background: rgba(201, 246, 74, .07);
  color: var(--accent-strong);
}

.search-input,
input,
select {
  padding: 10px 12px;
  border: 1px solid #29323d;
  border-radius: 3px;
  background: #090d12;
  color: #e3e8ec;
  font-family: var(--mono);
  font-size: 10px;
  transition: border-color .18s, box-shadow .18s;
}

.search-input { width: 260px; padding-left: 34px; background-image: linear-gradient(90deg, transparent 30px, #222b35 30px, #222b35 31px, transparent 31px); }
.search-input:focus,
input:focus,
select:focus { border-color: #607333; box-shadow: 0 0 0 3px rgba(201, 246, 74, .055); }
.search-input::placeholder, input::placeholder { color: #48535f; }
select { cursor: pointer; }

/* Item matrix */
.skin-grid {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
  max-height: 548px;
  padding: 1px 5px 1px 1px;
}

.skin-card {
  min-height: 184px;
  padding: 12px;
  border: 1px solid #202833;
  border-bottom: 1px solid #202833;
  border-radius: 4px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity-color, #4b69ff) 5%, transparent), transparent 46%),
    #0a0f15;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.skin-card::before {
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  transform: none;
  background: var(--rarity-color, #4b69ff);
  opacity: .85;
}

.skin-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform: translateX(-125%);
  transition: transform .55s ease;
}

.skin-card:hover {
  z-index: 1;
  transform: translateY(-3px);
  border-color: #46515d;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity-color, #4b69ff) 9%, transparent), transparent 50%),
    #0d131a;
  box-shadow: 0 16px 28px rgba(0, 0, 0, .32);
}

.skin-card:hover::after { transform: translateX(125%); }

.skin-card.selected {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(201, 246, 74, .08), transparent 55%), #0b1115;
  box-shadow: inset 0 0 0 1px rgba(201, 246, 74, .12), 0 10px 30px rgba(0, 0, 0, .32);
}

.skin-card.selected::before { width: 3px; background: var(--accent); }

.skin-card img {
  width: 100%;
  height: 92px;
  margin-bottom: 10px;
  filter: drop-shadow(0 10px 13px rgba(0, 0, 0, .72));
}

.skin-card:hover img { transform: scale(1.035) translateY(-2px); }

.skin-w {
  color: #5f6c79;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .08em;
}

.skin-s {
  margin: 4px 0 8px;
  color: #d9dfe4;
  font-size: 12px;
  font-weight: 500;
}

.skin-p {
  color: #f2f5f7;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.skin-p::before { content: 'VALUE  '; color: #4e5965; font-size: 7px; }

.skin-card .btn-deposit,
.skin-card .btn-action {
  position: relative;
  z-index: 2;
  min-height: 28px;
  border-radius: 3px;
  font-size: 9px !important;
}

/* Upgrade console */
.multiplier-bar { gap: 4px; margin: 0; }
.multiplier-bar > span { color: #53606c !important; font-family: var(--mono); font-size: 8px !important; letter-spacing: .07em; }

.upgrade-stage {
  grid-template-columns: minmax(210px, 1fr) 320px minmax(210px, 1fr);
  gap: 24px;
  margin: 8px 0 22px;
  padding: 22px;
  border: 1px solid #1c242d;
  background:
    radial-gradient(circle at 50% 50%, rgba(201, 246, 74, .04), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,255,255,.012) 40px),
    #090d12;
}

.upgrade-slot {
  position: relative;
  min-height: 218px;
  padding: 18px;
  border: 1px solid #28323c;
  border-radius: 3px;
  background: rgba(13, 18, 24, .82);
  color: #8b96a1;
  font-family: var(--mono);
  font-size: 10px;
}

.upgrade-slot::before,
.upgrade-slot::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: #596672;
  pointer-events: none;
}

.upgrade-slot::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.upgrade-slot::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.upgrade-slot small { max-width: 230px; line-height: 1.65; font-family: var(--sans); }
.upgrade-slot > .skin-card { width: 168px; }

.upgrade-ring-box { width: 270px; height: 270px; }
.upgrade-ring-box svg { filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.upgrade-ring-box svg circle:first-of-type { stroke: #1d2630; }
.ring-percent { color: #f6f8fa; font-family: var(--mono); font-size: 38px; font-weight: 500; letter-spacing: -.05em; }
.ring-label { margin-top: 3px; color: #687582; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .12em; }

.btn-upgrade {
  position: relative;
  overflow: hidden;
  padding: 14px 18px;
  border: 1px solid #a9cb43;
  border-radius: 3px;
  background: var(--accent);
  color: #101408;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  box-shadow: 0 10px 24px rgba(201, 246, 74, .08);
}

.btn-upgrade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35), transparent 65%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}

.btn-upgrade:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--accent-strong);
  box-shadow: 0 12px 28px rgba(201, 246, 74, .14);
}

.btn-upgrade:hover:not(:disabled)::before { transform: translateX(120%); }
.btn-upgrade:disabled { border-color: #2a323a; background: #151a20; color: #4c5660; opacity: 1; }

/* Coinflip terminal */
.coin-wrap { width: 150px; height: 150px; margin: 28px auto; perspective: 900px; }
.coin-side {
  border: 2px solid #59636d;
  background: #11171e;
  box-shadow: 0 20px 40px rgba(0,0,0,.5), inset 0 0 0 5px #0a0e13, inset 0 0 32px rgba(255,255,255,.05);
}
.coin-red { border-color: #d85d5d; color: #ff8585; }
.coin-black { border-color: #65717c; color: #d5dce2; }

.side-selector { gap: 6px; }
.side-btn {
  padding: 11px;
  border: 1px solid #303943;
  border-radius: 3px;
  background: #0a0f14 !important;
  color: #6f7a85;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
}
.side-btn.red.active { border-color: #d85d5d; color: #ff8f8f; box-shadow: inset 0 0 20px rgba(216,93,93,.08); }
.side-btn.black.active { border-color: #83909c; color: #eef2f5; box-shadow: inset 0 0 20px rgba(150,160,170,.08); }

/* Admin and modal */
.admin-stats { gap: 8px; }
.stat-card {
  padding: 18px;
  border: 1px solid #29323c;
  border-radius: 3px;
  background: #090e13;
  text-align: left;
}
.stat-num { color: #dfe6eb; font-family: var(--mono); font-size: 26px; font-weight: 500; }
.stat-desc { color: #5d6975; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; }
.admin-tools { gap: 10px; }

.btn-action {
  min-height: 34px;
  border: 1px solid #697f2d;
  border-radius: 3px;
  background: #283515;
  color: #dffc88;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  transition: background .16s, border-color .16s, transform .16s;
}
.btn-action:hover { transform: translateY(-1px); border-color: #98b83d; background: #32431a; }

.modal-overlay {
  background: rgba(2, 4, 7, .82);
  backdrop-filter: blur(10px) saturate(70%);
  animation: modalFade .2s ease;
}

.modal-box {
  max-width: 760px;
  padding: 24px;
  border: 1px solid #303a45;
  border-radius: 5px;
  background: #0c1117;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .72);
  animation: modalUp .3s cubic-bezier(.2,.8,.2,1);
}
.modal-header { border-color: #242d36; }
.modal-header h3 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.btn-close { color: #73808c; font-family: var(--mono); transition: color .15s, transform .15s; }
.btn-close:hover { color: #fff; transform: rotate(90deg); }

@keyframes modalFade { from { opacity: 0; } }
@keyframes modalUp { from { opacity: 0; transform: translateY(12px) scale(.99); } }

/* Responsive behavior */
@media (max-width: 1180px) {
  .navbar { flex-wrap: wrap; gap: 0; padding: 10px 18px 0; }
  .brand { min-width: auto; }
  .nav-tabs { order: 3; width: 100%; height: 48px; margin-top: 8px; justify-content: center; border-top: 1px solid #1d252e; }
  .user-actions { margin-left: auto; }
  .upgrade-stage { grid-template-columns: 1fr 260px 1fr; gap: 14px; padding: 16px; }
  .upgrade-ring-box { width: 235px; height: 235px; }
}

@media (max-width: 820px) {
  .live-drops-bar { padding-left: 12px; }
  .navbar { position: relative; }
  .brand-tag { display: none; }
  .market-status { justify-content: flex-start; overflow-x: auto; padding: 10px 14px 0; }
  .market-status > div { white-space: nowrap; }
  .container { padding: 0 12px; }
  .card { padding: 15px; }
  .section-title { align-items: flex-start; gap: 14px; flex-direction: column; }
  .upgrade-stage { grid-template-columns: 1fr; }
  .upgrade-ring-box { grid-row: 2; }
  .upgrade-slot { min-height: 150px; }
  .admin-tools { grid-template-columns: 1fr; }
  .skin-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 600px) {
  .navbar { padding: 8px 10px 0; }
  .brand-word { font-size: 17px; }
  .brand-mark { width: 30px !important; height: 30px !important; }
  .sound-toggle { display: none; }
  .bal-pill { min-width: 80px; padding: 7px 8px; font-size: 11px; }
  .btn-deposit { padding: 7px 9px; }
  #authContainer { width: 100%; order: 4; }
  #authContainer .btn-steam, #authContainer .btn-signout { display: inline-flex; margin-top: 8px; }
  .nav-tabs { justify-content: flex-start; overflow-x: auto; height: 46px; }
  .tab-btn { min-width: 78px; padding: 0 10px; font-size: 9px; }
  .market-status > div:nth-child(n+3) { display: none; }
  .card { padding: 13px; }
  .section-title { font-size: 10px; }
  .multiplier-bar { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .multiplier-bar > span { display: none; }
  .upgrade-stage { padding: 10px; }
  .filter-bar { align-items: stretch; }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .filter-btn { white-space: nowrap; }
  .search-input, #searchMarket { width: 100% !important; }
  .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .skin-card { min-height: 168px; padding: 10px; }
  .skin-card img { height: 78px; }
  .modal-overlay { padding: 8px; }
  .modal-box { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Product information and trading flow */
.page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 42px;
  padding: 34px 22px 28px;
}

.page-intro.compact { padding-top: 28px; }

.eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
}

.page-intro h1 {
  max-width: 760px;
  color: #f3f6f8;
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}

.page-intro.compact h1 { font-size: clamp(30px, 3.7vw, 52px); }

.page-intro p {
  max-width: 650px;
  margin-top: 18px;
  color: #7c8793;
  font-size: 13px;
  line-height: 1.7;
}

.terminal-metrics {
  display: flex;
  border: 1px solid #252e38;
  background: rgba(8, 12, 16, .72);
}

.terminal-metrics > div {
  min-width: 128px;
  padding: 15px 17px;
  border-right: 1px solid #252e38;
}

.terminal-metrics > div:last-child { border-right: 0; }
.terminal-metrics span,
.terminal-metrics strong { display: block; font-family: var(--mono); }
.terminal-metrics span { margin-bottom: 7px; color: #53606c; font-size: 7px; letter-spacing: .12em; }
.terminal-metrics strong { color: #dbe2e7; font-size: 11px; font-weight: 500; }

.flow-steps {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: -3px 0 17px;
  color: #4f5a66;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
}

.flow-steps span { transition: color .2s ease; }
.flow-steps span b { margin-right: 6px; color: #3b454f; font-weight: 500; }
.flow-steps span.active { color: #d9e3c0; }
.flow-steps span.active b { color: var(--accent); }
.flow-steps i { height: 1px; background: #202832; }

.slot-kicker {
  position: absolute;
  top: 11px;
  left: 13px;
  color: #4f5c68;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
}

.deposit-preview {
  width: 100%;
  padding-top: 8px;
}

.deposit-visuals {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 102px;
  margin: 5px 0 9px;
}

.deposit-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 96px;
  margin: 0 -12px;
  border: 1px solid #2b3540;
  background: radial-gradient(circle at 50% 38%, rgba(136, 71, 255, .13), transparent 65%), #0a0f14;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .2s ease, border-color .2s ease;
}

.deposit-visual:hover { z-index: 2; border-color: #667482; transform: rotate(0) translateY(-3px); }
.deposit-visual img { width: 105px; height: 78px; object-fit: contain; filter: drop-shadow(0 9px 11px rgba(0,0,0,.72)); }
.deposit-visual small {
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: #8d99a5;
  font-family: var(--mono);
  font-size: 7px;
}

.deposit-overflow {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-left: -7px;
  border: 1px solid #3a4550;
  border-radius: 50%;
  background: #111820;
  color: #d4dbe1;
  font-family: var(--mono);
  font-size: 10px;
}

.deposit-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #202832;
}

.deposit-meta span,
.deposit-meta strong { display: block; }
.deposit-meta span { color: #5c6874; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.deposit-meta strong { margin-top: 4px; color: #e4e9ed; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.deposit-meta > strong { color: var(--gold); font-size: 16px; }

.target-preview-label {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #5a6672;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .09em;
}

.upgrade-disclosure {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: -3px 0 12px;
  color: #586470;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .025em;
}

.upgrade-disclosure span:last-child { color: #89949e; text-align: right; }

.fair-panel {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(420px, 1.25fr);
  gap: 44px;
  margin-top: 14px;
  padding: 28px 22px;
  border: 1px solid #222a33;
  background: linear-gradient(115deg, rgba(201,246,74,.035), transparent 42%), #0a0e13;
}

.fair-panel h3 { color: #e4eaee; font-size: 22px; font-weight: 500; letter-spacing: -.035em; }
.fair-panel p { max-width: 500px; margin-top: 10px; color: #697581; font-size: 11px; line-height: 1.65; }
.fair-data { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fair-data label { color: #5c6874; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.fair-data input { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; }
.fair-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fair-actions > span { color: #5c6874; font-family: var(--mono); font-size: 8px; }
.fair-actions > span strong { margin-left: 7px; color: #d6dde2; font-weight: 500; }
.fair-actions .btn-action { width: auto; min-width: 190px; margin: 0; }
.fair-reveal { grid-column: 1 / -1; padding: 11px; border: 1px solid #304028; background: #0b120b; color: #9fb879; font-family: var(--mono); font-size: 8px; line-height: 1.6; word-break: break-all; }

.deposit-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 14px;
  border: 1px solid #27313b;
}
.deposit-guide span { padding: 11px; border-right: 1px solid #27313b; color: #7e8994; font-family: var(--mono); font-size: 8px; }
.deposit-guide span:last-child { border-right: 0; }
.deposit-guide b { margin-right: 6px; color: var(--accent); font-weight: 500; }

.trade-assurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 26px 0 8px;
  border-top: 1px solid #222a33;
  border-bottom: 1px solid #222a33;
}

.trade-assurance > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  padding: 24px 22px;
  border-right: 1px solid #222a33;
}

.trade-assurance > div:last-child { border-right: 0; }
.trade-assurance b { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.trade-assurance span { color: #687480; font-size: 11px; line-height: 1.55; }
.trade-assurance strong { display: block; margin-bottom: 5px; color: #d5dce2; font-size: 12px; font-weight: 500; }

.site-footer {
  max-width: 1440px;
  margin: 24px auto 0;
  padding: 26px;
  color: #4f5964;
  font-family: var(--mono);
  font-size: 8px;
}

.site-footer > div:first-child { display: flex; align-items: center; gap: 10px; }
.site-footer .brand-mark { display: grid; place-items: center; width: 26px; height: 26px; background: #283317; color: var(--accent); }
.site-footer strong { color: #cbd3d9; font-size: 11px; letter-spacing: .06em; }
.site-footer small { padding-left: 12px; border-left: 1px solid #242c35; }
.site-footer > div:nth-child(2) { display: flex; gap: 20px; margin: 22px 0 12px; color: #5f6a75; letter-spacing: .07em; }
.site-footer p { line-height: 1.6; }

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 14px 42px;
  border: 1px solid #34404b;
  background: rgba(12, 17, 23, .97);
  color: #ced6dc;
  box-shadow: 0 18px 45px rgba(0,0,0,.48);
  font-size: 11px;
  line-height: 1.45;
  animation: toastIn .25s cubic-bezier(.2,.8,.2,1);
}

.toast::before { content: ''; position: absolute; left: 15px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.toast.error::before { background: var(--lose); box-shadow: 0 0 10px var(--lose); }
.toast.success::before { background: var(--win); box-shadow: 0 0 10px var(--win); }
.toast.out { opacity: 0; transform: translateX(10px); transition: .2s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1120px) {
  .page-intro { align-items: start; }
  .terminal-metrics { flex-direction: column; }
  .terminal-metrics > div { min-width: 150px; border-right: 0; border-bottom: 1px solid #252e38; }
  .terminal-metrics > div:last-child { border-bottom: 0; }
}

@media (max-width: 820px) {
  .page-intro { grid-template-columns: 1fr; gap: 24px; padding: 28px 8px 22px; }
  .terminal-metrics { flex-direction: row; overflow-x: auto; }
  .terminal-metrics > div { min-width: 125px; border-right: 1px solid #252e38; border-bottom: 0; }
  .trade-assurance { grid-template-columns: 1fr; }
  .trade-assurance > div { border-right: 0; border-bottom: 1px solid #222a33; }
  .trade-assurance > div:last-child { border-bottom: 0; }
  .fair-panel { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  .page-intro h1 { font-size: 36px; }
  .page-intro p { font-size: 12px; }
  .flow-steps { gap: 7px; font-size: 7px; }
  .flow-steps span b { display: block; margin: 0 0 3px; }
  .deposit-visual { width: 92px; height: 82px; }
  .deposit-visual img { width: 82px; height: 65px; }
  .upgrade-disclosure { flex-direction: column; gap: 5px; }
  .upgrade-disclosure span:last-child { text-align: left; }
  .site-footer > div:nth-child(2) { flex-direction: column; gap: 8px; }
  .fair-panel { padding: 20px 14px; }
  .fair-data { grid-template-columns: 1fr; }
  .fair-actions, .fair-reveal { grid-column: 1; }
  .fair-actions { align-items: stretch; flex-direction: column; }
  .fair-actions .btn-action { width: 100%; }
  .deposit-guide { grid-template-columns: 1fr; }
  .deposit-guide span { border-right: 0; border-bottom: 1px solid #27313b; }
  .deposit-guide span:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .container > section, .modal-overlay, .modal-box, .drop-item { animation: none !important; }
}

/* Live atmosphere */
.ambient-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-beam {
  position: absolute;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .055;
  animation: ambientDrift 18s ease-in-out infinite alternate;
}
.beam-a { top: 12%; left: -30%; background: #8edbff; }
.beam-b { right: -28%; bottom: -18%; background: var(--accent); animation-delay: -8s; animation-duration: 24s; }
.ambient-scan {
  position: absolute;
  inset: -30% 0 auto;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(201,246,74,.02), transparent);
  animation: atmosphereScan 13s linear infinite;
}
.signal-dot { position: absolute; width: 3px; height: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: .32; animation: signalFloat 9s linear infinite; }
.dot-a { left: 13%; top: 72%; }
.dot-b { left: 72%; top: 34%; animation-delay: -3s; }
.dot-c { left: 91%; top: 82%; animation-delay: -6s; }
@keyframes ambientDrift { to { transform: translate(12vw, -7vh) scale(1.12); } }
@keyframes atmosphereScan { to { transform: translateY(430%); } }
@keyframes signalFloat { 50% { opacity: .8; transform: translateY(-34px); } }

.live-drops-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), #7dd3fc, transparent);
  background-size: 240% 100%;
  animation: tapePulse 8s linear infinite;
  opacity: .45;
}
@keyframes tapePulse { to { background-position: 240% 0; } }

.market-status i { animation: statusHeartbeat 2.4s ease-in-out infinite; }
@keyframes statusHeartbeat { 50% { opacity: .35; box-shadow: 0 0 2px var(--accent); } }

/* Steam catalog controls */
.catalog-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: -6px 0 13px;
  color: #52606c;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .08em;
}
.catalog-meta span:last-child { color: #8d99a4; }
.load-more {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #303b45;
  background: #0a0f14;
  color: #8d99a4;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: .18s ease;
}
.load-more:hover { border-color: #71833d; color: var(--accent); background: #0e140e; }
.btn-trade-offer {
  display: block;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #769032;
  background: rgba(201,246,74,.08);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
}
.btn-trade-offer:hover { background: rgba(201,246,74,.13); border-color: var(--accent); }
.reference-mode #tradeModeStatus,
.reference-mode #steamBotStatus { color: #f0aa55; }

/* Coinflip arena — machined, angular and deliberately non-circular */
.round-status { display: flex; align-items: center; gap: 7px; color: #66727e; font-size: 8px; }
.round-status i { width: 5px; height: 5px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.coinflip-arena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 280px minmax(190px, 1fr);
  align-items: stretch;
  gap: 16px;
  min-height: 285px;
  padding: 20px;
  border: 1px solid #202a34;
  background:
    linear-gradient(90deg, rgba(190,68,68,.035), transparent 33%, transparent 67%, rgba(124,139,153,.035)),
    repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(255,255,255,.012) 32px),
    #090d12;
  overflow: hidden;
}
.coinflip-arena::before {
  content: 'MATCH ENGINE // 50.00 / 50.00';
  position: absolute;
  left: 20px;
  bottom: 10px;
  color: #303a44;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
}
.coinflip-arena .side-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 230px;
  padding: 28px;
  border: 1px solid #2a343e;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  text-align: left;
}
.coinflip-arena .side-btn::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; }
.coinflip-arena .side-btn.red::before { background: linear-gradient(135deg, rgba(225,75,75,.13), transparent 58%); }
.coinflip-arena .side-btn.black::before { background: linear-gradient(225deg, rgba(148,163,184,.11), transparent 58%); }
.coinflip-arena .side-btn.active::before { opacity: 1; }
.coinflip-arena .side-btn.red.active { border-color: #9d4242; box-shadow: inset 3px 0 #e45d5d; }
.coinflip-arena .side-btn.black.active { border-color: #6f7e8d; box-shadow: inset -3px 0 #aeb9c3; }
.side-index { position: relative; z-index: 1; margin-bottom: 16px; color: #596570; font-family: var(--mono); font-size: 8px; letter-spacing: .13em; }
.coinflip-arena .side-btn strong { position: relative; z-index: 1; color: #e9eef2; font-size: clamp(22px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.04em; }
.coinflip-arena .side-btn small { position: relative; z-index: 1; margin-top: 8px; color: #687480; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; }

.coin-machine { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 244px; }
.machine-rail { display: none !important; }
.coin-wrap { position: relative; z-index: 2; width: 140px; height: 140px; margin: 0; perspective: 900px; }
.coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  border-radius: 50% !important;
  clip-path: none !important;
}
.coin::after { display: none !important; }
.coin-side {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 4px solid #394550;
  border-radius: 50% !important;
  clip-path: none !important;
  background: #151b21;
  box-shadow: inset 0 0 0 2px #394550, inset 0 0 35px rgba(255,255,255,.05), 0 20px 40px rgba(0,0,0,.55);
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.coin-side::after { display: none; }
.coin-side span { font-family: var(--sans); font-size: 38px; font-weight: 600; letter-spacing: -.07em; }
.coin-side small { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; }
.coin-red { color: #ff7a7a; background: linear-gradient(145deg, #321719, #15191e 62%); transform: rotateY(0deg); }
.coin-black { color: #d7e0e7; background: linear-gradient(145deg, #29313a, #11151a 62%); transform: rotateY(180deg) !important; }
.machine-state { position: absolute; bottom: 7px; z-index: 3; padding: 5px 8px; background: #080c10; color: #53606c; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }

.coinflip-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 12px 0 16px;
  border: 1px solid #242e38;
}
.coinflip-ledger span { padding: 12px 14px; border-right: 1px solid #242e38; color: #56636f; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.coinflip-ledger span:last-child { border-right: 0; }
.coinflip-ledger b { display: block; margin-top: 5px; color: #dfe5e9; font-size: 12px; font-weight: 500; letter-spacing: 0; }

@media (max-width: 820px) {
  .coinflip-arena { grid-template-columns: 1fr 160px 1fr; padding: 12px; gap: 8px; }
  .coinflip-arena .side-btn { min-height: 190px; padding: 16px; }
  .coin-wrap { width: 116px; height: 116px; }
  .machine-rail > i { width: 130px; height: 130px; }
}
@media (max-width: 600px) {
  .coinflip-arena { grid-template-columns: 1fr 1fr; }
  .coin-machine { grid-column: 1 / -1; grid-row: 1; min-height: 180px; }
  .coinflip-arena .side-btn { min-height: 120px; padding: 14px; }
  .coinflip-ledger { grid-template-columns: 1fr; }
  .coinflip-ledger span { border-right: 0; border-bottom: 1px solid #242e38; }
  .coinflip-ledger span:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-layer *, .live-drops-bar::after, .market-status i { animation: none !important; }
}

/* Items attached to an active Steam offer stay visible, but cannot be reused. */
.skin-card.locked {
  cursor: not-allowed;
  filter: saturate(.3);
  opacity: .52;
}
.skin-card.locked:hover {
  border-color: #2a333c;
  transform: none;
}
.item-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  padding: 4px 6px;
  border: 1px solid rgba(240,170,85,.45);
  background: rgba(12,15,19,.92);
  color: #f0aa55;
  font-family: var(--mono);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .08em;
}
.btn-action:disabled,
button:disabled {
  cursor: not-allowed;
  filter: saturate(.25);
  opacity: .42;
}

/* --------------------------------------------------------------------------
   AURORA STEEL — deep navy trading-floor theme
   -------------------------------------------------------------------------- */
:root {
  --bg: #050a11;
  --bg-raised: #08121d;
  --card-bg: #0a1520;
  --card-border: #1d3344;
  --accent: #42d7ff;
  --accent-strong: #98ecff;
  --accent-glow: rgba(66, 215, 255, .18);
  --neon-blue: #42d7ff;
  --neon-purple: #7d8cff;
  --win: #45dfad;
  --lose: #ff667a;
  --gold: #68dcff;
  --text: #edf7fb;
  --text-muted: #718796;
}

* { scrollbar-color: #28475a #060c13; }
::selection { background: #42d7ff; color: #031016; }

body {
  background:
    radial-gradient(1200px 720px at 8% 4%, rgba(24, 129, 183, .15), transparent 58%),
    radial-gradient(900px 620px at 94% 36%, rgba(61, 122, 255, .075), transparent 62%),
    linear-gradient(115deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(180deg, #07111b 0%, #050a11 48%, #071019 100%);
  background-size: auto, auto, 72px 72px, auto;
  background-attachment: fixed;
}

body::before {
  opacity: .1;
  mix-blend-mode: screen;
}

.ambient-layer::before {
  content: '';
  position: absolute;
  inset: 8% -15% auto;
  height: 48vh;
  background:
    linear-gradient(90deg, transparent, rgba(70,213,255,.06), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(91,183,225,.035) 120px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(91,183,225,.025) 48px);
  transform: perspective(700px) rotateX(62deg) translateY(-35%);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
  animation: floorDrift 20s linear infinite;
}

.ambient-layer::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66,215,255,.34), rgba(111,137,255,.2), transparent);
  box-shadow: 0 0 44px rgba(66,215,255,.12);
  opacity: .55;
}

@keyframes floorDrift { to { background-position: 120px 0, 120px 0, 0 48px; } }

.ambient-beam { border-radius: 42%; filter: blur(120px); opacity: .09; }
.beam-a { top: -18%; left: -24%; background: #147db4; }
.beam-b { right: -24%; bottom: -24%; background: #385bd6; opacity: .055; }
.ambient-scan { background: linear-gradient(180deg, transparent, rgba(66,215,255,.025), transparent); }
.signal-dot { width: 4px; height: 4px; background: #7f8fff; box-shadow: 0 0 12px rgba(95,220,255,.75); }

.live-drops-bar {
  background: rgba(4, 10, 16, .96);
  border-color: #183044;
}
.drop-item { background: linear-gradient(180deg, rgba(14,37,53,.82), rgba(6,14,22,.94)); border-right-color: #173043; }
.live-drops-bar::after { background: linear-gradient(90deg, transparent, #42d7ff, #718cff, transparent); }

.navbar {
  background: rgba(5, 12, 20, .88);
  border-bottom-color: #1b3548;
  box-shadow: 0 18px 48px rgba(0, 5, 10, .38);
}
.brand .brand-mark {
  background: transparent;
  clip-path: none;
  box-shadow: none;
}
.brand .brand-tag { border-color: #294355; color: #688093; }
.tab-btn { color: #667f91; }
.tab-btn:hover { color: #c8e0eb; background: rgba(66,215,255,.025); }
.tab-btn.active,
.tab-btn.admin-tab.active { background: linear-gradient(to top, rgba(66,215,255,.07), transparent 64%); }
.tab-btn::after { background: linear-gradient(90deg, #42d7ff, #80eaff); box-shadow: 0 0 12px rgba(66,215,255,.35); }

.sound-toggle,
.bal-pill,
.btn-steam,
.btn-signout { border-color: #233d4f; background: rgba(9,22,33,.82); }
.sound-toggle:hover { color: var(--accent); border-color: #367b9b; background: #0a1d2a; }
.market-status > div { border-color: #203848; }
.market-status i { background: #45dfad; box-shadow: 0 0 9px #45dfad; }

.card {
  border-color: #1b3344;
  background:
    linear-gradient(138deg, rgba(76,190,235,.035), transparent 32%),
    linear-gradient(180deg, rgba(11,27,40,.96), rgba(7,17,27,.96));
  box-shadow: 0 22px 65px rgba(0,5,10,.3), inset 0 1px rgba(255,255,255,.018);
}
.card::before { background: linear-gradient(90deg, #42d7ff, transparent); width: 58px; }
.section-title > span:first-child::before,
.section-title:not(:has(> span))::before { color: #68dcff; }

.filter-btn,
.mult-btn { border-color: #223c4e; background: #07131e; color: #6d8798; }
.filter-btn:hover,
.mult-btn:hover { color: #d8edf5; border-color: #37617a; }
.filter-btn.active {
  border-color: #2f94bc;
  background: linear-gradient(180deg, rgba(66,215,255,.11), rgba(66,215,255,.035));
  color: #a9efff;
  box-shadow: inset 0 0 18px rgba(66,215,255,.035);
}
.search-input,
input,
select { border-color: #20394b; background-color: #06111b; }
.search-input:focus,
input:focus,
select:focus { border-color: #378db1; box-shadow: 0 0 0 3px rgba(66,215,255,.065); }

.skin-card {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 184px 158px;
  border-color: #192f40;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity-color, #4b69ff) 6%, transparent), transparent 48%),
    linear-gradient(145deg, #0a1722, #071019);
}
.skin-card:hover { border-color: #365b70; background: linear-gradient(145deg, #0d1e2c, #08131e); box-shadow: 0 18px 34px rgba(0,5,10,.42); }
.skin-card.selected {
  outline-color: #42d7ff;
  border-color: #42d7ff;
  background: linear-gradient(180deg, rgba(66,215,255,.11), transparent 58%), #081722;
  box-shadow: inset 0 0 0 1px rgba(66,215,255,.12), 0 14px 34px rgba(0,5,10,.42);
}
.skin-card.selected::before { background: #42d7ff; }

.upgrade-stage {
  border-color: #183448;
  background:
    radial-gradient(circle at 50% 50%, rgba(66,215,255,.075), transparent 27%),
    linear-gradient(90deg, transparent 49.8%, rgba(66,215,255,.04) 50%, transparent 50.2%),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(83,153,188,.025) 48px),
    #06111b;
}
.upgrade-slot { border-color: #24465b; background: rgba(8,22,33,.87); }
.upgrade-slot::before,
.upgrade-slot::after { border-color: #4d829b; }
#ringGrad stop:first-child { stop-color: #42d7ff; }
#ringGrad stop:last-child { stop-color: #ffb35c; }

.btn-deposit,
.btn-upgrade {
  border-color: #58dfff;
  background: linear-gradient(135deg, #65e2ff, #249cc8);
  color: #03131b;
  box-shadow: 0 10px 28px rgba(31,155,202,.13);
}
.btn-deposit:hover,
.btn-upgrade:hover:not(:disabled) {
  background: linear-gradient(135deg, #9aedff, #39b9e3);
  box-shadow: 0 14px 34px rgba(49,185,228,.2);
}
.btn-action { border-color: #277493; background: #0b3a4d; color: #a9edff; }
.btn-action:hover { border-color: #45c4ee; background: #0d4a61; }

.flow-steps span.active b,
.deposit-guide b,
.trade-assurance b { color: #ffb35c; }
.fair-panel { background: linear-gradient(115deg, rgba(66,215,255,.045), transparent 43%), #07131d; }
.fair-reveal { border-color: #27526a; background: #071a25; color: #86cada; }
.site-footer .brand-mark { background: #0b3345; color: #70e3ff; }
.load-more { border-color: #244254; background: #07131d; }
.load-more:hover { border-color: #3f9abb; color: #8be9ff; background: #09202c; }
.btn-trade-offer { border-color: #3183a3; background: rgba(66,215,255,.075); color: #8ceaff; }
.btn-trade-offer:hover { border-color: #57d5ff; background: rgba(66,215,255,.13); }

.coinflip-arena {
  border-color: #1c3a4d;
  background:
    linear-gradient(90deg, rgba(214,68,83,.04), transparent 33%, transparent 67%, rgba(66,215,255,.045)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(71,150,188,.025) 32px),
    #06111a;
}
.coinflip-arena .side-btn { border-color: #244153; background: rgba(7,18,28,.75) !important; }
.coinflip-arena .side-btn.black::before { background: linear-gradient(225deg, rgba(66,215,255,.12), transparent 58%); }
.coinflip-arena .side-btn.black.active { border-color: #3b8faf; box-shadow: inset -3px 0 #62dcff; }
.machine-rail::before { background: linear-gradient(transparent, #2a617b 20%, #2a617b 80%, transparent); }
.machine-rail > i { border-color: #1f4357; }
.machine-state { background: #04101a; color: #628296; }
.coin-black { color: #b7edff; background: linear-gradient(145deg, #123044, #08131d 62%); transform: rotateY(180deg) !important; }

@media (prefers-reduced-motion: reduce) {
  .ambient-layer::before { animation: none !important; }
}

/* Inventory provenance: reference catalog versus real bot-held assets. */
.filter-tabs { flex-wrap: wrap; }
.stock-filter { border-color: rgba(69,223,173,.38); }
.stock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  padding: 4px 6px;
  border: 1px solid #274354;
  background: rgba(4,13,21,.9);
  font-family: var(--mono);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .08em;
  pointer-events: none;
}
.stock-badge.live-stock {
  border-color: rgba(69,223,173,.52);
  color: #68e8bd;
  box-shadow: 0 0 16px rgba(69,223,173,.08);
}
.stock-badge.reference-stock { color: #69808f; }
.item-lock + .stock-badge { top: 31px; }
.market-index-note {
  min-height: 29px;
  margin-top: 8px;
  padding-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(86, 142, 170, .16);
  color: #557080;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .09em;
}
.market-index-note b { color: #7693a3; font-size: 7px; }

.skin-card.trade-protected {
  cursor: not-allowed;
  border-color: rgba(255, 180, 76, .34);
  background:
    linear-gradient(180deg, rgba(255, 180, 76, .055), transparent 48%),
    linear-gradient(145deg, #0a1722, #071019);
}
.skin-card.trade-protected:hover { transform: none; border-color: rgba(255, 180, 76, .45); }
.item-lock.trade-protection {
  border-color: rgba(255, 180, 76, .58);
  color: #ffc878;
  background: rgba(20, 15, 8, .92);
  box-shadow: 0 0 18px rgba(255, 180, 76, .09);
}

/* UPOIN — closed-loop network credit identity */
.upoin-balance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 128px;
  color: #b8f2ff;
  border-color: rgba(66,215,255,.38);
  background: linear-gradient(135deg, rgba(25,81,103,.42), rgba(7,19,29,.9));
  box-shadow: inset 0 0 22px rgba(66,215,255,.045), 0 0 24px rgba(66,215,255,.04);
}
.upoin-balance img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(66,215,255,.34)); }
.upoin-balance span { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.footer-links a { color: #718796; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-decoration: none; }
.footer-links a:hover { color: #8eeaff; }

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,7,12,.92);
  backdrop-filter: blur(18px) saturate(80%);
}
.age-gate[hidden] { display: none; }
.age-card {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid #28556c;
  background: linear-gradient(145deg, rgba(14,39,55,.98), rgba(5,14,22,.99));
  box-shadow: 0 28px 100px rgba(0,0,0,.65), 0 0 80px rgba(66,215,255,.07);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.age-card > img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(66,215,255,.25)); }
.age-card h2 { margin: 8px 0 12px; color: #ecfaff; font-size: 28px; }
.age-card > p { color: #8ba0ac; font-size: 12px; line-height: 1.7; }
.age-check { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; padding: 13px; border: 1px solid #203d4e; background: rgba(4,14,22,.6); color: #a4b6c0; font-size: 11px; line-height: 1.55; text-align: left; }
.age-check input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #42d7ff; }
.age-check a, .age-exit { color: #75dbf7; }
.age-exit { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }

.cookie-notice {
  position: fixed;
  z-index: 4000;
  right: 18px;
  bottom: 18px;
  width: min(520px, calc(100% - 36px));
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  border: 1px solid #294b5d;
  background: rgba(5,17,26,.98);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { color: #8ea3af; font-size: 10px; line-height: 1.55; }
.cookie-notice a { color: #74d8f5; font-family: var(--mono); font-size: 8px; }
.cookie-notice .btn-action { grid-row: 1 / span 2; grid-column: 2; margin: 0; white-space: nowrap; }

.chance-modes-disabled #viewUpgrade,
.chance-modes-disabled #viewCoinflip { filter: saturate(.35); }

@media (max-width: 760px) {
  .cookie-notice { grid-template-columns: 1fr; }
  .cookie-notice .btn-action { grid-row: auto; grid-column: auto; }
}