:root {
  --bg: #050912;
  --panel: #0a1320;
  --panel2: #101c2d;
  --line: #1b2b40;
  --line2: #263b53;
  --text: #eff4fa;
  --muted: #8395a9;
  --soft: #b6c7d6;
  --blue: #66a9da;
  --blue2: #9bd6f7;
}

html { scrollbar-color: #263e57 #060c16; }
body {
  background:
    radial-gradient(ellipse 1000px 620px at 51% -220px, #123252 0, transparent 73%),
    linear-gradient(180deg, #070e19 0, #050912 770px);
  color: var(--text);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
}
button, input, select { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #80c8f5;
  outline-offset: 3px;
}

.topbar {
  height: 82px;
  gap: 70px;
  border-bottom-color: #223146;
}
.logo {
  gap: 10px;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -1.5px;
}
.logo-icon {
  width: 33px;
  height: 33px;
  padding: 0;
  border: 1px solid #395d78;
  border-radius: 8px;
  background: #102840;
  box-shadow: inset 0 1px #8bd4ff25;
}
.logo-icon svg { width: 22px; height: 22px; fill: none; stroke: #a6dfff; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.logo-period { color: #80bfe9; }
.topbar nav { gap: 34px; }
.topbar nav a { font-size: 13px; letter-spacing: .1px; color: #8a9bae; }
.topbar nav a.active:after { height: 2px; background: #8fd1f8; }
.topbar-right { gap: 9px; color: #9eb4c9; }
.topbar-right strong { color: #c4d3e1; }
.live-dot { width: 5px; height: 5px; background: #7bc9ed; box-shadow: 0 0 0 3px #7bc9ed16; }
.steam-login {
  min-height: 34px;
  border-color: #3c688c;
  background: #17314b;
  color: #d9efff;
  box-shadow: inset 0 1px #9bd9ff14;
}
.steam-login:hover { background: #214361; }

.upgrade-section { padding-top: 58px; }
.overline { display: flex; align-items: center; gap: 9px; color: #79add2; font-size: 10px; letter-spacing: 1.8px; }
.overline-dash { width: 17px; height: 1px; background: #7cc0ec; }
.page-head h1 { margin: 15px 0 10px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 780; line-height: 1.03; letter-spacing: -2.3px; }
.title-dot { color: #7cc7ee; }
.page-head p, .section-heading p { color: #91a1b1; font-size: 14px; }
.head-note { color: #778da3; font-size: 10px; }
.head-note span:last-child { border: 1px solid #2e455d; border-radius: 3px; padding: 6px 8px; color: #a8c4d7; }

.upgrade-board { position: relative; margin-top: 31px; border: 1px solid #2c4057; border-radius: 9px; background: #0b1421; box-shadow: 0 24px 70px #00000045; }
.upgrade-board:before { content: ""; position: absolute; z-index: 2; left: 29px; right: 29px; top: -1px; height: 1px; background: linear-gradient(90deg, #83caf2, #5c91b5 38%, transparent 75%); }
.board-toolbar { height: 48px; background: #0b1726; color: #90a5b7; border-bottom-color: #203249; }
.board-toolbar span:first-child { color: #c8d8e8; }
.board-bottom { height: 41px; background: #09121e; border-top-color: #1b2e43; color: #7890a5; }
.board-grid { gap: 30px; padding: 27px 28px 34px; }
.slot-heading { color: #a1b3c4; letter-spacing: 1.45px; }
.slot-heading span:first-child { border-color: #466785; background: #12273b; color: #b3def9; }
.slot-card { height: 295px; border: 1px solid #2b435a; background: linear-gradient(180deg, #13243a, #0b1727 73%); box-shadow: inset 0 1px #ffffff0a; }
.slot-card:before { background: radial-gradient(ellipse 65% 52% at 50% 47%, #4884ae32, transparent 100%); }
.slot-card:hover, .slot-card.choosing { border-color: #7ab8df; background: linear-gradient(180deg, #172d47, #0c1a2c); }
.slot-image { height: 204px; padding: 20px; }
.slot-image img { height: 182px; filter: drop-shadow(0 22px 14px #0009); }
.slot-data { background: #0c1828; border-top-color: #2a4058; padding: 13px 16px 16px; }
.slot-data strong { font-size: 15px; }
.slot-data small { color: #9bb0c3; }
.slot-price { color: #d7edfa; font-size: 15px; }
.slot-action { height: 42px; background: #11283d; color: #bbd9ef; border-color: #345775; }
.slot-action:hover { background: #1c3c59; }
.roll-caption { color: #acbfd1; font-size: 10px; }
.wheel-frame { margin-top: 18px; }
.spin-wheel { border-color: #5483a4; background: conic-gradient(#74b9e7 0 var(--segment), #1b354d var(--segment) 100%); box-shadow: inset 0 0 0 7px #081523, 0 0 0 1px #28445c, 0 22px 30px #0006; }
.spin-wheel:before { border-color: #c1eaff45; }
.wheel-inner { background: radial-gradient(circle at 50% 25%, #142f48, #0a1828 67%); border-color: #3b5b76; }
.wheel-pointer { border-top-color: #e3f4ff; }
.wheel-center strong { color: #f3f8fc; font-size: 47px; }
.wheel-center span { color: #a8bdd0; }
.roll-meta { color: #9cb3c6; border-top-color: #2b4258; }
.roll-button { height: 49px; border-color: #76b7e0; background: #3a759f; color: #f5fbff; box-shadow: inset 0 1px #e5f7ff40; }
.roll-button:hover:not(:disabled) { background: #4a8ab7; }
.roll-status { color: #8ea6bb; }

.catalog-section { padding-top: 90px; }
.section-heading h2 { margin-top: 14px; font-size: clamp(27px, 2.8vw, 38px); letter-spacing: -1.3px; }
.catalog-count { color: #d4e6f4; background: #0e1d2c; border-color: #30485e; }
.catalog-shell { background: #0a1421; border-color: #2a4058; box-shadow: 0 18px 50px #0003; }
.filters, .price-filters, .catalog-toolbar, .catalog-pagination { background: #0c1928; border-color: #20354a; }
.filters input, .filters select, .price-filters label { background: #0a1624; border-color: #30475e; color: #d6e4ef; }
.filters input:focus, .filters select:focus { border-color: #8bc7ea; }
.price-filters>span { color: #91adc4; }
.selection-switch button { border-color: #35506a; background: #102235; color: #a8bfd2; }
.selection-switch button[aria-pressed=true] { border-color: #7bb6db; background: #23425d; color: #e2f4ff; }
.catalog-grid { background: #0a1421; }
.skin-card { min-height: 224px; padding: 13px; background: #0b1725; border-color: #1d3045; transition: background .18s, box-shadow .18s; }
.skin-card:hover { background: #142a40; box-shadow: inset 0 0 0 1px #6da8ce; }
.skin-card.selected { background: #183550; box-shadow: inset 0 0 0 1px #80bce3; }
.skin-top { color: #6f95ae; }
.skin-price { color: #d8efff; }
.skin-image { height: 129px; background: radial-gradient(ellipse 75% 55% at 50% 56%, #31577540, transparent); }
.skin-image img { height: 116px; }
.skin-name { color: #e8f0f8; font-size: 12px; }
.skin-finish { color: #a9bccd; }
.skin-variant { color: #6387a3; }
.data-note { color: #8aa0b5; font-size: 11px; }
.footer { border-top-color: #20344a; }
.footer .logo-icon { padding: 0; }
.footer .logo-icon svg { width: 19px; height: 19px; }
.footer>div, .footer>span { color: #8299ad; }

@media (max-width: 1100px) {
  .topbar { gap: 35px; }
  .board-grid { gap: 15px; }
  .skin-card { min-height: 214px; }
}
@media (max-width: 760px) {
  .topbar { height: 64px; gap: 20px; }
  .logo { font-size: 20px; }
  .topbar nav a { font-size: 11px; }
  .upgrade-section { padding-top: 40px; }
  .page-head h1 { letter-spacing: -1.5px; }
  .page-head p, .section-heading p { font-size: 12px; }
  .board-grid { padding: 16px 13px 23px; gap: 10px; }
  .slot-card { height: 185px; }
  .slot-image { height: 119px; }
  .slot-image img { height: 105px; }
  .slot-data { padding: 8px; }
  .slot-data strong, .slot-data small { max-width: 100%; }
  .slot-price { position: static; display: block; margin-top: 3px; font-size: 10px; background: none; padding: 0; }
  .catalog-section { padding-top: 65px; }
  .skin-card { min-height: 193px; padding: 9px; }
  .skin-image { height: 103px; }
  .skin-image img { height: 91px; }
}
@media (max-width: 470px) {
  .topbar { gap: 9px; }
  .logo { font-size: 18px; }
  .logo-icon { width: 28px; height: 28px; }
  .topbar nav { gap: 10px; }
  .steam-login { min-height: 29px; font-size: 9px; }
  .board-toolbar>span:last-child { display: none; }
  .skin-card { min-height: 202px; }
}