/* Outfit font is now loaded non-blocking from index.html (removes the render-blocking @import waterfall) */
:root {
  --bg: #050a11;
  --panel: #0a131e;
  --panel2: #0d1824;
  --line: #203448;
  --text: #f5f9ff;
  --muted: #8c9bad;
  --blue: #29b9ff;
  --blue2: #176fff;
  --red: #ff4554;
  --green: #26dda6;
  --gold: #ffd35f;
  --shadow: none;
  --li-blue: #20b8ff;
  --li-blue2: #246cff;
  --li-cyan: #72e4ff;
  --li-bg: #030a11;
  --li-card: #07131e;
  --li-card2: #0a1723;
  --li-line: #203b52;
  --li-text: #f5fbff;
  --li-muted: #8ca1b4
}
* {
  box-sizing: border-box
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 42px 42px
}
a {
  color: inherit;
  text-decoration: none
}
button,
input,
select,
textarea {
  font: inherit
}
.wrap {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  margin: auto
}
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate
}
.nav {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 30px
}
.brand-logo {
  justify-content: center;
  filter: none
}
.navlinks {
  display: flex;
  gap: 24px;
  color: #a8b5c5;
  font-size: 14px
}
.actions {
  margin-left: auto;
  display: flex;
  gap: 9px
}
.btn {
  border: 1px solid #294057;
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer
}
.btn:hover {
  transform: translateY(-1px);
  border-color: #45647f
}
.btn.primary {
  border: 0;
  background: linear-gradient(135deg,#1aaefc,#176cff);
  box-shadow: none
}
.btn.hot {
  border: 0;
  background: linear-gradient(135deg,#ff4550,#ff7a32);
  box-shadow: none
}
.hero-slide.active {
  display: block
}
.hero-media {
  position: absolute;
  inset: 0
}
.hero p {
  margin: 0 0 24px
}
.hero-actions {
  flex-wrap: wrap
}
.hero-nav {
  position: absolute;
  z-index: 4;
  display: flex
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  cursor: pointer
}
.arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  cursor: pointer
}
.prev {
  left: 12px
}
.next {
  right: 12px
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 15px
}
.sub {
  margin-top: 5px
}
.badge {
  display: inline-block;
  border: 1px solid #39c7ff44
}
.cat {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: .24s
}
.cat h3 {
  margin: 0;
  font-size: 15px
}
.cat p {
  margin: 6px 0 0;
  color: #77889a;
  font-size: 11px
}
.filters {
  display: flex
}
.checkchip,
.filter {
  padding: 9px 12px;
  cursor: pointer
}
.offers {
  display: grid
}
.offer {
  cursor: pointer
}
.offer:hover {
  transform: translateY(-3px);
  box-shadow: none
}
.offer > .offer-media-wrap > .offer-media {
  object-fit: cover;
  margin-bottom: 11px;
  background: #08111a
}
.old {
  text-decoration: line-through;
  margin-left: 6px
}
.gamegrid {
  display: grid
}
.game {
  cursor: pointer
}
.game-art {
  display: grid;
  place-items: center;
  font-size: 65px;
  background: radial-gradient(circle at 50% 30%,rgba(34,182,255,.2),transparent 52%),linear-gradient(135deg,#101d2a,#080f18)
}
.game-body {
  padding: 15px
}
.game-body h3 {
  margin: 0
}
.game-body p {
  margin: 7px 0 0;
  color: #78899a;
  font-size: 11px
}
.modal.show {
  display: flex
}
.modal-box {
  width: min(700px,100%);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid #2a4660;
  padding: 25px;
  box-shadow: none
}
.close {
  position: absolute;
  right: 15px;
  top: 12px;
  border: 0;
  background: 0 0;
  color: #91a1b2;
  font-size: 27px;
  cursor: pointer
}
.field {
  margin: 12px 0
}
.field label {
  display: block;
  font-size: 11px;
  color: #9aabba;
  font-weight: 800;
  margin-bottom: 6px
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #293f53;
  background: #07101a;
  color: #fff;
  outline: 0
}
.field textarea {
  min-height: 100px;
  resize: vertical
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #29b9ff;
  box-shadow: 0 0 0 3px rgba(41,185,255,.08)
}
.method {
  padding: 14px;
  border: 1px solid #2a4055;
  border-radius: 13px;
  background: #0b1520;
  color: #d5e0ea;
  cursor: pointer
}
.method:hover {
  border-color: #45caff
}
.icon-upload {
  display: flex;
  gap: 12px;
  align-items: center
}
.preview {
  width: 120px;
  height: 72px;
  object-fit: cover;
  border: 1px solid #294257;
  border-radius: 10px;
  background: #09131d
}
.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  padding: 12px 15px;
  border: 1px solid #2a536e;
  border-radius: 12px;
  background: #091722;
  color: #dff7ff;
  display: none
}
.toast.show {
  display: block
}
.admin {
  padding: 28px 0 70px
}
.tab {
  border: 1px solid #2a4054;
  background: #0b1520;
  color: #9eacbd;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800
}
.tab.active {
  background: linear-gradient(135deg,#19aefc,#176dff);
  color: #fff;
  border-color: #2bbdff
}
.stat {
  padding: 18px;
  border: 1px solid #22374b;
  border-radius: 16px;
  background: linear-gradient(145deg,#0c151f,#080f17)
}
.stat span {
  color: #7f91a4;
  font-size: 11px
}
.stat b {
  display: block;
  font-size: 28px;
  margin-top: 8px
}
.mini-btn {
  padding: 7px 9px;
  border: 1px solid #2a4257;
  background: #0c1722;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px
}
.mini-btn.danger {
  border-color: #6a3038;
  color: #ff9aa4
}
.offer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 15px
}
.full {
  grid-column: 1/-1
}
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.checkchip input {
  display: none
}
.helper {
  color: #718398;
  font-size: 10px;
  line-height: 1.5
}
.notice {
  padding: 13px 14px;
  border-radius: 12px;
  background: #241c08;
  border: 1px solid #5b4c17;
  color: #ffd76b;
  line-height: 1.6
}
.empty {
  padding: 35px;
  text-align: center;
  color: #8091a4;
  border: 1px dashed #2d4258;
  border-radius: 15px
}
@keyframes fadeIn {
  from {
    opacity: .35;
    transform: scale(1.01)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@media (max-width:950px) {
  nav {
    display: none
  }
  .hero-copy {
    width: 68%
  }
  .gamegrid,
  .offers {
    grid-template-columns: repeat(2,1fr)
  }
  .offer-form-grid {
    grid-template-columns: 1fr
  }
  .full {
    grid-column: auto
  }
}
@media (max-width:600px) {
  .wrap {
    width: calc(100% - 20px)
  }
  .brand {
    min-width: 0
  }
  .actions .btn:first-child {
    display: inline-flex
  }
  .hero {
    min-height: 480px
  }
  .hero-copy {
    width: 100%;
    padding: 34px 24px
  }
  .hero h1 {
    font-size: 39px
  }
  .gamegrid {
    grid-template-columns: 1fr 1fr
  }
  .offers {
    grid-template-columns: 1fr
  }
  .hero-nav {
    left: 24px
  }
  .offer-form-grid {
    grid-template-columns: 1fr
  }
  .full {
    grid-column: auto
  }
  .brand-logo {
    width: 54px;
    height: 46px
  }
}
.premium-offer {
  position: relative;
  overflow: hidden
}
.premium-offer:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset
}
.vip-showcase-title span {
  font-weight: 900;
  letter-spacing: .08em
}
.vip-level-grid {
  display: grid;
  overflow: auto;
  padding: 4px;
  max-height: 52vh!important
}
.vip-level-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow: none;
  transition: transform .25s,box-shadow .25s
}
.vip-level-card:hover {
  transform: translateY(-5px);
  box-shadow: none
}
.vip-level-head {
  justify-content: space-between
}
.vip-level-head span {
  letter-spacing: .12em;
  border-radius: 99px;
  background: rgba(255,255,255,.1)
}
.benefit {
  display: grid;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.07)
}
.vip-order-btn {
  box-shadow: none
}
@media (max-width:700px) {
  .vip-level-grid {
    grid-template-columns: 1fr
  }
}
.brand {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%
}
.brand-logo {
  flex: 0 0 auto
}
.navlinks {
  flex: 0 1 auto
}
.hero-media {
  z-index: 0;
  transform: scale(1.01)
}
@media (max-width:950px) {
  .nav {
    height: auto;
    min-height: 70px;
    padding: 10px 0;
    gap: 12px
  }
  .brand {
    gap: 8px
  }
  .navlinks {
    display: none
  }
  .actions {
    gap: 6px
  }
  .actions .btn {
    padding: 9px 11px;
    font-size: 12px
  }
  .hero {
    margin-top: 16px;
    min-height: 430px
  }
  .hero-slide {
    min-height: 430px
  }
  .hero-copy {
    padding: 34px 28px;
    width: 72%;
    max-width: 620px
  }
}
@media (max-width:600px) {
  .wrap {
    width: calc(100% - 16px)
  }
  .top {
    position: sticky;
    top: 0
  }
  .nav {
    min-height: 64px;
    padding: 8px 0;
    gap: 8px;
    align-items: center
  }
  .brand {
    gap: 7px;
    min-width: 0;
    max-width: calc(100% - 82px)
  }
  .brand-logo {
    width: 48px;
    height: 42px
  }
  .actions {
    margin-left: auto;
    flex: 0 0 auto
  }
  .actions .btn {
    padding: 8px 10px;
    font-size: 11px;
    border-radius: 9px
  }
  .actions .btn:first-child {
    display: inline-flex
  }
  .hero {
    margin-top: 12px;
    min-height: 430px;
    border-radius: 20px
  }
  .hero-slide {
    min-height: 430px
  }
  .hero-media {
    background: linear-gradient(180deg,rgba(7,17,27,.3),rgba(7,17,27,.94) 72%),var(--bg-image) center/cover no-repeat
  }
  .hero-copy {
    width: 100%;
    padding: 28px 20px 54px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 430px
  }
  .hero h1 {
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -1.2px;
    margin: 14px 0 10px;
    max-width: 100%
  }
  .hero p {
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 16px;
    max-width: 100%
  }
  .hero-actions {
    gap: 7px
  }
  .hero-actions .btn {
    padding: 9px 11px;
    font-size: 11px
  }
  .hero-nav {
    left: 20px;
    bottom: 13px
  }
  .section {
    margin-top: 34px
  }
  .head {
    margin-bottom: 13px
  }
  .title {
    font-size: 22px;
    line-height: 1.15
  }
  .sub {
    font-size: 11px;
    line-height: 1.45
  }
  .gamegrid {
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }
  .cat {
    min-height: 108px;
    padding: 13px;
    border-radius: 14px
  }
  .cat h3 {
    font-size: 13px
  }
  .cat p {
    font-size: 10px
  }
  .offers {
    grid-template-columns: 1fr;
    gap: 10px
  }
  .offer-box {
    padding: 12px;
    border-radius: 15px
  }
  .offer {
    padding: 13px;
    border-radius: 14px
  }
  .offer img {
    height: 145px
  }
  .game-art {
    height: 120px
  }
}
#categoryChecks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center
}
#categoryChecks .checkchip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px
}
@media (max-width:600px) {
  .top .nav {
    display: flex!important;
    gap: 8px;
    align-items: center
  }
  .top .brand {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: none
  }
  .top .brand-logo {
    flex: 0 0 42px
  }
  .top .actions {
    display: flex;
    flex: 0 0 auto
  }
  .admin .card {
    overflow: visible
  }
  #categoryChecks {
    gap: 7px
  }
  #categoryChecks .checkchip {
    padding: 9px 10px;
    font-size: 10px
  }
  .top .brand-logo {
    flex-basis: 38px
  }
  .offer-media {
    height: 145px
  }
  body,
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
  }
  .top .nav {
    box-sizing: border-box;
    width: calc(100% - 16px)!important;
    height: auto!important;
    display: flex!important;
    align-items: center!important;
    gap: 7px!important;
    padding: 8px 0!important;
    min-height: 64px!important
  }
  .top .brand {
    display: flex!important;
    align-items: center!important;
    gap: 6px!important;
    flex: 0 0 auto!important;
    min-width: 0!important;
    overflow: visible!important
  }
  .top .brand-logo {
    width: 38px!important;
    height: 36px!important;
    min-width: 38px!important;
    flex: 0 0 38px!important
  }
  .top .brand-logo img {
    max-width: 100%;
    max-height: 100%;
    display: block
  }
  .top .actions {
    display: flex!important;
    align-items: center!important;
    gap: 5px!important;
    flex: 0 0 auto!important;
    margin-left: auto!important;
    display: flex!important
  }
  .top .actions .btn {
    font-size: 9px!important;
    line-height: 1!important;
    padding: 8px 9px!important;
    white-space: nowrap!important
  }
  .top .actions .btn:first-child {
    display: inline-flex!important
  }
  .hero {
    position: relative!important;
    z-index: 1!important;
    margin-top: 10px!important;
    clear: both!important
  }
  #games,
  #offers,
  .cat,
  .game,
  .gamegrid,
  .offer,
  .section,
  main {
    position: relative;
    z-index: 1
  }
  .hero-copy {
    position: relative!important;
    z-index: 3!important
  }
  .admin .offer-form-grid,
  .vip-level-grid {
    grid-template-columns: 1fr!important
  }
  .top {
    overflow: visible;
    position: relative!important;
    z-index: 100!important
  }
  main {
    position: relative!important;
    z-index: 1!important
  }
  #games,
  #offers {
    clear: both!important
  }
  .top .actions .btn#loginBtn {
    display: inline-flex!important;
    visibility: visible!important;
    opacity: 1!important
  }
}
#categoryChecks .checkchip {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  appearance: none;
  border: 1px solid #263b50;
  background: #0b141e;
  color: #9dadbf;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: .18s;
  touch-action: manipulation
}
#categoryChecks .checkchip.active {
  background: linear-gradient(135deg,#168fd7,#1767ee);
  border-color: #2cbfff;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: none
}
.offer-media {
  background: #08111a;
  display: block;
  object-fit: cover
}
body {
  background: radial-gradient(circle at 12% 0,rgba(0,166,255,.1),transparent 30%),radial-gradient(circle at 90% 16%,rgba(0,105,255,.08),transparent 28%),#030a11;
  color: var(--li-text);
  overflow-x: hidden
}
.nav {
  min-height: 76px
}
.brand-logo {
  width: auto;
  max-width: 110px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  flex-shrink: 0
}
.brand-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: none
}
.actions .btn {
  border-radius: 12px
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%,rgba(27,185,255,.12),transparent 25%),linear-gradient(0,rgba(3,10,17,.76),transparent 50%);
  z-index: 1;
  pointer-events: none
}
.hero h1 {
  text-shadow: none
}
.hero h1 span {
  display: block;
  font-size: 22px;
  letter-spacing: .5px;
  margin-top: 12px
}
.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px
}
.head {
  margin-bottom: 16px
}
.cat.active,
.cat:hover {
  transform: translateY(-2px);
  border-color: #2ebfff!important;
  box-shadow: none!important
}
.filters {
  gap: 7px!important;
  margin-bottom: 14px!important;
  overflow-x: auto;
  flex-wrap: nowrap!important;
  padding-bottom: 4px;
  scrollbar-width: none
}
.filters::-webkit-scrollbar {
  display: none
}
.filter {
  white-space: nowrap!important;
  padding: 9px 12px!important
}
.offer-topline {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}
.badge {
  font-size: 8px!important;
  padding: 6px 8px!important;
  border-radius: 999px!important;
  background: rgba(8,31,46,.88)!important;
  color: #80ddff!important;
  border-color: rgba(61,194,255,.24)!important
}
.no-login-badge {
  color: #75ffbd!important;
  border-color: rgba(74,255,175,.28)!important;
  background: rgba(16,91,61,.18)!important
}
.vip-badge {
  color: #e6d58a!important;
  border-color: rgba(255,217,103,.26)!important
}
.no-login-strip {
  border-radius: 10px;
  background: linear-gradient(90deg,rgba(28,197,121,.14),rgba(21,129,92,.05));
  border: 1px solid rgba(75,255,179,.2);
  color: #7dffc2;
  font-weight: 900
}
.old {
  color: #66798b!important
}
.gamegrid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 13px
}
.game-art {
  height: 125px!important
}
.game-body h3 {
  color: #f3faff
}
.game.active {
  border-color: #31bfff;
  box-shadow: none
}
.support-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px
}
.support-copy {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.support-copy strong {
  font-size: 16px
}
.support-copy span {
  font-size: 11px;
  color: #7f95a8
}
.support-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}
.support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 11px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #27465c;
  color: #fff;
  background: #0a1722
}
.support-btn.whatsapp {
  border-color: rgba(55,232,145,.35);
  color: #7effc2
}
.support-btn.facebook {
  border-color: rgba(74,142,255,.35);
  color: #82b4ff
}
.support-btn.disabled {
  opacity: .45;
  pointer-events: none
}
.modal-box {
  border-radius: 22px!important;
  background: linear-gradient(150deg,#0b1925,#050d15)!important;
  border-color: #26465d!important
}
.offer-modal-box {
  width: min(760px,100%)!important
}
.modal-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 10px
}
.offer-modal-box h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 8px 0
}
.modal-price {
  font-size: 30px;
  font-weight: 1000;
  margin: 15px 0
}
.modal-access {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 13px;
  margin: 14px 0;
  border: 1px solid
}
.modal-access span {
  font-size: 10px;
  color: #8ea4b5
}
.no-login-access {
  border-color: rgba(69,240,161,.24);
  background: rgba(31,176,108,.07);
  color: #77ffc2
}
.login-access {
  border-color: rgba(51,180,255,.24);
  background: rgba(30,138,220,.07);
  color: #72dfff
}
.vip-showcase-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.vip-showcase-title span {
  font-size: 17px
}
.vip-showcase-title small {
  opacity: .7;
  font-size: 9px;
  color: #7d92a3
}
.order-box {
  width: min(560px,100%)!important
}
.order-kicker {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #5bcfff;
  font-weight: 900
}
.order-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  margin: 12px 0 17px;
  border-radius: 12px;
  border: 1px solid #1e3b50;
  background: #07131e
}
.order-summary span {
  font-size: 8px;
  color: #73dcff;
  font-weight: 900
}
.order-summary strong {
  font-size: 13px
}
.order-summary b {
  font-size: 18px
}
.credential-panel {
  margin: 15px 0;
  padding: 14px;
  border-radius: 15px;
  border: 1px solid rgba(55,185,255,.2);
  background: rgba(9,27,40,.65)
}
.credential-title {
  font-size: 13px;
  font-weight: 900
}
.credential-sub {
  font-size: 10px;
  color: #7f95a8;
  margin-top: 4px
}
.credential-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin: 11px 0
}
.credential-option {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #25445a;
  background: #081620;
  color: #9fb3c2;
  font-weight: 800;
  cursor: pointer
}
.credential-option.active {
  color: #fff;
  border-color: #31bfff;
  background: linear-gradient(135deg,#128fd5,#1e65e8)
}
.secure-note {
  font-size: 9px;
  line-height: 1.5;
  color: #7890a2;
  border-top: 1px solid #183043;
  padding-top: 9px;
  margin-top: 10px
}
.submit-order {
  width: 100%;
  margin-top: 10px
}
@media (max-width:950px) {
  .offers {
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: start;
    grid-auto-rows: max-content
  }
  .gamegrid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .hero-copy {
    width: 80%!important
  }
}
@media (max-width:600px) {
  .nav {
    min-height: 67px!important;
    padding: 7px 0!important
  }
  .brand {
    gap: 7px!important;
    max-width: calc(100% - 145px)!important
  }
  .brand-logo {
    width: 43px!important;
    height: 38px!important
  }
  .actions {
    gap: 5px!important
  }
  .actions .btn {
    font-size: 10px!important;
    padding: 8px 9px!important
  }
  .hero {
    min-height: 405px!important;
    margin-top: 10px!important;
    border-radius: 19px!important
  }
  .hero-slide {
    min-height: 405px!important
  }
  .hero-media {
    background: linear-gradient(180deg,rgba(3,10,17,.2),rgba(3,10,17,.94) 70%),var(--bg-image) center/cover no-repeat!important
  }
  .hero-copy {
    width: 100%!important;
    min-height: 405px!important;
    padding: 24px 18px 42px!important;
    justify-content: flex-end
  }
  .hero h1 {
    font-size: 34px!important;
    letter-spacing: -1.4px!important;
    margin: 12px 0 7px!important
  }
  .hero h1 span {
    font-size: 17px;
    margin-top: 8px
  }
  .hero p {
    font-size: 11px!important;
    line-height: 1.45
  }
  .hero-actions .btn {
    font-size: 10px;
    padding: 9px 11px
  }
  .section {
    margin-top: 32px!important
  }
  .title {
    font-size: 23px!important
  }
  .sub {
    font-size: 10px!important
  }
  .cat {
    min-height: 72px!important;
    padding: 11px!important;
    gap: 8px!important
  }
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 9px!important;
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  .offer {
    padding: 0!important;
    align-self: start!important;
    height: fit-content!important;
    min-height: 0!important
  }
  .offer-media {
    height: 112px!important
  }
  .offer h3 {
    font-size: 9.5px!important;
    line-height: 1.2!important
  }
  .offer small {
    font-size: 7.5px!important;
    min-height: 0!important
  }
  .price {
    font-size: 11px!important;
    margin: 1px 0 3px!important
  }
  .offer-box {
    padding: 10px!important
  }
  .filters {
    margin-bottom: 10px!important
  }
  .filter {
    font-size: 9px!important;
    padding: 8px 10px!important
  }
  .gamegrid {
    grid-template-columns: 1fr 1fr!important;
    gap: 8px!important
  }
  .game-art {
    height: 100px!important;
    font-size: 52px
  }
  .game-body {
    padding: 11px!important
  }
  .game-body h3 {
    font-size: 13px
  }
  .game-body p {
    font-size: 9px
  }
  .support-box {
    flex-direction: column;
    align-items: stretch;
    padding: 15px
  }
  .support-actions {
    display: grid;
    grid-template-columns: 1fr 1fr
  }
  .support-btn {
    font-size: 9px;
    padding: 10px 7px
  }
  .offer-modal-box {
    padding: 17px!important
  }
  .offer-modal-box h2 {
    font-size: 25px
  }
  .modal-price {
    font-size: 27px
  }
  .vip-level-grid {
    grid-template-columns: 1fr!important
  }
  .credential-grid {
    grid-template-columns: 1fr
  }
  .order-summary {
    grid-template-columns: 1fr auto
  }
  .order-summary span {
    grid-column: 1/-1
  }
}
.login-panel {
  display: none;
  animation: .22s loginPanelIn
}
.login-panel.active {
  display: block
}
@keyframes loginPanelIn {
  from {
    opacity: 0;
    transform: translateY(5px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.login-panel h3 {
  text-align: center;
  margin: 0;
  font-size: 17px
}
.login-panel p {
  text-align: center;
  color: #8298ab;
  font-size: 12px;
  line-height: 1.55;
  margin: 5px 0 14px
}
.logged-in-panel h2 {
  margin: 4px 0;
  color: #10283a
}
.account-status {
  margin: 16px auto;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(58,121,157,.2);
  color: #607585;
  font-size: 12px
}
.logout-full {
  width: 100%;
  margin-top: 5px
}
.hero-slide {
  display: block!important;
  position: absolute!important;
  inset: 0!important;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px) scale(.985);
  transition: opacity .62s,transform .72s cubic-bezier(.22,.8,.24,1),visibility .62s;
  pointer-events: none
}
.hero-slide.active {
  opacity: 1!important;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  animation: none!important
}
.hero {
  isolation: isolate;
  overflow: hidden
}
.hero .arrow {
  backdrop-filter: none
}
.hero-media {
  transition: transform 1.2s
}
.hero-slide.active .hero-media {
  transform: scale(1.025)
}
.hero .hero-copy {
  max-width: 620px
}
.hero-actions .btn {
  backdrop-filter: none
}
.animated-li-mark {
  position: relative;
  isolation: isolate;
  overflow: visible!important;
  width: 68px!important;
  height: 54px!important;
  display: flex!important;
  align-items: center;
  justify-content: center;
  gap: 0
}
.animated-li-mark:before {
  content: "";
  position: absolute;
  inset: -7px -10px;
  z-index: -2;
  border-radius: 50%;
  background: conic-gradient(from 0,rgba(22,201,255,.05),rgba(72,80,255,.36),rgba(0,229,255,.08),rgba(159,64,255,.28),rgba(22,201,255,.05));
  filter: none;
  animation: 5.5s linear infinite liGuardianSpin;
  display: none !important
}
.animated-li-mark:after {
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(20,207,255,.25) 0,rgba(53,92,255,.1) 38%,transparent 70%);
  animation: 3.2s ease-in-out infinite liGuardianPulse
}
@keyframes liGuardianSpin {
  to {
    transform: rotate(360deg)
  }
}
.cat {
  text-align: left;
  background: radial-gradient(circle at 90% 0,rgba(32,184,255,.11),transparent 34%),linear-gradient(145deg,#0b1a27,#06101a)!important;
  border: 1px solid #21435a!important
}
.cat:before {
  transform: translateX(-110%);
  transition: .65s;
  pointer-events: none
}
.cat.active:before,
.cat:hover:before {
  transform: translateX(110%)
}
.filter.active {
  box-shadow: none
}
.media-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.media-upload-box {
  padding: 14px;
  border: 1px solid #203c52;
  border-radius: 15px;
  background: linear-gradient(145deg,#091724,#06111a)
}
.media-label {
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 1px;
  color: #70d9ff;
  margin-bottom: 10px
}
.media-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0
}
.slider-preview {
  aspect-ratio: 16/9
}
.crop-box {
  width: min(720px,100%)!important
}
.crop-kicker {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #65d8ff;
  font-weight: 1000
}
.crop-stage {
  touch-action: none;
  cursor: grab;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 16px;
  background: #02080d;
  border: 1px solid #25445b;
  margin: 15px 0
}
.crop-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform .08s linear
}
.crop-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px
}
.crop-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #9eb2c2;
  font-size: 9px;
  font-weight: 900
}
.crop-controls input {
  width: 100%
}
.crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px
}
.logged-in-panel .logout-full {
  background: linear-gradient(135deg,#ff5c68,#ff7d55)!important
}
@media (max-width:950px) {
  .media-upload-row {
    grid-template-columns: 1fr
  }
}
@media (max-width:600px) {
  .brand-logo {
    width: 48px!important;
    height: 42px!important
  }
  .hero {
    min-height: 235px!important;
    height: 235px!important;
    margin-top: 9px!important;
    border-radius: 17px!important
  }
  .hero-slide {
    min-height: 235px!important
  }
  .hero-media {
    background: linear-gradient(180deg,rgba(3,10,17,.08),rgba(3,10,17,.9) 78%),var(--bg-image) center/cover no-repeat!important
  }
  .hero-copy {
    min-height: 235px!important;
    height: 235px!important;
    padding: 15px 16px 35px!important;
    justify-content: flex-end!important
  }
  .hero h1 {
    font-size: 24px!important;
    line-height: 1.02!important;
    margin: 7px 0 4px!important;
    letter-spacing: -.7px!important
  }
  .hero h1 span {
    font-size: 14px!important;
    margin-top: 4px!important
  }
  .hero p {
    font-size: 9px!important;
    line-height: 1.35!important;
    margin: 0 0 8px!important;
    max-width: 90%!important
  }
  .hero-actions {
    gap: 5px!important;
    margin-top: 3px!important
  }
  .hero-actions .btn {
    padding: 7px 9px!important;
    font-size: 9px!important;
    border-radius: 9px!important
  }
  .hero .arrow {
    width: 28px;
    height: 28px;
    font-size: 15px
  }
  .hero-nav {
    bottom: 8px!important
  }
  .dot {
    width: 5px;
    height: 5px
  }
  .dot.active {
    width: 18px
  }
  .section {
    margin-top: 27px!important
  }
  .cat {
    min-height: 82px!important;
    padding: 10px!important;
    border-radius: 13px!important
  }
  .crop-controls,
  .media-upload-row {
    grid-template-columns: 1fr
  }
  .crop-box {
    padding: 17px!important
  }
}
.highlight-card {
  flex: 0 0 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #1d4058;
  border-radius: 13px;
  background: linear-gradient(145deg,#0a1a28,#07111a);
  color: #fff;
  text-align: left;
  cursor: pointer
}
.highlight-card:hover {
  border-color: #2dbbff;
  transform: translateY(-1px)
}
.highlight-card img {
  object-fit: cover;
  border-radius: 8px
}
.highlight-card span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1
}
.highlight-card small {
  color: #5ed3ff;
  margin-top: 3px
}
.highlight-card i {
  font-style: normal;
  color: #58cfff;
  font-size: 15px
}
.payment-panel {
  margin: 15px 0;
  padding: 14px;
  border-radius: 15px;
  border: 1px solid rgba(55,185,255,.2);
  background: rgba(9,27,40,.65)
}
.payment-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
  margin: 11px 0
}
.payment-option {
  padding: 11px 6px;
  border-radius: 10px;
  border: 1px solid #25445a;
  background: #081620;
  color: #a9bdcb;
  font-weight: 900;
  cursor: pointer
}
.payment-option.active {
  color: #fff;
  border-color: #31bfff;
  background: linear-gradient(135deg,#128fd5,#1e65e8)
}
.profile-box {
  width: min(520px,100%)!important;
  padding: 22px!important
}
.profile-hero {
  text-align: center
}
.profile-avatar-wrap {
  position: relative;
  display: block;
  width: 92px;
  height: 92px;
  margin: 4px auto 12px;
  cursor: pointer
}
.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg,#20b8ff,#256ef0);
  color: #fff;
  font-size: 35px;
  font-weight: 1000
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.profile-avatar-wrap > span {
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #176ff0;
  border: 1px solid #b9d8eb;
  font-size: 13px
}
.profile-hero h2 {
  margin: 5px 0 3px
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 20px
}
.profile-stats > div {
  padding: 14px 7px;
  text-align: center;
  border-radius: 13px
}
.profile-stats b {
  display: block;
  font-size: 20px;
  color: #fff
}
.profile-stats small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: #7890a2
}
@media (max-width:600px) {
  .highlight-card {
    min-width: 170px;
    flex-basis: 170px
  }
  .payment-grid {
    grid-template-columns: repeat(2,1fr)
  }
  .profile-box {
    padding: 18px!important
  }
  .hero,
  .hero-slide {
    min-height: 255px!important;
    height: 255px!important
  }
  .hero-copy {
    min-height: 255px!important;
    padding: 18px 16px 34px!important
  }
  .hero h1 {
    font-size: 27px!important
  }
  .hero p {
    font-size: 10px!important
  }
  .hero-actions .btn {
    padding: 8px 10px;
    font-size: 9px
  }
  .cat {
    min-height: 56px!important;
    padding: 9px 8px!important;
    border-radius: 12px!important
  }
  .cat strong {
    font-size: 10px!important
  }
  .offer-detail-strip {
    grid-template-columns: 1fr 1fr
  }
  .offer-detail-strip > div:last-child {
    grid-column: 1/-1
  }
}
.offer-detail-strip {
  margin: 14px 0
}
.offer-detail-strip > div {
  padding: 10px;
  border: 1px solid rgba(61,180,255,.18);
  border-radius: 12px;
  background: rgba(7,22,34,.75)
}
.offer-detail-strip small {
  display: block;
  font-size: 8px;
  color: #6e93a8;
  font-weight: 900;
  letter-spacing: .08em
}
.offer-detail-strip b {
  display: block;
  margin-top: 4px;
  color: #eaf7ff;
  font-size: 10px
}
.profile-avatar-wrap:hover .profile-avatar {
  filter: brightness(1.08)
}
.hero-copy {
  min-height: 310px!important;
  justify-content: center!important
}
.hero .arrow {
  width: 30px!important;
  height: 30px!important;
  font-size: 16px!important;
  background: rgba(2,9,15,.48)!important
}
.hero-nav {
  transform: translateX(-50%);
  bottom: 9px!important;
  left: 50%!important
}
.highlight-card {
  min-width: 230px!important;
  flex-basis: 230px!important;
  min-height: 62px!important;
  padding: 8px!important
}
.highlight-card img {
  width: 72px!important;
  height: 50px!important
}
.highlight-card b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px!important
}
.highlight-card small {
  font-size: 10px!important
}
.cat {
  min-height: 64px!important;
  height: 64px!important;
  padding: 9px 11px!important;
  border-radius: 14px!important;
  display: flex!important;
  align-items: center!important;
  gap: 9px!important
}
.cat strong {
  font-size: 11px!important;
  line-height: 1.15!important
}
.section {
  margin-top: 28px!important
}
.section .head {
  margin-bottom: 10px!important
}
.section .head .sub {
  font-size: 10px!important
}
.vip-showcase {
  margin-top: 16px
}
.vip-level-card {
  padding: 11px!important;
  border-radius: 14px!important
}
.vip-level-head {
  margin-bottom: 8px!important;
  display: flex!important;
  align-items: center!important;
  gap: 6px!important
}
.vip-level-head b {
  font-size: 12px!important;
  flex: 1;
  min-width: 0
}
.vip-level-head span {
  font-size: 8px!important;
  padding: 3px 6px!important
}
.vip-tier-icon {
  width: 34px!important;
  height: 34px!important;
  object-fit: contain!important;
  flex: 0 0 34px!important;
  filter: none
}
.benefit {
  grid-template-columns: 36px minmax(0,1fr)!important;
  gap: 5px!important;
  padding: 6px 0!important;
  min-width: 0!important
}
.benefit i {
  width: 36px!important;
  height: 34px!important
}
.benefit i .icon-inline {
  width: 32px!important;
  height: 32px!important
}
.benefit strong {
  font-size: 12px!important;
  min-width: 0!important;
  white-space: nowrap!important;
  overflow: visible!important
}
.benefit small {
  opacity: .62;
  grid-column: 2;
  font-size: 8px!important;
  margin-top: -2px;
  min-width: 0!important;
  white-space: nowrap!important;
  overflow: visible!important
}
.loyalty-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(30,129,255,.12),rgba(255,196,42,.07));
  border: 1px solid rgba(74,180,255,.22)
}
.loyalty-strip img {
  object-fit: contain
}
.loyalty-strip b {
  color: #fff
}
.loyalty-strip span {
  color: #9eb5c5
}
.loyalty-detail {
  display: flex!important;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: #ffe36d!important;
  font-size: 12px!important
}
.loyalty-detail img {
  width: 25px;
  height: 25px;
  object-fit: contain
}
.hero .arrow,
.hero .dot,
.hero-actions {
  cursor: pointer
}
@media (max-width:900px) {
  .vip-level-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:600px) {
  .hero {
    min-height: 215px!important;
    height: 215px!important;
    margin-top: 9px!important;
    border-radius: 17px!important
  }
  .hero-slide {
    min-height: 215px!important;
    height: 215px!important
  }
  .hero-media {
    background: linear-gradient(180deg,rgba(3,10,17,.16),rgba(3,10,17,.9) 82%),var(--bg-image) center/cover no-repeat!important
  }
  .hero-copy {
    width: 100%!important;
    min-height: 215px!important;
    padding: 12px 14px 27px!important;
    justify-content: flex-end!important
  }
  .hero h1 {
    font-size: 23px!important;
    line-height: 1.03!important;
    margin: 6px 0 4px!important;
    max-width: 78%!important
  }
  .hero h1 span {
    font-size: 13px!important;
    margin-top: 3px!important
  }
  .hero p {
    font-size: 8px!important;
    line-height: 1.3!important;
    margin: 0 0 6px!important;
    max-width: 82%!important
  }
  .hero-actions {
    gap: 4px!important
  }
  .hero-actions .btn {
    padding: 6px 8px!important;
    font-size: 8px!important;
    border-radius: 8px!important
  }
  .hero .arrow {
    width: 25px!important;
    height: 25px!important;
    font-size: 14px!important
  }
  .hero .prev {
    left: 7px!important
  }
  .hero .next {
    right: 7px!important
  }
  .hero-nav {
    bottom: 6px!important
  }
  .dot {
    width: 5px!important;
    height: 5px!important
  }
  .dot.active {
    width: 17px!important
  }
  .highlight-card {
    min-width: 210px!important;
    flex-basis: 210px!important;
    min-height: 58px!important
  }
  .highlight-card img {
    width: 68px!important;
    height: 46px!important
  }
  .cat {
    min-height: 54px!important;
    height: 54px!important;
    padding: 7px 8px!important;
    border-radius: 11px!important;
    gap: 7px!important
  }
  .cat strong {
    font-size: 9px!important
  }
  .vip-level-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important
  }
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px
}
.cart-nav,
.profile-nav {
  position: relative;
  color: #fff;
  cursor: pointer
}
.profile-nav {
  display: flex;
  align-items: center;
  gap: 8px
}
.nav-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg,#20c7ff,#2868ff);
  border: 2px solid rgba(120,226,255,.65);
  box-shadow: none;
  font-size: 17px
}
.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.cart-nav {
  width: 48px;
  height: 48px
}
.cart-count {
  position: absolute;
  right: -3px;
  top: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#ff3e5b,#ff9a2e);
  font-size: 9px;
  font-weight: 1000;
  border: 2px solid #07111b
}
.brand-logo.animated-li-mark:before {
  content: "";
  position: absolute;
  inset: 4px -8px;
  z-index: -1;
  border-radius: 50%;
  filter: none;
  animation: 7s linear infinite logoAura;
  display: none !important
}
@keyframes logoAura {
  to {
    transform: rotate(360deg)
  }
}
@keyframes brandColorShake {
  0,
  100%,
  78% {
    transform: translate3d(0,0,0) scale(1);
    background-position: 0 50%
  }
  80% {
    transform: translate3d(-1px,0,0) scale(1.01);
    background-position: 35% 50%
  }
  82% {
    transform: translate3d(2px,0,0) scale(1.015);
    background-position: 70% 50%
  }
  84% {
    transform: translate3d(-1px,0,0) scale(1.01);
    background-position: 100% 50%
  }
  86% {
    transform: translate3d(0,0,0) scale(1);
    background-position: 70% 50%
  }
}
@keyframes heroSmooth {
  from {
    opacity: .2;
    transform: translateX(12px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}
.cat {
  isolation: isolate!important;
  box-shadow: inset 0 0 0 1px rgba(50,205,255,.025)!important;
  animation: 6.5s ease-in-out infinite catFloat
}
.cat:nth-child(2n) {
  animation-delay: -1.3s
}
.cat:nth-child(3n) {
  animation-delay: -2.4s
}
.cat:nth-child(4n) {
  animation-delay: -3.2s
}
.cat:before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: conic-gradient(from 0,transparent 0 30%,rgba(33,203,255,.2) 38%,transparent 48%,rgba(153,92,255,.16) 62%,transparent 74%);
  filter: none;
  animation: 5s linear infinite catLight;
  display: none !important
}
.cat:after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,#39d6ff,#9c75ff,#ff6e9b,transparent);
  opacity: .75;
  animation: 3.5s ease-in-out infinite catBeam
}
@keyframes catFloat {
  0,
  100% {
    transform: translate3d(0,0,0) rotate(0)
  }
  50% {
    transform: translate3d(0,-2px,0) rotate(.35deg)
  }
}
@keyframes catLight {
  to {
    transform: rotate(360deg)
  }
}
@keyframes catBeam {
  0,
  100% {
    opacity: .25;
    transform: scaleX(.7)
  }
  50% {
    opacity: 1;
    transform: scaleX(1)
  }
}
.cat h3,
.cat strong {
  color: #f7fbff!important;
  text-shadow: none
}
.offers {
  gap: 16px!important
}
.offer-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px
}
.offer-action-row .btn {
  width: 100%
}
.cart-add-detail {
  border-color: #2d5168!important;
  background: linear-gradient(135deg,#0b1d2b,#102c3d)!important
}
.offer-detail-strip {
  display: grid!important;
  grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
  gap: 8px!important
}
.premium-order-box {
  width: min(590px,100%)!important
}
.order-step.hidden {
  display: none!important
}
.payment-trust {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
  margin: 12px 0;
  border: 1px solid rgba(50,196,255,.17);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(20,160,255,.06),rgba(140,80,255,.04))
}
.payment-trust strong {
  font-size: 13px
}
.payment-trust span {
  font-size: 10px;
  color: #8298aa;
  line-height: 1.5
}
.payment-account-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 12px 0;
  padding: 13px;
  border-radius: 13px;
  border: 1px solid rgba(52,221,255,.26);
  background: radial-gradient(circle,rgba(34,185,255,.12),rgba(6,18,28,.4))
}
.payment-account-box strong {
  font-size: 23px;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: none
}
.payment-account-box small {
  color: #7f9bad;
  font-size: 9px
}
.order-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 15px
}
.order-nav .primary {
  width: 100%
}
.next-order-step {
  width: 100%;
  margin-top: 8px
}
.cart-box {
  width: min(620px,100%)!important
}
.cart-list {
  display: grid;
  gap: 9px;
  margin: 15px 0;
  max-height: 55vh;
  overflow: auto
}
.cart-item {
  display: grid;
  grid-template-columns: auto 58px 1fr auto;
  gap: 10px;
  padding: 9px;
  border: 1px solid #203b50;
  border-radius: 13px;
  background: #081520;
  cursor: pointer
}
.cart-item input {
  accent-color: #21b8ff;
  width: 17px;
  height: 17px
}
.cart-item img {
  width: 58px;
  height: 48px;
  object-fit: cover;
  border-radius: 9px
}
.cart-item span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}
.cart-item b {
  font-size: 12px
}
.cart-item small {
  font-size: 11px;
  color: #62d5ff
}
.cart-item button {
  border: 0;
  background: 0 0;
  color: #8ca0b0;
  font-size: 20px;
  cursor: pointer
}
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #203448
}
.cart-footer strong {
  font-size: 24px
}
@media (max-width:600px) {
  .nav {
    height: 62px
  }
  .brand {
    min-width: 0;
    gap: 7px
  }
  .brand-logo.animated-li-mark {
    width: 78px!important;
    height: 58px!important
  }
  .navlinks {
    display: none
  }
  .profile-nav {
    padding: 4px
  }
  .profile-nav-text {
    display: none
  }
  .nav-avatar {
    width: 40px;
    height: 40px
  }
  .cart-nav {
    width: 42px;
    height: 42px;
    font-size: 18px
  }
  .hero {
    height: 176px!important;
    min-height: 176px!important;
    margin-top: 8px!important;
    border-radius: 16px!important
  }
  .hero-slide {
    height: 176px!important;
    min-height: 176px!important
  }
  .hero-copy {
    min-height: 176px!important;
    width: 64%!important;
    padding: 12px 14px 20px!important
  }
  .hero h1 {
    font-size: 20px!important;
    max-width: 90%!important
  }
  .hero h1 span {
    font-size: 11px!important
  }
  .hero p {
    font-size: 8px!important;
    max-width: 95%!important
  }
  .hero-actions .btn {
    padding: 5px 7px!important;
    font-size: 8px!important
  }
  .hero .arrow {
    width: 25px!important;
    height: 25px!important
  }
  .cat {
    min-height: 70px!important;
    height: 70px!important;
    padding: 9px!important
  }
  .cat h3,
  .cat strong {
    font-size: 11px!important
  }
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 9px!important
  }
  .offer {
    padding: 0!important;
    border-radius: 14px!important
  }
  .offer img {
    height: 112px!important;
    border-radius: 9px!important
  }
  .offer h3 {
    font-size: 9.5px!important;
    line-height: 1.2!important
  }
  .offer small {
    font-size: 7.5px!important
  }
  .offer .price {
    font-size: 11px!important;
    margin: 1px 0 3px!important
  }
  .offer-action-row {
    grid-template-columns: 1fr!important;
    gap: 5px!important;
    margin-top: 8px!important
  }
  .offer-action-row .btn {
    font-size: 9px!important;
    padding: 8px 5px!important
  }
  .offer-box {
    padding: 10px!important;
    border-radius: 15px!important
  }
  .filters {
    gap: 5px!important
  }
  .filter {
    font-size: 9px!important;
    padding: 7px 8px!important
  }
  .vip-level-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 7px!important
  }
  .vip-level-card {
    padding: 9px!important
  }
  .vip-level-head b {
    font-size: 11px!important
  }
  .vip-tier-icon {
    width: 30px!important;
    height: 30px!important;
    flex-basis: 30px!important
  }
  .benefit strong {
    font-size: 11px!important
  }
  .modal-box {
    width: calc(100% - 18px)!important;
    padding: 18px!important;
    border-radius: 19px!important
  }
  .premium-order-box {
    max-height: 88vh!important
  }
  .payment-grid {
    grid-template-columns: repeat(3,1fr)!important
  }
  .payment-option {
    padding: 9px 5px!important;
    font-size: 10px!important
  }
  .cart-box {
    width: calc(100% - 18px)!important
  }
  .cart-item {
    grid-template-columns: auto 48px 1fr auto;
    gap: 7px
  }
  .cart-item img {
    width: 48px;
    height: 42px
  }
  .cart-item b {
    font-size: 10px
  }
  .cart-item small {
    font-size: 9px
  }
}
.golden-spin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,rgba(255,186,37,.1),rgba(255,225,106,.06));
  border: 1px solid rgba(255,211,95,.25);
  color: #ffdf78;
  font-size: 9px;
  font-weight: 900;
  box-shadow: none
}
.order-trust-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid rgba(53,198,255,.12);
  background: rgba(4,17,27,.6);
  color: #7892a4;
  font-size: 9px;
  line-height: 1.45
}
.order-trust-list b {
  color: #bdefff;
  font-size: 10px;
  margin-bottom: 2px
}
.selected-offers {
  display: grid
}
.selected-offer-card {
  min-width: 0;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .22s,border-color .22s,box-shadow .22s
}
.selected-offer-badge {
  display: inline-block;
  font-weight: 1000;
  letter-spacing: .8px;
  color: #8eeaff;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(71,209,255,.25);
  background: rgba(37,190,255,.06)
}
.selected-offer-body h3 {
  color: #f7fbff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.selected-offer-body p {
  margin: 0 0 7px;
  color: #8097a8;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.selected-offer-body strong {
  color: #5ed8ff;
  text-shadow: none
}
#offerFilters {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none
}
#offerFilters::-webkit-scrollbar {
  display: none
}
#offerFilters .filter {
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(72,118,150,.48);
  color: #d5e3ee;
  font-size: 11px;
  font-weight: 1000;
  transition: transform .18s,border-color .18s,box-shadow .18s,background .18s
}
#offerFilters .filter:focus-visible,
#offerFilters .filter:hover {
  transform: translateY(-2px);
  border-color: #36caff;
  color: #fff;
  box-shadow: none
}
#offerFilters .filter.active {
  box-shadow: none
}
.brand-logo.animated-li-mark,
.brand-logo.animated-li-mark:after,
.brand-logo.animated-li-mark:before {
  background: 0 0!important;
  border: 0!important;
  box-shadow: none!important
}
@media (max-width:950px) {
  .selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
}
@media (max-width:600px) {
  .selected-offers-section {
    margin-top: 10px;
    padding: 0 8px
  }
  .selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
  }
  .selected-offer-card {
    border-radius: 13px
  }
  .selected-offer-card img {
    height: 92px
  }
  .selected-offer-body {
    padding: 8px 9px 10px
  }
  .selected-offer-badge {
    font-size: 7px;
    padding: 3px 5px
  }
  .selected-offer-body h3 {
    font-size: 11px;
    margin-top: 5px
  }
  .selected-offer-body p {
    font-size: 8px;
    margin-bottom: 5px
  }
  .selected-offer-body strong {
    font-size: 15px
  }
  #offerFilters {
    gap: 6px;
    padding-bottom: 8px
  }
  #offerFilters .filter {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 9px;
    border-radius: 10px
  }
  .brand-logo.animated-li-mark {
    width: 84px!important;
    height: 62px!important
  }
}
.brand-logo.animated-li-mark:after,
.brand-logo.animated-li-mark:before {
  display: none!important;
  pointer-events: none!important;
  content: ""!important
}
.offer-action-row .cart-add-detail,
.offer-action-row .vip-order-btn {
  min-height: 52px!important;
  padding: 14px 18px!important;
  font-size: 14px!important;
  font-weight: 1000!important
}
.vip-level-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  gap: 10px!important
}
.vip-level-card {
  min-height: 150px!important
}
#offerFilters .filter:active {
  animation: .28s filterTapShake!important
}
@keyframes filterTapShake {
  0,
  100% {
    transform: translateX(0)
  }
  25% {
    transform: translateX(-2px) rotate(-.6deg)
  }
  50% {
    transform: translateX(2px) rotate(.6deg)
  }
  75% {
    transform: translateX(-1px)
  }
}
.selected-offers {
  grid-template-columns: repeat(4,minmax(0,1fr))!important
}
.selected-offer-badge {
  font-size: 8px!important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}
.golden-shot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,rgba(255,96,70,.1),rgba(255,177,60,.06));
  border: 1px solid rgba(255,140,80,.28);
  color: #ffc17b;
  font-size: 9px;
  font-weight: 900
}
@media (max-width:950px) {
  .selected-offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:600px) {
  .brand-logo.animated-li-mark {
    width: 92px!important;
    height: 62px!important
  }
  .hero,
  .hero-slide {
    height: 150px!important;
    min-height: 150px!important
  }
  .hero-copy {
    min-height: 150px!important;
    padding: 10px 12px 18px!important
  }
  .hero h1 {
    font-size: 18px!important
  }
  .hero h1 span {
    font-size: 9px!important
  }
  .hero p {
    font-size: 7px!important
  }
  .hero-actions .btn {
    padding: 5px 7px!important;
    font-size: 7px!important
  }
  .selected-offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 6px!important
  }
  .selected-offer-card {
    border-radius: 10px!important
  }
  .selected-offer-card img {
    height: 65px!important
  }
  .selected-offer-body {
    padding: 6px!important
  }
  .selected-offer-body h3 {
    font-size: 10px!important
  }
  .selected-offer-body p {
    font-size: 7px!important;
    margin-bottom: 4px!important
  }
  .selected-offer-body strong {
    font-size: 12px!important
  }
  .selected-offer-badge {
    font-size: 6px!important;
    padding: 3px 4px!important
  }
  .vip-level-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important
  }
  .offer-action-row {
    grid-template-columns: 1fr 1fr!important
  }
  .offer-action-row .cart-add-detail,
  .offer-action-row .vip-order-btn {
    min-height: 48px!important;
    font-size: 11px!important;
    padding: 11px 6px!important
  }
}
.offers {
  grid-template-columns: repeat(3,minmax(0,1fr))!important
}
@media (max-width:950px) {
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
}
@media (max-width:600px) {
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 9px!important;
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  .offer {
    align-self: start!important;
    height: fit-content!important;
    min-height: 0!important
  }
}
.selected-offers {
  align-items: start!important
}
.selected-offer-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column
}
.selected-offer-wrap .selected-offer-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-left: 2px;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .8px;
  color: #8eeaff;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(71,209,255,.25);
  background: rgba(37,190,255,.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}
.selected-offer-body .selected-offer-badge {
  display: none!important
}
@media (max-width:600px) {
  .selected-offer-wrap {
    gap: 4px
  }
  .selected-offer-wrap .selected-offer-badge {
    font-size: 6px;
    padding: 3px 5px
  }
}
.hero {
  touch-action: pan-y;
  cursor: pointer;
  position: relative!important;
  background: radial-gradient(circle at 12% 12%,rgba(36,210,255,.12),transparent 32%),radial-gradient(circle at 88% 88%,rgba(124,82,255,.11),transparent 35%),linear-gradient(145deg,#0b1b2a,#07111b 52%,#0b1422)!important;
  animation: 4.8s ease-in-out infinite heroInterfaceGlow!important
}
.hero:after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,transparent 8%,rgba(54,213,255,.72) 25%,transparent 42%,transparent 63%,rgba(139,104,255,.65) 79%,transparent 94%);
  background-size: 220% 100%;
  opacity: .65;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: 8s linear infinite heroBorderSweep
}
.hero-minimal-copy {
  width: 100%!important;
  height: 100%!important;
  min-height: 0!important;
  padding: 0!important;
  display: flex!important;
  align-items: flex-end!important;
  justify-content: center!important
}
.selected-offer-wrap {
  gap: 7px!important
}
.selected-offer-card:after {
  content: "";
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background-size: 230% 100%;
  opacity: .48;
  mix-blend-mode: screen
}
.selected-offer-card img {
  background: #07111a;
  height: 100px!important
}
.offer-box {
  margin-top: 12px!important;
  padding: 14px!important
}
.offers {
  align-items: stretch!important;
  grid-auto-rows: auto!important;
  perspective: 1200px!important
}
.offer {
  display: flex!important;
  flex-direction: column!important;
  height: auto!important;
  min-height: 0!important;
  align-self: stretch!important;
  overflow: hidden!important;
  background: radial-gradient(circle at 90% 0,rgba(43,203,255,.08),transparent 35%),linear-gradient(155deg,#0d1d2b,#07121c)!important;
  box-shadow: none!important
}
.offer .offer-media {
  flex: 0 0 auto!important;
  height: 145px!important;
  margin-bottom: 9px!important
}
.offer-topline {
  min-height: 21px!important
}
.no-login-strip {
  margin: 7px 0!important;
  padding: 7px 9px!important;
  font-size: 9px!important;
  line-height: 1.3!important
}
.loyalty-strip {
  margin: 7px 0!important;
  min-height: 38px!important;
  padding: 6px 8px!important
}
.loyalty-strip img {
  width: 24px!important;
  height: 24px!important
}
.loyalty-strip b {
  font-size: 12px!important
}
.loyalty-strip span {
  font-size: 8px!important
}
.offer small {
  margin-top: auto!important
}
.offer .price {
  margin: 9px 0!important;
  font-size: 23px!important
}
@media (min-width:601px) {
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 12px!important
  }
}
@media (max-width:600px) {
  .hero,
  .hero-slide {
    border-radius: 17px!important
  }
  .selected-offers-section {
    margin-top: 18px!important;
    margin-bottom: 8px!important
  }
  .selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 8px!important
  }
  .selected-offer-card img {
    height: 86px!important
  }
  .selected-offer-body {
    padding: 8px 9px 10px!important
  }
  .selected-offer-body h3 {
    font-size: 11px!important
  }
  .selected-offer-body p {
    font-size: 8px!important
  }
  .selected-offer-body strong {
    font-size: 14px!important
  }
  .selected-offer-badge {
    font-size: 6.5px!important
  }
  .offer-box {
    margin-top: 10px!important;
    padding: 9px!important;
    border-radius: 17px!important
  }
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 8px!important;
    align-items: stretch!important
  }
  .offer {
    padding: 8px!important;
    border-radius: 14px!important
  }
  .offer .offer-media {
    height: 108px!important;
    border-radius: 9px!important;
    margin-bottom: 7px!important
  }
  .offer-topline {
    min-height: 18px!important
  }
  .offer .badge {
    font-size: 6.5px!important;
    padding: 4px 5px!important
  }
  .offer h3 {
    font-size: 12px!important;
    line-height: 1.16!important;
    margin: 7px 0 4px!important
  }
  .no-login-strip {
    margin: 5px 0!important;
    padding: 6px 7px!important;
    font-size: 7.5px!important
  }
  .loyalty-strip {
    min-height: 32px!important;
    margin: 5px 0!important;
    padding: 4px 5px!important;
    gap: 4px!important
  }
  .loyalty-strip img {
    width: 20px!important;
    height: 20px!important
  }
  .loyalty-strip b {
    font-size: 10px!important
  }
  .loyalty-strip span {
    font-size: 6.5px!important
  }
  .offer small {
    font-size: 7.5px!important;
    line-height: 1.3!important
  }
  .offer .price {
    font-size: 17px!important;
    margin: 7px 0!important
  }
  .offer .old {
    font-size: 8px!important
  }
  .top .nav {
    gap: 6px!important
  }
  .brand {
    gap: 6px!important;
    max-width: calc(100% - 94px)!important
  }
  .brand-logo.animated-li-mark {
    width: 64px!important;
    height: 52px!important;
    flex: 0 0 64px!important
  }
  .wrap {
    width: calc(100% - 24px)!important
  }
  .hero,
  .hero-slide {
    height: 220px!important;
    min-height: 220px!important
  }
  .hero-copy.hero-minimal-copy {
    padding: 14px!important
  }
  .hero-media {
    background-position: center!important
  }
  .selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 10px!important
  }
  .brand-logo {
    width: 78px!important;
    height: 56px!important
  }
}
@media (min-width:601px) {
  .brand-logo.animated-li-mark {
    width: 108px!important;
    height: 72px!important
  }
}
.filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}
.icon-inline {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  filter: none
}
.badge .icon-inline {
  width: 16px;
  height: 16px
}
/* Offer card icons must never inherit the main offer-image sizing. */
#offerGrid .offer .offer-body .icon-inline {
  width: 16px!important;
  height: 16px!important;
  max-width: 16px!important;
  max-height: 16px!important;
  object-fit: contain!important;
  display: inline-block!important;
  margin: 0!important;
  padding: 0!important;
  border-radius: 0!important;
  background: transparent!important;
}
.vip-showcase-title .icon-inline {
  width: 25px;
  height: 25px;
  margin-right: 5px
}
.benefit i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal
}
.golden-shot-badge .icon-inline,
.golden-spin-badge .icon-inline {
  width: 19px;
  height: 19px
}
#orderSummary .icon-inline,
.offer-detail-strip b .icon-inline {
  width: 20px;
  height: 20px;
  margin-right: 4px
}
.category-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap
}
.category-pick .checkchip {
  margin: 0
}
.category-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #9bb0c3
}
.category-qty input {
  padding: 6px 7px;
  border: 1px solid #24465c;
  border-radius: 7px;
  background: #07131d;
  color: #fff;
  font-weight: 700
}
.category-qty input:disabled {
  opacity: .45
}
.offer-qty-list {
  margin: 14px 0;
  padding: 12px 10px 10px;
  border: 1px solid rgba(42,151,201,.28);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0,rgba(40,192,255,.08),transparent 58%),rgba(5,19,29,.72);
  box-shadow: none
}
.offer-qty-heading {
  display: block;
  color: #79a7bc;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  margin: 0 0 9px 2px
}
.offer-qty-item {
  flex: 0 0 72px;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 4px 5px;
  border: 1px solid rgba(74,176,220,.18);
  border-radius: 11px;
  background: linear-gradient(145deg,rgba(14,43,59,.75),rgba(6,20,31,.88));
  text-align: center;
  box-shadow: none
}
.offer-qty-icon {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px
}
.offer-qty-icon .icon-inline {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: none
}
.offer-qty-item > span {
  max-width: 100%;
  color: #c9e8f5;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.offer-qty-item > b {
  margin-top: 3px;
  color: #fff;
  font-size: 12px;
  line-height: 1
}
.offer-qty-item > small {
  color: #6fa0b5;
  font-size: 7px;
  margin-top: 2px
}
.vip-title-gradient {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg,#fff,#65e6ff 28%,#b18cff 58%,#ff77cf 82%,#fff);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: 4.2s linear infinite vipTitleShimmer
}
.vip-title-gradient .icon-inline {
  flex: 0 0 auto;
  filter: none
}
.vip-showcase-title:after {
  left: 0;
  bottom: 0;
  width: 180px;
  height: 2px;
  border-radius: 99px;
  box-shadow: none;
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);
  animation: 3.8s ease-in-out infinite vipSweep;
  pointer-events: none
}
@keyframes vipTitleShimmer {
  0 {
    background-position: 200% center
  }
  100% {
    background-position: -20% center
  }
}
@media (max-width:600px) {
  .offer-qty-item {
    flex-basis: 66px;
    min-height: 78px;
    padding: 5px 3px
  }
  .offer-qty-icon {
    height: 34px
  }
  .offer-qty-icon .icon-inline {
    width: 32px;
    height: 32px
  }
  .offer-qty-item > span {
    font-size: 7px
  }
  .offer-qty-item > b {
    font-size: 11px
  }
  .vip-title-gradient {
    font-size: 14px;
    line-height: 1.25
  }
  .vip-showcase-title small {
    font-size: 8px!important
  }
}
.vip-showcase-title {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(110deg,rgba(25,180,255,.1),rgba(151,91,255,.16),rgba(255,80,180,.1),rgba(25,180,255,.1));
  background-size: 260% 100%;
  animation: 5s ease-in-out infinite vipBannerShimmer;
  box-shadow: none
}
@keyframes vipBannerShimmer {
  0,
  100% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}
.premium-auth-card:before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 60%;
  height: 220%;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.045) 48%,rgba(180,235,255,.07) 52%,transparent 70%);
  transform: skewX(-12deg);
  pointer-events: none;
  animation: 7s cubic-bezier(.4,0,.6,1) infinite authCardShine;
  will-change: left
}
.premium-close {
  position: absolute!important;
  right: 15px!important;
  top: 15px!important;
  width: 38px!important;
  height: 38px!important;
  border-radius: 12px!important;
  border: 1px solid rgba(131,181,213,.17)!important;
  background: rgba(255,255,255,.055)!important;
  color: #9db5c8!important;
  font-size: 25px!important;
  z-index: 20!important
}
.premium-close:hover {
  background: rgba(44,183,255,.12)!important;
  color: #fff!important;
  border-color: rgba(44,183,255,.4)!important
}
.premium-auth-logo {
  position: relative;
  display: grid;
  place-items: center
}
.premium-auth-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2
}
.premium-auth-logo:after,
.premium-auth-logo:before {
  content: "";
  position: absolute;
  border: 1px solid rgba(37,191,255,.35);
  border-radius: 50%;
  inset: 0;
  transform: rotate(22deg)
}
.premium-auth-logo:after {
  inset: 5px -4px;
  transform: rotate(-34deg);
  border-color: rgba(52,102,255,.25)
}
.premium-auth-title h2 {
  line-height: 1.15
}
.premium-method {
  text-align: left;
  box-sizing: border-box
}
.premium-method:hover {
  background: rgba(10,31,48,.88)
}
.premium-method span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px
}
.premium-auth-panel-wrap {
  box-sizing: border-box
}
.premium-login-panel {
  animation: .22s premiumPanelIn
}
.premium-login-panel:not(.active) {
  display: none
}
@keyframes premiumPanelIn {
  from {
    opacity: 0;
    transform: translateY(5px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.premium-otp-row .premium-input-wrap,
.premium-otp-row .premium-main-btn {
  height: 46px
}
.premium-verify-btn {
  margin-top: 8px
}
.premium-verify-btn:hover {
  background: rgba(25,80,108,.65)
}
.premium-recaptcha {
  display: flex;
  justify-content: center;
  min-height: 0
}
.premium-security-bar > span {
  font-size: 15px
}
.premium-security-bar div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1
}
@media (max-width:560px) {
  .premium-auth-card {
    padding: 22px 15px!important;
    border-radius: 23px!important
  }
  .premium-auth-brand {
    margin-bottom: 19px
  }
  .premium-auth-title h2 {
    font-size: 22px
  }
  .premium-auth-title p {
    font-size: 11px
  }
  .premium-method {
    min-height: 59px;
    grid-template-columns: 38px 1fr 18px
  }
  .premium-method .method-icon {
    width: 38px;
    height: 38px
  }
  .premium-auth-panel-wrap {
    padding: 16px 12px
  }
  .premium-otp-row {
    grid-template-columns: 1fr
  }
  .premium-otp-row .premium-input-wrap {
    order: -1
  }
  .premium-security-bar em {
    display: none
  }
}
.email-mode-switch {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin: -2px 0 16px
}
.email-mode-btn {
  border-radius: 9px
}
.create-symbol {
  font-size: 25px
}
.premium-form-note {
  line-height: 1.5
}
.premium-form-note button {
  padding: 0
}
.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px
}
.profile-action-btn {
  min-height: 48px;
  border: 1px solid rgba(74,190,255,.18);
  border-radius: 13px;
  background: rgba(10,30,46,.85);
  color: #dceeff;
  font-weight: 800;
  cursor: pointer
}
.profile-action-btn:hover {
  border-color: rgba(74,190,255,.5);
  transform: translateY(-1px)
}
.profile-action-btn.danger {
  grid-column: 1/-1;
  border-color: rgba(255,90,110,.25);
  color: #ffb0bb;
  background: rgba(90,15,30,.28)
}
.forgot-password-box {
  max-width: 460px!important;
  text-align: center
}
.forgot-password-box .premium-field {
  text-align: left;
  margin-top: 22px
}
.forgot-password-box .premium-main-btn {
  width: 100%;
  margin-top: 8px
}
@media (max-width:600px) {
  .profile-actions {
    grid-template-columns: 1fr
  }
  .profile-action-btn.danger {
    grid-column: auto
  }
}
.premium-auth-card:after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  padding: 1px;
  background: linear-gradient(125deg,rgba(71,210,255,.34),transparent 32%,transparent 68%,rgba(91,103,255,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .85
}
.login-modal.show .premium-auth-logo {
  animation: 4s ease-in-out infinite authLogoFloat
}
@keyframes authLogoFloat {
  0,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-3px)
  }
}
.premium-forgot {
  padding: 5px 12px!important
}
.premium-recaptcha {
  margin: 10px 0 7px!important
}
@media (max-width:560px) {
  .email-mode-btn {
    height: 42px;
    font-size: 9.5px
  }
  .premium-form-note,
  .premium-form-note button {
    font-size: 10px
  }
  .premium-auth-card {
    width: min(510px,calc(100vw - 18px))!important;
    padding: 20px 13px!important
  }
  .premium-auth-title h2 {
    font-size: 24px!important
  }
  .premium-method {
    min-height: 62px!important
  }
  .premium-auth-panel-wrap {
    padding: 17px 11px!important
  }
}
@media (max-width:700px) {
  .top .brand-logo.animated-li-mark {
    width: 68px!important;
    height: 46px!important;
    flex: 0 0 68px!important
  }
}
.brand-logo.animated-li-mark {
  position: relative!important;
  isolation: isolate!important;
  overflow: visible!important;
  width: 104px!important;
  height: 64px!important;
  flex: 0 0 104px!important;
  display: block!important;
  background: 0 0!important;
  border: 0!important;
  border-radius: 0!important;
  box-shadow: none!important;
  filter: none!important
}
.brand-logo.animated-li-mark::before {
  content: ""!important;
  position: absolute!important;
  inset: -13px -15px!important;
  z-index: -2!important;
  border-radius: 50%!important;
  background: conic-gradient(from 0,transparent 0 28deg,rgba(61,225,255,.8) 38deg 50deg,transparent 60deg 112deg,rgba(120,92,255,.62) 124deg 140deg,transparent 150deg 208deg,rgba(0,232,255,.72) 220deg 238deg,transparent 250deg 298deg,rgba(55,150,255,.68) 310deg 328deg,transparent 340deg 360deg)!important;
  filter: none!important;
  opacity: .7!important;
  animation: 5.8s linear infinite liGuardianRing!important;
  pointer-events: none!important;
  display: none !important
}
.brand-logo.animated-li-mark::after {
  content: ""!important;
  position: absolute!important;
  inset: -9px -12px!important;
  z-index: -1!important;
  border-radius: 50%!important;
  background: radial-gradient(circle at 18% 50%,rgba(0,229,255,.52),transparent 25%),radial-gradient(circle at 50% 18%,rgba(99,110,255,.38),transparent 24%),radial-gradient(circle at 84% 50%,rgba(0,210,255,.52),transparent 25%),radial-gradient(circle at 50% 86%,rgba(120,72,255,.38),transparent 24%);
  filter: none!important;
  opacity: .62!important;
  animation: 2.9s ease-in-out infinite liGuardianPulse!important;
  pointer-events: none!important;
  display: none !important
}
@keyframes liGuardianRing {
  to {
    transform: rotate(360deg)
  }
}
.top .brand {
  align-items: center!important
}
@keyframes liPiecePremium {
  0,
  8% {
    opacity: 0;
    transform: translate3d(0,-50%,0) translateY(-10px) rotate(-7deg) scale(.78);
    filter: brightness(.7)
  }
  18% {
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(0) rotate(0) scale(1.05);
    filter: brightness(1.3)
  }
  28%,
  68% {
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(0) rotate(0) scale(1);
    filter: brightness(1.05)
  }
  76% {
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(-1px) rotate(1.5deg) scale(1.025);
    filter: brightness(1.2)
  }
  100%,
  88% {
    transform: translate3d(0,-50%,0) translateY(0) rotate(0) scale(1);
    filter: brightness(1.02);
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(0) rotateY(0) rotateZ(0) scale(1);
    filter: brightness(1.05)
  }
  0,
  10% {
    opacity: .72;
    transform: translate3d(0,-50%,0) translateY(-3px) rotateY(-10deg) rotateZ(-2deg) scale(.94);
    filter: brightness(.92)
  }
  20% {
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(0) rotateY(4deg) rotateZ(0) scale(1.045);
    filter: brightness(1.42)
  }
  32%,
  66% {
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(0) rotateY(0) rotateZ(0) scale(1);
    filter: brightness(1.08)
  }
  74% {
    opacity: 1;
    transform: translate3d(0,-50%,0) translateY(-1px) rotateY(-5deg) rotateZ(1deg) scale(1.025);
    filter: brightness(1.3)
  }
}
@media (max-width:700px) {
  .top .brand {
    gap: 7px!important;
    gap: 6px!important;
    max-width: calc(100% - 88px)!important
  }
  .top .brand-logo.animated-li-mark {
    flex: 0 0 82px!important;
    width: 96px!important;
    height: 56px!important;
    flex: 0 0 96px!important
  }
}
@keyframes liGuardianContinuous {
  from {
    transform: rotate(0) scale(.98)
  }
  to {
    transform: rotate(360deg) scale(.98)
  }
}
@keyframes liBrandFlow {
  0,
  100% {
    background-position: 0 50%;
    filter: brightness(1.05);
    transform: perspective(500px) translateZ(0)
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.3);
    transform: perspective(500px) translateZ(8px)
  }
}
@media (max-width:390px) {
  .top .brand {
    max-width: calc(100% - 82px)!important
  }
  .top .brand-logo.animated-li-mark {
    width: 92px!important;
    flex-basis: 92px!important
  }
}
@media (min-width:900px) {
  .content,
  .home,
  .main,
  main {
    width: 100%;
    box-sizing: border-box
  }
}
body,
html {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0
}
@media (min-width:1000px) {
  .app,
  .content,
  .layout,
  .page,
  .site,
  main {
    width: 100%!important;
    max-width: none!important;
    margin-left: 0!important;
    margin-right: 0!important;
    box-sizing: border-box!important
  }
  .header,
  .hero,
  .top,
  header {
    box-sizing: border-box
  }
}
@media (max-width:999px) {
  body,
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
  }
}
@media (min-width:900px) {
  .wrap {
    width: calc(100% - 48px)!important;
    max-width: none!important;
    margin-left: 24px!important;
    margin-right: 24px!important;
    box-sizing: border-box!important
  }
}
@media (max-width:899px) {
  .wrap {
    width: 100%!important;
    max-width: 100%!important;
    box-sizing: border-box!important
  }
}
@media (min-width:951px) {
  body,
  html {
    overflow-x: hidden
  }
  .wrap {
    width: min(1240px,calc(100% - 48px))
  }
  .top .nav {
    min-height: 72px!important;
    height: 72px!important;
    gap: 28px!important
  }
  .top .brand {
    flex: 0 0 250px!important;
    min-width: 250px!important;
    max-width: 250px!important;
    gap: 10px!important
  }
  .top .brand-logo.animated-li-mark {
    width: 66px!important;
    height: 54px!important;
    flex: 0 0 66px!important
  }
  .top .navlinks {
    flex: 1 1 auto!important;
    justify-content: center!important;
    gap: 28px!important
  }
  .top .navlinks a {
    font-size: 13px!important
  }
  .top .actions {
    flex: 0 0 auto!important;
    margin-left: 0!important
  }
  .hero {
    margin-top: 20px!important;
    height: 360px!important;
    min-height: 360px!important;
    border-radius: 22px!important
  }
  .hero-slide {
    height: 360px!important;
    min-height: 360px!important
  }
  .hero-copy {
    width: min(560px,52%)!important;
    height: 100%!important;
    padding: 42px 44px!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important
  }
  .hero h1 {
    font-size: 48px!important;
    max-width: 520px!important;
    margin: 14px 0 10px!important
  }
  .hero h1 span {
    font-size: 20px!important;
    margin-top: 9px!important
  }
  .hero p {
    font-size: 13px!important;
    max-width: 500px!important;
    line-height: 1.55!important;
    margin-bottom: 18px!important
  }
  .hero-actions {
    margin-top: 8px!important
  }
  .hero-actions .btn {
    padding: 10px 14px!important;
    font-size: 12px!important
  }
  .hero-nav {
    left: 44px!important;
    bottom: 16px!important
  }
  .arrow {
    width: 38px!important;
    height: 38px!important;
    font-size: 18px!important
  }
  .section {
    margin-top: 38px!important
  }
  .head {
    margin-bottom: 13px!important
  }
  .title {
    font-size: 25px!important
  }
  .sub {
    font-size: 11px!important
  }
  .cat {
    min-height: 82px!important;
    padding: 13px 14px!important;
    border-radius: 14px!important
  }
  .selected-offers {
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 10px!important
  }
  .selected-offers-section {
    margin-top: 18px!important;
    margin-bottom: 4px!important
  }
  .selected-offer-body {
    padding: 7px 8px 8px!important
  }
  .selected-offer-body h3 {
    font-size: 12px!important;
    margin: 5px 0!important
  }
  .selected-offer-body p {
    font-size: 8px!important;
    line-height: 1.3!important
  }
  .selected-offer-body strong {
    font-size: 15px!important
  }
  .offer-box {
    margin-top: 10px!important;
    padding: 13px!important;
    border-radius: 19px!important
  }
  .filters {
    gap: 7px!important;
    margin-bottom: 12px!important
  }
  .filter {
    font-size: 10px!important;
    padding: 8px 11px!important
  }
  .offers {
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 11px!important;
    align-items: stretch!important
  }
  .offer {
    min-width: 0!important;
    padding: 11px!important;
    border-radius: 16px!important
  }
  .offer .offer-media {
    height: 122px!important;
    border-radius: 11px!important;
    margin-bottom: 8px!important
  }
  .offer-topline {
    min-height: 20px!important
  }
  .offer h3 {
    font-size: 15px!important;
    line-height: 1.2!important;
    margin: 7px 0 5px!important
  }
  .offer small {
    font-size: 9px!important;
    line-height: 1.3!important
  }
  .no-login-strip {
    font-size: 8px!important;
    padding: 6px 8px!important;
    margin: 6px 0!important
  }
  .loyalty-strip {
    min-height: 34px!important;
    margin: 6px 0!important;
    padding: 5px 7px!important
  }
  .loyalty-strip img {
    width: 22px!important;
    height: 22px!important
  }
  .loyalty-strip b {
    font-size: 11px!important
  }
  .loyalty-strip span {
    font-size: 7px!important
  }
  .offer .price {
    font-size: 21px!important;
    margin: 8px 0!important
  }
  .gamegrid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 12px!important
  }
  .game {
    border-radius: 16px!important
  }
  .game-art {
    height: 115px!important
  }
  .game-body {
    padding: 13px!important
  }
  .game-body h3 {
    font-size: 15px!important
  }
  .game-body p {
    font-size: 10px!important
  }
  .support-box {
    padding: 17px 19px!important;
    border-radius: 17px!important
  }
  .support-copy strong {
    font-size: 15px!important
  }
  .support-copy span {
    font-size: 10px!important
  }
  .support-btn {
    padding: 10px 13px!important;
    font-size: 10px!important
  }
  footer {
    margin-top: 42px!important
  }
}
@media (min-width:951px) and (max-width:1120px) {
  .wrap {
    width: min(1080px,calc(100% - 36px))
  }
  .top .brand {
    flex-basis: 220px!important;
    min-width: 220px!important;
    max-width: 220px!important
  }
  .top .navlinks {
    gap: 18px!important
  }
  .top .navlinks a {
    font-size: 12px!important
  }
  .offers,
  .selected-offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (min-width:1121px) {
  .offer-box {
    padding: 12px!important;
    border-radius: 18px!important
  }
  .offers {
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 10px!important
  }
  .offer {
    padding: 10px!important;
    border-radius: 15px!important
  }
  .offer .offer-media {
    height: 104px!important;
    min-height: 104px!important;
    border-radius: 9px!important;
    margin-bottom: 6px!important
  }
  .offer-topline {
    min-height: 18px!important
  }
  .offer h3 {
    font-size: 13px!important;
    line-height: 1.18!important;
    margin: 6px 0 4px!important
  }
  .offer small {
    font-size: 8px!important;
    line-height: 1.25!important;
    min-height: 27px!important
  }
  .no-login-strip {
    font-size: 7px!important;
    padding: 5px 7px!important;
    margin: 5px 0!important
  }
  .loyalty-strip {
    min-height: 30px!important;
    margin: 5px 0!important;
    padding: 4px 6px!important
  }
  .loyalty-strip img {
    width: 20px!important;
    height: 20px!important
  }
  .loyalty-strip b {
    font-size: 10px!important
  }
  .loyalty-strip span {
    font-size: 6.5px!important
  }
  .offer .price {
    font-size: 18px!important;
    line-height: 1.1!important;
    margin: 6px 0!important
  }
}
@media (min-width:951px) and (max-width:1120px) {
  .offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 10px!important
  }
  .offer {
    padding: 10px!important;
    border-radius: 15px!important
  }
  .offer .offer-media {
    height: 104px!important;
    min-height: 104px!important;
    margin-bottom: 6px!important
  }
  .offer h3 {
    font-size: 13px!important;
    margin: 6px 0 4px!important
  }
  .offer small {
    font-size: 8px!important;
    min-height: 27px!important
  }
  .offer .price {
    font-size: 18px!important;
    margin: 6px 0!important
  }
}
@media (max-width:600px) {
  #offerFilters .filter {
    min-height: 40px!important;
    padding: 4px 9px!important
  }
  #offerGrid .offer {
    padding: 7px!important;
    border-radius: 10px!important
  }
  #offerGrid .offer > img,
  #offerGrid .offer img,
  #offerGrid .offer-media {
    height: 84px!important;
    max-height: 84px!important;
    margin-bottom: 5px!important;
    border-radius: 7px!important
  }
  #offerGrid .offer h3 {
    font-size: 11px!important;
    line-height: 1.12!important;
    margin: 4px 0 2px!important
  }
  #offerGrid .offer .price {
    font-size: 16px!important;
    line-height: 1.05!important;
    margin: 3px 0 1px!important
  }
}
@media (min-width:601px) {
  .top .nav {
    flex-direction: row!important;
    align-items: center!important
  }
  .top .brand {
    flex-direction: row!important;
    align-items: center!important;
    flex-wrap: nowrap!important;
    min-width: 0!important;
    width: auto!important
  }
  .top .brand-logo {
    order: 0!important;
    flex: 0 0 78px!important;
    margin: 0!important
  }
}
@media (min-width:951px) {
  .selected-offers {
    grid-template-columns: repeat(2,minmax(300px,410px))!important;
    justify-content: start!important;
    align-items: start!important;
    gap: 14px!important
  }
  .selected-offer-wrap {
    min-width: 0!important;
    width: 100%!important
  }
  .selected-offer-card {
    width: 100%!important;
    min-height: 0!important
  }
  .selected-offer-card img {
    width: 100%!important;
    height: 150px!important;
    min-height: 150px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  .selected-offer-body {
    padding: 9px 11px 11px!important
  }
  .selected-offer-body h3 {
    font-size: 13px!important;
    margin: 6px 0 3px!important
  }
  .selected-offer-body p {
    font-size: 8.5px!important;
    margin-bottom: 6px!important
  }
  .selected-offer-body strong {
    font-size: 16px!important
  }
}
@media (min-width:601px) {
  #offerGrid.offers {
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  #offerGrid .offer {
    align-self: start!important;
    height: auto!important;
    min-height: 0!important
  }
  #offerGrid .offer small {
    margin-top: 4px!important
  }
}
@media (min-width:1121px) {
  #offerGrid .offer {
    padding: 10px!important
  }
  #offerGrid .offer .offer-media {
    height: 145px!important;
    min-height: 145px!important;
    object-fit: cover!important;
    object-position: center!important;
    margin-bottom: 7px!important
  }
  #offerGrid .offer h3 {
    font-size: 14px!important;
    margin: 6px 0 4px!important
  }
  #offerGrid .offer small {
    font-size: 8px!important;
    line-height: 1.3!important;
    min-height: 0!important
  }
  #offerGrid .offer .price {
    font-size: 19px!important;
    margin: 7px 0!important
  }
}
@media (min-width:951px) and (max-width:1120px) {
  #offerGrid .offer .offer-media {
    height: 132px!important;
    min-height: 132px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  #offerGrid .offer small {
    margin-top: 4px!important
  }
}
#offerFilters .filter {
  background: linear-gradient(180deg, #162534 0%, #0b141e 100%) !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 38px !important;
  padding: 4px 12px !important;
  gap: 5px !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  color: #d1e2f3 !important;
}
@media (max-width:600px) {
  #offerFilters .filter {
    min-height: 34px !important;
    padding: 3px 9px !important;
    gap: 4px !important;
    border-radius: 16px !important;
    font-size: 10.5px !important;
  }
  .selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 7px!important;
    align-items: start!important
  }
  .selected-offer-card img {
    height: 78px!important;
    min-height: 78px!important;
    object-fit: cover!important
  }
  .selected-offer-body {
    padding: 7px 8px 9px!important
  }
  .selected-offer-body h3 {
    font-size: 10.5px!important;
    margin: 5px 0 2px!important
  }
  .selected-offer-body p {
    font-size: 7.5px!important;
    margin-bottom: 4px!important
  }
  .selected-offer-body strong {
    font-size: 13px!important
  }
  #offerGrid.offers {
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  #offerGrid .offer {
    align-self: start!important;
    height: auto!important;
    min-height: 0!important;
    padding: 7px!important
  }
  #offerGrid .offer .offer-media {
    height: 88px!important;
    min-height: 88px!important;
    object-fit: cover!important;
    margin-bottom: 5px!important
  }
  #offerGrid .offer small {
    margin-top: 3px!important;
    min-height: 0!important
  }
}
@media (min-width:601px) {
  .top .nav {
    gap: 28px!important
  }
  .top .brand {
    display: flex!important;
    flex: 0 0 auto!important;
    width: auto!important;
    min-width: 330px!important;
    max-width: 380px!important;
    gap: 12px!important;
    align-items: center!important;
    overflow: visible!important;
    flex-direction: row!important
  }
  .top .brand-logo {
    width: 92px!important;
    height: 58px!important;
    min-width: 92px!important;
    flex: 0 0 92px!important;
    margin: 0!important;
    position: relative!important;
    overflow: visible!important;
    background: 0 0!important;
    border: 0!important;
    box-shadow: none!important;
    filter: none!important
  }
  .top .brand-logo:after,
  .top .brand-logo:before {
    display: none!important;
    content: none!important
  }
}
@media (min-width:1200px) {
  #offerGrid.offers,
  .offers {
    grid-template-columns: repeat(5,minmax(0,1fr))!important;
    gap: 10px!important;
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  #offerGrid .offer {
    width: 100%!important;
    min-width: 0!important;
    height: auto!important;
    min-height: 0!important;
    align-self: start!important;
    display: flex!important;
    flex-direction: column!important;
    padding: 9px!important;
    border-radius: 14px!important
  }
  #offerGrid .offer .offer-media,
  #offerGrid .offer > img,
  #offerGrid .offer > video {
    width: 100%!important;
    height: 108px!important;
    min-height: 108px!important;
    max-height: 108px!important;
    object-fit: cover!important;
    object-position: center!important;
    border-radius: 9px!important;
    margin: 0 0 6px!important
  }
  #offerGrid .offer-topline {
    min-height: 0!important;
    margin: 0 0 3px!important;
    gap: 3px!important
  }
  #offerGrid .offer .badge {
    font-size: 6.5px!important;
    padding: 4px 6px!important;
    line-height: 1!important
  }
  #offerGrid .offer h3 {
    font-size: 12px!important;
    line-height: 1.15!important;
    margin: 4px 0 3px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #offerGrid .no-login-strip {
    font-size: 6.5px!important;
    line-height: 1.15!important;
    padding: 4px 6px!important;
    margin: 3px 0!important;
    border-radius: 7px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #offerGrid .loyalty-strip {
    min-height: 30px!important;
    height: 30px!important;
    margin: 4px 0!important;
    padding: 3px 5px!important;
    border-radius: 7px!important;
    gap: 5px!important
  }
  #offerGrid .loyalty-strip img {
    width: 20px!important;
    height: 20px!important
  }
  #offerGrid .loyalty-strip b {
    font-size: 9px!important
  }
  #offerGrid .loyalty-strip span {
    font-size: 6px!important
  }
  #offerGrid .offer small {
    display: block!important;
    min-height: 0!important;
    height: 16px!important;
    margin: 3px 0 0!important;
    font-size: 6.5px!important;
    line-height: 1.25!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #offerGrid .offer .price {
    font-size: 17px!important;
    line-height: 1!important;
    margin: 6px 0!important;
    white-space: nowrap!important
  }
  #offerGrid .offer .old {
    font-size: 8px!important
  }
}
@media (min-width:951px) and (max-width:1199px) {
  #offerGrid.offers,
  .offers {
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 10px!important;
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  #offerGrid .offer {
    height: auto!important;
    min-height: 0!important;
    align-self: start!important;
    padding: 9px!important
  }
  #offerGrid .offer .offer-media,
  #offerGrid .offer > img,
  #offerGrid .offer > video {
    height: 105px!important;
    min-height: 105px!important;
    max-height: 105px!important;
    object-fit: cover!important;
    margin-bottom: 6px!important
  }
  #offerGrid .offer h3 {
    font-size: 12px!important;
    margin: 5px 0 3px!important
  }
  #offerGrid .offer small {
    font-size: 7px!important;
    min-height: 0!important;
    height: 17px!important
  }
  #offerGrid .offer .price {
    font-size: 18px!important;
    margin: 6px 0!important
  }
}
@media (max-width:600px) {
  .top .brand {
    flex-direction: row!important;
    align-items: center!important;
    gap: 6px!important;
    overflow: hidden!important
  }
  .top .brand-logo {
    width: 55px!important;
    height: 42px!important;
    min-width: 55px!important;
    flex: 0 0 55px!important;
    background: 0 0!important;
    border: 0!important;
    box-shadow: none!important;
    filter: none!important
  }
  .top .brand-logo:after,
  .top .brand-logo:before {
    display: none!important;
    content: none!important
  }
  #offerGrid.offers,
  .offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 8px!important;
    align-items: start!important;
    grid-auto-rows: max-content!important
  }
  #offerGrid .offer {
    height: auto!important;
    min-height: 0!important;
    align-self: start!important;
    padding: 7px!important
  }
  #offerGrid .offer .offer-media,
  #offerGrid .offer > img,
  #offerGrid .offer > video {
    height: 82px!important;
    min-height: 82px!important;
    max-height: 82px!important;
    object-fit: cover!important;
    margin-bottom: 5px!important
  }
  #offerGrid .offer h3 {
    font-size: 10.5px!important;
    margin: 4px 0 2px!important
  }
  #offerGrid .offer small {
    font-size: 6.5px!important;
    height: 15px!important;
    min-height: 0!important
  }
  #offerGrid .offer .price {
    font-size: 15px!important;
    margin: 4px 0!important
  }
}
#offerGrid.offers {
  grid-template-columns: repeat(5,minmax(0,1fr))!important;
  gap: 12px!important
}
#offerGrid.offers .offer {
  width: 100%!important;
  min-width: 0!important;
  flex-direction: column!important;
  justify-content: flex-start!important;
  border-radius: 15px!important
}
#offerGrid.offers .offer img,
#offerGrid.offers .offer video,
#offerGrid.offers .offer-media {
  display: block!important;
  width: 100%!important;
  height: auto!important;
  aspect-ratio: 16/9!important;
  min-height: 0!important;
  flex: 0 0 auto!important;
  object-fit: cover!important;
  border-radius: 10px!important;
  margin: 0 0 7px!important
}
#offerGrid.offers .offer .old {
  font-size: 9px!important;
  margin-left: 5px!important
}
@media (max-width:1100px) {
  #offerGrid.offers {
    grid-template-columns: repeat(4,minmax(0,1fr))!important
  }
}
@media (max-width:850px) {
  #offerGrid.offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:600px) {
  #offerGrid.offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 8px!important
  }
  #offerGrid.offers .offer {
    padding: 6px!important;
    border-radius: 12px!important
  }
  #offerGrid.offers .offer img,
  #offerGrid.offers .offer video,
  #offerGrid.offers .offer-media {
    border-radius: 9px!important;
    margin-bottom: 6px!important
  }
  #offerGrid.offers .offer h3 {
    font-size: 12px!important;
    margin-left: 2px!important;
    margin-bottom: 3px!important
  }
  #offerGrid.offers .offer .price {
    font-size: 18px!important;
    margin-left: 2px!important
  }
}
.top .brand-logo.animated-li-mark {
  margin-left: -2px!important;
  filter: none!important;
  position: relative!important;
  display: block!important;
  overflow: visible!important;
  isolation: isolate!important;
  perspective: 700px!important;
  transform: translateZ(0)!important;
  background: 0 0!important;
  border: 0!important;
  box-shadow: none!important
}
.top .brand-logo.animated-li-mark::before {
  inset: -20px -22px!important;
  content: ""!important;
  position: absolute!important;
  z-index: -2!important;
  left: -20px!important;
  top: -19px!important;
  width: 162px!important;
  height: 108px!important;
  border-radius: 50%!important;
  background: radial-gradient(ellipse at 16% 50%,rgba(0,226,255,.72),transparent 23%),radial-gradient(ellipse at 50% 12%,rgba(84,126,255,.5),transparent 22%),radial-gradient(ellipse at 84% 50%,rgba(0,214,255,.72),transparent 23%),radial-gradient(ellipse at 50% 88%,rgba(117,76,255,.42),transparent 22%)!important;
  filter: none!important;
  pointer-events: none!important;
  animation: 14s ease-in-out infinite liAuraUltraSoft!important;
  opacity: .34!important;
  display: none !important
}
.top .brand-logo.animated-li-mark::after {
  inset: -15px -17px!important;
  content: ""!important;
  position: absolute!important;
  z-index: -1!important;
  left: -17px!important;
  top: -15px!important;
  width: 156px!important;
  height: 100px!important;
  border-radius: 50%!important;
  background: conic-gradient(from 0,transparent 0 18deg,rgba(56,229,255,.95) 25deg 38deg,transparent 45deg 103deg,rgba(116,91,255,.76) 111deg 124deg,transparent 132deg 191deg,rgba(0,235,255,.9) 199deg 213deg,transparent 221deg 282deg,rgba(67,159,255,.8) 290deg 304deg,transparent 312deg 360deg)!important;
  filter: none!important;
  pointer-events: none!important;
  animation: 16s ease-in-out infinite liAuraUltraSoft!important;
  opacity: .24!important;
  display: none !important
}
@keyframes liAuraSpin {
  from {
    transform: rotate(0) scale(.98)
  }
  to {
    transform: rotate(360deg) scale(.98)
  }
}
@keyframes liAuraBreath {
  0,
  100% {
    opacity: .46;
    transform: scale(.92)
  }
  50% {
    opacity: .86;
    transform: scale(1.08)
  }
}
.top .brand-logo.animated-li-mark img {
  display: none!important
}
@media (max-width:700px) {
  .top .brand {
    gap: 6px!important;
    max-width: calc(100% - 88px)!important
  }
  .top .brand-logo.animated-li-mark {
    width: 103px!important;
    height: 60px!important;
    flex: 0 0 103px!important
  }
}
@media (max-width:390px) {
  .top .brand-logo.animated-li-mark {
    width: 94px!important;
    flex-basis: 94px!important
  }
}
.top .brand-logo.animated-li-mark {
  width: 112px!important;
  height: 64px!important;
  flex: 0 0 112px!important
}
@media (max-width:700px) {
  .top .brand-logo.animated-li-mark {
    width: 96px!important;
    height: 56px!important;
    flex: 0 0 96px!important
  }
}
.payment-instruction {
  padding: 15px 16px!important;
  margin: 13px 0 15px!important;
  border: 1px solid rgba(70,205,255,.38)!important;
  border-radius: 15px!important;
  background: linear-gradient(135deg,rgba(15,159,229,.13),rgba(76,76,255,.08))!important;
  box-shadow: none
}
.payment-instruction strong {
  font-size: 15px!important;
  color: #e9f8ff!important;
  line-height: 1.45
}
.payment-instruction strong::first-letter {
  color: #52d7ff
}
.payment-instruction span {
  font-size: 11px!important;
  color: #91adbf!important
}
.payment-reference-field {
  margin-top: 15px!important
}
.payment-reference-field input {
  font-size: 15px!important;
  font-weight: 700
}
.payment-screenshot-field {
  margin-top: 13px!important
}
.payment-screenshot-field input[type=file] {
  width: 100%;
  padding: 11px 12px;
  border: 1px dashed #2b5872;
  border-radius: 11px;
  background: #07131e;
  color: #9fb3c2;
  cursor: pointer;
  font-size: 11px
}
.payment-screenshot-preview {
  margin-top: 9px;
  padding: 7px;
  border: 1px solid rgba(51,190,255,.18);
  border-radius: 11px;
  background: #06111a;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8da5b6;
  font-size: 10px
}
.payment-screenshot-preview img {
  width: 58px;
  height: 42px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #23445b
}
.hidden {
  display: none!important
}
.profile-order-status {
  margin-top: 17px;
  padding: 14px;
  border: 1px solid #203c52;
  border-radius: 15px
}
.profile-order-status-head strong {
  font-size: 14px
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 1000;
  border: 1px solid;
  white-space: nowrap
}
.status-pill.pending {
  color: #ffd66d;
  border-color: rgba(255,214,109,.28);
  background: rgba(255,214,109,.07)
}
.status-pill.processing {
  color: #68d7ff;
  border-color: rgba(67,193,255,.28);
  background: rgba(38,170,255,.07);
  box-shadow: none
}
.status-pill.completed {
  color: #72ffbf;
  border-color: rgba(67,255,170,.28);
  background: rgba(35,200,120,.07);
  box-shadow: none
}
.status-pill.cancelled {
  color: #ff8094;
  border-color: rgba(255,70,100,.28);
  background: rgba(255,50,80,.07)
}
.customer-order-card summary {
  color: #65ceff
}
.order-history-item {
  border-top: 1px solid rgba(255,255,255,.05);
  color: #a9bac8
}
.order-history-item small {
  font-size: 8px
}
@media (max-width:620px) {
  .header-actions {
    gap: 6px
  }
  .cart-nav {
    width: 42px;
    height: 42px;
    font-size: 17px
  }
  .profile-order-status-head {
    align-items: flex-start
  }
  .payment-instruction strong {
    font-size: 13px!important
  }
}
.profile-order-status-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px
}
.profile-order-status-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.profile-order-sub {
  font-size: .78rem;
  color: #7f95aa;
  font-weight: 500
}
.profile-orders-list {
  max-height: 300px;
  overflow: auto;
  display: grid;
  gap: 14px
}
.order-empty {
  padding: 22px;
  border: 1px dashed rgba(70,170,220,.25);
  border-radius: 18px;
  text-align: center;
  color: #8195a8
}
.customer-order-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(66,164,216,.22);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(8,28,42,.9),rgba(4,15,25,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.025)
}
.customer-order-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #35bfff;
  opacity: .8
}
.customer-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.customer-order-head > div {
  min-width: 0
}
.customer-order-head strong {
  display: block;
  font-size: 1rem;
  color: #eef8ff
}
.customer-order-head small {
  display: block;
  margin-top: 4px;
  color: #637c90;
  font-size: .7rem
}
.customer-order-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #b6cad8;
  font-size: .78rem
}
.customer-order-meta span:first-child {
  color: #55d3ff;
  font-weight: 800
}
.customer-order-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(25,71,98,.24);
  color: #a9c4d5;
  font-size: .82rem
}
.completion-message {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(31,150,104,.1);
  border: 1px solid rgba(65,225,155,.16);
  color: #bdebd4;
  font-size: .82rem
}
.completion-proof {
  margin-top: 12px
}
.completion-proof a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(66,164,216,.2);
  background: #061521
}
.completion-proof img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain
}
.order-history {
  display: grid;
  gap: 7px;
  margin-top: 10px
}
.order-history-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  font-size: .75rem
}
.order-history-item small {
  color: #71899a
}
.customer-order-card details {
  margin-top: 11px;
  color: #9bb3c3
}
.customer-order-card summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700
}
.nav-avatar {
  position: relative;
  transition: filter .25s,transform .25s
}
@keyframes confetti {
  to {
    transform: translate(calc((var(--i) - 14)*18px),calc(-250px - var(--i)*8px)) rotate(540deg);
    opacity: 0
  }
}
.profile-hero {
  position: relative;
  padding: 28px 18px 24px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0,rgba(46,184,255,.14),transparent 55%),linear-gradient(145deg,rgba(8,30,46,.92),rgba(4,15,25,.96));
  border: 1px solid rgba(77,188,240,.2);
  box-shadow: inset 0 1px rgba(255,255,255,.04)
}
.profile-avatar-wrap {
  user-select: none;
  filter: none
}
.profile-avatar {
  border: 2px solid rgba(75,202,255,.48)!important;
  box-shadow: 0 0 0 5px rgba(50,180,255,.06)
}
.profile-stats > div {
  background: linear-gradient(145deg,rgba(9,31,46,.9),rgba(4,17,27,.9))!important;
  border: 1px solid rgba(65,169,219,.18)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.025)
}
.profile-order-status {
  background: linear-gradient(145deg,rgba(7,28,42,.78),rgba(4,15,25,.88))!important;
  border-color: rgba(67,175,224,.22)!important
}
#accountPassword,
#backupCode {
  letter-spacing: .2px
}
@media (max-width:600px) {
  .brand-logo {
    transform-origin: left center
  }
  .profile-order-status {
    border-radius: 24px
  }
  .profile-orders-list {
    padding-bottom: 8px
  }
  .brand-logo,
  .logo {
    transform: scale(.92);
    transform-origin: left center
  }
  .header,
  header {
    min-height: 72px!important;
    padding-top: 8px!important;
    padding-bottom: 8px!important
  }
  .brand-logo img,
  .logo img {
    max-height: 58px!important;
    width: auto!important
  }
  h1 {
    font-size: 34px!important;
    line-height: 1.15!important;
    margin-top: 18px!important
  }
  .categories {
    gap: 8px!important;
    padding-left: 8px!important;
    padding-right: 8px!important
  }
  .top {
    box-shadow: none!important;
    border-bottom: 0!important
  }
  .top .nav {
    min-height: 58px!important;
    height: 58px!important;
    padding: 4px 0!important;
    gap: 6px!important
  }
  .top .animated-li-mark,
  .top .brand-logo {
    width: 34px!important;
    height: 31px!important;
    flex: 0 0 34px!important;
    transform: none!important
  }
  .top .brand {
    gap: 5px!important
  }
  .top .actions {
    gap: 4px!important
  }
  .top .actions .btn {
    padding: 7px 8px!important;
    font-size: 9px!important;
    border-radius: 8px!important
  }
  #pool.hero {
    margin-top: 0!important;
    padding-top: 0!important
  }
  #pool.hero,
  #pool.hero .hero-media,
  #pool.hero .hero-slide {
    top: 0!important
  }
  #pool.hero .hero-media {
    margin-top: 0!important;
    padding-top: 0!important;
    inset: 0!important
  }
}
@media (max-width:900px) {
  .top,
  .top.header {
    height: 64px!important;
    min-height: 64px!important;
    max-height: 64px!important;
    padding: 0!important;
    margin: 0!important;
    border: 0!important;
    border-bottom: 0!important;
    box-shadow: none!important;
    background: transparent!important;
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
  .top::after,
  .top::before {
    display: none!important;
    content: none!important;
    box-shadow: none!important;
    border: 0!important
  }
  .top .nav {
    width: calc(100% - 20px)!important;
    height: 64px!important;
    min-height: 64px!important;
    max-height: 64px!important;
    padding: 0!important;
    margin: 0 auto!important;
    gap: 7px!important;
    align-items: center!important
  }
  .top .brand {
    flex: 1 1 auto!important;
    width: auto!important;
    min-width: 0!important;
    max-width: calc(100% - 94px)!important;
    height: 64px!important;
    gap: 5px!important;
    overflow: visible!important;
    align-items: center!important
  }
  .top .brand-logo.animated-li-mark {
    position: relative!important;
    width: 57px!important;
    height: 45px!important;
    min-width: 57px!important;
    max-width: 57px!important;
    flex: 0 0 57px!important;
    margin: 0!important;
    padding: 0!important;
    overflow: visible!important;
    background: 0 0!important;
    border: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
    filter: none!important
  }
  .top .brand-logo.animated-li-mark::after,
  .top .brand-logo.animated-li-mark::before {
    display: none!important;
    content: none!important
  }
  .top .actions,
  .top .header-actions {
    flex: 0 0 auto!important;
    margin-left: auto!important;
    gap: 5px!important;
    height: 64px!important;
    align-items: center!important
  }
  .top .profile-nav {
    width: 43px!important;
    height: 43px!important;
    min-width: 43px!important;
    padding: 2px!important;
    border-radius: 50%!important
  }
  .top .profile-nav .nav-avatar {
    width: 37px!important;
    height: 37px!important;
    font-size: 15px!important
  }
  .top .profile-nav-text {
    display: none!important
  }
  .top .cart-nav {
    width: 41px!important;
    height: 41px!important;
    min-width: 41px!important;
    padding: 0!important;
    border-radius: 50%!important;
    font-size: 17px!important
  }
  #pool.hero {
    position: relative!important;
    width: calc(100% - 20px)!important;
    height: 240px!important;
    min-height: 240px!important;
    max-height: 240px!important;
    margin: 0 auto!important;
    padding: 0!important;
    border-radius: 16px!important;
    overflow: hidden!important;
    box-sizing: border-box!important
  }
  #pool.hero #heroSlides {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    padding: 0!important
  }
  #pool.hero .hero-slide {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    min-height: 0!important;
    max-height: none!important;
    margin: 0!important;
    padding: 0!important
  }
  #pool.hero .hero-media {
    position: absolute!important;
    inset: -8px!important;
    width: auto!important;
    height: auto!important;
    margin: 0!important;
    padding: 0!important;
    background-position: center center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    transform: scale(1.03)!important
  }
  #pool.hero .hero-overlay {
    position: absolute!important;
    inset: 0!important;
    margin: 0!important;
    padding: 0!important
  }
  #pool.hero .hero-copy,
  #pool.hero .hero-minimal-copy {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    min-height: 0!important;
    margin: 0!important;
    padding: 0!important
  }
}
@keyframes liAuraUltraSoft {
  0,
  100% {
    opacity: .22;
    transform: scale(.98)
  }
  50% {
    opacity: .38;
    transform: scale(1.015)
  }
}
@media (max-width:600px) {
  body > header.top,
  header.top {
    background: 0 0!important;
    border: 0!important;
    border-bottom: 0!important;
    box-shadow: none!important;
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important;
    min-height: 58px!important;
    height: 58px!important;
    max-height: 58px!important;
    padding: 0!important;
    margin: 0!important
  }
  header.top::after,
  header.top::before {
    display: none!important;
    content: none!important
  }
  header.top .nav {
    width: calc(100% - 16px)!important;
    height: 58px!important;
    min-height: 58px!important;
    max-height: 58px!important;
    padding: 0!important;
    margin: 0 auto!important;
    gap: 6px!important;
    align-items: center!important;
    box-sizing: border-box!important
  }
  header.top .brand {
    height: 58px!important;
    gap: 4px!important;
    min-width: 0!important;
    max-width: calc(100% - 96px)!important;
    align-items: center!important;
    overflow: visible!important
  }
  header.top .brand-logo.animated-li-mark {
    width: 40px!important;
    height: 32px!important;
    min-width: 40px!important;
    max-width: 40px!important;
    flex: 0 0 40px!important;
    margin: 0!important;
    padding: 0!important;
    transform: none!important;
    filter: none!important
  }
  header.top .brand-logo.animated-li-mark::after,
  header.top .brand-logo.animated-li-mark::before {
    display: none!important;
    content: none!important
  }
  header.top .actions,
  header.top .header-actions {
    height: 58px!important;
    gap: 4px!important;
    margin-left: auto!important;
    align-items: center!important;
    gap: 7px!important;
    gap: 8px!important
  }
  #pool.hero {
    position: relative!important;
    aspect-ratio: 315/185!important;
    padding: 0!important;
    border: 1px solid rgba(39,150,210,.85)!important;
    overflow: hidden!important;
    box-sizing: border-box!important;
    box-shadow: 0 0 0 1px rgba(23,104,145,.18)!important
  }
  #pool.hero,
  #pool.hero #heroSlides,
  #pool.hero .hero-copy,
  #pool.hero .hero-media,
  #pool.hero .hero-overlay,
  #pool.hero .hero-slide,
  #pool.hero > * {
    margin-top: 0!important;
    padding-top: 0!important
  }
  #pool.hero #heroSlides {
    position: absolute!important;
    inset: 0!important;
    margin: 0!important;
    padding: 0!important
  }
  #pool.hero .hero-slide {
    position: absolute!important;
    inset: 0!important;
    min-height: 0!important;
    max-height: none!important;
    margin: 0!important;
    padding: 0!important
  }
  #pool.hero .hero-copy,
  #pool.hero .hero-minimal-copy,
  #pool.hero .hero-overlay {
    position: absolute!important;
    inset: 0!important;
    min-height: 0!important;
    margin: 0!important;
    padding: 0!important
  }
  #pool.hero .hero-nav {
    left: 50%!important;
    transform: translateX(-50%)!important;
    bottom: 5px!important
  }
  header.top .profile-nav .nav-avatar {
    width: 29px!important;
    height: 29px!important;
    font-size: 12px!important
  }
  header.top .cart-count {
    transform-origin: right top!important;
    transform: scale(.82)!important
  }
  #pool.hero {
    aspect-ratio: 300/172!important;
    animation: none!important;
    background: #07111b!important;
    box-shadow: 0 0 0 1px rgba(76,210,255,.06)!important;
    width: min(330px,calc(100% - 20px))!important;
    height: 120px!important;
    min-height: 120px!important;
    max-height: 120px!important;
    aspect-ratio: 330/120!important;
    margin: 0 auto!important;
    border-radius: 16px!important
  }
  #pool.hero .hero-media::after,
  #pool.hero .hero-media::before,
  #pool.hero .hero-slide::after,
  #pool.hero .hero-slide::before,
  #pool.hero::after,
  #pool.hero::before {
    display: none!important;
    animation: none!important;
    content: none!important;
    box-shadow: none!important
  }
  #pool.hero .hero-media {
    position: absolute!important;
    inset: 0!important;
    margin: 0!important;
    padding: 0!important;
    background-position: center center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    inset: 0!important;
    transform: none!important
  }
  header.top .profile-nav {
    width: 35px!important;
    height: 35px!important;
    min-width: 35px!important;
    padding: 1px!important;
    border-radius: 50%!important
  }
  header.top .cart-nav {
    width: 33px!important;
    height: 33px!important;
    min-width: 33px!important;
    font-size: 14px!important;
    border-radius: 50%!important
  }
  #pool.hero #heroSlides,
  #pool.hero .hero-copy,
  #pool.hero .hero-media,
  #pool.hero .hero-minimal-copy,
  #pool.hero .hero-overlay,
  #pool.hero .hero-slide {
    width: 100%!important;
    height: 100%!important
  }
}
#pool.hero .hero-media::after,
#pool.hero .hero-media::before,
#pool.hero .hero-slide::after,
#pool.hero .hero-slide::before,
#pool.hero::after,
#pool.hero::before {
  border: 0!important;
  outline: 0!important
}
.offer-sort-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 6px 4px 6px 0;
  position: relative;
  z-index: 50;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto
}
.sort-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  color: rgba(255,255,255,.75);
  transition: color .15s,background .15s
}
.sort-left:hover {
  color: #fff;
  background: rgba(255,255,255,.06)
}
.sort-icon-svg {
  width: 16px;
  height: 13px;
  flex-shrink: 0;
  color: inherit
}
.sort-field-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: inherit;
  white-space: nowrap
}
.sort-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0
}
.sort-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border: none;
  background: 0 0;
  cursor: pointer;
  color: rgba(255,255,255,.75);
  border-radius: 0 8px 8px 0;
  transition: color .15s,background .15s,opacity .2s
}
.sort-dir-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.06)
}
.sort-arrow-svg {
  width: 12px;
  height: 16px;
  transition: transform .22s cubic-bezier(.4,0,.2,1)
}
.sort-dropdown {
  position: absolute;
  top: calc(100%+4px);
  right: 0;
  min-width: 160px;
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  box-shadow: none;
  z-index: 400;
  overflow: hidden;
  padding: 6px 0;
  animation: .15s sortDropIn
}
@keyframes sortDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.97)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.sort-drop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  background: 0 0;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s
}
.sort-drop-item:hover {
  background: rgba(255,255,255,.07)
}
.sort-drop-item .sdi-check {
  font-size: 14px;
  color: #6b90ff;
  opacity: 0;
  transition: opacity .12s
}
.sort-drop-item.active {
  color: #6b90ff;
  font-weight: 600
}
.sort-drop-item.active .sdi-check {
  opacity: 1
}
.category-filter-wrap {
  width: 100%;
  min-width: 0
}
.category-filter-arrow {
  position: absolute;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  user-select: none;
  box-shadow: none;
}
.category-filter-arrow:hover {
  color: #29b9ff;
  transform: translateY(calc(-50% - 4px)) scale(1.1)!important;
  border-color: transparent;
  box-shadow: none;
}
.category-filter-arrow.left {
  left: -4px
}
.category-filter-arrow.right {
  right: -4px
}
.category-filter-wrap::after,
.category-filter-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  z-index: 7;
  pointer-events: none;
  opacity: .72!important
}
.category-filter-wrap::before {
  left: 0;
  background: linear-gradient(90deg,#07131d 0,rgba(7,19,29,0) 100%)
}
.category-filter-wrap::after {
  right: 0;
  background: linear-gradient(270deg,#07131d 0,rgba(7,19,29,0) 100%)
}
#pool.hero,
#pool.hero .hero-media,
#pool.hero .hero-media::after,
#pool.hero .hero-media::before,
#pool.hero .hero-slide,
#pool.hero .hero-slide::after,
#pool.hero .hero-slide::before,
#pool.hero::after,
#pool.hero::before {
  filter: none!important;
  mix-blend-mode: normal!important
}
#pool.hero .hero-slide.active .hero-media {
  transform: none!important
}
@media (max-width:600px) {
  #pool.hero {
    border: 0!important;
    outline: 0!important;
    box-shadow: none!important
  }
  #offerFilters {
    gap: 5px!important;
    padding: 3px 22px 7px!important;
    margin-bottom: 9px!important
  }
  #offerFilters .filter {
    min-height: 36px!important;
    padding: 3px 7px!important;
    gap: 5px!important;
    border-radius: 10px!important;
    font-size: 8.5px!important
  }
  .category-filter-arrow {
    background: transparent !important;
    width: 23px!important;
    height: 23px!important;
    margin-top: 0!important;
    font-size: 14px!important;
    transform: translateY(calc(-50% - 4px))!important
  }
  .category-filter-arrow.left {
    left: -2px
  }
  .category-filter-arrow.right {
    right: -2px
  }
  .category-filter-wrap::after,
  .category-filter-wrap::before {
    width: 20px
  }
  #pool.hero .hero-slide {
    animation: none!important;
    transition: opacity .36s,transform .46s cubic-bezier(.22,.61,.36,1),visibility .36s!important
  }
  #pool.hero .hero-media,
  #pool.hero .hero-slide.active .hero-media {
    animation: none!important;
    transition: none!important;
    transform: none!important;
    filter: none!important
  }
  #pool.hero .hero-media::after,
  #pool.hero .hero-media::before,
  #pool.hero .hero-slide::after,
  #pool.hero .hero-slide::before,
  #pool.hero::after,
  #pool.hero::before {
    display: none!important;
    animation: none!important;
    transition: none!important;
    opacity: 0!important;
    content: none!important
  }
  .category-filter-arrow:hover {
    transform: translateY(calc(-50% - 4px)) scale(1.04)!important
  }
}
.selected-offer-card,
.selected-offers .selected-offer-card {
  border: 0!important;
  outline: 0!important;
  box-shadow: none!important;
  background: #07131e!important;
  overflow: hidden!important
}
.selected-offer-card::after,
.selected-offer-card::before {
  content: none!important;
  display: none!important;
  opacity: 0!important;
  background: 0 0!important;
  box-shadow: none!important
}
.selected-offer-card img {
  width: 100%!important;
  display: block!important;
  object-fit: cover!important;
  object-position: center!important;
  margin: 0!important;
  border: 0!important;
  border-radius: 0!important
}
.selected-offer-body {
  min-height: 0!important;
  background: linear-gradient(180deg,rgba(4,12,18,.08),rgba(4,12,18,.72))!important
}
.selected-offer-body h3 {
  margin: 2px 0!important;
  font-size: 12px!important;
  line-height: 1.08!important
}
.selected-offer-body p {
  display: none!important
}
.selected-offer-body strong {
  display: block!important;
  font-size: 16px!important;
  line-height: 1.05!important;
  margin: 2px 0 0!important
}
@media (max-width:600px) {
  .selected-offers {
    gap: 8px!important
  }
  .selected-offers .selected-offer-wrap {
    gap: 5px!important;
    min-width: 0!important
  }
  .selected-offer-card {
    height: 126px!important;
    min-height: 126px!important;
    max-height: 126px!important;
    padding: 0!important;
    border: 0!important;
    border-radius: 11px!important;
    box-shadow: none!important
  }
  .selected-offer-card img {
    height: 96px!important;
    min-height: 96px!important;
    max-height: 96px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  .selected-offer-body {
    height: 30px!important;
    min-height: 30px!important;
    padding: 3px 7px 4px!important;
    box-sizing: border-box!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    background: linear-gradient(180deg,rgba(4,12,18,.16),rgba(4,12,18,.82))!important
  }
  .selected-offer-body h3 {
    font-size: 9px!important;
    line-height: 1!important;
    margin: 0 0 2px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  .selected-offer-body strong {
    font-size: 13px!important;
    line-height: 1!important;
    margin: 0!important
  }
  .selected-offer-badge {
    font-size: 7px!important;
    line-height: 1!important;
    margin-bottom: 3px!important;
    opacity: .9!important
  }
}
#pool.hero .hero-copy,
#pool.hero .hero-media,
#pool.hero .hero-minimal-copy,
#pool.hero .hero-overlay {
  transition: none!important
}
#pool.hero .hero-media::after,
#pool.hero .hero-media::before,
#pool.hero .hero-slide::after,
#pool.hero .hero-slide::before,
#pool.hero::after,
#pool.hero::before {
  content: none!important;
  display: none!important;
  opacity: 0!important;
  animation: none!important;
  transition: none!important;
  filter: none!important;
  box-shadow: none!important;
  background-image: none!important
}
.selected-offers {
  gap: 7px!important
}
.selected-offer-card {
  position: relative!important;
  overflow: hidden!important;
  border: 0!important;
  outline: 0!important;
  background: linear-gradient(145deg,#0d1e2c,#07121d 62%,#091827)!important;
  box-shadow: none!important;
  transform: none!important
}
.selected-offer-card:hover {
  transform: translateY(-1px)!important;
  border: 0!important;
  box-shadow: none!important
}
.selected-offer-card::before {
  content: ""!important;
  position: absolute!important;
  inset: -28%!important;
  z-index: 0!important;
  pointer-events: none!important;
  background: conic-gradient(from 0,rgba(0,191,255,.14),rgba(102,77,255,.12),rgba(0,229,191,.11),rgba(0,191,255,.14))!important;
  filter: none!important;
  opacity: .65!important;
  animation: 8s linear infinite offerAmbientColor!important;
  display: none !important
}
.selected-offer-card::after {
  content: ""!important;
  position: absolute!important;
  left: -35%!important;
  top: 0!important;
  width: 55%!important;
  height: 2px!important;
  z-index: 3!important;
  pointer-events: none!important;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.58),rgba(115,226,255,.34),transparent)!important;
  filter: none!important;
  opacity: .62!important;
  animation: 9s ease-in-out infinite offerTopShine!important;
  display: none !important
}
.selected-offer-card > * {
  position: relative!important;
  z-index: 2!important
}
@keyframes offerAmbientColor {
  0 {
    transform: rotate(0);
    filter: hue-rotate(0)
  }
  50% {
    transform: rotate(180deg);
    filter: hue-rotate(34deg)
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(0)
  }
}
.category-filter-wrap {
  position: relative!important
}
.category-filter-arrow {
  top: 50%!important;
  pointer-events: auto!important;
  cursor: pointer!important;
  z-index: 20!important;
  opacity: 1!important;
  transform: translateY(calc(-50% - 4px))!important;
  transition: opacity .34s,transform .34s,border-color .2s,box-shadow .2s!important;
  touch-action: manipulation!important
}
@media (max-width:600px) {
  #pool.hero {
    width: min(330px,calc(100% - 20px))!important;
    height: 120px!important;
    min-height: 120px!important;
    max-height: 120px!important;
    margin: 0 auto!important;
    border-radius: 15px!important
  }
  #heroHighlights.selected-offers {
    gap: 6px!important
  }
  #heroHighlights .selected-offer-wrap {
    gap: 3px!important;
    min-width: 0!important
  }
  #heroHighlights .selected-offer-card {
    height: 106px!important;
    min-height: 106px!important;
    max-height: 106px!important;
    border-radius: 10px!important;
    box-shadow: none!important
  }
  #heroHighlights .selected-offer-card img {
    width: 100%!important;
    height: 80px!important;
    min-height: 80px!important;
    max-height: 80px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  #heroHighlights .selected-offer-body {
    height: 26px!important;
    min-height: 26px!important;
    padding: 2px 6px 3px!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    background: linear-gradient(180deg,rgba(4,12,18,.05),rgba(4,12,18,.8))!important
  }
  #heroHighlights .selected-offer-body h3 {
    font-size: 8px!important;
    line-height: 1!important;
    margin: 0 0 1px!important
  }
  #heroHighlights .selected-offer-body p {
    display: none!important
  }
  #heroHighlights .selected-offer-body strong {
    font-size: 11px!important;
    line-height: 1!important;
    margin: 0!important
  }
  #heroHighlights .selected-offer-badge {
    font-size: 6px!important;
    line-height: 1!important;
    padding: 2px 4px!important;
    margin: 0 0 2px!important;
    max-width: 100%!important
  }
  .category-filter-arrow {
    width: 23px!important;
    height: 23px!important;
    font-size: 14px!important
  }
}
#heroSlides,
#heroSlides *,
#pool.hero,
#pool.hero * {
  -webkit-tap-highlight-color: transparent!important;
  -webkit-touch-callout: none!important
}
#pool.hero .hero-media,
#pool.hero .hero-overlay,
#pool.hero .hero-slide,
#pool.hero .hero-slide * {
  filter: none!important;
  mix-blend-mode: normal!important
}
#pool.hero .hero-slide,
#pool.hero .hero-slide.active,
#pool.hero .hero-slide.leaving {
  animation: none!important
}
#heroHighlights .selected-offer-card:hover {
  border: 0!important
}
#heroHighlights .selected-offer-card:active {
  border: 0!important;
  outline: 0!important
}
@keyframes liOfferAmbient {
  0 {
    transform: rotate(0);
    filter: hue-rotate(0);
    opacity: .6
  }
  50% {
    transform: rotate(180deg);
    filter: hue-rotate(38deg);
    opacity: .76
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(0);
    opacity: .6
  }
}
@media (max-width:768px) {
  #heroHighlights {
    gap: 6px!important
  }
  #heroHighlights .selected-offer-wrap {
    min-width: 0!important;
    gap: 3px!important
  }
  #heroHighlights .selected-offer-card {
    height: 112px!important;
    min-height: 112px!important;
    max-height: 112px!important;
    border-radius: 10px!important;
    box-shadow: none!important
  }
  #heroHighlights .selected-offer-card img {
    height: 84px!important;
    min-height: 84px!important;
    max-height: 84px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  #heroHighlights .selected-offer-body {
    height: 28px!important;
    min-height: 28px!important;
    max-height: 28px!important;
    padding: 2px 6px 3px!important;
    box-sizing: border-box!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important
  }
  #heroHighlights .selected-offer-body h3 {
    font-size: 8px!important;
    line-height: 1!important;
    margin: 0 0 2px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #heroHighlights .selected-offer-body strong {
    font-size: 12px!important;
    line-height: 1!important;
    margin: 0!important
  }
  #heroHighlights .selected-offer-body p {
    display: none!important
  }
  #heroHighlights .selected-offer-badge {
    font-size: 6.5px!important;
    line-height: 1!important;
    padding: 2px 4px!important;
    margin: 0 0 2px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #heroHighlights .selected-offer-card::after {
    filter: none!important;
    display: none !important
  }
}
@keyframes liOfferBackLight {
  0 {
    transform: scale(.97) rotate(0);
    filter: hue-rotate(0);
    opacity: .72
  }
  50% {
    transform: scale(1.04) rotate(3deg);
    filter: hue-rotate(28deg);
    opacity: .96
  }
  100% {
    transform: scale(1) rotate(-2deg);
    filter: hue-rotate(-14deg);
    opacity: .8
  }
}
@keyframes liOfferReflection {
  0,
  22% {
    left: -72%;
    opacity: 0
  }
  30% {
    opacity: .1
  }
  43% {
    opacity: .62
  }
  57% {
    left: 130%;
    opacity: .24
  }
  100%,
  64% {
    left: 130%;
    opacity: 0
  }
}
@media (max-width:600px) {
  #heroHighlights {
    gap: 5px!important;
    padding-left: 0!important;
    padding-right: 0!important
  }
  #heroHighlights .selected-offer-wrap {
    flex: 1 1 0!important;
    width: auto!important;
    max-width: none!important;
    min-width: 0!important
  }
  #heroHighlights .selected-offer-card {
    width: 100%!important;
    height: 94px!important;
    min-height: 94px!important;
    max-height: 94px!important;
    border-radius: 9px!important;
    box-shadow: none!important
  }
  #heroHighlights .selected-offer-card img {
    width: 100%!important;
    height: 70px!important;
    min-height: 70px!important;
    max-height: 70px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  #heroHighlights .selected-offer-body {
    height: 24px!important;
    min-height: 24px!important;
    max-height: 24px!important;
    padding: 2px 5px!important;
    box-sizing: border-box!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important
  }
  #heroHighlights .selected-offer-body h3 {
    font-size: 7px!important;
    line-height: 1!important;
    margin: 0 0 1px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #heroHighlights .selected-offer-body strong {
    font-size: 11px!important;
    line-height: 1!important;
    margin: 0!important
  }
  #heroHighlights .selected-offer-body p {
    display: none!important
  }
  #heroHighlights .selected-offer-badge {
    font-size: 6px!important;
    line-height: 1!important;
    padding: 2px 3px!important;
    margin: 0 0 2px!important
  }
  #heroHighlights .selected-offer-card::before {
    inset: -30%!important;
    filter: none!important;
    display: none !important
  }
}
@media (min-width:601px) {
  #heroHighlights .selected-offer-card {
    box-shadow: none!important
  }
}
#pool.hero::before {
  height: 28px!important
}
#pool.hero::after {
  top: -7px!important
}
#heroSlides {
  position: relative!important;
  z-index: 1!important;
  width: 100%!important;
  height: 100%!important;
  overflow: hidden!important
}
#pool.hero .hero-media {
  position: absolute!important;
  inset: 0!important
}
#pool.hero .hero-media::after,
#pool.hero .hero-media::before,
#pool.hero .hero-slide::after,
#pool.hero .hero-slide::before {
  content: none!important;
  display: none!important;
  opacity: 0!important;
  box-shadow: none!important
}
#pool.hero:active,
#pool.hero:focus,
#pool.hero:focus-visible {
  outline: 0!important;
  filter: none!important
}
@keyframes liHeroFade {
  from {
    opacity: .92
  }
  to {
    opacity: 1
  }
}
#heroHighlights .selected-offer-card img {
  object-position: center!important;
  width: 100%!important;
  border: 0!important;
  margin: 0!important;
  border-radius: 10px 10px 0 0!important;
  object-fit: cover!important
}
#heroHighlights .selected-offer-body {
  border-radius: 0 0 10px 10px!important
}
@media (max-width:600px) {
  #heroHighlights {
    width: 94%!important;
    gap: 7px!important
  }
  #heroHighlights .selected-offer-wrap {
    flex: 0 0 calc(50% - 3.5px)!important;
    width: calc(50% - 3.5px)!important;
    max-width: calc(50% - 3.5px)!important
  }
  #heroHighlights .selected-offer-card {
    height: 112px!important;
    min-height: 112px!important;
    max-height: 112px!important;
    border-radius: 10px!important
  }
  #heroHighlights .selected-offer-card img {
    height: 82px!important;
    min-height: 82px!important;
    max-height: 82px!important;
    border-radius: 10px 10px 0 0!important;
    object-fit: cover!important;
    object-position: center!important
  }
  #heroHighlights .selected-offer-body {
    height: 30px!important;
    min-height: 30px!important;
    max-height: 30px!important;
    padding: 3px 6px 4px!important;
    box-sizing: border-box!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important
  }
  #heroHighlights .selected-offer-body h3 {
    font-size: 8px!important;
    line-height: 1!important;
    margin: 0 0 2px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #heroHighlights .selected-offer-body strong {
    font-size: 12px!important;
    line-height: 1!important;
    margin: 0!important
  }
  #heroHighlights .selected-offer-body p {
    display: none!important
  }
  #heroHighlights .selected-offer-badge {
    font-size: 6.5px!important;
    line-height: 1!important;
    padding: 2px 4px!important;
    margin: 0 0 2px!important
  }
  #heroHighlights .selected-offer-card::before {
    inset: -9px!important;
    filter: none!important;
    display: none !important
  }
}
#pool.hero #heroSlides {
  position: relative!important;
  z-index: 1!important;
  width: 100%!important;
  height: 100%!important;
  overflow: hidden!important
}
#pool.hero .hero-slide {
  z-index: 1!important;
  display: block!important;
  position: absolute!important;
  inset: 0!important;
  width: 100%!important;
  height: 100%!important;
  min-height: 100%!important;
  margin: 0!important;
  padding: 0!important;
  opacity: 0!important;
  visibility: visible!important;
  pointer-events: none!important;
  transform: none!important;
  transition: opacity .5s ease-in-out!important;
  animation: none!important;
  filter: none!important;
  will-change: opacity!important;
  backface-visibility: hidden!important
}
#pool.hero .hero-slide.active {
  display: block!important;
  opacity: 1!important;
  visibility: visible!important;
  pointer-events: auto!important;
  transform: none!important;
  z-index: 2!important;
  animation: none!important
}
#pool.hero .hero-copy,
#pool.hero .hero-media,
#pool.hero .hero-media::after,
#pool.hero .hero-media::before,
#pool.hero .hero-minimal-copy,
#pool.hero .hero-overlay,
#pool.hero .hero-slide::after,
#pool.hero .hero-slide::before {
  animation: none!important;
  filter: none!important;
  mix-blend-mode: normal!important;
  transform: none!important
}
#pool.hero .hero-overlay {
  opacity: 0!important;
  visibility: hidden!important;
  background: 0 0!important
}
#pool.hero,
#pool.hero * {
  -webkit-tap-highlight-color: transparent!important
}
#pool.hero .hero-slide:active,
#pool.hero .hero-slide:focus,
#pool.hero .hero-slide:focus-visible,
#pool.hero:active,
#pool.hero:focus,
#pool.hero:focus-visible {
  background-image: none!important
}
@keyframes liHeroSoftHalo {
  0 {
    opacity: .52;
    transform: scale(.985);
    filter: hue-rotate(0)
  }
  50% {
    opacity: .72;
    transform: scale(1.012);
    filter: hue-rotate(13deg)
  }
  100% {
    opacity: .58;
    transform: scale(1);
    filter: hue-rotate(-8deg)
  }
}
@media (max-width:600px) {
  #pool.hero {
    width: min(330px,calc(100% - 20px))!important;
    height: 120px!important;
    min-height: 120px!important;
    max-height: 120px!important;
    margin: 0 auto!important;
    border-radius: 16px!important
  }
  #pool.hero #heroSlides {
    width: 100%!important;
    height: 100%!important;
    border-radius: 16px!important
  }
  #pool.hero::before {
    left: 4%!important;
    right: 4%!important;
    top: 7%!important;
    bottom: 5%!important;
    filter: none!important;
    opacity: .62!important;
    display: none !important
  }
  #pool.hero::after {
    left: 14%!important;
    right: 14%!important;
    bottom: -7px!important;
    height: 15px!important;
    filter: none!important;
    display: none !important
  }
}
#pool.hero {
  animation: none!important;
  user-select: none!important;
  -webkit-user-select: none!important;
  position: relative!important;
  overflow: visible!important;
  border: 0!important;
  outline: 0!important;
  background: 0 0!important;
  box-shadow: none!important;
  isolation: isolate!important
}
@keyframes liHeroRearHalo {
  0 {
    opacity: .5;
    transform: scale(.985);
    filter: hue-rotate(0)
  }
  50% {
    opacity: .76;
    transform: scale(1.012);
    filter: hue-rotate(12deg)
  }
  100% {
    opacity: .58;
    transform: scale(1);
    filter: hue-rotate(-8deg)
  }
}
#heroHighlights {
  width: 97%!important;
  margin-left: auto!important;
  margin-right: auto!important;
  gap: 8px!important;
  overflow: visible!important
}
#heroHighlights .selected-offer-wrap {
  flex: 1 1 0!important;
  min-width: 0!important;
  position: relative!important
}
#heroHighlights .selected-offer-card {
  transition: transform .22s,box-shadow .35s!important;
  width: 100%!important;
  border-radius: 11px!important;
  animation: 8s ease-in-out infinite alternate liOfferGlow!important
}
@keyframes liOfferRearLight {
  0 {
    opacity: .68;
    transform: scale(.97);
    filter: hue-rotate(0)
  }
  50% {
    opacity: .94;
    transform: scale(1.03);
    filter: hue-rotate(28deg)
  }
  100% {
    opacity: .76;
    transform: scale(1);
    filter: hue-rotate(-14deg)
  }
}
@keyframes liOfferReflection {
  0 {
    left: -68%;
    opacity: .05
  }
  12% {
    opacity: .16
  }
  34% {
    opacity: .34
  }
  49% {
    left: 132%;
    opacity: .18
  }
  58% {
    opacity: .08
  }
  100% {
    left: 132%;
    opacity: .05
  }
}
@media (max-width:600px) {
  #heroHighlights .selected-offer-wrap {
    flex: 0 0 calc(50% - 3.5px)!important;
    max-width: calc(50% - 3.5px)!important
  }
  #heroHighlights .selected-offer-body {
    box-sizing: border-box!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important
  }
  #heroHighlights .selected-offer-card::before {
    inset: -11px!important;
    filter: none!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    width: 29%!important;
    filter: none!important;
    display: none !important
  }
  #pool.hero::before {
    left: 3%!important;
    right: 3%!important;
    top: 7%!important;
    bottom: 5%!important;
    filter: none!important;
    opacity: .68!important;
    display: none !important
  }
  #pool.hero::after {
    left: 13%!important;
    right: 13%!important;
    bottom: -6px!important;
    height: 15px!important;
    filter: none!important;
    opacity: .58!important;
    display: none !important
  }
  #heroHighlights {
    width: 97%!important;
    gap: 7px!important;
    width: min(92%,370px)!important;
    margin-left: auto!important;
    margin-right: auto!important;
    display: grid!important;
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 10px!important;
    justify-content: center!important;
    align-items: start!important;
    overflow: visible!important
  }
  #heroHighlights .selected-offer-wrap {
    width: 100%!important;
    min-width: 0!important;
    max-width: none!important;
    display: flex!important;
    flex-direction: column!important;
    gap: 4px!important;
    overflow: visible!important;
    position: relative!important
  }
  #heroHighlights .selected-offer-wrap::before {
    content: ""!important;
    position: absolute!important;
    z-index: 0!important;
    left: -12px!important;
    right: -12px!important;
    top: 18px!important;
    bottom: 0!important;
    border-radius: 18px!important;
    pointer-events: none!important;
    background: radial-gradient(circle at 4% 8%,rgba(0,210,255,.42),transparent 38%),radial-gradient(circle at 96% 8%,rgba(115,78,255,.34),transparent 38%),radial-gradient(circle at 5% 92%,rgba(0,236,190,.25),transparent 40%),radial-gradient(circle at 95% 92%,rgba(34,126,255,.32),transparent 40%)!important;
    filter: none!important;
    opacity: .88!important;
    animation: 7.2s ease-in-out infinite alternate liOfferRearGlowV8!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card {
    position: relative!important;
    z-index: 2!important;
    width: 100%!important;
    height: 116px!important;
    min-height: 116px!important;
    max-height: 116px!important;
    border: 0!important;
    outline: 0!important;
    border-radius: 10px!important;
    overflow: hidden!important;
    background: linear-gradient(145deg,#0d1e2b 0,#07131f 58%,#0a1b29 100%)!important;
    box-shadow: none!important
  }
  #heroHighlights .selected-offer-card img {
    object-fit: cover!important;
    object-position: center!important;
    position: relative!important;
    z-index: 1!important;
    width: 100%!important;
    height: 84px!important;
    min-height: 84px!important;
    max-height: 84px!important;
    object-fit: cover!important;
    object-position: center!important;
    border: 0!important;
    border-radius: 10px 10px 0 0!important;
    display: block!important
  }
  #heroHighlights .selected-offer-body {
    position: relative!important;
    z-index: 2!important;
    width: 100%!important;
    height: 32px!important;
    min-height: 32px!important;
    max-height: 32px!important;
    box-sizing: border-box!important;
    padding: 3px 7px 4px!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    background: linear-gradient(180deg,rgba(4,12,18,.08),rgba(4,12,18,.88))!important;
    border-radius: 0 0 10px 10px!important
  }
  #heroHighlights .selected-offer-body h3 {
    font-size: 8.5px!important;
    line-height: 1!important;
    margin: 0 0 2px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #heroHighlights .selected-offer-body strong {
    font-size: 12.5px!important;
    line-height: 1!important;
    margin: 0!important
  }
  #heroHighlights .selected-offer-body p {
    display: none!important
  }
  #heroHighlights .selected-offer-badge {
    position: relative!important;
    z-index: 4!important;
    font-size: 6.5px!important;
    line-height: 1!important;
    padding: 2px 4px!important;
    margin: 0!important;
    max-width: 100%!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important
  }
  #heroHighlights .selected-offer-card::before {
    content: ""!important;
    position: absolute!important;
    z-index: 5!important;
    left: -65%!important;
    top: -75%!important;
    width: 31%!important;
    height: 250%!important;
    pointer-events: none!important;
    border-radius: 50%!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.035) 24%,rgba(255,255,255,.22) 42%,rgba(183,245,255,.55) 50%,rgba(255,255,255,.1) 61%,transparent 82%)!important;
    filter: none!important;
    transform: rotate(16deg)!important;
    opacity: .08!important;
    animation: 4.6s ease-in-out infinite liOfferTopReflectionV8!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    content: ""!important;
    position: absolute!important;
    z-index: 6!important;
    left: -18%!important;
    right: -18%!important;
    top: -1px!important;
    height: 28px!important;
    pointer-events: none!important;
    background: linear-gradient(115deg,transparent 0,rgba(255,255,255,.025) 26%,rgba(255,255,255,.16) 48%,rgba(126,226,255,.22) 54%,transparent 74%)!important;
    filter: none!important;
    opacity: .52!important;
    transform: translate3d(-18%,0,0)!important;
    animation: 4.8s ease-in-out infinite liOfferTopGlossV8!important;
    display: none !important
  }
}
@keyframes liOfferTopReflectionV8 {
  0,
  18% {
    left: -68%;
    opacity: .03
  }
  30% {
    opacity: .1
  }
  42% {
    opacity: .78
  }
  55% {
    left: 132%;
    opacity: .26
  }
  100%,
  62% {
    left: 132%;
    opacity: .02
  }
}
@keyframes liOfferTopGlossV8 {
  0,
  16% {
    transform: translate3d(-22%,0,0);
    opacity: .16
  }
  42% {
    transform: translate3d(0,0,0);
    opacity: .62
  }
  61% {
    transform: translate3d(24%,0,0);
    opacity: .3
  }
  100%,
  76% {
    transform: translate3d(28%,0,0);
    opacity: .12
  }
}
@media (min-width:601px) {
  #heroHighlights .selected-offer-card {
    border: 0!important;
    outline: 0!important
  }
}
@keyframes liOfferBackLightV9 {
  0 {
    opacity: .62;
    transform: scale(.97);
    filter: hue-rotate(0)
  }
  25% {
    opacity: .9;
    transform: scale(1.01);
    filter: hue-rotate(24deg)
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
    filter: hue-rotate(48deg)
  }
  75% {
    opacity: .86;
    transform: scale(1.01);
    filter: hue-rotate(76deg)
  }
  100% {
    opacity: .7;
    transform: scale(.985);
    filter: hue-rotate(105deg)
  }
}
@keyframes liOfferSunReflectionV9 {
  0,
  18% {
    left: -66%;
    opacity: .02
  }
  28% {
    opacity: .1
  }
  40% {
    opacity: .58
  }
  53% {
    left: 132%;
    opacity: .3
  }
  100%,
  62% {
    left: 132%;
    opacity: .02
  }
}
@media (max-width:600px) {
  #heroHighlights {
    width: min(92%,370px)!important;
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    column-gap: 12px!important;
    row-gap: 8px!important
  }
  #heroHighlights .selected-offer-wrap {
    width: 100%!important;
    min-width: 0!important
  }
  #heroHighlights .selected-offer-card {
    width: 100%!important;
    height: 116px!important;
    min-height: 116px!important;
    max-height: 116px!important;
    border: 0!important;
    outline: 0!important;
    border-radius: 10px!important;
    background: linear-gradient(145deg,#0c1d2b 0,#07131e 60%,#091a29 100%)!important;
    position: relative!important;
    overflow: hidden!important
  }
  #heroHighlights .selected-offer-wrap::before {
    content: ""!important;
    position: absolute!important;
    z-index: 0!important;
    left: -7px!important;
    right: -7px!important;
    top: 12px!important;
    bottom: -5px!important;
    border-radius: 16px!important;
    pointer-events: none!important;
    background: radial-gradient(circle at 4% 10%,rgba(0,220,255,.58),transparent 30%),radial-gradient(circle at 96% 12%,rgba(137,76,255,.5),transparent 30%),radial-gradient(circle at 6% 90%,rgba(0,242,194,.42),transparent 31%),radial-gradient(circle at 94% 88%,rgba(38,124,255,.48),transparent 32%),radial-gradient(circle at 50% 50%,rgba(8,110,255,.13),transparent 55%)!important;
    filter: none!important;
    opacity: .95!important;
    animation: 6.5s ease-in-out infinite alternate liOfferBackLightV9!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::before {
    content: ""!important;
    pointer-events: none!important;
    filter: none!important;
    opacity: .04!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    content: ""!important;
    pointer-events: none!important;
    filter: none!important;
    opacity: .18!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::before {
    content: ""!important;
    position: absolute!important;
    top: -65%!important;
    left: -58%!important;
    width: 18%!important;
    height: 230%!important;
    z-index: 20!important;
    pointer-events: none!important;
    border-radius: 999px!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.035) 18%,rgba(255,255,255,.2) 40%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.18) 60%,transparent 82%)!important;
    filter: none!important;
    opacity: 0!important;
    transform: rotate(17deg)!important;
    animation: 10s cubic-bezier(.4,0,.2,1) infinite liSoftSunShineV10!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    content: ""!important;
    position: absolute!important;
    top: -20%!important;
    left: -72%!important;
    width: 54%!important;
    height: 145%!important;
    z-index: 19!important;
    pointer-events: none!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,244,204,.03) 30%,rgba(255,249,228,.12) 50%,rgba(180,235,255,.05) 66%,transparent 84%)!important;
    filter: none!important;
    opacity: 0!important;
    transform: rotate(17deg)!important;
    animation: 5.8s cubic-bezier(.4,0,.2,1) infinite liSoftReflectionWideV10!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card > * {
    position: relative!important;
    z-index: 5!important
  }
}
@keyframes liSoftReflectionWideV10 {
  0,
  15% {
    left: -74%;
    opacity: 0
  }
  30% {
    left: -10%;
    opacity: .05
  }
  48% {
    left: 72%;
    opacity: .11
  }
  100%,
  59% {
    left: 116%;
    opacity: 0
  }
}
@media (max-width:768px) {
  body,
  html {
    -webkit-tap-highlight-color: transparent!important
  }
  *,
  ::after,
  ::before {
    -webkit-tap-highlight-color: transparent!important;
    -webkit-touch-callout: none!important
  }
  .btn,
  .card,
  .category-filter-arrow,
  .filter,
  .hero-actions,
  .hero-media,
  .hero-slide,
  .selected-offer-card,
  [onclick],
  [role=button],
  a,
  button,
  input,
  select,
  summary,
  textarea {
    -webkit-tap-highlight-color: transparent!important;
    -webkit-touch-callout: none!important;
    outline: 0!important
  }
  .btn:active,
  .card:active,
  .category-filter-arrow:active,
  .filter:active,
  .hero-actions:active,
  .hero-media:active,
  .hero-slide:active,
  .selected-offer-card:active,
  [onclick]:active,
  [role=button]:active,
  a:active,
  button:active,
  input:active,
  select:active,
  summary:active,
  textarea:active {
    -webkit-tap-highlight-color: transparent!important;
    outline: 0!important
  }
  .btn:focus,
  .card:focus,
  .category-filter-arrow:focus,
  .filter:focus,
  .hero-actions:focus,
  .hero-media:focus,
  .hero-slide:focus,
  .selected-offer-card:focus,
  [onclick]:focus,
  [role=button]:focus,
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  summary:focus,
  textarea:focus {
    outline: 0!important
  }
  #offerFilters .filter:active {
    -webkit-tap-highlight-color: transparent!important
  }
  #offerFilters .filter:active,
  .category-filter-arrow:active {
    filter: none!important
  }
}
@media (max-width:600px) {
  #heroHighlights .selected-offer-card {
    position: relative!important;
    overflow: hidden!important;
    isolation: isolate!important
  }
  #heroHighlights .selected-offer-card::before {
    content: ""!important;
    position: absolute!important;
    z-index: 30!important;
    top: -90%!important;
    left: -52%!important;
    width: 22%!important;
    height: 280%!important;
    pointer-events: none!important;
    border-radius: 999px!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.04) 18%,rgba(255,247,218,.22) 38%,rgba(255,255,255,.62) 49%,rgba(183,238,255,.3) 56%,rgba(255,255,255,.07) 68%,transparent 84%)!important;
    filter: none!important;
    transform: rotate(17deg)!important;
    opacity: 0!important;
    animation: 10s cubic-bezier(.42,0,.18,1) infinite liOfferSunShineV12!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    content: ""!important;
    position: absolute!important;
    z-index: 29!important;
    top: -55%!important;
    left: -75%!important;
    width: 58%!important;
    height: 210%!important;
    pointer-events: none!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.02) 25%,rgba(255,244,207,.09) 48%,rgba(167,230,255,.1) 57%,transparent 80%)!important;
    filter: none!important;
    transform: rotate(17deg)!important;
    opacity: 0!important;
    animation: 10s cubic-bezier(.42,0,.18,1) infinite liOfferWideShineV12!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card > * {
    position: relative!important;
    z-index: 5!important
  }
}
@media (max-width:768px) {
  body,
  body *,
  html {
    -webkit-tap-highlight-color: transparent!important
  }
  .card:active,
  .category-filter-arrow:active,
  .filter:active,
  .hero-media:active,
  .hero-slide:active,
  [onclick]:active,
  [role=button]:active,
  a:active,
  button:active {
    filter: none!important;
    background-image: inherit!important;
    outline: 0!important
  }
  #heroHighlights .selected-offer-card:active {
    transform: translate3d(0,-3px,0)!important;
    box-shadow: none!important
  }
  #offerFilters .filter:active {
    animation: none!important;
    transform: none!important
  }
  #heroHighlights .selected-offer-card {
    overflow: hidden!important;
    isolation: isolate!important
  }
  #heroHighlights .selected-offer-card::before {
    content: ""!important;
    position: absolute!important;
    z-index: 50!important;
    top: -92%!important;
    left: -58%!important;
    width: 24%!important;
    height: 300%!important;
    pointer-events: none!important;
    border-radius: 999px!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.03) 15%,rgba(255,249,220,.2) 33%,rgba(255,255,255,.72) 49%,rgba(177,238,255,.3) 56%,rgba(255,255,255,.07) 70%,transparent 86%)!important;
    filter: none!important;
    transform: rotate(17deg)!important;
    opacity: 0!important;
    animation: 5.2s cubic-bezier(.38,0,.18,1) infinite liOfferReflectionV13!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    content: ""!important;
    position: absolute!important;
    z-index: 49!important;
    top: -58%!important;
    left: -82%!important;
    width: 68%!important;
    height: 215%!important;
    pointer-events: none!important;
    background: linear-gradient(90deg,transparent 0,rgba(255,247,206,.025) 22%,rgba(255,255,255,.08) 46%,rgba(184,234,255,.12) 57%,transparent 82%)!important;
    filter: none!important;
    transform: rotate(17deg)!important;
    opacity: 0!important;
    animation: 5.2s cubic-bezier(.38,0,.18,1) infinite liOfferWideReflectionV13!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card > * {
    position: relative!important;
    z-index: 10!important
  }
}
@keyframes liOfferReflectionV13 {
  0,
  14% {
    left: -66%;
    opacity: 0
  }
  23% {
    opacity: .12
  }
  34% {
    opacity: .38
  }
  43% {
    opacity: .92
  }
  54% {
    left: 132%;
    opacity: .34
  }
  100%,
  62% {
    left: 132%;
    opacity: 0
  }
}
@keyframes liOfferWideReflectionV13 {
  0,
  14% {
    left: -84%;
    opacity: 0
  }
  26% {
    opacity: .07
  }
  42% {
    opacity: .18
  }
  55% {
    left: 126%;
    opacity: .07
  }
  100%,
  66% {
    left: 126%;
    opacity: 0
  }
}
#heroHighlights .selected-offer-card::before {
  border-radius: inherit!important;
  top: -45%!important;
  width: 26%!important;
  transform-origin: center!important
}
#heroHighlights .selected-offer-card img {
  position: relative!important;
  display: block!important;
  z-index: 6!important
}
#heroHighlights .selected-offer-card::after {
  will-change: left,opacity!important;
  inset: 0!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)!important
}
#heroHighlights .selected-offer-card .selected-offer-badge,
#heroHighlights .selected-offer-card .selected-offer-body {
  position: relative!important;
  z-index: 110!important
}
@keyframes LI_V20_SUN {
  0 {
    left: -75%;
    opacity: 0
  }
  12% {
    opacity: .9
  }
  42% {
    left: 122%;
    opacity: 1
  }
  55% {
    left: 145%;
    opacity: .25
  }
  100%,
  60% {
    left: 145%;
    opacity: 0
  }
}
@keyframes LI_V20_SUN_WIDE {
  0 {
    left: -95%;
    opacity: 0
  }
  15% {
    opacity: .25
  }
  45% {
    left: 120%;
    opacity: .55
  }
  100%,
  58%,
  60% {
    left: 145%;
    opacity: 0
  }
}
@media (max-width:600px) {
  #heroHighlights .selected-offer-card::before {
    background: linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 50%)!important;
    top: -50%!important;
    left: -95%!important;
    width: 34%!important;
    height: 205%!important;
    filter: none!important;
    animation-duration: 2.8s!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    top: -45%!important;
    left: -115%!important;
    width: 80%!important;
    height: 195%!important;
    animation-duration: 2.8s!important
  }
  #offerModal {
    padding: 10px!important;
    align-items: center!important
  }
  #offerModal .offer-modal-box {
    width: min(92vw,420px)!important;
    max-width: 92vw!important;
    max-height: 84vh!important;
    padding: 12px!important;
    border-radius: 18px!important;
    overflow-y: auto!important;
    overflow-x: hidden!important
  }
  #offerModal .modal-badges {
    gap: 4px!important;
    margin: 1px 0 6px!important
  }
  #offerModal .modal-badges .badge {
    font-size: 8px!important;
    padding: 4px 7px!important
  }
  #offerModal .offer-modal-box h2 {
    font-size: 21px!important;
    line-height: 1.12!important;
    margin: 5px 0!important
  }
  #offerModal .offer-modal-box > .sub {
    font-size: 10px!important;
    line-height: 1.4!important;
    margin: 4px 0!important
  }
  #offerModal .modal-price {
    font-size: 23px!important;
    line-height: 1!important;
    margin: 9px 0!important
  }
  #offerModal .modal-price .old,
  #offerModal .modal-price s {
    font-size: 11px!important;
    margin-left: 5px!important
  }
  #offerModal .offer-detail-strip {
    gap: 6px!important;
    margin: 8px 0!important
  }
  #offerModal .offer-detail-strip > div {
    padding: 7px 8px!important;
    border-radius: 10px!important
  }
  #offerModal .offer-detail-strip small {
    font-size: 7px!important;
    letter-spacing: .06em!important
  }
  #offerModal .offer-detail-strip b {
    font-size: 9px!important;
    line-height: 1.25!important;
    margin-top: 2px!important
  }
  #offerModal .modal-access {
    gap: 3px!important;
    padding: 8px 9px!important;
    border-radius: 10px!important;
    margin: 8px 0!important
  }
  #offerModal .modal-access strong {
    font-size: 10px!important
  }
  #offerModal .modal-access .loyalty-detail,
  #offerModal .modal-access span {
    font-size: 8px!important;
    line-height: 1.35!important
  }
  #offerModal .vip-showcase {
    margin-top: 8px!important
  }
  #offerModal .vip-showcase-title {
    margin-bottom: 6px!important;
    gap: 5px!important
  }
  #offerModal .vip-showcase-title span {
    font-size: 12px!important;
    letter-spacing: .03em!important
  }
  #offerModal .vip-showcase-title small {
    font-size: 7px!important
  }
  #offerModal .vip-level-grid {
    gap: 6px!important;
    max-height: 34vh!important;
    padding: 2px!important
  }
  #offerModal .vip-level-card {
    padding: 7px!important;
    border-radius: 11px!important
  }
  #offerModal .vip-level-head {
    margin-bottom: 5px!important
  }
  #offerModal .vip-level-head b {
    font-size: 11px!important
  }
  #offerModal .vip-level-head span {
    font-size: 7px!important;
    padding: 3px 5px!important
  }
  #offerModal .benefit {
    grid-template-columns: 18px 1fr auto!important;
    gap: 4px!important;
    padding: 5px 0!important
  }
  #offerModal .offer-action-row {
    gap: 6px!important;
    margin-top: 9px!important
  }
  #offerModal .offer-action-row .btn {
    min-height: 38px!important;
    padding: 8px!important;
    font-size: 10px!important
  }
  #offerModal .close {
    right: 8px!important;
    top: 6px!important;
    z-index: 20!important;
    font-size: 23px!important
  }
  #offerModal .benefit {
    grid-template-columns: 34px minmax(0,1fr) auto!important;
    align-items: center!important;
    gap: 7px!important;
    min-width: 0!important;
    overflow: visible!important
  }
  #offerModal .benefit i {
    width: 34px!important;
    min-width: 34px!important;
    height: 30px!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    overflow: visible!important
  }
  #offerModal .benefit i .icon-inline {
    width: 27px!important;
    height: 27px!important;
    flex: 0 0 27px!important
  }
  #offerModal .benefit strong {
    min-width: 0!important;
    padding-left: 2px!important;
    font-size: 10px!important;
    line-height: 1.15!important;
    white-space: nowrap!important;
    overflow: visible!important
  }
  #offerModal .benefit small {
    grid-column: auto!important;
    min-width: 0!important;
    margin-top: 0!important;
    white-space: nowrap!important;
    font-size: 7px!important
  }
}
#heroHighlights .selected-offer-card::before {
  transform: translateX(-140%) skewX(-14deg)!important;
  mix-blend-mode: screen!important;
  will-change: transform!important
}
#heroHighlights .selected-offer-card > .selected-offer-badge,
#heroHighlights .selected-offer-card > .selected-offer-body {
  position: relative!important;
  z-index: 30!important
}
#heroHighlights .selected-offer-card::after,
#heroHighlights .selected-offer-card::before {
  background: 0 0!important;
  box-shadow: none!important;
  filter: none!important
}
.cart-qty-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #8ea8b9;
  font-size: 9px;
  font-weight: 800
}
.cart-qty {
  min-width: 58px;
  padding: 4px 7px;
  border: 1px solid #28475d;
  border-radius: 8px;
  background: #081722;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  outline: 0
}
.cart-qty:focus {
  border-color: #32caff;
  box-shadow: 0 0 0 2px rgba(50,202,255,.1)
}
.cart-item {
  align-items: center!important
}
@media (max-width:600px) {
  .cart-qty-label {
    font-size: 8px;
    gap: 4px
  }
  .cart-qty {
    min-width: 52px;
    font-size: 9px;
    padding: 4px 5px
  }
  #offerModal .vip-level-card {
    padding: 6px!important
  }
  #offerModal .benefit {
    grid-template-columns: 16px minmax(0,1fr) auto!important;
    gap: 3px!important;
    padding: 3px 0!important;
    min-height: 25px!important
  }
  #offerModal .benefit i {
    width: 16px!important;
    min-width: 16px!important;
    height: 22px!important
  }
  #offerModal .benefit i .icon-inline {
    width: 21px!important;
    height: 21px!important;
    flex-basis: 21px!important
  }
  #offerModal .benefit strong {
    font-size: 8.5px!important;
    line-height: 1!important
  }
  #offerModal .benefit small {
    font-size: 6.5px!important;
    line-height: 1!important
  }
  #heroHighlights .selected-offer-card {
    height: 106px!important;
    min-height: 106px!important;
    max-height: 106px!important
  }
  #heroHighlights .selected-offer-card img {
    height: 86px!important;
    min-height: 86px!important;
    max-height: 86px!important;
    object-fit: cover!important
  }
  #heroHighlights .selected-offer-body {
    height: 20px!important;
    min-height: 20px!important;
    max-height: 20px!important;
    padding: 1px 6px 2px!important;
    justify-content: center!important;
    overflow: hidden!important
  }
  #heroHighlights .selected-offer-body h3 {
    font-size: 7.8px!important;
    line-height: 1!important;
    margin: 0!important
  }
  #heroHighlights .selected-offer-body strong {
    font-size: 10.5px!important;
    line-height: 1!important;
    margin: 1px 0 0!important
  }
  #heroHighlights .selected-offer-card:active {
    transform: translateY(-3px) scale(1.025)!important;
    transition: transform .16s!important
  }
}
#heroHighlights .selected-offer-card::after {
  right: 0!important;
  bottom: 0!important;
  box-shadow: none
}
#heroHighlights .selected-offer-meta {
  width: 100%!important;
  min-width: 0!important
}
#heroHighlights .selected-cash-meta {
  display: inline-flex!important;
  align-items: center!important;
  gap: 4px!important;
  min-width: 0!important;
  color: #d9f4ff!important;
  text-shadow: none!important
}
#heroHighlights .selected-cash-meta img {
  width: 20px!important;
  height: 20px!important;
  object-fit: contain!important;
  display: block!important;
  flex: 0 0 20px!important;
  filter: none!important
}
#heroHighlights .selected-offer-card:active {
  transform: translateY(-3px) scale(1.02)!important;
  box-shadow: none!important
}
@media (max-width:600px) {
  #heroHighlights .selected-cash-meta img {
    width: 19px!important;
    height: 19px!important;
    flex-basis: 19px!important;
    display: none!important
  }
  #heroHighlights {
    width: 94%!important;
    margin-left: auto!important;
    margin-right: auto!important;
    gap: 6px!important
  }
  #heroHighlights .selected-offer-card {
    height: 106px!important;
    min-height: 106px!important;
    max-height: 106px!important
  }
  #heroHighlights .selected-offer-card img {
    object-fit: cover!important;
    height: 87px!important;
    min-height: 87px!important;
    max-height: 87px!important;
    object-fit: cover!important;
    object-position: center!important
  }
  #heroHighlights .selected-offer-body {
    height: 19px!important;
    min-height: 19px!important;
    max-height: 19px!important;
    padding: 1px 6px 2px!important;
    box-sizing: border-box!important
  }
  #heroHighlights .selected-offer-meta {
    min-height: 17px!important;
    gap: 5px!important
  }
  #heroHighlights .selected-cash-meta {
    gap: 0!important;
    min-width: 0!important
  }
  #heroHighlights .selected-cash-meta b {
    font-size: 11.5px!important;
    line-height: 1!important;
    font-weight: 1000!important;
    white-space: nowrap!important;
    text-shadow: none!important
  }
  #heroHighlights .selected-price-meta {
    font-size: 12.5px!important;
    line-height: 1!important;
    white-space: nowrap!important
  }
}
@media (min-width:951px) {
  .top {
    border-bottom: 0!important;
    box-shadow: none!important
  }
  .top .nav {
    gap: 20px!important
  }
  .top .brand {
    flex: 0 0 auto!important;
    min-width: 0!important;
    width: auto!important;
    max-width: none!important
  }
  .top .navlinks {
    margin-left: 0!important;
    gap: 20px!important;
    flex: 0 0 auto!important;
    align-items: center!important
  }
  #heroHighlights .selected-offer-wrap {
    min-width: 0!important
  }
  header.top .wrap.nav {
    width: min(1400px,calc(100% - 34px))!important;
    margin: 0 auto!important
  }
  header.top .brand {
    margin-right: 4px!important
  }
  header.top .navlinks {
    margin-left: 0!important;
    gap: 20px!important
  }
  header.top .actions {
    margin-left: auto!important
  }
  main > .wrap {
    width: min(1160px,calc(100% - 34px))!important;
    margin: 0 auto!important
  }
  #pool.hero {
    width: min(920px,100%)!important;
    height: 220px!important;
    min-height: 220px!important;
    max-height: 220px!important;
    margin: 18px auto 0!important
  }
  #pool.hero .hero-slide {
    height: 220px!important;
    min-height: 220px!important;
    max-height: 220px!important
  }
  #heroHighlights.selected-offers {
    grid-template-columns: repeat(3,330px)!important;
    justify-content: start!important;
    align-items: start!important;
    gap: 14px!important;
    width: 100%!important;
    grid-template-columns: repeat(3,minmax(0,300px))!important;
    justify-content: center!important;
    align-items: start!important;
    column-gap: 16px!important;
    row-gap: 18px!important
  }
  #heroHighlights .selected-offer-card,
  #heroHighlights .selected-offer-card img,
  #heroHighlights .selected-offer-wrap {
    width: 300px!important;
    max-width: 300px!important
  }
  #heroHighlights .selected-offer-card {
    height: auto!important
  }
  #heroHighlights .selected-offer-card img {
    display: block!important;
    object-fit: cover!important
  }
  #about,
  #games,
  #offers,
  #support {
    width: 100%!important
  }
}
#heroHighlights .selected-offer-card > .selected-offer-body {
  background: radial-gradient(circle at 10% 35%,rgba(65,208,255,.18),transparent 22%),radial-gradient(circle at 82% 65%,rgba(146,104,255,.15),transparent 24%),linear-gradient(180deg,rgba(8,19,30,.18),rgba(7,17,28,.56))!important;
  border-top: 1px solid rgba(93,211,255,.18)!important;
  box-shadow: none!important
}
#heroHighlights .selected-offer-card > .selected-offer-body::before {
  content: ""!important;
  position: absolute!important;
  left: 7%!important;
  right: 7%!important;
  bottom: 3px!important;
  height: 1px!important;
  background: linear-gradient(90deg,transparent,rgba(81,216,255,.72),rgba(191,115,255,.52),transparent)!important;
  box-shadow: none!important;
  opacity: .9!important
}
#heroHighlights .selected-offer-card > .selected-offer-body::after {
  content: "✦ · ✧ · ✦ · ✧ · ✦"!important;
  position: absolute!important;
  left: 6%!important;
  right: 6%!important;
  bottom: 1px!important;
  height: 13px!important;
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  color: rgba(137,224,255,.34)!important;
  font-size: 6px!important;
  letter-spacing: 5px!important;
  pointer-events: none!important;
  text-shadow: none!important
}
@media (max-width:600px) {
  #heroHighlights .selected-offer-card > .selected-offer-body {
    background: radial-gradient(circle at 8% 40%,rgba(65,208,255,.17),transparent 24%),radial-gradient(circle at 84% 60%,rgba(146,104,255,.14),transparent 26%),linear-gradient(180deg,rgba(7,17,27,.12),rgba(5,14,23,.48))!important;
    border-top: 1px solid rgba(93,211,255,.16)!important;
    box-shadow: none!important
  }
  #heroHighlights .selected-offer-card > .selected-offer-body::before {
    left: 7%!important;
    right: 7%!important;
    bottom: 2px!important;
    box-shadow: none!important
  }
  #heroHighlights .selected-offer-card > .selected-offer-body::after {
    left: 6%!important;
    right: 6%!important;
    bottom: 0!important;
    font-size: 5px!important;
    letter-spacing: 3px!important;
    height: 11px!important
  }
  #heroHighlights .selected-offer-card {
    box-sizing: border-box!important
  }
  #heroHighlights .selected-offer-card::before {
    filter: none!important;
    opacity: .68!important;
    display: none !important
  }
  #heroHighlights .selected-offer-card::after {
    opacity: .28!important;
    filter: none!important;
    display: none !important
  }
}
  #selectedOffersSection {
    margin-top: 28px!important
  }
  #heroHighlights.selected-offers {
    margin-top: 0!important;
    grid-template-columns: repeat(3,minmax(0,300px))!important;
    justify-content: center!important;
    column-gap: 16px!important;
    row-gap: 20px!important
  }
  #heroHighlights .selected-offer-card,
  #heroHighlights .selected-offer-card > img,
  #heroHighlights .selected-offer-wrap {
    width: 300px!important;
    max-width: 300px!important
  }
  .top {
    background: 0 0!important;
    border-bottom: 0!important;
    box-shadow: none!important;
    backdrop-filter: none!important
  }
  .top .nav {
    width: 100%!important;
    max-width: none!important;
    margin: 0!important;
    padding: 0 22px!important;
    height: 76px!important;
    gap: 22px!important
  }
  .top .brand {
    flex: 0 0 auto!important;
    min-width: 0!important;
    margin: 0!important
  }
  .top .navlinks {
    display: flex!important;
    flex: 0 0 auto!important;
    margin: 0!important;
    gap: 22px!important
  }
  .top .actions {
    margin-left: auto!important;
    margin-right: 0!important;
    flex: 0 0 auto!important
  }
  #pool.hero .hero-media,
  #pool.hero .hero-slide {
    border-radius: inherit!important
  }
#heroHighlights .selected-offer-card {
  --li-shine-cycle: 4.8s;
  box-sizing: border-box!important;
  border: 1px solid rgba(255,196,83,.34)!important;
  outline: rgba(73,214,255,.08) solid 1px!important;
  background: radial-gradient(circle at 16% 12%,rgba(255,196,83,.16),transparent 30%),radial-gradient(circle at 86% 78%,rgba(161,92,255,.14),transparent 34%),linear-gradient(145deg,#101a27 0,#0a121c 52%,#120d1d 100%)!important
}
#heroHighlights .selected-offer-card:hover {
  transform: translateY(-2px)!important;
  border-color: rgba(255,213,116,.58)!important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.055) inset!important
}
#heroHighlights .selected-offer-card > img {
  filter: saturate(1.04) contrast(1.02)!important
}
#heroHighlights .selected-offer-body {
  border-top: 1px solid rgba(255,203,104,.12)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035)!important
}
#heroHighlights .selected-offer-badge {
  position: relative!important;
  z-index: 3!important;
  color: #ffe6a4!important;
  border-color: rgba(255,201,94,.38)!important;
  background: linear-gradient(135deg,rgba(255,191,71,.16),rgba(255,98,151,.1) 52%,rgba(74,201,255,.1))!important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset!important;
  text-shadow: none!important
}
#heroHighlights .selected-cash-meta b {
  white-space: nowrap!important;
  text-shadow: none!important
}
@keyframes liLimitedAurora {
  0 {
    transform: rotate(0) scale(1);
    opacity: .56
  }
  50% {
    transform: rotate(180deg) scale(1.06);
    opacity: .82
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: .56
  }
}
@keyframes liLimitedGloss {
  0,
  34% {
    left: -28%;
    opacity: 0
  }
  42% {
    opacity: .26
  }
  58% {
    left: 112%;
    opacity: .38
  }
  100%,
  66% {
    left: 112%;
    opacity: 0
  }
}
.offer-trust-mini {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid rgba(54,188,236,.16);
  background: linear-gradient(135deg,rgba(27,100,132,.1),rgba(12,29,41,.38));
  display: grid;
  gap: 4px
}
.offer-trust-mini b {
  font-size: 11px;
  color: #bfefff
}
.offer-trust-mini span {
  font-size: 9px;
  line-height: 1.45;
  color: #829baa
}
.vpn-rule {
  display: block!important;
  margin-top: 6px!important;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255,176,48,.07);
  border: 1px solid rgba(255,190,70,.18);
  color: #ffd889;
  font-size: 9px;
  line-height: 1.45
}
@media (max-width:720px) {
  .offer-trust-mini {
    margin: 9px 0;
    padding: 9px 10px
  }
  .offer-trust-mini b {
    font-size: 10px
  }
  .offer-trust-mini span,
  .vpn-rule {
    font-size: 8px
  }
}
.cue-level-admin-card {
  margin-top: 0
}
.cue-level-admin-card.hidden {
  display: none
}
.cue-admin-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px
}
.cue-side-editor {
  padding: 13px;
  border: 1px solid rgba(84,182,235,.22);
  border-radius: 14px;
  background: linear-gradient(145deg,rgba(9,28,42,.88),rgba(6,16,29,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035)
}
.cue-side-editor > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.cue-side-editor b {
  font-size: 12px;
  letter-spacing: .12em;
  color: #d9f7ff
}
.cue-side-editor span {
  font-size: 11px;
  color: #75cceb;
  font-weight: 800
}
.cue-segments {
  display: grid;
  grid-template-columns: repeat(10,minmax(0,1fr));
  gap: 5px
}
.cue-segment {
  appearance: none;
  border: 1px solid rgba(100,174,211,.22);
  background: linear-gradient(180deg,rgba(18,36,50,.92),rgba(8,19,31,.96));
  border-radius: 6px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 rgba(0,190,255,0);
  transition: .16s
}
.cue-segment span {
  display: block;
  width: 42%;
  height: 70%;
  margin: 15% auto;
  border-radius: 3px;
  background: rgba(110,157,177,.18)
}
.cue-segment.active {
  border-color: rgba(56,218,255,.85);
  background: linear-gradient(180deg,rgba(24,108,146,.58),rgba(8,64,96,.74));
  box-shadow: none
}
.cue-segment.active span {
  background: linear-gradient(180deg,#9ff5ff,#1fc9ff);
  box-shadow: none
}
@media (max-width:720px) {
  .cue-admin-grid {
    grid-template-columns: 1fr
  }
  .cue-segments {
    gap: 4px
  }
  .cue-segment {
    height: 22px
  }
}
.cue-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 10px;
  border: 1px solid rgba(63,191,255,.28);
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(14,29,42,.96),rgba(7,17,27,.96));
  color: inherit;
  cursor: pointer
}
.cue-search-result:hover {
  border-color: rgba(91,232,255,.62);
  transform: translateY(-1px)
}
.cue-search-result img {
  width: 116px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 116px;
  background: rgba(0,0,0,.18);
  border-radius: 8px
}
.cue-search-result span {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.cue-search-result b {
  font-size: 14px
}
.cue-search-result small {
  opacity: .72;
  line-height: 1.25
}
.cue-selected-card {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(119,227,255,.3);
  background: radial-gradient(circle at 20% 30%,rgba(16,86,115,.22),transparent 35%),linear-gradient(135deg,rgba(9,29,43,.98),rgba(6,15,25,.98))
}
.cue-selected-card > img {
  width: 240px;
  height: 78px;
  object-fit: contain
}
.cue-selected-card > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px
}
.cue-selected-card strong {
  font-size: 17px
}
.cue-selected-card span {
  opacity: .75;
  font-size: 12px
}
.cue-stat-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px
}
.cue-stat-mini label {
  display: grid;
  grid-template-columns: 48px 1fr 34px;
  align-items: center;
  gap: 6px;
  font-size: 11px
}
.cue-info-stat i,
.cue-stat-mini i {
  height: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  display: block
}
.cue-info-stat em,
.cue-stat-mini em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#1fe8ff,#55ff9b);
  box-shadow: none
}
.cue-stat-mini b {
  font-size: 10px;
  text-align: right
}
.cue-info-showcase {
  margin-top: 14px;
  border: 1px solid rgba(49,208,255,.28);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(135deg,rgba(8,30,44,.92),rgba(10,19,30,.96));
  box-shadow: none
}
.cue-info-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07)
}
.cue-info-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.cue-info-head span {
  font-weight: 800;
  letter-spacing: .8px;
  color: #83f2ff
}
.cue-info-head small {
  opacity: .76
}
.cue-info-head > b {
  font-size: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(45,196,255,.12);
  border: 1px solid rgba(45,196,255,.2)
}
.cue-info-body {
  display: grid;
  grid-template-columns: minmax(220px,1.25fr) minmax(220px,1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0
}
.cue-info-image {
  min-height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,0,0,.16)
}
.cue-info-image img {
  width: 100%;
  max-height: 90px;
  object-fit: contain
}
.cue-info-stats {
  display: grid;
  gap: 8px
}
.cue-info-stat {
  display: grid;
  grid-template-columns: 56px 1fr 40px;
  gap: 7px;
  align-items: center;
  font-size: 11px
}
.cue-info-stat b {
  text-align: right
}
.cue-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 10px
}
.cue-info-meta span {
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06)
}
@media (max-width:700px) {
  .cue-selected-card {
    flex-direction: column;
    align-items: stretch
  }
  .cue-selected-card > img {
    width: 100%;
    height: 70px
  }
  .cue-info-body,
  .cue-stat-mini {
    grid-template-columns: 1fr
  }
  .cue-info-image img {
    max-height: 72px
  }
  .cue-info-meta {
    display: grid;
    grid-template-columns: 1fr 1fr
  }
  .cue-info-meta span {
    min-width: 0
  }
}
body.admin-premium .top {
  background: rgba(255,255,255,.86)!important;
  border-bottom: 1px solid rgba(119,148,175,.2)!important;
  box-shadow: none!important;
  backdrop-filter: none
}
body.admin-premium .btn,
body.admin-premium .tab {
  background: rgba(255,255,255,.86)!important;
  color: #203044!important;
  border: 1px solid #d7e2ec!important;
  box-shadow: 0 0 0 rgba(0,180,240,0)!important;
  transition: transform .18s,box-shadow .18s,border-color .18s,background .18s!important
}
body.admin-premium .btn:hover,
body.admin-premium .tab:hover {
  transform: translateY(-1px);
  box-shadow: none!important
}
body.admin-premium .btn.primary,
body.admin-premium .tab.active {
  background: linear-gradient(135deg,#159cff,#3974ff)!important;
  color: #fff!important;
  border-color: #35a9ff!important;
  box-shadow: none!important
}
body.admin-premium .btn.hot {
  color: #fff!important;
  border-color: #ff7352!important
}
body.admin-premium .tab {
  flex: 1;
  min-height: 40px;
  border-radius: 11px!important;
  font-size: 11px!important
}
body.admin-premium .card {
  border-radius: 18px!important;
  box-shadow: none!important;
  color: var(--p-text)!important
}
body.admin-premium .field label {
  font-size: 9px!important;
  letter-spacing: .7px
}
body.admin-premium .field input,
body.admin-premium .field select,
body.admin-premium .field textarea {
  border-radius: 12px!important
}
body.admin-premium .field input:focus,
body.admin-premium .field select:focus,
body.admin-premium .field textarea:focus {
  outline: 0!important;
  border-color: #58c5ff!important;
  box-shadow: 0 0 0 3px rgba(54,173,255,.1)!important
}
body.admin-premium .check-row {
  gap: 7px!important
}
body.admin-premium #categoryChecks .category-pick {
  border-radius: 13px;
  padding: 6px
}
body.admin-premium .cue-side-editor {
  border: 1px solid #dce6ee!important;
  border-radius: 15px!important
}
body.admin-premium .media-upload-box {
  background: #fbfdff!important
}
body.admin-premium .preview {
  box-shadow: none!important
}
body.admin-premium .notice {
  background: #fff8e8!important;
  color: #795c1d!important;
  border-color: #f2d58e!important
}
body.admin-premium .saved-page {
  padding: 18px 0 80px!important
}
body.admin-premium .saved-top h1 {
  color: #14263a!important
}
body.admin-premium .saved-search input {
  background: #fff!important;
  color: #17283a!important;
  border-color: #d5e1eb!important;
  box-shadow: none!important
}
.saved-page .helper,
body.admin-premium .saved-meta {
  color: #748497!important
}
body.admin-premium .saved-tag {
  border-color: #d7e2eb!important;
  line-height: 1.1!important
}
@media (max-width:720px) {
  body.admin-premium .admin {
    padding: 10px 8px 104px!important
  }
  body.admin-premium .top .nav {
    height: 58px!important;
    padding: 6px 8px!important
  }
  body.admin-premium .actions {
    gap: 6px!important
  }
  body.admin-premium .actions .btn {
    min-height: 36px!important;
    font-size: 9px!important;
    padding: 0 10px!important
  }
  body.admin-premium .tab {
    min-height: 37px!important;
    font-size: 9px!important
  }
  body.admin-premium .admin .card {
    padding: 11px!important;
    margin-bottom: 8px!important;
    border-radius: 15px!important
  }
  body.admin-premium .admin .card h3 {
    font-size: 12px!important
  }
  body.admin-premium .field {
    margin: 5px 0!important
  }
  body.admin-premium .field input,
  body.admin-premium .field select {
    min-height: 40px!important;
    font-size: 11px!important
  }
  body.admin-premium #categoryChecks {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 6px!important
  }
  body.admin-premium #categoryChecks .category-pick {
    padding: 5px!important
  }
  body.admin-premium #categoryChecks .checkchip {
    font-size: 8px!important;
    min-height: 35px!important
  }
  body.admin-premium .cue-level-admin-card {
    display: block!important
  }
  body.admin-premium .cue-admin-grid {
    grid-template-columns: 1fr!important;
    gap: 7px!important
  }
  body.admin-premium .cue-side-editor {
    padding: 9px!important
  }
  body.admin-premium .cue-segments {
    gap: 4px!important
  }
  body.admin-premium .cue-segment {
    height: 25px!important
  }
  body.admin-premium .media-upload-row {
    grid-template-columns: 1fr!important
  }
  body.admin-premium .icon-upload {
    grid-template-columns: 82px minmax(0,1fr)!important
  }
  body.admin-premium .preview {
    width: 82px!important;
    height: 58px!important
  }
  body.admin-premium .saved-page {
    padding: 10px 8px 82px!important
  }
  body.admin-premium .saved-top {
    gap: 8px!important
  }
  body.admin-premium .saved-top h1 {
    font-size: 18px!important
  }
  body.admin-premium .saved-top p {
    font-size: 9px!important
  }
  body.admin-premium .saved-actions {
    width: 100%!important;
    display: grid!important;
    grid-template-columns: 1fr 1fr!important
  }
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 7px!important
  }
  body.admin-premium .saved-meta {
    font-size: 7px!important;
    margin-bottom: 6px!important
  }
  body.admin-premium .saved-tags {
    gap: 3px!important;
    margin-bottom: 6px!important
  }
  body.admin-premium .saved-tag {
    font-size: 6px!important;
    padding: 3px 4px!important
  }
  body.admin-premium .saved-price {
    margin-bottom: 6px!important
  }
  body.admin-premium .saved-price b {
    font-size: 13px!important
  }
  body.admin-premium .saved-actions-row {
    gap: 5px!important
  }
  body.admin-premium .saved-actions-row .btn {
    min-height: 31px!important;
    font-size: 8px!important;
    padding: 0 5px!important
  }
}
body.admin-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0
}
body.admin-premium .admin,
body.admin-premium main {
  position: relative;
  z-index: 1
}
body.admin-premium .card,
body.admin-premium .stat,
body.admin-premium .top .nav {
  background: linear-gradient(145deg,rgba(15,28,39,.94),rgba(8,15,23,.96))!important;
  border: 1px solid rgba(79,194,255,.24)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.035)!important
}
body.admin-premium .card,
body.admin-premium .stat {
  position: relative;
  overflow: hidden
}
body.admin-premium .card::before,
body.admin-premium .stat::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 180deg,transparent 0 32%,rgba(0,221,255,.2),transparent 42%,rgba(255,0,180,.18),transparent 58%,rgba(112,255,94,.14),transparent 72%);
  filter: none;
  opacity: .55;
  animation: 8s linear infinite adminAurora;
  pointer-events: none;
  display: none !important
}
body.admin-premium .card > *,
body.admin-premium .stat > * {
  position: relative;
  z-index: 1
}
@keyframes adminAurora {
  to {
    transform: rotate(360deg)
  }
}
body.admin-premium .card h3,
body.admin-premium .title {
  color: #f6fbff!important
}
body.admin-premium .helper,
body.admin-premium .sub {
  color: #8ea5b9!important
}
body.admin-premium #categoryChecks .category-pick::before {
  content: "";
  position: absolute;
  inset: -50%;
  filter: none;
  display: none !important
}
body.admin-premium .manual-cue-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 13px;
  cursor: pointer
}
body.admin-premium .manual-cue-toggle b {
  display: block;
  font-size: 13px;
  color: #fff!important
}
.manual-cue-toggle small {
  display: block;
  margin-top: 2px;
  color: #89a6ba;
  font-size: 9px
}
.manual-cue-toggle em {
  font-style: normal;
  font-size: 18px;
  color: #49d8ff
}
body.admin-premium .manual-cue-editor {
  margin-top: 9px
}
.manual-cue-editor.hidden {
  display: none
}
body.admin-premium .media-upload-box {
  background: linear-gradient(145deg,#0a151f,#071018)!important;
  border-color: rgba(79,194,255,.23)!important
}
body.admin-premium .btn.primary {
  box-shadow: none!important
}
body.admin-premium .btn.hot {
  box-shadow: none!important
}
@media (max-width:720px) {
  body.admin-premium {
    background: linear-gradient(155deg,#071018,#050910 55%,#0a0610)!important
  }
  body.admin-premium .admin {
    padding: 9px 8px 100px!important
  }
  body.admin-premium .admin .card {
    border-radius: 16px!important;
    padding: 10px!important
  }
  body.admin-premium .admin .card h3 {
    font-size: 12px!important
  }
  body.admin-premium .manual-cue-toggle {
    min-height: 52px!important;
    padding: 10px 12px!important
  }
  body.admin-premium .cue-admin-grid {
    grid-template-columns: 1fr!important;
    gap: 7px!important
  }
  body.admin-premium .cue-segment {
    height: 27px!important
  }
}
body.admin-premium::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0
}
body.admin-premium .admin .card,
body.admin-premium .stat,
body.admin-premium .top .nav {
  background: linear-gradient(145deg,rgba(12,16,26,.97),rgba(5,8,15,.98))!important;
  border: 1px solid rgba(255,255,255,.11)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.05)!important
}
body.admin-premium .admin .card::after,
body.admin-premium .stat::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background: conic-gradient(from 20deg,rgba(0,255,255,.16),transparent 18%,rgba(255,0,214,.14),transparent 38%,rgba(255,190,0,.12),transparent 58%,rgba(66,255,121,.12),transparent 78%);
  filter: none;
  display: none !important
}
@keyframes boxPrism {
  to {
    transform: rotate(360deg)
  }
}
body.admin-premium #categoryChecks .category-pick:nth-child(4n)::after,
body.admin-premium #categoryChecks .category-pick:nth-child(4n+1)::after,
body.admin-premium #categoryChecks .category-pick:nth-child(4n+2)::after,
body.admin-premium #categoryChecks .category-pick:nth-child(4n+3)::after {
  content: "";
  position: absolute;
  inset: auto 10% -3px 10%;
  height: 2px;
  border-radius: 99px;
  filter: none;
  opacity: .95;
  animation: 2.8s ease-in-out infinite alternate lightPulse;
  display: none !important
}
body.admin-premium #categoryChecks .category-pick:nth-child(4n+1)::after {
  background: #00eaff;
  box-shadow: none
}
body.admin-premium #categoryChecks .category-pick:nth-child(4n+2)::after {
  background: #ff28c8;
  box-shadow: none
}
body.admin-premium #categoryChecks .category-pick:nth-child(4n+3)::after {
  background: #a8ff3e;
  box-shadow: none
}
body.admin-premium #categoryChecks .category-pick:nth-child(4n)::after {
  background: #ffb84a;
  box-shadow: none
}
body.admin-premium .cue-level-admin-card {
  box-shadow: none!important
}
body.admin-premium .manual-cue-toggle {
  border: 1px solid rgba(255,255,255,.16)!important;
  box-shadow: none!important
}
body.admin-premium .manual-cue-toggle em {
  color: #fff!important;
  text-shadow: none
}
body.admin-premium .cue-segment::after {
  content: "";
  position: absolute;
  inset: auto 18% -2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  opacity: .7
}
body.admin-premium .btn.primary {
  border-color: rgba(255,255,255,.2)!important;
  background: linear-gradient(135deg,#00d9ff,#7c2cff)!important
}
body.admin-premium .btn.hot {
  background: linear-gradient(135deg,#ff3f7f,#ff8a1f)!important
}
@media (max-width:720px) {
  body.admin-premium .admin {
    padding-bottom: 110px!important
  }
  body.admin-premium .admin .card,
  body.admin-premium .top .nav {
    border-radius: 18px!important
  }
  body.admin-premium .cue-admin-grid {
    grid-template-columns: 1fr 1fr!important;
    gap: 8px!important
  }
  body.admin-premium .cue-side-editor {
    padding: 9px!important
  }
  body.admin-premium .cue-segments {
    gap: 3px!important
  }
  body.admin-premium .cue-segment {
    height: 24px!important
  }
}
@media (max-width:430px) {
  body.admin-premium .cue-admin-grid {
    grid-template-columns: 1fr!important
  }
}
body.admin-premium:before {
  opacity: .08!important;
  background-size: 48px 48px!important
}
body.admin-premium .admin {
  padding: 14px 0 100px!important;
  width: min(1380px,calc(100% - 36px))!important;
  max-width: 1380px!important;
  margin: 0 auto!important
}
.admin-shortcut {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(110,130,165,.34);
  background: linear-gradient(145deg,rgba(17,22,31,.97),rgba(9,12,18,.97));
  color: #eef3ff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  transition: .22s
}
.admin-shortcut:before {
  content: "";
  position: absolute;
  inset: -70%;
  background: radial-gradient(circle,rgba(83,191,255,.16),transparent 60%);
  animation: 7s ease-in-out infinite v63Float;
  pointer-events: none
}
.admin-shortcut:nth-child(2):before {
  background: radial-gradient(circle,rgba(202,84,255,.14),transparent 60%);
  animation-delay: -2s
}
.admin-shortcut:nth-child(3):before {
  background: radial-gradient(circle,rgba(62,255,167,.13),transparent 60%);
  animation-delay: -4s
}
.admin-shortcut:hover {
  transform: translateY(-2px);
  border-color: rgba(160,190,230,.55);
  box-shadow: none
}
.admin-shortcut.primary {
  border-color: rgba(84,184,255,.62);
  box-shadow: none;
  background: linear-gradient(135deg,#1487ff,#17c7ff 55%,#7b4dff)!important
}
.admin-shortcut span {
  font-size: 16px;
  margin-right: 5px
}
body.admin-premium .admin .card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,rgba(14,18,27,.98),rgba(8,10,16,.99))!important;
  border: 1px solid rgba(103,127,163,.34)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.035)!important
}
body.admin-premium .admin .card:after {
  content: "";
  position: absolute;
  inset: auto -18% -60% -18%;
  height: 120px;
  background: radial-gradient(ellipse,rgba(58,171,255,.12),transparent 68%);
  pointer-events: none;
  opacity: .55!important
}
body.admin-premium .card h3 {
  color: #f4f7ff!important
}
body.admin-premium .field label {
  color: #8996aa!important
}
body.admin-premium .field input,
body.admin-premium .field select,
body.admin-premium .field textarea {
  background: linear-gradient(145deg,#0b111a,#080d14)!important;
  border: 1px solid #2a3b50!important;
  color: #f6f8ff!important;
  box-shadow: inset 0 1px rgba(255,255,255,.02)!important
}
body.admin-premium #categoryChecks .category-pick {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,#0e141e,#090d14)!important;
  border: 1px solid #2a3b50!important;
  box-shadow: inset 0 1px rgba(255,255,255,.03)!important
}
body.admin-premium #categoryChecks .category-pick.active {
  border-color: #46d88a!important;
  background: linear-gradient(145deg,#0d1e17,#0a1511)!important;
  box-shadow: none!important
}
body.admin-premium #categoryChecks .checkchip {
  position: relative;
  z-index: 1;
  background: #111720!important;
  color: #dbe5f5!important;
  border-color: #30435a!important
}
body.admin-premium #categoryChecks .checkchip.active {
  background: linear-gradient(135deg,#12c86d,#24e38b)!important;
  color: #04130b!important;
  border-color: #79ffbc!important;
  box-shadow: none!important
}
body.admin-premium .manual-cue-toggle {
  background: linear-gradient(135deg,#101a17,#0b1110)!important;
  border-color: rgba(71,221,136,.28)!important;
  color: #eefbf5!important
}
@keyframes v63Float {
  0,
  100% {
    transform: translate3d(-8%,-6%,0)
  }
  50% {
    transform: translate3d(10%,7%,0)
  }
}
@media (max-width:700px) {
  .admin-shortcuts {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
    top: 6px
  }
  .admin-shortcut {
    min-height: 42px;
    font-size: 10px;
    border-radius: 12px
  }
  .admin-shortcut span {
    font-size: 14px
  }
  .admin-shortcut:nth-child(3) {
    grid-column: auto
  }
}
@media (max-width:390px) {
  .admin-shortcuts {
    gap: 5px
  }
  .admin-shortcut {
    font-size: 9px;
    padding: 0 6px
  }
}
body.admin-premium,
html {
  background: #05070c!important;
  overflow-x: hidden!important
}
.admin-shortcuts {
  z-index: 120;
  display: grid!important;
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  gap: 8px!important;
  position: relative!important;
  top: auto!important;
  margin: 0 0 12px!important
}
.admin-shortcut {
  min-height: 40px!important;
  height: 40px!important;
  border-radius: 12px!important;
  font-size: 11px!important;
  letter-spacing: .2px!important
}
.admin-shortcut:nth-child(2) {
  border-color: rgba(194,96,255,.45)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.05)!important
}
.admin-shortcut:nth-child(3) {
  border-color: rgba(53,255,165,.38)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.05)!important
}
body.admin-premium .admin .card,
body.admin-premium .offer-form-grid {
  width: 100%!important;
  min-width: 0!important
}
@media (min-width:721px) {
  body.admin-premium .admin .card.full {
    grid-column: 1/-1!important
  }
  .cue-level-admin-card {
    display: block!important
  }
  .cue-level-admin-card.hidden {
    display: none!important
  }
}
body.admin-premium .admin .card::after,
body.admin-premium .stat::after {
  animation: none!important;
  opacity: .55!important
}
#heroHighlights .selected-offer-card {
  box-shadow: none!important
}
@keyframes liOfferAmbient64 {
  0 {
    transform: rotate(0)
  }
  50% {
    transform: rotate(180deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
@keyframes liOfferSun64 {
  0,
  22% {
    left: -58%;
    opacity: 0
  }
  28% {
    opacity: .14
  }
  40% {
    opacity: .72
  }
  52% {
    left: 132%;
    opacity: .34
  }
  100%,
  58% {
    left: 132%;
    opacity: 0
  }
}
@media (max-width:768px) {
  body.admin-premium .admin {
    width: calc(100% - 16px)!important;
    padding-left: 0!important;
    padding-right: 0!important
  }
  .admin-shortcuts {
    gap: 6px!important;
    margin-bottom: 9px!important
  }
  .admin-shortcut {
    height: 39px!important;
    min-height: 39px!important;
    font-size: 10px!important;
    border-radius: 11px!important
  }
}
body.admin-premium,
body.admin-saved {
  animation: none!important;
  background: #050a10!important
}
body.admin-premium .cue-segments {
  gap: 3px!important
}
body.admin-premium .cue-segment {
  position: relative;
  width: 15px!important;
  height: 24px!important;
  min-width: 15px!important;
  border-radius: 4px!important;
  background: #16212c!important;
  border: 1px solid #263746!important;
  box-shadow: none!important;
  transition: background .16s,border-color .16s,box-shadow .16s!important;
  animation: none!important
}
body.admin-premium .cue-segment span {
  background: #263340!important;
  box-shadow: none!important
}
body.admin-premium .cue-segment.active {
  transform: translateY(-1px);
  background: linear-gradient(180deg,#39f878,#0acb58)!important;
  border-color: #54ff91!important;
  box-shadow: inset 0 1px rgba(255,255,255,.34)!important
}
body.admin-premium .cue-segment.active span {
  background: #f5fff8!important;
  box-shadow: none!important
}
body.admin-premium .cue-level-admin-card {
  background: linear-gradient(145deg,#0a141d,#071019)!important;
  border-color: #244258!important
}
body.admin-premium .cue-side-editor {
  background: linear-gradient(145deg,#0c1822,#08121a)!important;
  border-color: #1e3547!important;
  box-shadow: inset 0 1px rgba(255,255,255,.025)!important
}
body.admin-premium .cue-side-editor > div:first-child b {
  color: #eef7ff!important
}
body.admin-premium .cue-side-editor > div:first-child span {
  color: #54ff91!important
}
body.admin-saved .saved-page {
  max-width: 1180px!important;
  padding: 14px 0 60px!important
}
body.admin-saved .saved-top {
  margin-bottom: 10px!important
}
body.admin-saved .saved-top h1 {
  font-size: 20px!important;
  color: #f3f8ff!important
}
body.admin-saved .saved-top p {
  display: none!important
}
body.admin-saved .saved-search {
  margin-bottom: 10px!important
}
body.admin-saved .saved-search input {
  background: #07111a!important;
  color: #eef7ff!important;
  border: 1px solid #20394d!important;
  box-shadow: inset 0 1px rgba(255,255,255,.025)!important
}
body.admin-saved .saved-tag {
  border-color: #203b50!important
}
body.admin-saved .saved-price .helper {
  font-size: 7px!important;
  color: #71889a!important
}
body.admin-saved .empty-state {
  padding: 28px 14px!important;
  background: #08131d!important;
  border-color: #20394d!important
}
@media (max-width:1000px) {
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:700px) {
  body.admin-saved .saved-page {
    padding: 9px 7px 72px!important
  }
  body.admin-saved .saved-top h1 {
    font-size: 16px!important
  }
  body.admin-saved .saved-actions {
    gap: 5px!important
  }
  body.admin-saved .saved-actions .btn {
    min-height: 34px!important;
    font-size: 9px!important
  }
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 6px!important
  }
  body.admin-saved .saved-meta {
    font-size: 6px!important
  }
  body.admin-saved .saved-tag {
    font-size: 5.5px!important;
    padding: 2px 4px!important
  }
  body.admin-saved .saved-price b {
    font-size: 12px!important
  }
  body.admin-saved .saved-actions-row .btn {
    min-height: 28px!important;
    font-size: 7px!important;
    padding: 0 5px!important
  }
}
#heroHighlights .selected-offer-card::before {
  inset: 0!important;
  background: 0 0!important;
  filter: none!important
}
#heroHighlights .selected-offer-card::after {
  content: ""!important;
  position: absolute!important;
  z-index: 30!important;
  pointer-events: none!important;
  top: -45%!important;
  left: -62%!important;
  width: 24%!important;
  height: 190%!important;
  border: 0!important;
  border-radius: 999px!important;
  background: linear-gradient(90deg,transparent 0,rgba(255,240,165,.1) 24%,rgba(255,255,255,.95) 50%,rgba(255,226,132,.48) 62%,transparent 100%)!important;
  filter: none!important;
  transform: rotate(17deg)!important;
  display: none !important
}
#heroHighlights .selected-offer-card > * {
  position: relative!important;
  z-index: 5!important
}
@keyframes liOfferSunV65 {
  0,
  14% {
    left: -62%;
    opacity: 0
  }
  22% {
    opacity: .18
  }
  38% {
    opacity: .9
  }
  54% {
    left: 132%;
    opacity: .9
  }
  100%,
  63% {
    left: 132%;
    opacity: 0
  }
}
.admin .admin-save-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 80;
  padding: 9px 0;
  background: linear-gradient(180deg,transparent,rgba(6,9,14,.95) 45%)
}
body.admin-premium #categoryChecks .category-pick:after,
body.admin-premium .admin .card:after,
body.admin-premium::before {
  animation: none!important
}
body.admin-premium #categoryChecks .category-pick:after {
  opacity: .22!important
}
body.admin-premium .editing-offer #offerId {
  border-color: rgba(255,196,76,.38)!important;
  box-shadow: none!important
}
body.admin-premium .editing-offer #saveOfferBtn {
  background: linear-gradient(135deg,#43f58e,#19c96b 55%,#10a957)!important
}
.category-qty input {
  min-width: 58px;
  width: 68px;
  text-align: center
}
body.admin-premium #categoryChecks .category-pick::after,
body.admin-premium #categoryChecks .category-pick::before,
body.admin-premium .admin .card::after,
body.admin-premium .admin .card::before,
body.admin-premium::after,
body.admin-premium::before,
body.admin-saved::after,
body.admin-saved::before {
  content: none!important;
  display: none!important;
  animation: none!important;
  background: 0 0!important;
  box-shadow: none!important;
  filter: none!important;
  opacity: 0!important
}
@keyframes liSunBeamV76 {
  0,
  18% {
    left: -65%;
    opacity: 0
  }
  28% {
    opacity: .18
  }
  42% {
    opacity: .95
  }
  58% {
    left: 132%;
    opacity: .62
  }
  100%,
  68% {
    left: 132%;
    opacity: 0
  }
}
.vip-level-card:empty {
  display: none!important
}
body.admin-premium::after,
body.admin-premium::before,
body.admin-saved::after,
body.admin-saved::before {
  display: none!important;
  content: none!important;
  animation: none!important;
  opacity: 0!important;
  filter: none!important
}
body.admin-saved .saved-grid {
  align-items: start!important
}
body.admin-premium .offer-basics-compact {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 12px!important;
  align-items: start!important
}
body.admin-premium .offer-basics-compact > .field.full {
  grid-column: 1/-1!important
}
body.admin-premium .conditional-priority .field {
  padding: 0!important;
  margin: 5px 0!important
}
@media (max-width:720px) {
  .admin .admin-save-actions {
    padding: 8px 0
  }
  body.admin-premium .offer-basics-compact {
    grid-template-columns: 1fr 1fr!important;
    gap: 0 8px!important
  }
  body.admin-premium .offer-basics-compact > .field.full {
    grid-column: 1/-1!important
  }
  body.admin-premium .offer-basics-compact > .field {
    margin: 5px 0!important
  }
  body.admin-premium .offer-basics-compact .field input,
  body.admin-premium .offer-basics-compact .field select {
    min-height: 43px!important;
    font-size: 12px!important;
    padding: 9px 10px!important
  }
  body.admin-premium .offer-basics-compact .field textarea {
    min-height: 85px!important
  }
}
body.admin-saved .saved-grid {
  grid-template-columns: repeat(5,minmax(0,1fr))!important;
  gap: 7px!important
}
body.admin-saved .saved-meta,
body.admin-saved .saved-tags {
  gap: 3px!important
}
body.admin-saved .saved-actions-row {
  gap: 4px!important
}
body.admin-saved .saved-actions-row .btn {
  padding: 0 5px!important
}
@media (max-width:1200px) {
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))!important
  }
}
@media (max-width:850px) {
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:600px) {
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 5px!important
  }
  body.admin-saved .saved-price b {
    font-size: 12px!important
  }
  #offerGrid .offer::after {
    width: 34%!important;
    animation-duration: 4s!important
  }
  #offerModal .offer-qty-item {
    min-width: 0!important
  }
}
body.admin-premium .admin .card::after,
body.admin-premium .admin .stat::after,
body.admin-premium .admin-shortcut::before {
  animation: none!important;
  opacity: 0!important;
  display: none!important;
  content: none!important
}
body.admin-premium .admin-shortcuts {
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  gap: 9px!important;
  margin-bottom: 12px!important
}
body.admin-premium .admin-shortcut {
  height: 44px!important;
  min-height: 44px!important;
  border-radius: 14px!important
}
body.admin-premium .admin-shortcut[data-admin-tab=offers].primary {
  background: linear-gradient(135deg,#138dff,#19c8ff 55%,#7251ff)!important;
  border-color: rgba(83,205,255,.72)!important
}
body.admin-premium .admin-shortcut[data-admin-tab=saved].primary {
  background: linear-gradient(135deg,#7137d9,#b44dff)!important;
  border-color: rgba(211,117,255,.72)!important
}
body.admin-premium .admin-shortcut[data-admin-tab=orders].primary {
  background: linear-gradient(135deg,#0d9c61,#24d98a)!important;
  border-color: rgba(90,255,181,.68)!important
}
body.admin-premium .tabsection {
  animation: .22s both adminSectionIn
}
@keyframes adminSectionIn {
  from {
    opacity: .35;
    transform: translateY(4px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
body.admin-premium #offers .offer-form-grid {
  gap: 0 12px!important
}
body.admin-premium .offer-basics-compact > .field {
  margin: 4px 0!important
}
body.admin-premium .offer-basics-compact > .field label {
  margin-bottom: 4px!important;
  font-size: 9px!important;
  letter-spacing: .7px!important
}
body.admin-premium .offer-basics-compact .field input,
body.admin-premium .offer-basics-compact .field select {
  min-height: 39px!important;
  height: 39px!important;
  padding: 8px 10px!important;
  font-size: 11px!important;
  border-radius: 11px!important
}
body.admin-premium .offer-basics-compact .field textarea {
  min-height: 70px!important;
  height: 70px!important;
  border-radius: 11px!important
}
body.admin-premium .admin-featured-field,
body.admin-premium .admin-highlighted-field {
  display: flex!important;
  flex-direction: column!important;
  justify-content: flex-start!important
}
body.admin-premium .feature-toggle {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important
}
body.admin-premium .feature-toggle::after {
  content: ""!important;
  box-shadow: inset 0 1px rgba(255,255,255,.25)!important
}
body.admin-premium .feature-toggle.on,
body.admin-premium .mode-toggle.on {
  border-color: rgba(62,221,150,.55)!important;
  background: linear-gradient(135deg,#123b2a,#0b2018)!important;
  color: #67f2b2!important
}
body.admin-premium .feature-toggle.on::after,
body.admin-premium .mode-toggle.on::after {
  background: #35e39b!important;
  transform: translateX(-34px);
  box-shadow: inset 0 1px rgba(255,255,255,.35)!important
}
body.admin-premium .vpn-toggle.on {
  border-color: rgba(58,225,158,.55);
  background: #102d22;
  color: #69efb2
}
body.admin-premium .vpn-toggle.on i {
  background: #35e39b;
  transform: translateX(-34px);
  box-shadow: none
}
body.admin-premium .vpn-conditional.is-visible {
  grid-template-rows: 1fr!important;
  max-height: 300px!important;
  opacity: 1!important;
  margin: 4px 0!important
}
body.admin-premium .conditional-priority.is-visible {
  grid-template-rows: 1fr!important;
  max-height: 500px!important;
  opacity: 1!important;
  margin: 4px 0!important
}
.offer-countdown-admin.countdown-enabled .countdown-admin-grid {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 9px
}
.highlight-dependent-hidden {
  max-height: 0!important;
  opacity: 0!important;
  transform: translateY(-6px)!important;
  margin-top: 0!important;
  margin-bottom: 0!important;
  padding-top: 0!important;
  padding-bottom: 0!important;
  pointer-events: none!important
}
body.admin-premium .slider-conditional-grid {
  display: grid!important
}
body.admin-premium .slider-conditional-grid .field {
  margin: 4px 0!important
}
body.admin-premium .saved-admin-panel {
  width: 100%!important;
  padding-bottom: 8px!important
}
body.admin-premium .saved-admin-head {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  gap: 12px!important;
  margin: 0 0 10px!important
}
body.admin-premium .saved-admin-head .title {
  font-size: 21px!important;
  font-weight: 1000!important
}
body.admin-premium .saved-admin-head .sub {
  font-size: 9px!important;
  color: #74899b!important;
  margin-top: 3px!important
}
body.admin-premium .saved-search {
  margin: 0!important;
  width: min(360px,100%)!important
}
body.admin-premium .saved-search input {
  width: 100%!important;
  box-sizing: border-box!important;
  padding: 9px 11px!important;
  border-radius: 11px!important;
  font-size: 10px!important
}
body.admin-premium .saved-grid {
  display: grid!important
}
body.admin-premium .admin-internal-games {
  display: none!important
}
@media (max-width:1200px) {
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))!important
  }
}
@media (max-width:850px) {
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:700px) {
  body.admin-premium .admin-shortcuts {
    gap: 6px!important
  }
  body.admin-premium .admin-shortcut {
    height: 41px!important;
    min-height: 41px!important;
    font-size: 9px!important;
    border-radius: 11px!important
  }
  body.admin-premium .admin-shortcut span {
    font-size: 13px!important
  }
  body.admin-premium .offer-basics-compact {
    grid-template-columns: 1fr 1fr!important;
    gap: 0 7px!important
  }
  body.admin-premium .offer-basics-compact > .field.full {
    grid-column: 1/-1!important
  }
  body.admin-premium .offer-basics-compact .field input,
  body.admin-premium .offer-basics-compact .field select {
    min-height: 38px!important;
    height: 38px!important;
    font-size: 10px!important;
    padding: 8px!important
  }
  body.admin-premium .offer-basics-compact .field textarea {
    min-height: 66px!important;
    height: 66px!important
  }
  body.admin-premium .slider-conditional-grid {
    gap: 7px!important
  }
  body.admin-premium .saved-admin-head {
    align-items: stretch!important;
    flex-direction: column!important;
    gap: 7px!important
  }
  body.admin-premium .saved-search {
    width: 100%!important
  }
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 5px!important
  }
}
body.admin-premium .saved-admin-head {
  margin-bottom: 7px!important
}
@media (max-width:850px) {
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))!important
  }
}
@media (max-width:700px) {
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 5px!important
  }
  body.admin-premium .saved-price b {
    font-size: 11px!important
  }
}
body.admin-premium .offer-basics-compact .admin-access-field,
body.admin-premium .offer-basics-compact .admin-featured-field,
body.admin-premium .offer-basics-compact .admin-highlighted-field {
  min-width: 0!important
}
body.admin-premium .feature-toggle,
body.admin-premium .mode-toggle {
  box-sizing: border-box!important;
  width: 100%!important;
  position: relative!important;
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  overflow: hidden!important;
  cursor: pointer!important;
  font-weight: 900!important;
  transition: .28s!important
}
body.admin-premium .feature-toggle span,
body.admin-premium .mode-toggle span {
  font-size: 10px!important;
  letter-spacing: .35px!important;
  position: relative!important;
  z-index: 2!important;
  white-space: nowrap!important
}
body.admin-premium .feature-toggle b,
body.admin-premium .mode-toggle b {
  font-size: 9px!important;
  letter-spacing: 1px!important;
  position: relative!important;
  z-index: 3!important
}
body.admin-premium .feature-toggle::after,
body.admin-premium .mode-toggle::after {
  content: ""!important;
  position: absolute!important;
  border-radius: 50%!important;
  background: #ef4d5d!important;
  box-shadow: inset 0 1px rgba(255,255,255,.28)!important;
  transition: transform .32s cubic-bezier(.2,.8,.2,1),background .28s!important;
  right: 9px!important;
  top: 7px!important;
  width: 26px!important;
  height: 26px!important
}
body.admin-premium .feature-toggle {
  border: 1px solid #5c3540!important;
  background: linear-gradient(135deg,#35141a,#1b0d12)!important;
  color: #ff7d89!important
}
body.admin-premium .mode-toggle {
  border: 1px solid #a83d4b!important;
  background: linear-gradient(135deg,#35141a,#1b0d12)!important;
  color: #ff8c98!important
}
body.admin-premium .highlight-left-field,
body.admin-premium .highlight-text-field {
  min-width: 0!important
}
body.admin-premium .highlight-text-field {
  grid-column: 1!important
}
body.admin-premium .highlight-left-field {
  grid-column: 2!important
}
body.admin-premium .vpn-conditional .field {
  margin: 4px 0!important;
  padding: 0!important
}
body.admin-premium .vpn-conditional select {
  width: 100%!important
}
body.admin-premium {
  --p-bg: #f4f7fb;
  --p-surface: rgba(255,255,255,.92);
  --p-surface-2: #ffffff;
  --p-line: #dbe5ef;
  --p-text: #172231;
  --p-muted: #6b7b8d;
  --p-blue: #168cff;
  --p-cyan: #00b8e6;
  --p-green: #18b957;
  --p-green-soft: #e8fff1;
  --p-orange: #ff6a3d;
  min-height: 100vh;
  --bg: #05060a;
  --panel: #0a0c12;
  --panel2: #0e1119;
  --line: #2b3343;
  --text: #f7f9ff;
  --muted: #96a0b3;
  color: #f7f9ff!important;
  background: #050a10!important;
  animation: none!important
}
body.admin-premium::after,
body.admin-premium::before {
  content: none!important;
  display: none!important;
  animation: none!important
}
body.admin-premium #offers .offer-basics-compact {
  display: grid!important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important;
  column-gap: 10px!important;
  row-gap: 2px!important;
  align-items: start!important
}
body.admin-premium #offers .offer-basics-compact > .admin-game-field {
  grid-column: 1!important
}
body.admin-premium #offers .offer-basics-compact > .admin-active-field {
  grid-column: 2!important
}
body.admin-premium #offers .offer-basics-compact > .admin-featured-field,
body.admin-premium #offers .offer-basics-compact > .admin-name-field {
  grid-column: 1!important
}
body.admin-premium #offers .offer-basics-compact > .admin-highlighted-field {
  grid-column: 2!important
}
body.admin-premium #offers .offer-basics-compact > .admin-delivery-min-field {
  grid-column: 1!important
}
body.admin-premium #offers .offer-basics-compact > .admin-delivery-max-field {
  grid-column: 2!important
}
body.admin-premium #offers .offer-basics-compact > .highlight-text-field {
  grid-column: 1!important
}
body.admin-premium #offers .offer-basics-compact > .highlight-left-field {
  grid-column: 2!important
}
body.admin-premium .feature-toggle,
body.admin-premium .mode-toggle {
  height: 40px!important;
  min-height: 40px!important;
  border-radius: 13px!important;
  padding: 0 52px 0 13px!important
}
body.admin-premium .vpn-conditional {
  display: grid!important;
  grid-template-rows: 0fr!important;
  opacity: 0!important;
  max-height: 0!important;
  margin: 0!important;
  overflow: hidden!important;
  transition: grid-template-rows .48s cubic-bezier(.2,.75,.2,1),max-height .48s,opacity .25s,margin .48s!important
}
body.admin-premium .conditional-vpn-inner {
  min-height: 0!important;
  overflow: hidden!important
}
.vpn-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid rgba(245,190,70,.2);
  background: linear-gradient(135deg,rgba(42,31,11,.72),rgba(14,18,22,.92))
}
.vpn-switch-row label {
  display: block!important;
  margin: 0 0 2px!important;
  color: #ffd978!important;
  font-size: 9px!important;
  font-weight: 1000!important;
  letter-spacing: .7px!important
}
.vpn-switch-row small {
  display: block;
  color: #7f93a3;
  font-size: 8px;
  line-height: 1.35
}
.vpn-toggle {
  position: relative;
  flex: 0 0 76px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,200,75,.38);
  background: #2b2110;
  color: #ffd45d;
  font-size: 9px;
  font-weight: 1000;
  cursor: pointer;
  overflow: hidden;
  transition: .3s
}
.vpn-toggle i {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffd34d;
  box-shadow: none;
  transition: .32s cubic-bezier(.2,.8,.2,1)
}
.vpn-toggle span {
  position: relative;
  z-index: 2;
  display: block;
  text-align: left;
  padding-left: 10px;
  letter-spacing: 1px
}
body.admin-premium .conditional-priority {
  display: grid!important;
  grid-template-rows: 0fr!important;
  max-height: 0!important;
  opacity: 0!important;
  margin: 0!important;
  overflow: hidden!important;
  transition: grid-template-rows .5s cubic-bezier(.2,.75,.2,1),max-height .5s,opacity .25s,margin .5s!important
}
body.admin-premium .conditional-priority-inner {
  min-height: 0!important;
  overflow: hidden!important
}
body.admin-premium .slider-conditional-grid {
  grid-template-columns: 1fr 1fr!important;
  gap: 8px!important;
  padding: 2px 0!important
}
.cue-level-control {
  display: grid;
  grid-template-columns: auto 90px;
  align-items: center;
  gap: 5px 9px;
  padding: 9px 10px;
  margin-bottom: 8px;
  border-radius: 11px;
  border: 1px solid rgba(56,207,255,.18);
  background: linear-gradient(135deg,rgba(15,39,53,.72),rgba(7,17,25,.92))
}
.cue-level-control label {
  font-size: 9px!important;
  color: #7fc9e5!important;
  font-weight: 1000!important;
  letter-spacing: .8px!important
}
.cue-level-control input {
  width: 90px!important;
  height: 34px!important;
  text-align: center!important;
  border-radius: 9px!important;
  background: #08131d!important;
  color: #fff!important;
  border: 1px solid rgba(64,196,238,.25)!important;
  font-weight: 1000!important
}
.cue-level-control small {
  grid-column: 1/-1;
  color: #718899;
  font-size: 7px
}
#offerModal .offer-qty-item > small {
  font-size: 6px!important
}
#offerModal .vip-showcase {
  margin-top: 7px!important
}
#offerModal .vip-showcase-title {
  margin-bottom: 5px!important;
  padding: 7px 9px!important;
  border-radius: 11px!important
}
#offerModal .vip-showcase-title span {
  font-size: 12px!important;
  font-weight: 1000!important
}
#offerModal .vip-showcase-title small {
  font-size: 7px!important;
  font-weight: 800!important
}
#offerModal .vip-level-grid {
  align-items: start!important;
  grid-auto-rows: max-content!important
}
#offerModal .vip-level-card {
  height: auto!important;
  align-self: start!important
}
#offerModal .vip-level-head {
  margin-bottom: 4px!important
}
#offerModal .vip-level-head b {
  font-weight: 1000!important
}
#offerModal .benefit i,
#offerModal .benefit i .icon-inline {
  width: 24px!important;
  height: 24px!important
}
#offerModal .benefit strong {
  font-size: 10px!important;
  font-weight: 1000!important
}
#offerModal .benefit small {
  opacity: .95!important;
  font-size: 7px!important;
  font-weight: 900!important
}
#offerModal .offer-detail-strip {
  margin: 7px 0!important
}
#offerModal .offer-detail-strip > div {
  padding: 8px!important;
  border-radius: 10px!important;
  background: linear-gradient(145deg,rgba(18,47,64,.76),rgba(5,16,25,.94))!important;
  box-shadow: inset 0 1px rgba(255,255,255,.06)!important
}
#offerModal .offer-detail-strip small {
  font-size: 7px!important;
  font-weight: 1000!important
}
#offerModal .offer-detail-strip b {
  font-size: 9px!important;
  font-weight: 1000!important
}
#offerModal .modal-access {
  margin: 7px 0!important;
  padding: 9px 10px!important;
  border-radius: 11px!important;
  background: linear-gradient(145deg,rgba(12,39,55,.88),rgba(5,17,27,.96))!important;
  box-shadow: inset 0 1px rgba(255,255,255,.05)!important
}
#offerModal .modal-access strong {
  font-weight: 1000!important
}
#offerModal .offer-trust-mini {
  margin: 7px 0!important;
  padding: 9px 10px!important;
  border-radius: 11px!important;
  background: linear-gradient(145deg,rgba(14,38,51,.82),rgba(5,15,24,.96))!important;
  box-shadow: inset 0 1px rgba(255,255,255,.04)!important
}
#offerModal .offer-trust-mini b {
  font-weight: 1000!important
}
body.admin-premium .saved-grid {
  grid-template-columns: repeat(6,minmax(0,1fr))!important;
  gap: 5px!important;
  align-items: start!important
}
body.admin-premium .saved-meta {
  gap: 2px!important
}
body.admin-premium .saved-tags {
  gap: 2px!important;
  max-height: 15px!important;
  overflow: hidden!important
}
body.admin-premium .saved-price {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  gap: 3px!important
}
body.admin-premium .saved-price .helper {
  font-size: 5px!important
}
body.admin-premium .saved-actions-row .btn {
  padding: 0 4px!important;
  width: 100%!important;
  font-weight: 1000!important
}
body.admin-premium .saved-actions-row .btn.danger {
  border: 1px solid rgba(255,87,105,.35)!important
}
body.admin-premium .saved-actions-row .btn.primary {
  color: #fff!important;
  min-height: 34px!important;
  height: 34px!important;
  font-size: 9px!important
}
@media (max-width:1200px) {
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(5,minmax(0,1fr))!important
  }
}
@media (max-width:900px) {
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))!important
  }
}
@media (max-width:700px) {
  body.admin-premium .highlight-left-field,
  body.admin-premium .highlight-text-field {
    grid-column: auto!important
  }
  body.admin-premium .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 5px!important
  }
  body.admin-premium .saved-actions-row .btn {
    height: 30px!important;
    min-height: 30px!important;
    font-size: 8px!important
  }
}
#offerGrid .offer::after {
  content: ""!important;
  position: absolute!important;
  top: -70%!important;
  left: -80%!important;
  width: 30%!important;
  height: 240%!important;
  z-index: 1000!important;
  pointer-events: none!important;
  transform: rotate(16deg)!important;
  background: linear-gradient(90deg,transparent 0,rgba(255,244,176,.1) 24%,rgba(255,255,255,.98) 49%,rgba(255,223,133,.55) 58%,transparent 100%)!important;
  filter: none!important;
  mix-blend-mode: screen!important;
  display: none !important
}
#heroHighlights .selected-offer-card > .selected-offer-body,
#heroHighlights .selected-offer-card > img {
  position: relative!important;
  z-index: 5!important
}
#offerModal .offer-qty-slider-wrap {
  position: relative;
  display: flex;
  align-items: center
}
#offerModal .qty-nav {
  border: 1px solid rgba(91,210,255,.45);
  background: linear-gradient(145deg,rgba(24,91,120,.9),rgba(7,24,38,.98));
  color: #e8fbff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity .38s,transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .3s
}
#offerModal .qty-nav:hover {
  box-shadow: none;
  transform: translateY(-1px) scale(1.04)
}
#offerModal .offer-action-row {
  position: sticky!important;
  bottom: 0!important;
  z-index: 50!important
}
#offerModal .offer-action-row .btn {
  position: relative;
  overflow: hidden;
  min-height: 48px!important;
  border-radius: 14px!important;
  font-size: 12px!important;
  font-weight: 1000!important;
  letter-spacing: .2px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1),filter .18s,box-shadow .3s!important
}
#offerModal .offer-action-row .btn:before {
  content: "";
  position: absolute;
  inset: -60% -35%;
  background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.72) 50%,rgba(255,245,200,.12) 55%,transparent 61%);
  transform: translateX(-75%);
  animation: 4.2s linear infinite liActionShine;
  pointer-events: none
}
#offerModal .offer-action-row .btn:active {
  transform: translateY(-3px) scale(1.035)!important;
  filter: brightness(1.18)
}
#offerModal .vip-order-btn {
  background: linear-gradient(135deg,#09a9ff,#367bff 48%,#7046ff)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.28)!important
}
#offerModal .cart-add-detail {
  background: linear-gradient(135deg,#0b536f,#087d82 50%,#1559a5)!important;
  border: 1px solid rgba(93,225,255,.42)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.18)!important
}
#offerModal .offer-qty-item {
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  justify-content: flex-start!important
}
#offerModal .offer-qty-icon {
  position: relative;
  z-index: 1
}
#offerModal .offer-qty-item > span {
  position: relative;
  z-index: 2
}
#offerModal .offer-qty-item > b {
  position: relative;
  z-index: 2;
  white-space: nowrap
}
@media (max-width:560px) {
  #offerModal .qty-nav {
    flex-basis: 29px;
    width: 29px;
    height: 43px;
    font-size: 27px
  }
  #offerModal .offer-qty-item {
    flex-basis: 82px!important
  }
  #offerModal .offer-action-row .btn {
    min-height: 52px!important;
    font-size: 12px!important
  }
}
body.admin-premium .saved-actions-row {
  display: grid!important;
  grid-template-columns: 1.28fr .82fr!important;
  gap: 7px!important;
  align-items: center!important
}
body.admin-premium .saved-actions-row .btn.danger {
  min-height: 29px!important;
  height: 29px!important;
  font-size: 7.5px!important
}
@media (max-width:700px) {
  body.admin-premium .saved-actions-row {
    grid-template-columns: 1.28fr .82fr!important;
    gap: 6px!important
  }
  body.admin-premium .saved-actions-row .btn.primary {
    height: 34px!important;
    min-height: 34px!important;
    font-size: 9px!important
  }
  body.admin-premium .saved-actions-row .btn.danger {
    height: 29px!important;
    min-height: 29px!important;
    font-size: 7.5px!important
  }
}
#offerModal .login-access strong {
  color: #69d7ff!important;
  font-size: 13px!important;
  letter-spacing: .02em!important;
  text-shadow: none!important
}
#offerModal .login-access span {
  display: block!important;
  color: #a7b9c8!important;
  font-size: 9.5px!important;
  font-weight: 700!important;
  line-height: 1.55!important
}
#heroHighlights .selected-offer-card,
#offerGrid .offer,
#offerModal .modal-access,
#offerModal .offer-detail-strip > div,
#offerModal .offer-qty-list,
#offerModal .offer-trust-mini,
#offerModal .vip-level-card,
#offerModal .vip-showcase-title {
  position: relative!important;
  isolation: isolate!important;
  overflow: hidden!important
}
#offerModal .modal-access::after,
#offerModal .offer-detail-strip > div::after,
#offerModal .offer-qty-list::after,
#offerModal .offer-trust-mini::after,
#offerModal .vip-level-card::after,
#offerModal .vip-showcase-title::after {
  content: ""!important;
  position: absolute!important;
  top: -90%!important;
  left: -75%!important;
  width: 24%!important;
  height: 280%!important;
  pointer-events: none!important;
  z-index: 20!important;
  transform: rotate(16deg)!important;
  background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.03) 30%,rgba(255,255,255,.62) 49%,rgba(181,246,255,.18) 57%,transparent 82%)!important;
  filter: none!important;
  mix-blend-mode: screen!important;
  opacity: 0!important;
  animation: 6.8s cubic-bezier(.2,.7,.2,1) infinite liBoxShineV83!important;
  display: none !important
}
#offerModal .modal-access,
#offerModal .offer-detail-strip > div,
#offerModal .offer-trust-mini,
#offerModal .vip-level-card {
  box-shadow: inset 0 1px rgba(255,255,255,.045)!important
}
body.admin-premium .saved-admin-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap
}
body.admin-premium .admin-sort-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  user-select: none
}
body.admin-premium .sort-save-default-btn {
  margin-left: 10px;
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg,#a855f7,#6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s,transform .15s;
  box-shadow: none;
  letter-spacing: .02em
}
body.admin-premium .sort-save-default-btn:hover {
  opacity: .88;
  transform: translateY(-1px)
}
body.admin-premium .saved-order-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(80,205,255,.45);
  background: linear-gradient(135deg,#0c1d2b,#123e57 55%,#182d48);
  color: #eaf8ff;
  border-radius: 11px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 9px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: none
}
body.admin-premium .saved-order-btn:after {
  content: "";
  position: absolute;
  top: -70%;
  left: -35%;
  width: 28%;
  height: 240%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation: 4.8s linear infinite v84BtnShine;
  pointer-events: none
}
body.admin-premium .category-order-panel {
  margin: 0 0 10px;
  border: 1px solid rgba(72,190,255,.28);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(9,24,35,.98),rgba(8,15,24,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  padding: 10px;
  animation: .28s both v84PanelIn
}
@keyframes v84PanelIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
    max-height: 0
  }
  to {
    opacity: 1;
    transform: none;
    max-height: 900px
  }
}
body.admin-premium .category-order-panel.hidden {
  display: none!important
}
body.admin-premium .category-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px
}
body.admin-premium .category-order-head b {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 1000
}
body.admin-premium .category-order-head small {
  display: block;
  color: #8ea6b9;
  font-size: 8px;
  line-height: 1.45;
  margin-top: 3px;
  max-width: 620px
}
body.admin-premium .category-order-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 9px 0
}
body.admin-premium .category-order-controls label {
  display: grid;
  gap: 4px;
  color: #7890a3;
  font-size: 8px;
  font-weight: 900;
  flex: 1
}
body.admin-premium .category-order-controls select {
  height: 34px;
  border: 1px solid #24465d;
  border-radius: 9px;
  background: #08141f;
  color: #fff;
  padding: 0 9px;
  font-weight: 800
}
body.admin-premium .category-order-controls .btn {
  min-height: 34px;
  font-size: 9px;
  padding: 0 12px
}
body.admin-premium .category-order-list {
  display: grid;
  gap: 5px;
  max-height: 310px;
  overflow: auto
}
body.admin-premium .category-order-item {
  display: grid;
  grid-template-columns: 24px 48px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  padding: 5px 7px;
  border: 1px solid rgba(75,115,145,.25);
  border-radius: 10px;
  background: linear-gradient(145deg,#0c1722,#0a1119);
  cursor: grab;
  transition: .18s
}
body.admin-premium .category-order-item.dragging {
  opacity: .45;
  transform: scale(.99)
}
body.admin-premium .category-order-item .ord {
  font-size: 9px;
  color: #61dfff;
  font-weight: 1000;
  text-align: center
}
body.admin-premium .category-order-item img {
  width: 48px;
  height: 34px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #23445a
}
body.admin-premium .category-order-item .game {
  display: block;
  color: #72889b;
  font-size: 7px;
  margin-top: 2px;
  font-weight: 700
}
body.admin-premium .category-order-item .move {
  display: flex;
  gap: 3px
}
body.admin-premium .category-order-item .move button {
  width: 26px;
  height: 26px;
  border: 1px solid #28445a;
  border-radius: 7px;
  background: #0d1c28;
  color: #d9efff;
  font-weight: 1000;
  cursor: pointer
}
body.admin-premium .category-order-item .move button:hover {
  background: #153b55
}
#offerFilters .filter,
.card,
.game,
.offer,
.selected-offer-card {
  position: relative;
  overflow: hidden
}
#offerFilters .filter:after,
.card:after,
.game:after,
.offer:after,
.selected-offer-card:after {
  content: "";
  position: absolute;
  top: -70%;
  left: -38%;
  width: 22%;
  height: 240%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.04) 28%,rgba(255,255,255,.22) 50%,rgba(255,240,180,.07) 66%,transparent 100%);
  filter: none;
  pointer-events: none;
  z-index: 30;
  animation: 6.8s linear infinite v84UniversalShine;
  opacity: .72;
  display: none !important
}
.offer:after,
.selected-offer-card:after {
  animation-duration: 4.2s;
  opacity: .9;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.72) 50%,rgba(255,226,145,.16) 65%,transparent)
}
#offerFilters .filter:after {
  animation-duration: 7.8s;
  opacity: .48
}
#pool.hero #heroSlides .hero-slide {
  transform: none!important;
  left: 0!important;
  right: 0!important;
  transition: opacity .72s ease-in-out!important;
  opacity: 0!important;
  pointer-events: none!important
}
#pool.hero #heroSlides .hero-slide.active {
  opacity: 1!important;
  pointer-events: auto!important;
  z-index: 2!important
}
#pool.hero #heroSlides .hero-slide::after,
#pool.hero #heroSlides .hero-slide::before {
  transform: none!important
}
@media (max-width:700px) {
  body.admin-premium .saved-admin-title-row {
    align-items: stretch
  }
  body.admin-premium .saved-order-btn {
    min-height: 32px;
    padding: 0 9px;
    font-size: 8px
  }
  body.admin-premium .category-order-controls {
    flex-direction: column;
    align-items: stretch
  }
  body.admin-premium .category-order-item {
    grid-template-columns: 22px 42px 1fr auto
  }
  body.admin-premium .category-order-item img {
    width: 42px;
    height: 31px
  }
}
#offerSub,
.section#support .head {
  display: none!important
}
#offerTitle {
  font-size: 0!important
}
#offerTitle:after {
  content: "Offers";
  font-size: 18px!important
}
#games > .head,
#offers > .head {
  display: none!important
}
#offerModal .benefit {
  min-height: 0!important;
  display: flex!important;
  align-items: center!important;
  gap: 7px!important;
  min-width: 0!important;
  padding: 4px 0!important
}
#offerModal .benefit-icon {
  position: relative!important;
  width: 30px!important;
  min-width: 30px!important;
  height: 30px!important;
  flex: 0 0 30px!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  overflow: visible!important
}
#offerModal .benefit-icon .icon-inline,
#offerModal .benefit-icon img {
  width: 26px!important;
  height: 26px!important;
  object-fit: contain!important;
  display: block!important
}
#offerModal .benefit-copy {
  min-width: 0!important;
  flex: 1 1 auto!important;
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  gap: 6px!important
}
#offerModal .benefit-copy strong {
  position: static!important;
  display: block!important;
  flex: 0 0 auto!important;
  margin: 0!important;
  padding: 0!important;
  line-height: 1.1!important;
  white-space: nowrap!important;
  overflow: visible!important
}
#offerModal .benefit-copy small {
  position: static!important;
  display: block!important;
  flex: 0 1 auto!important;
  margin: 0!important;
  padding: 0!important;
  line-height: 1.1!important;
  white-space: nowrap!important;
  overflow: visible!important
}
#offerModal .modal-price {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  gap: 10px!important;
  flex-wrap: wrap!important
}
#offerModal .modal-price-main {
  display: inline-flex!important;
  align-items: center!important;
  gap: 5px!important;
  min-width: 0!important
}
#offerModal .modal-no-login-badge {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 28px!important;
  padding: 6px 10px!important;
  border-radius: 999px!important;
  border: 1px solid rgba(83,242,169,.36)!important;
  background: linear-gradient(135deg,rgba(30,191,120,.17),rgba(15,101,76,.18))!important;
  color: #7dffc7!important;
  font-size: 8px!important;
  font-weight: 1000!important;
  letter-spacing: .06em!important;
  box-shadow: inset 0 1px rgba(255,255,255,.06)!important;
  white-space: nowrap!important
}
@media (max-width:600px) {
  #offerModal .modal-price {
    gap: 7px!important
  }
  #offerModal .modal-no-login-badge {
    font-size: 7px!important;
    padding: 5px 8px!important;
    min-height: 24px!important
  }
  #offerModal .benefit-copy strong {
    font-size: 10px!important
  }
  #offerModal .benefit-copy small {
    font-size: 7px!important
  }
}
.premium-input-wrap::after,
.premium-main-btn::after,
.premium-method::after {
  display: none!important;
  content: none!important;
  animation: none!important
}
.premium-input-wrap:focus-within::after,
.premium-main-btn:hover::after,
.premium-method:hover::after {
  display: none!important;
  animation: none!important;
  opacity: 0!important
}
.cue-overlay-editor {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(145deg,rgba(5,18,29,.96),rgba(3,9,15,.98));
  border: 1px solid rgba(66,202,255,.2)
}
.cue-overlay-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start
}
.cue-overlay-head b {
  font-size: 10px;
  color: #eaf8ff
}
.cue-overlay-head small {
  font-size: 8px;
  color: #7791a4
}
.cue-overlay-stage {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #183a4f
}
.cue-overlay-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,transparent 42%,rgba(0,0,0,.18));
  pointer-events: none
}
.cue-overlay-preview:active {
  cursor: grabbing
}
.cue-overlay-graphic {
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: none
}
.cue-overlay-controls {
  display: grid;
  grid-template-columns: repeat(3,1fr) 1fr;
  gap: 6px;
  margin-top: 8px
}
.cue-overlay-controls-v2 {
  grid-template-columns: repeat(5,1fr) 1.2fr
}
.cue-overlay-controls label,
.cue-overlay-controls select {
  font-size: 8px;
  color: #7690a2
}
.cue-overlay-controls input,
.cue-overlay-controls select {
  width: 100%;
  margin-top: 3px;
  padding: 7px 6px;
  border-radius: 9px;
  border: 1px solid #1e4055;
  background: #07141f;
  color: #eaf8ff;
  box-sizing: border-box
}
.cue-overlay-actions {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  flex-wrap: wrap
}
.cue-overlay-actions .mini-btn {
  padding: 7px 9px
}
.cue-overlay-tip {
  display: block;
  margin-top: 7px;
  font-size: 8px;
  color: #5f7f92
}
.countdown-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px
}
.offer-countdown-admin {
  grid-column: 1/-1
}
.offer-countdown-admin .conditional-vpn-inner {
  border: 1px solid rgba(62,204,255,.16);
  border-radius: 12px;
  padding: 9px
}
.modal-offer-media-wrap,
.offer-media-wrap,
.selected-offer-media {
  display: block
}
.selected-offer-media {
  height: 100%
}
.selected-offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
.offer-countdown-overlay {
  color: #fff;
  pointer-events: none
}
.offer-countdown-overlay span {
  display: block;
  opacity: .78
}
.offer-countdown-overlay.active {
  animation: 1.9s ease-in-out infinite countPulse
}
@media (max-width:720px) {
  .cue-overlay-stage {
    height: 165px
  }
  .cue-overlay-controls {
    grid-template-columns: repeat(3,1fr)
  }
  .cue-overlay-controls select {
    grid-column: 1/-1
  }
  .offer-countdown-overlay {
    min-width: 78%;
    padding: 6px 8px
  }
  .offer-countdown-overlay b {
    font-size: 10px
  }
  .cue-overlay-controls-v2 {
    grid-template-columns: repeat(2,1fr)
  }
  .cue-overlay-controls-v2 select {
    grid-column: 1/-1
  }
  .cue-overlay-preview {
    width: 28%
  }
}
.cue-overlay-stage {
  height: 180px!important;
  aspect-ratio: 16/9;
  max-height: 180px;
  background: #030a10!important
}
.cue-overlay-stage > img {
  object-fit: contain!important;
  opacity: 1!important;
  background: #030a10
}
.cue-overlay-preview {
  position: absolute;
  left: 76%;
  top: 20%;
  transform: translate(-50%,-50%) scale(1) rotate(0);
  cursor: grab;
  user-select: none;
  font-size: 12px!important
}
.cue-level-control #cueLevelDisplay {
  width: 100%;
  margin: 4px 0 6px;
  padding: 7px 8px;
  border-radius: 9px;
  border: 1px solid #1e4055;
  background: #07141f;
  color: #eaf8ff
}
.cue-display-mode-label {
  display: block!important;
  margin-top: 8px;
  font-size: 8px;
  color: #7690a2
}
.premium-main-btn,
.premium-method {
  position: relative;
  overflow: hidden
}
.premium-main-btn::after,
.premium-method::after {
  display: none!important;
  content: none!important
}
@media (max-width:560px) {
  .cue-overlay-stage {
    height: 150px!important;
    max-height: 150px!important
  }
  .cue-overlay-preview {
    font-size: 11px!important
  }
}
.offer-countdown-admin .countdown-admin-grid {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  margin-top: 0;
  transition: max-height .32s,opacity .25s,transform .32s,margin-top .32s
}
.highlight-left-field,
.highlight-text-field {
  max-height: 90px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height .3s,opacity .25s,transform .3s,margin .3s,padding .3s
}
.cue-overlay-reference {
  border-radius: 8px!important;
  background: linear-gradient(145deg,rgba(6,12,18,.96),rgba(22,27,33,.95))!important;
  border-color: rgba(120,255,167,.38)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.08)!important
}
.login-modal .premium-main-btn,
.login-modal .premium-method {
  isolation: isolate
}
.login-modal .premium-main-btn::after,
.login-modal .premium-main-btn::before,
.login-modal .premium-method::after,
.login-modal .premium-method::before {
  content: none!important
}
@media (max-width:720px) {
  .offer-countdown-overlay {
    top: -10px!important;
    padding: 6px 8px 7px!important
  }
  .offer-countdown-overlay b {
    font-size: 10px!important
  }
  .cue-overlay-stage {
    height: 150px!important;
    aspect-ratio: 16/9!important
  }
  .cue-overlay-preview {
    max-width: 48%!important
  }
}
.cue-overlay-pure {
  border-radius: 2px!important;
  backdrop-filter: none!important;
  box-sizing: border-box!important
}
.cue-reference-row {
  display: grid;
  grid-template-columns: repeat(10,minmax(0,1fr));
  gap: 5%
}
.cue-swipe-controls {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid rgba(80,210,255,.14);
  border-radius: 12px;
  background: rgba(3,13,21,.72)
}
.cue-swipe-controls b {
  display: block;
  font-size: 7px;
  color: #8edfff;
  margin-bottom: 5px;
  letter-spacing: .3px
}
.cue-gesture-tip {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  color: #7f9aaa;
  text-align: center
}
@media (max-width:720px) {
  .cue-swipe-controls {
    grid-template-columns: 1fr 1fr
  }
  .cue-swipe-controls > div:last-child {
    grid-column: 1/-1
  }
  .cue-reference-row {
    gap: 4.5%;
    margin: 5% 0
  }
  .cue-overlay-pure {
    padding: 7%!important
  }
}
.cue-overlay-enable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(69,214,255,.18);
  border-radius: 12px;
  background: linear-gradient(145deg,rgba(4,18,29,.9),rgba(2,10,17,.96))
}
.cue-overlay-enable-row label {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
  color: #8fe7ff;
  margin: 0 0 2px
}
.cue-overlay-enable-row small {
  font-size: 8px;
  color: #6f8a9d
}
.cue-overlay-toggle {
  min-width: 78px!important
}
.cue-overlay-reference {
  padding: 5% 6%!important
}
.cue-reference-cell {
  aspect-ratio: .46;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  aspect-ratio: 1.9!important;
  min-width: 0!important;
  box-sizing: border-box!important
}
#cueOverlayConfig[aria-hidden=true] {
  display: none!important;
  max-height: 0!important;
  opacity: 0!important;
  pointer-events: none!important;
  margin: 0!important
}
#cueOverlayConfig[aria-hidden=false] {
  display: block!important;
  max-height: 1200px!important;
  opacity: 1!important;
  pointer-events: auto!important
}
.cue-overlay-config {
  display: block;
  max-height: 1200px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .28s,opacity .22s,transform .28s;
  margin-top: 0
}
.cue-overlay-enable-row .cue-overlay-toggle {
  cursor: pointer!important;
  pointer-events: auto!important
}
.cue-overlay-preview,
.cue-overlay-stage {
  touch-action: none!important;
  touch-action: none!important
}
.offer-countdown-overlay {
  width: auto!important;
  max-width: 72%!important
}
.offer-countdown-overlay::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg,rgba(255,255,255,.16),transparent 35%,transparent 70%,rgba(0,0,0,.12));
  pointer-events: none
}
#offerCountdownToggle,
.cue-overlay-enable-row .cue-overlay-toggle {
  position: relative!important;
  z-index: 50!important;
  pointer-events: auto!important;
  touch-action: manipulation!important
}
.cue-reference-row {
  grid-auto-rows: clamp(6px,1vw,12px)!important;
  align-items: stretch!important
}
@media (max-width:720px) {
  .offer-countdown-overlay {
    padding: 7px 9px 8px!important
  }
  .cue-overlay-config {
    max-height: 1100px
  }
  .cue-swipe-controls {
    display: grid!important;
    grid-template-columns: 1fr!important;
    gap: 10px!important;
    width: 100%!important;
    box-sizing: border-box!important;
    padding: 12px!important
  }
  .cue-swipe-controls > div {
    width: 100%!important
  }
  .cue-swipe-controls input[type=range] {
    width: 100%!important;
    height: 42px!important;
    touch-action: none!important
  }
  .cue-swipe-controls b {
    font-size: 9px!important;
    margin-bottom: 6px!important
  }
  .cue-overlay-stage {
    width: 100%!important;
    max-width: none!important
  }
  .cue-reference-row {
    grid-auto-rows: clamp(7px,2.2vw,12px)!important;
    gap: 4%!important
  }
  .offer-countdown-overlay b {
    font-size: 9px!important
  }
  .offer-countdown-overlay span {
    font-size: 5px!important
  }
}
.cue-swipe-controls {
  display: grid!important;
  grid-template-columns: 1fr!important;
  gap: 10px!important;
  width: 100%!important;
  box-sizing: border-box!important
}
.cue-swipe-controls > div {
  grid-column: 1/-1!important;
  width: 100%!important;
  pointer-events: none!important
}
.offer-countdown-overlay {
  box-sizing: border-box!important;
  justify-items: center!important;
  white-space: nowrap!important
}
.modal-offer-media-wrap,
.offer-media-wrap,
.selected-offer-media {
  overflow: visible!important;
  position: relative!important
}
.countdown-admin-grid-v2 {
  grid-template-columns: repeat(5,minmax(0,1fr))!important;
  gap: 10px!important
}
.admin-order-notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 18px;
  padding: 0 7px;
  margin-left: 5px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ff3b55,#ff7a32);
  color: #fff;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .6px;
  box-shadow: none;
  animation: 1.35s ease-in-out infinite adminNoticePulse
}
.admin-order-notice.hidden {
  display: none!important
}
.order-completion-input,
.order-txn-input {
  border: 1px solid #274459!important;
  background: #07131f!important;
  color: #ecfaff!important;
  border-radius: 8px!important;
  padding: 7px!important;
  font-size: 9px!important
}
.order-completion-input {
  min-height: 48px;
  resize: vertical;
  display: block;
  width: 180px
}
.upload-mini {
  display: inline-flex!important;
  align-items: center;
  justify-content: center;
  cursor: pointer
}
.upload-mini input {
  display: none
}
@media (max-width:900px) {
  .countdown-admin-grid-v2 {
    grid-template-columns: repeat(2,minmax(0,1fr))!important
  }
  body.admin-premium .saved-grid,
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))!important
  }
}
@media (max-width:560px) {
  .countdown-admin-grid-v2 {
    grid-template-columns: 1fr 1fr!important
  }
  .countdown-admin-grid-v2 .field:last-child {
    grid-column: 1/-1
  }
}
#offerModal .vip-level-card {
  position: relative!important;
  isolation: isolate!important;
  overflow: hidden!important;
  border: 1px solid rgba(103,205,255,.34)!important;
  background: linear-gradient(145deg,rgba(26,54,76,.98),rgba(9,22,34,.98) 58%,rgba(6,13,21,.98))!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12)!important
}
#offerModal .vip-level-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 15% 0,rgba(255,255,255,.16),transparent 30%),linear-gradient(135deg,transparent 58%,rgba(45,196,255,.07));
  pointer-events: none;
  z-index: -1
}
#offerModal .vip-level-card::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -55%;
  width: 24%;
  height: 260%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),rgba(133,235,255,.1),transparent);
  pointer-events: none;
  z-index: 5
}
#offerModal .vip-level-head {
  position: relative;
  z-index: 3
}
#offerModal .benefit {
  position: relative;
  z-index: 3;
  border-top-color: rgba(130,220,255,.11)!important
}
#offerModal .benefit strong {
  color: #f7fdff!important;
  text-shadow: none
}
#offerModal .benefit small {
  color: #9fd9ef!important
}
#offerModal .vip-showcase {
  padding: 9px!important;
  border: 1px solid rgba(67,194,255,.2)!important;
  background: linear-gradient(145deg,rgba(6,18,29,.68),rgba(7,12,20,.52))!important;
  box-shadow: inset 0 1px rgba(255,255,255,.04)!important
}
.login-modal .premium-methods {
  position: relative!important;
  isolation: isolate!important;
  padding-top: 5px!important
}
.login-modal .premium-methods::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -6px;
  height: 74px;
  background: radial-gradient(ellipse at center,rgba(56,205,255,.24) 0,rgba(56,166,255,.1) 34%,transparent 72%);
  filter: none;
  opacity: .85;
  pointer-events: none;
  z-index: -1;
  display: none !important
}
.login-modal .premium-method {
  border-color: rgba(101,186,230,.26)!important;
  background: linear-gradient(145deg,rgba(13,34,51,.92),rgba(5,16,27,.96))!important;
  box-shadow: inset 0 1px rgba(255,255,255,.1)!important
}
.login-modal .premium-method::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg,transparent 0,rgba(255,255,255,.02) 35%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.02) 66%,transparent 100%);
  pointer-events: none;
  z-index: 1
}
.login-modal .premium-method .method-icon {
  position: relative;
  box-shadow: inset 0 1px rgba(255,255,255,.22)!important;
  z-index: 2
}
.login-modal .premium-method.active {
  box-shadow: inset 0 1px rgba(255,255,255,.14)!important
}
.login-modal .premium-methods + .premium-auth-panel-wrap {
  box-shadow: inset 0 1px rgba(255,255,255,.04)!important
}
#offerGrid .offer::before {
  top: -60%;
  width: 26%;
  transform: rotate(16deg);
  filter: none;
  mix-blend-mode: screen;
  display: none !important
}
#offerGrid .offer:nth-child(2n)::before {
  animation-delay: 1.7s
}
#offerGrid .offer:nth-child(3n)::before {
  animation-delay: 3.1s
}
#offerGrid .offer-media-wrap::after {
  position: absolute!important;
  top: -80%!important;
  left: -65%!important;
  width: 24%!important;
  height: 260%!important;
  z-index: 25!important;
  pointer-events: none!important;
  transform: rotate(18deg)!important;
  background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.06) 22%,rgba(255,255,255,.7) 44%,rgba(255,241,187,.98) 50%,rgba(255,255,255,.28) 58%,transparent 78%)!important;
  filter: none!important;
  mix-blend-mode: screen!important;
  content: none!important;
  display: none !important
}
#offerGrid .offer:nth-child(2n) .offer-media-wrap::after {
  animation-delay: 1.1s!important
}
#offerGrid .offer:nth-child(3n) .offer-media-wrap::after {
  animation-delay: 2.2s!important
}
@media (max-width:600px) {
  #offerGrid .offer-media-wrap {
    border-radius: 8px!important
  }
  #offerGrid .offer-media-wrap::after {
    width: 30%!important;
    top: -85%!important;
    height: 270%!important;
    animation-duration: 3.3s!important
  }
}
body.admin-premium #offers .offer-basics-compact > .admin-access-field {
  grid-column: 2!important;
  grid-row: 2!important;
  align-self: end!important
}
body.admin-premium #offers .offer-basics-compact > .admin-description-field {
  grid-column: 1/-1!important;
  grid-row: 4!important
}
.cue-swipe-controls input[type=range] {
  accent-color: #35e88a;
  cursor: pointer!important;
  pointer-events: auto!important;
  width: 100%!important;
  height: 8px!important;
  min-height: 8px!important;
  max-height: 8px!important;
  padding: 0!important;
  margin: 0!important;
  display: block!important;
  box-sizing: border-box!important;
  touch-action: none!important
}
.cue-overlay-preview .cue-overlay-graphic,
.cue-overlay-preview .cue-overlay-pure {
  width: 100%!important;
  height: auto!important;
  box-sizing: border-box!important
}
.cue-overlay-stage,
.modal-offer-media-wrap,
.offer-media-wrap,
.selected-offer-media {
  position: relative!important;
  aspect-ratio: 16/9!important;
  width: 100%!important
}
.cue-overlay-stage > img,
.modal-offer-media-wrap .modal-offer-image,
.offer-media-wrap .offer-media,
.selected-offer-media > img {
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
  display: block!important
}
.cue-overlay-preview {
  transform-origin: center center!important;
  width: 18%!important;
  max-width: none!important;
  height: auto!important;
  padding: 0!important;
  margin: 0!important;
  pointer-events: auto!important;
  z-index: 30!important;
  background: 0 0!important;
  border: 0!important;
  box-shadow: none!important;
  filter: none!important;
  transform-origin: center center!important
}
.cue-overlay-graphic,
.cue-overlay-pure {
  display: block!important;
  width: 100%!important;
  height: auto!important;
  padding: 0!important;
  margin: 0!important;
  background: 0 0!important;
  border: 0!important;
  box-shadow: none!important;
  filter: none!important;
  backdrop-filter: none!important
}
.cue-reference-row {
  display: grid!important;
  grid-template-columns: repeat(10,minmax(0,1fr))!important;
  gap: 3px!important;
  margin: 2px 0!important;
  padding: 0!important
}
.cue-reference-cell {
  display: block!important;
  width: 100%!important;
  height: 6px!important;
  min-height: 6px!important;
  aspect-ratio: auto!important;
  border: 0!important;
  border-radius: 2px!important;
  background: #263238!important;
  box-shadow: none!important
}
@media (max-width:600px) {
  .cue-overlay-stage,
  .modal-offer-media-wrap,
  .offer-media-wrap,
  .selected-offer-media {
    aspect-ratio: 16/9!important
  }
  .cue-reference-row {
    gap: 2px!important;
    margin: 2px 0!important
  }
  .cue-reference-cell {
    height: 5px!important;
    min-height: 5px!important;
    border-radius: 1.5px!important
  }
}
.cue-level-admin-card,
.cue-overlay-editor,
.cue-overlay-preview {
  display: none!important
}
body.admin-premium .cue-level-admin-card {
  display: block!important
}
body.admin-premium .cue-level-admin-card.hidden {
  display: none!important
}
.order-filter-btn {
  min-height: 42px;
  border-radius: 13px;
  border: 1px solid #29445a;
  background: linear-gradient(145deg,#0a1722,#07111a);
  color: #9bb1c2;
  font-weight: 1000;
  font-size: 11px;
  cursor: pointer;
  box-shadow: none
}
.order-filter-btn.active[data-order-filter=pending] {
  color: #fff;
  background: linear-gradient(135deg,#0d8cff,#2468f3);
  border-color: #43c4ff;
  box-shadow: none
}
.order-filter-btn.active[data-order-filter=completed] {
  color: #fff;
  background: linear-gradient(135deg,#0aa96b,#20dc8f);
  border-color: #59ffc0;
  box-shadow: none
}
#orders .order-completion-input,
#orders .order-txn-input {
  font-size: 9px!important;
  padding: 6px!important;
  min-height: 31px!important
}
#orders .mini-btn,
#orders .upload-mini {
  min-height: 31px!important;
  padding: 0 6px!important;
  font-size: 8px!important
}
#heroHighlights .selected-offer-media {
  display: block!important
}
@media (max-width:700px) {
  body.admin-premium #offers .offer-basics-compact > .admin-name-field {
    grid-column: 1!important;
    grid-row: auto!important
  }
  body.admin-premium #offers .offer-basics-compact > .admin-access-field {
    grid-column: 2!important;
    grid-row: auto!important
  }
  body.admin-premium #offers .offer-basics-compact > .admin-description-field,
  body.admin-premium #offers .offer-basics-compact > .admin-old-price-field,
  body.admin-premium #offers .offer-basics-compact > .admin-price-field {
    grid-row: auto!important
  }
  body.admin-premium .saved-grid,
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 9px!important
  }
  body.admin-premium .saved-price b,
  body.admin-saved .saved-price b {
    font-size: 16px!important
  }
  .order-filter-btn {
    min-height: 38px;
    font-size: 10px
  }
  #heroHighlights .selected-offer-body {
    min-height: 38px!important;
    padding: 8px!important
  }
}
body.admin-premium .saved-grid,
body.admin-saved .saved-grid {
  grid-template-columns: repeat(4,minmax(0,1fr))!important;
  gap: 14px!important;
  align-items: start!important
}
body.admin-premium .saved-meta,
body.admin-saved .saved-meta {
  font-size: 9px!important;
  line-height: 1.35!important;
  color: #8199aa!important;
  margin-bottom: 8px!important
}
body.admin-premium .saved-tags,
body.admin-saved .saved-tags {
  display: flex!important;
  flex-wrap: wrap!important;
  gap: 4px!important;
  max-height: none!important;
  margin-bottom: 8px!important
}
body.admin-premium .saved-tag,
body.admin-saved .saved-tag {
  font-size: 8px!important;
  padding: 4px 6px!important;
  border-radius: 7px!important;
  color: #9fe6ff!important;
  background: rgba(21,64,91,.5)!important;
  border: 1px solid rgba(70,180,230,.22)!important
}
body.admin-premium .saved-price,
body.admin-saved .saved-price {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  margin: 8px 0 10px!important
}
body.admin-premium .saved-price b,
body.admin-saved .saved-price b {
  font-size: 20px!important;
  line-height: 1!important;
  color: #66ffb3!important
}
body.admin-premium .saved-actions-row .btn,
body.admin-saved .saved-actions-row .btn {
  min-height: 40px!important;
  height: 40px!important;
  border-radius: 10px!important;
  font-size: 10px!important;
  font-weight: 1000!important
}
body.admin-premium .saved-actions-row .btn.primary,
body.admin-saved .saved-actions-row .btn.primary {
  background: linear-gradient(135deg,#159eff,#6349ff)!important;
  border-color: rgba(91,204,255,.42)!important;
  box-shadow: none!important
}
body.admin-premium .saved-actions-row .btn.danger,
body.admin-saved .saved-actions-row .btn.danger {
  background: linear-gradient(135deg,#3a1720,#671d2b)!important;
  border-color: rgba(255,98,119,.34)!important;
  color: #ffb0bb!important
}
#heroHighlights .selected-offer-media img {
  width: 100%!important;
  height: 100%!important;
  display: block!important;
  object-fit: cover!important
}
#heroHighlights .selected-offer-body {
  background: linear-gradient(180deg,rgba(4,13,21,.16),rgba(2,8,13,.84))!important
}
#heroHighlights .selected-offer-meta {
  display: flex!important;
  align-items: center!important;
  justify-content: space-between!important;
  gap: 8px!important
}
#heroHighlights .selected-price-meta {
  white-space: nowrap!important;
  text-shadow: none!important;
  color: #ffe38a!important;
  font-weight: 1000!important
}
#orders .order-completion-input,
#orders .order-txn-input {
  border-radius: 8px!important;
  background: #071522!important;
  border: 1px solid rgba(91,178,225,.22)!important;
  color: #eef8ff!important
}
#orders .order-completion-input {
  grid-column: 1/-1!important;
  min-height: 36px!important
}
@media (min-width:601px) {
  #offerGrid .offer {
    content-visibility: auto;
    contain-intrinsic-size: 320px 360px
  }
}
@media (max-width:600px) {
  #offerGrid .offer {
    content-visibility: auto;
    contain-intrinsic-size: 210px 330px
  }
}
@media (max-width:700px) {
  body.admin-premium .saved-grid,
  body.admin-saved .saved-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 9px!important
  }
  body.admin-premium .saved-meta,
  body.admin-saved .saved-meta {
    font-size: 8px!important
  }
  body.admin-premium .saved-price b,
  body.admin-saved .saved-price b {
    font-size: 17px!important
  }
  body.admin-premium .saved-actions-row .btn,
  body.admin-saved .saved-actions-row .btn {
    height: 38px!important;
    min-height: 38px!important;
    font-size: 9px!important
  }
  #heroHighlights .selected-cash-meta b {
    font-size: 11px!important
  }
  #heroHighlights .selected-price-meta {
    font-size: 12px!important
  }
  #orders .mini-btn,
  #orders .order-txn-input,
  #orders .upload-mini {
    height: 29px!important;
    min-height: 29px!important;
    font-size: 8px!important;
    padding: 0 5px!important
  }
  #orders .order-completion-input {
    grid-column: 1/-1!important;
    min-height: 34px!important;
    height: 34px!important;
    padding: 6px!important
  }
  #orders .status-pill {
    font-size: 8px!important;
    align-self: flex-start!important;
    padding: 5px 8px!important;
    border-radius: 999px!important
  }
  #orders .order-filter-btn {
    min-height: 40px!important;
    font-size: 10px!important;
    border-radius: 10px!important
  }
  #heroHighlights .selected-offer-body {
    min-height: 28px!important;
    height: 28px!important;
    max-height: 28px!important;
    padding: 3px 7px!important
  }
  #heroHighlights .selected-offer-meta {
    min-height: 20px!important;
    height: 20px!important;
    line-height: 20px!important
  }
}
#offerGrid .offer {
  isolation: isolate!important;
  content-visibility: visible!important;
  contain-intrinsic-size: auto!important;
  display: block!important;
  margin: 0!important;
  position: relative!important
}
#heroHighlights {
  align-items: start!important;
  grid-auto-rows: max-content!important
}
#heroHighlights .selected-cash-meta b,
#heroHighlights .selected-price-meta {
  line-height: 18px!important;
  margin: 0!important
}
@media (max-width:600px) {
  #heroHighlights .selected-offer-meta {
    min-height: 18px!important;
    line-height: 18px!important
  }
  #heroHighlights .selected-cash-meta b,
  #heroHighlights .selected-price-meta {
    line-height: 18px!important
  }
  #heroHighlights .selected-offer-body {
    padding: 4px 7px!important
  }
  #offerGrid.offers .offer {
    height: auto!important;
    min-height: 0!important
  }
}
#heroHighlights,
#heroHighlights.selected-offers {
  align-items: start!important;
  grid-auto-rows: max-content!important
}
#heroHighlights .selected-offer-wrap {
  align-self: start!important;
  height: auto!important;
  min-height: 0!important
}
#heroHighlights .selected-offer-card {
  align-self: start!important;
  height: auto!important;
  min-height: 0!important;
  max-height: none!important;
  display: block!important
}
#heroHighlights .selected-offer-card,
#heroHighlights .selected-offer-wrap,
#offerGrid .offer {
  box-sizing: border-box!important
}
#heroHighlights .selected-offer-media {
  position: relative!important;
  width: 100%!important;
  height: auto!important;
  min-height: 0!important;
  aspect-ratio: 16/9!important;
  overflow: hidden!important
}
#heroHighlights .selected-offer-media > img {
  display: block!important;
  width: 100%!important;
  height: 100%!important;
  min-height: 0!important;
  max-height: none!important;
  object-fit: cover!important;
  margin: 0!important;
  padding: 0!important
}
#heroHighlights .selected-offer-body {
  display: block!important;
  width: 100%!important;
  max-height: none!important;
  margin: 0!important;
  box-sizing: border-box!important;
  overflow: hidden!important
}
#heroHighlights .selected-offer-meta {
  height: auto!important;
  min-height: 0!important;
  margin: 0!important;
  padding: 0!important;
  line-height: 1.15!important
}
#heroHighlights .selected-cash-meta,
#heroHighlights .selected-price-meta {
  margin: 0!important;
  padding: 0!important;
  line-height: 1.15!important
}
#offerGrid.offers .offer .offer-media,
#offerGrid.offers .offer > img {
  display: block!important;
  margin-bottom: 5px!important
}
#offerGrid.offers .offer small {
  min-height: 0!important;
  margin: 0!important
}
@media (max-width:600px) {
  #heroHighlights .selected-offer-body {
    padding: 6px 8px!important
  }
  #heroHighlights .selected-cash-meta,
  #heroHighlights .selected-offer-meta,
  #heroHighlights .selected-price-meta {
    line-height: 1.1!important
  }
  #offerGrid.offers .offer {
    padding: 9px!important
  }
  #offerGrid.offers .offer .offer-media,
  #offerGrid.offers .offer > img {
    margin-bottom: 4px!important
  }
  #offerGrid.offers .offer h3 {
    margin: 4px 0 2px!important
  }
  #offerGrid.offers .offer .price {
    margin: 5px 0!important
  }
}
#offerGrid .offer-media-wrap::after,
#offerGrid .offer::after {
  content: none!important
}
#heroHighlights .selected-offer-card::after,
#heroHighlights .selected-offer-card::before {
  content: none!important;
  display: none!important;
  animation: none!important;
  opacity: 0!important
}
#heroHighlights .selected-offer-card::after,
#heroHighlights .selected-offer-card::before,
#heroHighlights .selected-offer-media::after,
#heroHighlights .selected-offer-media::before,
#offerGrid .offer-media-wrap::after,
#offerGrid .offer-media-wrap::before,
#offerGrid .offer::after,
#offerGrid .offer::before {
  animation: none!important;
  content: none!important;
  display: none!important;
  opacity: 0!important;
  visibility: hidden!important
}
.selected-offer-body {
  padding: 8px 12px!important
}
.selected-offer-meta {
  padding: 6px 0!important
}
#offerGrid.offers {
  align-items: start!important;
  grid-auto-rows: max-content!important
}
#offerGrid.offers .offer {
  display: block!important;
  height: auto!important;
  min-height: 0!important;
  max-height: none!important;
  align-self: start!important;
  padding: 7px!important;
  margin: 0!important;
  box-sizing: border-box!important
}
#offerGrid.offers .offer .offer-media-wrap {
  margin: 0 0 5px!important;
  padding: 0!important
}
#offerGrid.offers .offer .offer-media-wrap .offer-media,
#offerGrid.offers .offer .offer-media-wrap > img {
  display: block!important;
  margin: 0!important
}
#offerGrid.offers .offer h3 {
  display: block!important;
  margin: 3px 0 2px!important;
  padding: 0!important;
  min-height: 0!important;
  line-height: 1.1!important;
  font-size: 14px!important;
  font-weight: 1000!important;
  white-space: nowrap!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  background: linear-gradient(180deg,#f7fbff 0,#cfe5f5 55%,#8fa9bc 100%)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  color: transparent!important;
  text-shadow: none!important
}
#offerGrid.offers .offer .price {
  white-space: nowrap!important;
  display: block!important;
  margin: 2px 0 0!important;
  padding: 0!important;
  line-height: 1.05!important;
  font-size: 20px!important;
  font-weight: 1000!important;
  letter-spacing: .2px!important;
  background: linear-gradient(180deg,#fffdf2 0,#ffd66a 48%,#f0a91e 100%)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  color: transparent!important;
  text-shadow: none!important
}
#offerGrid.offers .offer .old {
  color: #6f8190!important;
  text-shadow: none!important;
  -webkit-text-fill-color: #6f8190!important;
  background: 0 0!important
}
#offerGrid .offer-media-wrap {
  position: relative!important;
  isolation: isolate!important;
  border-radius: 11px!important;
  width: 100%!important;
  height: auto!important;
  aspect-ratio: 16/9!important;
  min-height: 0!important;
  max-height: none!important;
  margin: 0 0 5px!important;
  padding: 0!important;
  overflow: hidden!important
}
#offerGrid .offer-media-wrap > .offer-media {
  display: block!important;
  width: 100%!important;
  height: 100%!important;
  aspect-ratio: auto!important;
  min-height: 0!important;
  max-height: none!important;
  margin: 0!important;
  object-fit: cover!important
}
#offerGrid .offer .price {
  width: 100%!important;
  box-sizing: border-box!important;
  height: auto!important;
  min-height: 0!important;
  padding: 0!important;
  white-space: nowrap!important;
  -webkit-text-fill-color: #ffd45e!important
}
#offerGrid .offer .price .old {
  color: #7e909f!important;
  -webkit-text-fill-color: #7e909f!important;
  text-shadow: none!important
}
@media (max-width:600px) {
  #offerGrid.offers .offer {
    padding: 0!important
  }
  #offerGrid.offers .offer .offer-media-wrap {
    margin-bottom: 0!important
  }
  #offerGrid.offers .offer h3 {
    font-size: 9.5px!important;
    margin: 1px 0!important
  }
  #offerGrid.offers .offer .price {
    font-size: 11px!important;
    margin: 1px 0 3px!important
  }
  #offerGrid .offer {
    padding: 0!important;
    border-radius: 14px!important
  }
  #offerGrid .offer-media-wrap {
    margin-bottom: 0!important;
    border-radius: 0!important
  }
  #offerGrid .offer h3 {
    line-height: 1.2!important
  }
  #offerGrid .offer .price {
    line-height: 1.2!important;
    font-size: 17px!important;
    margin: 1px 2px!important
  }
  #offerModal {
    padding: 10px!important;
    align-items: center!important;
    justify-content: center!important
  }
  #offerModal .offer-modal-box {
    width: min(88vw,420px)!important;
    max-width: 88vw!important;
    max-height: 78vh!important;
    padding: 10px!important;
    border-radius: 16px!important;
    overflow-y: auto!important;
    overflow-x: hidden!important
  }
  #offerModal .modal-offer-media-wrap {
    position: relative!important;
    width: 100%!important;
    height: auto!important;
    min-height: 0!important;
    max-height: none!important;
    aspect-ratio: auto!important;
    overflow: hidden!important;
    margin: 0 0 6px!important;
    padding: 0!important
  }
  #offerModal .modal-badges {
    margin: 0 0 5px!important
  }
  #offerModal .offer-modal-box h2 {
    font-size: 20px!important;
    line-height: 1.1!important;
    margin: 4px 0!important
  }
  #offerModal .modal-price {
    font-size: 21px!important;
    line-height: 1!important;
    margin: 6px 0!important
  }
  #offerModal .offer-detail-strip {
    margin: 6px 0!important
  }
  #offerModal .modal-access,
  #offerModal .offer-trust-mini {
    margin: 6px 0!important;
    padding: 7px 8px!important
  }
  #offerModal .offer-action-row {
    margin-top: 7px!important;
    gap: 5px!important
  }
  #offerGrid .offer h3 {
    font-size: 12px!important;
    margin: 2px 2px 1px!important
  }
  #heroHighlights .selected-cash-meta b {
    font-size: 11px!important
  }
  #heroHighlights .selected-price-meta {
    font-size: 14px!important
  }
}
#offerGrid .offer::before {
  background-size: auto,auto,auto,76px 42px
}
#heroHighlights .selected-offer-card {
  isolation: isolate!important;
  position: relative!important;
  overflow: hidden!important
}
#heroHighlights .selected-offer-card::before {
  content: none!important;
  display: none!important;
  opacity: 0!important;
  background: none!important
}
#heroHighlights .selected-offer-body,
#heroHighlights .selected-offer-body * {
  position: relative!important;
  z-index: 1!important
}
#offerGrid .offer .offer-media,
#offerGrid .offer > img {
  margin-bottom: 4px!important
}
#heroHighlights .selected-offer-body {
  padding: 3px 7px!important;
  min-height: 0!important;
  height: auto!important
}
#heroHighlights .selected-cash-meta b {
  color: #eaf8ff!important;
  font-weight: 1000!important;
  font-size: 11px!important;
  line-height: 1!important
}
#heroHighlights .selected-price-meta {
  font-size: 14px!important;
  line-height: 1!important
}
@media (max-width:600px) {
  #offerGrid .offer {
    padding: 7px!important
  }
  #offerGrid .offer h3 {
    font-size: 11px!important;
    margin: 3px 2px 1px!important
  }
  #offerGrid .offer .price {
    font-size: 15px!important;
    margin: 1px 2px!important
  }
  #offerGrid .offer::before {
    height: 42px!important;
    opacity: .28!important
  }
}
#offerGrid .offer::before {
  content: ""!important;
  position: absolute!important;
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
  pointer-events: none!important;
  z-index: 0!important;
  background: radial-gradient(circle at 8% 66%,rgba(70,220,255,.3) 0 1px,transparent 2px),radial-gradient(circle at 22% 34%,rgba(255,219,92,.24) 0 1px,transparent 2px),radial-gradient(circle at 40% 78%,rgba(80,248,169,.2) 0 1px,transparent 2px),radial-gradient(circle at 61% 42%,rgba(180,110,255,.2) 0 1px,transparent 2px),radial-gradient(circle at 86% 70%,rgba(64,207,255,.2) 0 1px,transparent 2px),repeating-linear-gradient(122deg,transparent 0 18px,rgba(76,200,255,.1) 19px 20px,transparent 21px 38px),linear-gradient(90deg,rgba(23,85,126,.12),rgba(97,46,128,.14))!important;
  height: 44px!important;
  opacity: .34!important
}
#offerGrid .offer > * {
  position: relative!important;
  z-index: 1!important
}
@media (max-width:600px) {
  #offerGrid .offer h3 {
    font-size: 11px!important;
    margin: 3px 2px 1px!important
  }
  #offerGrid .offer .price {
    font-size: 15px!important;
    margin: 1px 2px!important
  }
  #offerGrid .offer::before {
    height: 40px!important;
    opacity: .3!important
  }
}
.cue-sl-v5 {
  margin: 8px 0!important;
  padding: 7px 10px!important;
  border-radius: 12px!important
}
.offer-media {
  margin-bottom: 4px!important
}
.offer h3 {
  margin: 4px 0 2px!important
}
.offer small {
  min-height: 0!important;
  margin-bottom: 0!important;
  display: -webkit-box!important;
  -webkit-line-clamp: 1!important;
  -webkit-box-orient: vertical!important;
  overflow: hidden!important
}
.price {
  margin: 4px 0 5px!important;
  letter-spacing: -.3px!important
}
.old {
  font-size: 10px!important
}
.offer {
  padding: 8px 8px 9px!important
}
.offer-media-wrap {
  position: relative!important;
  overflow: hidden!important
}
.offer-media-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 55%,rgba(8,17,26,.72) 100%)
}
.offer-countdown-overlay::after {
  content: none!important
}
.offer-countdown-overlay span {
  font-size: 6px!important;
  letter-spacing: 1.2px!important;
  color: #4db8e8!important;
  font-weight: 900!important;
  text-transform: uppercase!important
}
#offerGrid .offer-media {
  height: 95px!important;
  margin-bottom: 3px!important;
  border-radius: 9px!important
}
#offerGrid .old {
  font-size: 9px!important;
  -webkit-text-fill-color: #5a7080!important
}
#offerGrid .offer-topline {
  min-height: 0!important;
  margin-bottom: 0!important
}
#offerGrid .offer h3 {
  display: block!important;
  width: 100%!important;
  box-sizing: border-box!important;
  min-height: 0!important;
  height: auto!important;
  padding: 0!important;
  letter-spacing: -.01em!important;
  text-shadow: none!important;
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: #d4eeff!important;
  background: 0 0!important;
  filter: none!important;
  margin: 1px 0 0!important;
  font-size: 9px!important;
  line-height: 1.15!important;
  font-weight: 700!important;
  color: #b0d0ec!important;
  white-space: nowrap!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  position: relative!important;
  z-index: 1!important
}
#offerGrid .price {
  -webkit-background-clip: text!important;
  font-size: 13px!important;
  margin: 2px 0 4px!important;
  font-weight: 900!important;
  letter-spacing: -.2px!important;
  color: #fff!important;
  -webkit-text-fill-color: #ffffff!important;
  background: 0 0!important;
  filter: none!important
}
#offerModal .cue-sl-v5 {
  background: linear-gradient(145deg,#06111e 0,#091a2c 60%,#04090f 100%)!important;
  border: 1px solid rgba(40,160,255,.3)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.08)!important
}
@keyframes starTwinkle {
  0,
  100% {
    opacity: .25;
    transform: scale(.7) rotate(0)
  }
  50% {
    opacity: 1;
    transform: scale(1.25) rotate(15deg)
  }
}
.offer-countdown-overlay::after,
.offer-countdown-overlay::before {
  display: none!important;
  animation: none!important;
  content: none!important
}
.offer-countdown-overlay {
  backdrop-filter: none!important;
  position: absolute!important;
  top: 6px!important;
  left: 6px!important;
  z-index: 10!important;
  display: flex!important;
  flex-direction: column!important;
  align-items: center!important;
  justify-content: center!important;
  gap: 0!important;
  padding: 4px 8px 5px!important;
  border-radius: 8px!important;
  animation: 3s ease-in-out infinite alternate cdPulseGlow!important;
  background: linear-gradient(145deg,#0a1628 0,#0d2a48 50%,#071020 100%)!important;
  border: 1.2px solid rgba(80,200,255,.55)!important;
  min-width: 44px!important;
  text-align: center!important;
  transform: none!important;
  overflow: visible!important
}
.offer-countdown-overlay b {
  font-variant-numeric: tabular-nums!important;
  display: block!important;
  font-size: 12px!important;
  font-weight: 900!important;
  color: #fff!important;
  letter-spacing: .3px!important;
  line-height: 1!important;
  font-family: "Segoe UI",system-ui,sans-serif!important;
  text-shadow: none!important;
  white-space: nowrap!important;
  margin: 0!important;
  padding: 0!important
}
@media (max-width:720px) {
  .offer-countdown-overlay {
    top: 5px!important;
    left: 5px!important;
    padding: 3px 7px 4px!important;
    border-radius: 7px!important;
    min-width: 40px!important
  }
  .offer-countdown-overlay b {
    font-size: 11px!important
  }
  body.admin-premium #offers .offer-basics-compact > .admin-access-field .access-toggle {
    height: 39px!important;
    min-height: 39px!important;
    font-size: 10px!important
  }
}
#offerModal .qty-nav svg {
  width: 18px!important;
  height: 18px!important;
  stroke: #7ee8ff!important;
  filter: none!important;
  display: block!important
}
#offerModal .qty-nav:hover svg {
  stroke: #ffffff!important;
  filter: none!important
}
#heroHighlights.selected-offers {
  display: grid!important;
  width: 100%!important;
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  gap: 14px!important;
  align-items: start!important;
  justify-content: start!important;
  grid-auto-rows: max-content!important;
  box-sizing: border-box!important
}
#heroHighlights.selected-offers .selected-offer-wrap {
  display: flex!important;
  flex-direction: column!important;
  width: 100%!important;
  min-width: 0!important;
  height: auto!important;
  min-height: 0!important;
  align-self: start!important
}
#heroHighlights.selected-offers .selected-offer-card {
  display: block!important;
  width: 100%!important;
  height: auto!important;
  min-height: 0!important;
  max-height: none!important;
  box-sizing: border-box!important
}
#heroHighlights.selected-offers .selected-offer-media {
  width: 100%!important;
  aspect-ratio: 16/9!important;
  height: auto!important;
  min-height: 0!important;
  overflow: hidden!important
}
#heroHighlights.selected-offers .selected-offer-media img {
  display: block!important;
  width: 100%!important;
  height: 100%!important;
  min-height: 0!important;
  object-fit: cover!important
}
#offerGrid {
  align-items: start!important;
  grid-auto-rows: max-content!important;
  contain: layout
}
@media (min-width:1200px) {
  #heroHighlights.selected-offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 14px!important
  }
  #offerGrid {
    grid-template-columns: repeat(5,minmax(0,1fr))!important;
    gap: 10px!important
  }
}
@media (min-width:951px) and (max-width:1199px) {
  #heroHighlights.selected-offers {
    grid-template-columns: repeat(3,minmax(0,1fr))!important;
    gap: 12px!important
  }
  #offerGrid {
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 10px!important
  }
}
@media (max-width:950px) {
  #heroHighlights.selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 8px!important
  }
}
.login-modal {
  background: radial-gradient(ellipse at 30% 20%,rgba(14,120,255,.13),transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(80,20,255,.1),transparent 50%),rgba(1,4,10,.88)!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important
}
.premium-auth-card {
  isolation: isolate;
  position: relative!important;
  overflow: hidden!important;
  border: 1px solid rgba(80,200,255,.32)!important;
  background: radial-gradient(circle at 85% 5%,rgba(30,165,255,.18),transparent 32%),radial-gradient(circle at 8% 90%,rgba(60,50,255,.14),transparent 35%),linear-gradient(155deg,#071626 0,#06101c 55%,#020b14 100%)!important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset!important;
  color: #eaf6ff!important
}
.premium-auth-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  z-index: 1
}
.premium-auth-logo {
  filter: none!important;
  flex: 0 0 auto
}
.premium-brand-name {
  font-weight: 1000!important;
  background: linear-gradient(90deg,#fff 0,#a8efff 50%,#3ab2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent!important
}
.premium-brand-sub {
  font-size: 7px!important;
  letter-spacing: 2.5px!important;
  color: #4a6478!important;
  margin-top: 3px!important
}
.premium-auth-title {
  text-align: center;
  position: relative;
  z-index: 1
}
.premium-auth-kicker {
  letter-spacing: 3px!important;
  color: #3dc8ff!important;
  font-weight: 1000!important
}
.premium-auth-title h2 {
  margin: 0!important;
  font-weight: 1000!important;
  letter-spacing: -.5px!important;
  color: #f2faff!important;
  text-shadow: none!important
}
.premium-auth-title p {
  color: #7d96ab!important
}
.premium-methods {
  position: relative;
  display: grid;
  z-index: 1
}
.premium-method {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr 22px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(80,140,175,.2)!important;
  border-radius: 14px!important;
  background: linear-gradient(120deg,rgba(8,24,38,.88),rgba(3,12,22,.8))!important;
  color: #d8eaf7!important;
  cursor: pointer;
  transition: .2s;
  box-shadow: inset 0 1px rgba(255,255,255,.03)
}
.premium-method:hover {
  transform: translateY(-1px)!important;
  border-color: rgba(50,200,255,.5)!important;
  box-shadow: none!important
}
.premium-method.active {
  border-color: rgba(45,205,255,.75)!important;
  background: linear-gradient(110deg,rgba(14,80,125,.52),rgba(6,22,38,.96))!important;
  box-shadow: 0 0 0 1px rgba(45,205,255,.12) inset!important
}
.premium-method.active:after {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg,#20d4ff,#2870ff);
  box-shadow: none
}
.method-icon {
  display: grid;
  place-items: center;
  font-weight: 1000!important;
  box-shadow: inset 0 1px rgba(255,255,255,.15)!important
}
.premium-method b {
  color: #ecf8ff!important
}
.premium-method small {
  color: #6a8294!important
}
.premium-method i {
  font-style: normal;
  font-size: 17px;
  color: #4a6678;
  text-align: center
}
.premium-method.active i {
  color: #4fd2ff
}
.premium-auth-panel-wrap {
  position: relative;
  border: 1px solid rgba(70,150,195,.18)!important;
  background: radial-gradient(circle at 50% 0,rgba(28,150,220,.06),transparent 50%),rgba(2,9,18,.65)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.03)!important;
  z-index: 1
}
.premium-login-panel h3 {
  letter-spacing: -.2px!important;
  text-align: center;
  margin: 0 0 3px!important;
  color: #eef9ff!important
}
.premium-login-panel p {
  color: #7890a2!important;
  text-align: center;
  line-height: 1.5
}
.panel-symbol {
  border-radius: 11px!important;
  display: grid;
  place-items: center;
  font-weight: 1000!important;
  box-shadow: inset 0 1px rgba(255,255,255,.14)!important
}
.google-symbol {
  background: #fff!important;
  color: #4285f4!important
}
.email-symbol {
  background: linear-gradient(145deg,#0e3450,#081f32)!important;
  color: #54caff!important
}
.phone-symbol {
  background: linear-gradient(145deg,#0e3e36,#082420)!important;
  color: #5eddb8!important
}
.create-symbol {
  background: linear-gradient(145deg,#1a3d60,#0d2038)!important;
  color: #60d4ff!important
}
.premium-main-btn {
  width: 100%;
  border: 0;
  background: linear-gradient(115deg,#10c4f8 0,#2270ff 55%,#5a55ff 100%)!important;
  color: #fff!important;
  font-weight: 950!important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: inset 0 1px rgba(255,255,255,.18)!important;
  transition: .18s!important
}
.premium-main-btn:hover {
  transform: translateY(-2px)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.22)!important;
  filter: brightness(1.06)!important
}
.premium-main-btn:active {
  transform: translateY(0)!important
}
.premium-main-btn b {
  font-size: 15px;
  margin-left: auto;
  margin-right: 12px
}
.google-main-btn {
  background: linear-gradient(115deg,#14a4f6,#2462f5 60%,#4450ff)!important
}
.create-account-main-btn {
  background: linear-gradient(115deg,#0ecba6,#1490f0 60%,#5060ff)!important
}
.google-btn-mark {
  width: 22px!important;
  height: 22px!important;
  border-radius: 7px!important;
  background: #fff!important;
  color: #4285f4!important;
  display: grid;
  place-items: center;
  font-size: 11px!important;
  font-weight: 1000!important
}
.premium-field label {
  display: block;
  color: #7d96ab!important;
  font-weight: 1000!important;
  letter-spacing: 1px!important
}
.premium-input-wrap {
  border: 1px solid rgba(80,145,185,.22)!important;
  background: linear-gradient(145deg,rgba(5,16,26,.95),rgba(2,8,16,.88))!important;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  box-sizing: border-box;
  transition: .18s
}
.premium-input-wrap:focus-within {
  border-color: rgba(48,200,255,.68)!important;
  box-shadow: 0 0 0 3px rgba(40,180,255,.09)!important
}
.premium-input-wrap > span {
  color: #4e6d80!important;
  font-size: 13px;
  width: 16px;
  text-align: center
}
.premium-input-wrap input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0!important;
  outline: 0!important;
  background: 0 0!important;
  box-shadow: none!important;
  color: #eef9ff!important;
  padding: 0!important
}
.premium-input-wrap input::placeholder {
  color: #4e6475!important
}
.password-eye {
  border: 0;
  background: 0 0;
  color: #506070;
  cursor: pointer;
  font-size: 11px
}
.password-eye:hover {
  color: #6dd8ff
}
.email-mode-switch {
  display: flex;
  border: 1px solid rgba(70,130,170,.22)!important;
  border-radius: 12px!important;
  overflow: hidden;
  background: rgba(2,9,18,.82)!important
}
.email-mode-btn {
  flex: 1;
  border: 0;
  background: 0 0;
  color: #7590a5;
  font-weight: 1000!important;
  letter-spacing: .6px;
  cursor: pointer;
  transition: .18s
}
.email-mode-btn.active {
  background: linear-gradient(115deg,#0f76c0,#1459e8)!important;
  color: #fff!important;
  box-shadow: none!important
}
.premium-security-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(50,200,155,.18)!important;
  background: linear-gradient(110deg,rgba(16,120,90,.07),rgba(18,90,130,.04))!important;
  color: #6d9488!important;
  position: relative;
  z-index: 1
}
.premium-security-bar b {
  color: #7ee8c8!important;
  font-size: 9px!important
}
.premium-security-bar small {
  color: #5a7d72!important;
  font-size: 8px!important
}
.premium-security-bar em {
  margin-left: auto;
  font-style: normal;
  font-size: 7.5px!important;
  font-weight: 1000!important;
  letter-spacing: 1px!important;
  color: #3dbf98!important;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(50,200,150,.1);
  border: 1px solid rgba(50,200,150,.18);
  white-space: nowrap
}
.premium-forgot,
.premium-link-btn {
  display: block;
  border: 0;
  background: 0 0;
  color: #40bfff!important;
  font-weight: 800!important;
  cursor: pointer
}
.premium-forgot:hover,
.premium-link-btn:hover {
  text-decoration: underline
}
.premium-otp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 4px
}
.premium-verify-btn {
  width: 100%;
  border: 1px solid rgba(60,185,240,.32)!important;
  background: linear-gradient(120deg,rgba(12,60,90,.72),rgba(8,28,46,.88))!important;
  color: #a8e0ff!important;
  font-weight: 900!important;
  cursor: pointer;
  transition: .18s
}
.premium-verify-btn:hover {
  border-color: rgba(60,210,255,.6)!important;
  box-shadow: none!important
}
.premium-form-note {
  text-align: center;
  margin-top: 8px;
  color: #5e7888;
  font-size: 9px
}
.premium-form-note button {
  background: 0 0;
  border: 0;
  color: #40bfff;
  font-weight: 800;
  font-size: 9px;
  cursor: pointer
}
.premium-form-note button:hover {
  text-decoration: underline
}
.logged-in-panel {
  text-align: center;
  padding: 16px 8px 6px!important
}
.logged-badge {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20,165,110,.1);
  border: 1px solid rgba(20,165,110,.25);
  color: #0fa070;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .7px
}
.account-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 14px auto 8px;
  background: linear-gradient(135deg,#1ebdff,#2260f0);
  color: #fff;
  font-size: 25px;
  font-weight: 1000;
  box-shadow: none
}
@media (max-width:560px) {
  .premium-auth-card {
    padding: 18px 13px 16px!important;
    border-radius: 22px!important;
    width: min(480px,calc(100vw - 16px))!important
  }
  .premium-auth-title h2 {
    font-size: 20px!important
  }
  .premium-method {
    min-height: 54px!important;
    grid-template-columns: 38px 1fr 18px
  }
  .method-icon {
    width: 34px!important;
    height: 34px!important
  }
  .premium-auth-panel-wrap {
    padding: 12px 10px 10px!important
  }
  .premium-main-btn {
    height: 43px!important;
    font-size: 12px!important
  }
  .premium-input-wrap {
    height: 42px!important
  }
  .premium-auth-brand {
    margin-bottom: 12px!important
  }
  .premium-methods {
    gap: 5px!important;
    margin-bottom: 9px!important
  }
}
#offerGrid .offer {
  width: 100%!important;
  min-width: 0!important;
  height: auto!important;
  min-height: 0!important;
  max-height: none!important;
  align-self: start!important;
  box-sizing: border-box!important;
  padding: 0!important;
  border-radius: 14px!important;
  border: 1px solid rgba(50,160,230,.26)!important;
  background: linear-gradient(155deg,#07111c,#050d16)!important;
  box-shadow: none!important;
  transition: transform .2s,border-color .2s!important
}
#offerGrid .offer:hover {
  transform: translateY(-2px)!important;
  border-color: rgba(40,200,255,.5)!important;
  will-change: transform
}
#offerGrid .offer .offer-media-wrap {
  margin: 0!important;
  padding: 0!important;
  border-radius: 0!important;
  display: block!important;
  line-height: 0!important
}
#offerGrid .offer .offer-media {
  border-radius: 0!important;
  margin: 0!important;
  width: 100%!important;
  display: block!important
}
#offerGrid .offer .offer-topline {
  min-height: 0!important;
  margin: 0!important;
  padding: 0!important;
  gap: 3px!important
}
#offerGrid .offer .offer-body {
  padding: 4px 8px 5px!important;
  margin: 0!important;
  position: relative!important;
  background: linear-gradient(140deg,rgba(5,14,30,.98),rgba(8,9,28,.97),rgba(12,4,22,.96))!important;
  border-top: 1px solid rgba(35,110,185,.18)!important
}
@keyframes offerBodyGlide {
  0 {
    left: -90%;
    opacity: 0
  }
  12% {
    opacity: 1
  }
  55% {
    left: 160%;
    opacity: 1
  }
  65% {
    opacity: 0
  }
  100% {
    left: 160%;
    opacity: 0
  }
}
#offerGrid .offer .offer-body::after {
  content: ""!important;
  position: absolute!important;
  bottom: 0!important;
  left: 0!important;
  right: 0!important;
  height: 1px!important;
  background: linear-gradient(90deg,transparent,#28c8ff 30%,#9030ff 65%,#ff3080 85%,transparent)!important;
  opacity: .4!important;
  z-index: 0!important
}
#offerGrid .offer small {
  -webkit-line-clamp: 1!important;
  -webkit-box-orient: vertical!important;
  display: block!important;
  font-size: 7px!important;
  line-height: 1.1!important;
  min-height: 0!important;
  margin: 0 0 2px!important;
  color: #3a5268!important;
  white-space: nowrap!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  position: relative!important;
  z-index: 1!important
}
#offerGrid .offer .price {
  display: inline-flex!important;
  align-items: baseline!important;
  gap: 5px!important;
  font-size: 12px!important;
  font-weight: 1000!important;
  margin: 1px 0 2px!important;
  line-height: 1.2!important;
  background: padding-box initial!important;
  -webkit-background-clip: initial!important;
  color: #18e8ff!important;
  text-shadow: none!important;
  position: relative!important;
  z-index: 1!important
}
#offerGrid .offer .old,
#offerGrid .offer .price s {
  font-size: 8px!important;
  font-weight: 500!important;
  color: #ff7878!important;
  text-decoration: line-through!important;
  text-shadow: none!important;
  background: padding-box initial!important;
  -webkit-background-clip: initial!important;
  opacity: .85!important
}
#offerGrid .offer .no-login-strip {
  margin: 1px 0!important;
  padding: 2px 6px!important;
  font-size: 7px!important;
  border-radius: 5px!important;
  line-height: 1.2!important
}
#offerGrid .offer .golden-shot-badge,
#offerGrid .offer .golden-spin-badge {
  font-size: 7px!important;
  padding: 1px 4px!important;
  margin: 1px 0!important;
  line-height: 1.2!important
}
#offerGrid .offer .badge {
  font-size: 6.5px!important;
  padding: 2px 5px!important;
  line-height: 1.15!important
}
#offerGrid .offer .loyalty-strip {
  margin: 1px 0!important;
  padding: 2px 5px!important;
  font-size: 7px!important;
  gap: 4px!important
}
@media (max-width:600px) {
  #heroHighlights.selected-offers {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 7px!important
  }
  #heroHighlights.selected-offer-wrap {
    gap: 3px!important
  }
  #offerGrid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 8px!important
  }
  #offerGrid .offer small {
    display: none!important
  }
  #offerGrid .offer .offer-body {
    padding: 3px 6px 4px!important
  }
  #offerGrid .offer h3 {
    font-size: 8.5px!important;
    margin: 0!important
  }
  #offerGrid .offer .price {
    font-size: 11px!important;
    margin: 1px 0!important
  }
  #offerGrid .offer .no-login-strip {
    font-size: 6.5px!important;
    padding: 2px 5px!important
  }
  #offerGrid .offer .badge {
    font-size: 6px!important;
    padding: 1px 4px!important
  }
}
#offerGrid .offer .offer-body::before {
  content: ""!important;
  position: absolute!important;
  top: 0!important;
  left: 0!important;
  width: 45%!important;
  height: 100%!important;
  background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.05) 50%,transparent 80%)!important;
  transform: translateX(-220%) skewX(-8deg)!important;
  animation: 5s ease-in-out infinite offerBodySafe!important;
  pointer-events: none!important;
  z-index: 0!important;
  will-change: transform!important
}
@keyframes offerBodySafe {
  0 {
    transform: translateX(-220%) skewX(-8deg);
    opacity: 0
  }
  12% {
    opacity: 1
  }
  55% {
    transform: translateX(360%) skewX(-8deg);
    opacity: 1
  }
  65% {
    opacity: 0
  }
  100% {
    transform: translateX(360%) skewX(-8deg);
    opacity: 0
  }
}
#offerGrid .offer,
#offerGrid .offer .offer-body {
  overflow: hidden!important;
  contain: paint!important
}
.selected-offers-section {
  position: static!important;
  overflow: visible!important;
  background: 0 0!important;
  border-radius: 0!important;
  padding: 0 10px!important;
  margin-top: 14px!important;
  margin-bottom: 4px!important
}
.login-modal {
  display: flex!important;
  align-items: flex-start!important;
  justify-content: center!important;
  padding: 14px 10px!important;
  overflow-y: auto!important
}
.premium-auth-card {
  width: min(440px,calc(100vw - 20px))!important;
  max-height: none!important;
  height: auto!important;
  overflow-y: visible!important;
  overflow-x: hidden!important;
  padding: 18px 16px 16px!important;
  border-radius: 22px!important;
  scrollbar-width: none!important
}
.premium-auth-card::-webkit-scrollbar {
  display: none!important
}
.premium-auth-brand {
  margin: 0 36px 12px 0!important
}
.premium-auth-logo {
  width: 42px!important;
  height: 34px!important
}
.premium-brand-name {
  font-size: 14px!important;
  letter-spacing: 1.8px!important
}
.premium-auth-title {
  margin-bottom: 10px!important
}
.premium-auth-kicker {
  font-size: 7.5px!important;
  margin-bottom: 4px!important
}
.premium-auth-title h2 {
  font-size: 19px!important
}
.premium-auth-title p {
  font-size: 10px!important;
  margin: 4px 0 0!important
}
.premium-methods {
  gap: 5px!important;
  margin-bottom: 8px!important
}
.premium-method {
  min-height: 50px!important;
  padding: 6px 10px!important
}
.method-icon {
  width: 34px!important;
  height: 34px!important;
  border-radius: 10px!important;
  font-size: 14px!important
}
.premium-method b {
  font-size: 11px!important
}
.premium-method small {
  font-size: 8px!important
}
.premium-auth-panel-wrap {
  min-height: 0!important;
  padding: 12px 12px 10px!important;
  border-radius: 14px!important
}
.panel-symbol {
  width: 34px!important;
  height: 34px!important;
  margin: 0 auto 6px!important;
  font-size: 16px!important
}
.premium-login-panel h3 {
  font-size: 15px!important;
  margin-bottom: 2px!important
}
.premium-login-panel p {
  font-size: 9.5px!important;
  margin: 3px auto 9px!important;
  max-width: 280px!important
}
.premium-field {
  margin: 5px 0!important
}
.premium-field label {
  font-size: 7.5px!important;
  margin-bottom: 3px!important
}
.premium-input-wrap {
  height: 40px!important;
  border-radius: 10px!important
}
.premium-input-wrap input {
  font-size: 11.5px!important
}
.email-mode-switch {
  margin-bottom: 8px!important
}
.email-mode-btn {
  height: 34px!important;
  font-size: 9px!important
}
.premium-main-btn {
  height: 42px!important;
  font-size: 12px!important;
  border-radius: 11px!important
}
.premium-forgot,
.premium-link-btn {
  font-size: 9px!important;
  margin: 5px auto 0!important
}
.premium-security-bar {
  margin-top: 8px!important;
  padding: 7px 10px!important;
  border-radius: 10px!important;
  font-size: 8px!important
}
.premium-otp-row {
  gap: 6px!important
}
.premium-verify-btn {
  height: 40px!important;
  font-size: 11px!important;
  border-radius: 10px!important
}
@media (max-width:480px) {
  .premium-auth-card {
    padding: 14px 13px 13px!important;
    border-radius: 18px!important;
    max-height: none!important;
    overflow-y: visible!important
  }
  .premium-auth-title h2 {
    font-size: 17px!important
  }
  .premium-method {
    min-height: 46px!important
  }
  .premium-auth-panel-wrap {
    padding: 10px 10px 9px!important
  }
  .premium-main-btn {
    height: 39px!important;
    font-size: 11.5px!important
  }
  .premium-input-wrap {
    height: 38px!important
  }
}
.modal-box {
  transform: none!important;
  opacity: 1!important
}
.modal.show .modal-box {
  transform: none!important
}
#offerModal .modal-box,
#offerModal .offer-modal-box {
  animation: none!important;
  box-shadow: none!important
}
#offerModal * {
  animation-play-state: running
}
#offerModal .offer-action-row .btn,
#offerModal .offer-modal-box,
#offerModal .selected-offer-card,
#offerModal .vip-level-card {
  animation: none!important
}
#offerModal .modal-offer-media-wrap::after,
#offerModal .modal-offer-media-wrap::before,
#offerModal .offer-action-row .btn::after,
#offerModal .offer-action-row .btn::before,
#offerModal .offer-modal-box::after,
#offerModal .offer-modal-box::before,
#offerModal .vip-level-card::after,
#offerModal .vip-level-card::before {
  animation: none!important;
  content: none!important;
  display: none!important
}
#offerModal .offer-action-row {
  backdrop-filter: none!important;
  border: none!important;
  border-top: none!important;
  border-bottom: none!important;
  outline: 0!important;
  box-shadow: none!important;
  padding: 6px 0!important;
  margin: 8px 0 0!important;
  background: 0 0!important
}
#offerModal .offer-action-row .btn::after,
#offerModal .offer-action-row .btn::before {
  animation: none!important;
  display: none!important;
  content: none!important
}
#offerModal .offer-modal-box {
  border: 1px solid rgba(40,140,200,.14)!important
}
#offerModal .offer-qty-heading {
  letter-spacing: .1em!important;
  padding-bottom: 3px!important
}
#offerModal .offer-qty-icon {
  min-height: 0!important
}
#offerModal .offer-qty-item > span {
  letter-spacing: .03em!important;
  margin-top: 0!important
}
#offerModal .qty-nav {
  font-size: 20px!important;
  border-radius: 8px!important
}
.offer,
.premium-offer,
.selected-offer-card,
.vip-level-card {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden
}
@media (hover:none) {
  .premium-offer:hover {
    transform: none!important;
    box-shadow: none!important
  }
}
.btn,
.modal {
  display: flex!important;
  position: fixed!important;
  inset: 0!important;
  z-index: 1000!important;
  align-items: center!important;
  justify-content: center!important;
  padding: 12px!important;
  background: rgba(0,0,0,.78)!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
  opacity: 0!important;
  visibility: hidden!important;
  pointer-events: none!important;
  transition: opacity .25s,visibility .25s!important;
  will-change: opacity!important
}
.modal.show {
  opacity: 1!important;
  visibility: visible!important;
  pointer-events: auto!important
}
.modal-box,
.offer-modal-box {
  transform: translateY(28px) scale(.97)!important;
  opacity: 0!important;
  transition: transform .28s cubic-bezier(.2,.85,.25,1),opacity .22s!important;
  animation: none!important;
  will-change: transform,opacity!important
}
.modal.show .modal-box,
.modal.show .offer-modal-box {
  transform: translateY(0) scale(1)!important;
  opacity: 1!important
}
#profileModal .profile-avatar {
  font-size: 28px
}
#profileModal .profile-avatar-wrap > span {
  width: 24px;
  height: 24px;
  right: -1px;
  bottom: 0;
  font-size: 11px
}
#profileModal .profile-name-editor input {
  width: 100%;
  padding: 0 10px;
  outline: 0
}
#profileModal .profile-name-editor input:focus {
  border-color: #2fc4ff;
  box-shadow: 0 0 0 3px rgba(47,196,255,.08)
}
#profileModal .profile-name-editor button {
  border: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
  cursor: pointer
}
#profileModal .profile-stats > div {
  padding: 10px 6px;
  border-radius: 11px
}
#profileModal .profile-actions {
  grid-template-columns: 1fr
}
#profileModal .profile-action-btn {
  min-height: 40px;
  border-radius: 11px;
  font-size: 11px
}
@media (max-width:600px) {
  .premium-profile-box {
    width: min(420px,94vw)!important;
    padding: 10px!important
  }
  #profileModal .profile-hero {
    padding: 15px 11px 12px
  }
}
.premium-profile-box {
  width: min(430px,92vw)!important;
  max-width: 430px!important;
  max-height: 86vh!important;
  overflow: auto!important;
  padding: 10px!important;
  border: 1px solid rgba(82,194,255,.28)!important;
  background: radial-gradient(circle at 12% 0,rgba(37,177,255,.1),transparent 34%),radial-gradient(circle at 92% 100%,rgba(126,67,255,.1),transparent 38%),linear-gradient(145deg,#081c2b,#050d16)!important;
  box-shadow: none!important;
  scrollbar-width: thin
}
#profileModal .profile-close {
  padding: 0!important;
  display: grid!important;
  place-items: center!important;
  line-height: 1!important;
  pointer-events: auto!important
}
#profileModal .profile-close:hover {
  color: #fff!important;
  border-color: rgba(81,206,255,.72)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.08)!important;
  transform: translateY(-1px)
}
#profileModal .profile-hero {
  position: relative!important;
  overflow: hidden!important;
  margin: 0!important;
  border: 1px solid rgba(79,198,255,.28)!important
}
#profileModal .profile-hero::after,
#profileModal .profile-hero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: none;
  opacity: .7;
  display: none !important
}
#profileModal .profile-hero::before {
  width: 90px;
  height: 90px;
  right: -20px;
  top: -26px;
  background: radial-gradient(circle,rgba(66,220,255,.22),transparent 68%)
}
#profileModal .profile-hero::after {
  width: 80px;
  height: 80px;
  left: -24px;
  bottom: -30px;
  background: radial-gradient(circle,rgba(126,70,255,.2),transparent 68%)
}
#profileModal .profile-avatar-wrap {
  z-index: 2!important
}
#profileModal .profile-avatar-wrap::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(91,208,255,.15);
  box-shadow: none;
  pointer-events: none
}
#profileModal .profile-name-row {
  justify-content: center!important
}
#profileModal .profile-name-row h2 {
  letter-spacing: .01em!important
}
#profileModal .profile-name-edit {
  cursor: pointer;
  flex: 0 0 auto!important;
  align-items: center!important;
  gap: 4px!important;
  font-size: 8px!important;
  font-weight: 1000!important
}
#profileModal .profile-name-edit:hover {
  border-color: rgba(88,215,255,.7)!important;
  transform: translateY(-1px)
}
#profileModal .profile-name-editor {
  position: relative;
  z-index: 3
}
#profileModal .profile-stat-card {
  position: relative;
  overflow: hidden
}
#profileModal .profile-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  opacity: .85
}
#profileModal .profile-stat-card.stat-orders::before {
  background: #31c3ff;
  box-shadow: none
}
#profileModal .profile-stat-card.stat-active::before {
  background: #ffd34f;
  box-shadow: none
}
#profileModal .profile-stat-icon {
  display: block;
  line-height: 1;
  color: #70ddff;
  text-shadow: none
}
#profileModal .stat-active .profile-stat-icon {
  color: #ffd34f
}
#profileModal .profile-stats small {
  letter-spacing: .03em
}
#profileModal .profile-order-status-head strong {
  color: #edf9ff!important
}
#profileModal .profile-order-sub {
  color: #7897aa!important
}
#profileModal .profile-active-badge {
  border-radius: 999px;
  border: 1px solid rgba(255,207,69,.22);
  background: rgba(255,198,58,.07);
  color: #ffdb69;
  font-weight: 1000;
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: none
}
#profileModal .order-empty.active-empty {
  border: 1px dashed rgba(71,185,231,.18)!important;
  background: rgba(18,70,97,.1)!important;
  display: grid;
  gap: 3px
}
#profileModal .order-empty.active-empty b {
  color: #d8edf8;
  font-size: 9px!important
}
#profileModal .order-empty.active-empty span {
  color: #718fa2;
  font-size: 7px!important
}
#profileModal .customer-order-card {
  box-shadow: inset 0 1px rgba(255,255,255,.025)!important
}
#profileModal .customer-order-note {
  border-radius: 9px!important
}
.profile-completed-wrap {
  margin-top: 7px
}
.profile-completed-btn {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(87,188,242,.2);
  background: linear-gradient(145deg,rgba(21,74,101,.22),rgba(37,30,76,.18));
  color: #cbeeff;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  font-size: 8px;
  font-weight: 1000
}
.profile-completed-btn > span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(57,229,145,.1);
  border: 1px solid rgba(57,229,145,.22);
  color: #69f0b0;
  font-size: 11px
}
.profile-completed-btn b {
  flex: 1;
  text-align: left
}
.profile-completed-btn i {
  font-style: normal;
  color: #7fdcff;
  font-size: 15px;
  transition: transform .18s
}
.profile-completed-btn.open {
  border-color: rgba(96,221,255,.36);
  background: linear-gradient(145deg,rgba(16,79,108,.28),rgba(58,37,110,.24))
}
#profileModal .profile-completed-orders {
  margin-top: 6px
}
#profileModal .profile-action-btn.danger {
  grid-column: auto;
  min-height: 36px!important;
  border-radius: 10px!important;
  font-size: 10px!important;
  background: linear-gradient(145deg,rgba(91,22,38,.45),rgba(51,13,26,.42))!important;
  border-color: rgba(255,103,129,.24)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.025)!important
}
#profileModal .profile-action-btn.danger span {
  margin-right: 5px;
  color: #ff9aac
}
@media (max-width:600px) {
  #profileModal {
    padding: 8px!important;
    align-items: center!important
  }
  .premium-profile-box {
    width: min(390px,94vw)!important;
    max-width: 390px!important;
    max-height: 84vh!important;
    padding: 8px!important;
    border-radius: 18px!important
  }
  #profileModal .profile-close {
    top: 7px!important;
    right: 7px!important;
    width: 32px!important;
    height: 32px!important;
    border-radius: 10px!important
  }
  #profileModal .profile-hero {
    padding: 16px 10px 11px!important;
    border-radius: 17px!important
  }
  #profileModal .profile-avatar,
  #profileModal .profile-avatar-wrap {
    width: 70px!important;
    height: 70px!important
  }
  #profileModal .profile-name-row h2 {
    font-size: 18px!important
  }
  #profileModal .profile-name-edit {
    padding: 6px 8px!important;
    font-size: 7px!important
  }
  #profileModal .profile-stats b {
    font-size: 15px!important
  }
  #profileModal .profile-orders-list {
    max-height: 170px!important
  }
}
#profileModal .premium-profile-box {
  width: min(400px,90vw)!important;
  max-width: 400px!important;
  padding: 9px!important;
  border-radius: 20px!important
}
#profileModal .profile-close {
  position: absolute!important;
  right: 8px!important;
  width: 31px!important;
  height: 31px!important;
  min-width: 31px!important;
  border-radius: 50%!important;
  background: linear-gradient(145deg,#173c56,#081823)!important;
  border: 1px solid rgba(104,211,255,.42)!important;
  color: #d9f7ff!important;
  font-size: 21px!important;
  box-shadow: inset 0 1px rgba(255,255,255,.1)!important
}
#profileModal .profile-close:active {
  transform: scale(.96)!important
}
#profileModal .profile-hero {
  border-radius: 17px!important;
  background: radial-gradient(circle at 18% 0,rgba(51,202,255,.2),transparent 28%),radial-gradient(circle at 90% 8%,rgba(127,77,255,.22),transparent 30%),linear-gradient(145deg,#0b2a3f,#061522 72%)!important;
  border-color: rgba(90,205,255,.34)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.07)!important
}
#profileModal .profile-hero:after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(81,211,255,.55),rgba(162,112,255,.45),transparent);
  box-shadow: none;
  pointer-events: none
}
#profileModal .profile-hero-topline {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 7px;
  padding: 0 2px;
  font-size: 7px;
  letter-spacing: .16em;
  color: #67d8ff;
  font-weight: 1000;
  text-transform: uppercase
}
#profileModal .profile-hero-topline b {
  padding: 4px 7px;
  border: 1px solid rgba(88,202,255,.24);
  border-radius: 999px;
  background: rgba(36,156,216,.1);
  color: #a8ecff;
  font-size: 6px;
  letter-spacing: .12em
}
#profileModal .profile-avatar-frame {
  position: relative;
  z-index: 3;
  width: 96px;
  margin: 0 auto 8px;
  padding: 7px;
  border-radius: 28px;
  background: linear-gradient(145deg,rgba(41,191,255,.12),rgba(102,70,255,.12));
  box-shadow: none
}
#profileModal .profile-avatar-frame:after,
#profileModal .profile-avatar-frame:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 30px;
  pointer-events: none
}
#profileModal .profile-avatar-frame:before {
  border: 1px solid rgba(80,199,255,.22);
  box-shadow: none
}
#profileModal .profile-avatar-frame:after {
  inset: 2px;
  border: 1px dashed rgba(176,136,255,.15)
}
#profileModal .profile-avatar-wrap {
  display: block!important;
  position: relative!important;
  cursor: pointer!important;
  filter: none!important
}
#profileModal .profile-avatar {
  border: 2px solid rgba(105,224,255,.8)!important;
  background: linear-gradient(145deg,#23bfff,#345cf4 55%,#7444ff)!important;
  box-shadow: 0 0 0 4px rgba(67,201,255,.07), inset 0 1px rgba(255,255,255,.2)!important
}
#profileModal .profile-avatar-change {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  margin: 6px auto 0;
  border-radius: 999px;
  border: 1px solid rgba(83,207,255,.32);
  background: linear-gradient(145deg,rgba(23,143,213,.25),rgba(76,62,175,.24));
  color: #baf1ff;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.07);
  transition: .18s
}
#profileModal .profile-avatar-change:hover {
  transform: translateY(-1px);
  border-color: rgba(108,222,255,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.1)
}
#profileModal .profile-avatar-change span {
  font-size: 10px;
  color: #75ddff
}
#profileModal .profile-name-row {
  position: relative;
  z-index: 5;
  display: grid!important;
  grid-template-columns: 34px minmax(0,1fr) 34px!important;
  align-items: center!important;
  margin: 2px auto 0!important;
  max-width: 260px!important
}
#profileModal .profile-name-block {
  text-align: center;
  min-width: 0
}
#profileModal .profile-name-row h2 {
  margin: 0!important;
  line-height: 1.06!important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(90deg,#fff,#93e5ff 54%,#b9a6ff)!important;
  -webkit-background-clip: text;
  color: transparent!important
}
#profileModal .profile-name-edit {
  justify-self: start!important;
  width: 31px!important;
  height: 31px!important;
  display: grid!important;
  place-items: center!important;
  border: 1px solid rgba(90,207,255,.34)!important;
  background: linear-gradient(145deg,rgba(29,151,222,.24),rgba(72,68,177,.24))!important;
  color: #a9edff!important;
  box-shadow: inset 0 1px rgba(255,255,255,.07)!important
}
#profileModal .profile-name-edit span {
  font-size: 13px!important
}
#profileModal .profile-name-spacer {
  width: 31px;
  height: 31px;
  display: block
}
#profileModal .profile-name-editor {
  display: none!important;
  grid-template-columns: 1fr auto!important;
  gap: 6px!important;
  margin: 8px auto 0!important;
  max-width: 250px!important
}
#profileModal .profile-name-editor.show {
  display: grid!important
}
#profileModal .profile-name-editor input {
  height: 34px!important;
  border-radius: 10px!important;
  background: rgba(3,14,23,.92)!important;
  border: 1px solid rgba(80,190,235,.28)!important;
  color: #eef8ff!important;
  font-size: 10px!important
}
#profileModal .profile-name-editor button {
  height: 34px!important;
  border-radius: 10px!important;
  padding: 0 11px!important;
  background: linear-gradient(135deg,#1598de,#5c58ff)!important;
  box-shadow: none!important
}
#profileModal .profile-stats {
  grid-template-columns: repeat(3,1fr)!important
}
#profileModal .profile-stat-card {
  min-width: 0!important;
  border-radius: 11px!important;
  background: linear-gradient(145deg,rgba(10,39,57,.95),rgba(4,17,28,.97))!important;
  border: 1px solid rgba(72,186,235,.22)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.04)!important
}
#profileModal .profile-stat-card.stat-orders:before {
  background: #39c8ff!important;
  box-shadow: none!important
}
#profileModal .profile-stat-card.stat-active:before {
  background: #ffd34d!important;
  box-shadow: none!important
}
#profileModal .profile-stat-card.stat-level:before {
  background: #a784ff!important;
  box-shadow: none!important
}
#profileModal .profile-stat-icon {
  margin-bottom: 2px!important
}
#profileModal .profile-stats b {
  white-space: nowrap!important
}
#profileModal .profile-stats small {
  margin-top: 3px!important
}
#profileModal .profile-level-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 11px;
  border: 1px solid rgba(109,180,245,.2);
  background: linear-gradient(145deg,rgba(13,54,77,.34),rgba(41,26,78,.27));
  box-shadow: inset 0 1px rgba(255,255,255,.04)
}
#profileModal .profile-level-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0
}
#profileModal .profile-level-rank {
  padding: 3px 5px;
  border-radius: 999px;
  letter-spacing: .1em;
  font-weight: 1000;
  color: #8ee5ff;
  background: rgba(50,186,240,.08);
  border: 1px solid rgba(65,191,242,.17);
  white-space: nowrap
}
#profileModal .profile-level-main strong {
  color: #eefaff;
  white-space: nowrap
}
#profileModal .profile-level-next {
  color: #7f9caf;
  text-align: right
}
#profileModal .profile-order-status {
  border-radius: 13px!important;
  background: linear-gradient(145deg,rgba(8,34,49,.88),rgba(4,15,25,.95))!important;
  border: 1px solid rgba(75,186,232,.2)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.03)!important
}
#profileModal .profile-order-status-head {
  margin-bottom: 6px!important
}
#profileModal .order-empty.active-empty {
  padding: 12px 9px!important;
  border-radius: 11px!important
}
#profileModal .customer-order-card {
  background: linear-gradient(145deg,rgba(10,37,52,.94),rgba(4,16,26,.97))!important
}
#profileModal .profile-completed-wrap {
  margin-top: 6px!important
}
#profileModal .profile-completed-btn {
  border-radius: 10px!important;
  padding: 0 8px!important
}
#profileModal .profile-completed-btn > span {
  width: 19px!important;
  height: 19px!important
}
#profileModal .profile-actions {
  margin-top: 6px!important
}
#profileModal .profile-logout-3d {
  position: relative!important;
  overflow: hidden!important;
  min-height: 39px!important;
  border-radius: 12px!important;
  padding: 0 13px!important;
  display: grid!important;
  grid-template-columns: 30px 1fr auto!important;
  grid-template-rows: 1fr 1fr!important;
  align-items: center!important;
  column-gap: 8px!important;
  text-align: left!important;
  background: linear-gradient(145deg,#64213a,#34101f 68%,#200914)!important;
  border: 1px solid rgba(255,116,147,.34)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.09)!important
}
#profileModal .profile-logout-3d:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,187,205,.55),transparent);
  opacity: .75
}
#profileModal .profile-logout-3d span {
  grid-row: 1/3;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#ff6b91,#d72e5b);
  border: 1px solid rgba(255,205,219,.3);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
  color: #fff;
  font-size: 14px
}
#profileModal .profile-logout-3d b {
  color: #fff;
  line-height: 1
}
#profileModal .profile-logout-3d i {
  align-self: end;
  font-style: normal;
  font-size: 6px;
  color: #b98b99;
  line-height: 1
}
#profileModal .profile-logout-3d:active {
  transform: translateY(3px)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.08)!important
}
@media (max-width:600px) {
  #profileModal {
    padding: 7px!important;
    align-items: center!important
  }
  #profileModal .premium-profile-box {
    width: min(370px,92vw)!important;
    max-width: 370px!important;
    max-height: 80vh!important;
    padding: 7px!important;
    border-radius: 18px!important
  }
  #profileModal .profile-close {
    top: 7px!important;
    right: 7px!important;
    width: 30px!important;
    height: 30px!important;
    min-width: 30px!important
  }
  #profileModal .profile-hero {
    padding: 12px 9px 10px!important
  }
  #profileModal .profile-avatar-frame {
    width: 91px!important
  }
  #profileModal .profile-avatar,
  #profileModal .profile-avatar-wrap {
    width: 77px!important;
    height: 77px!important
  }
  #profileModal .profile-avatar-change {
    font-size: 6.5px!important;
    padding: 5px 8px!important
  }
  #profileModal .profile-name-row {
    max-width: 238px!important
  }
  #profileModal .profile-name-row h2 {
    font-size: 18px!important
  }
  #profileModal .profile-name-edit,
  #profileModal .profile-name-spacer {
    width: 29px!important;
    height: 29px!important
  }
  #profileModal .profile-level-next {
    font-size: 6px!important
  }
}
#loginModal .premium-auth-card {
  width: min(500px,calc(100vw - 20px))!important;
  padding: 20px 20px 16px!important;
  border-radius: 24px!important
}
#loginModal .premium-auth-brand {
  margin-bottom: 14px!important
}
#loginModal .premium-auth-title {
  margin-bottom: 13px!important
}
#loginModal .premium-methods {
  gap: 6px!important;
  margin-bottom: 10px!important
}
#loginModal .premium-method {
  min-height: 56px!important;
  padding: 8px 11px!important;
  transition: border-color .2s,background .2s,box-shadow .2s!important
}
#loginModal .premium-auth-panel-wrap {
  padding: 14px 14px 12px!important;
  border-radius: 16px!important
}
#loginModal .premium-login-panel p {
  margin-bottom: 11px!important
}
#loginModal .premium-field {
  margin: 7px 0!important
}
#loginModal .premium-input-wrap {
  height: 42px!important
}
#loginModal .premium-otp-row {
  margin-top: 2px!important
}
#loginModal .premium-otp-row .premium-input-wrap,
#loginModal .premium-otp-row .premium-main-btn {
  height: 42px!important
}
#loginModal .premium-verify-btn {
  height: 40px!important;
  margin-top: 7px!important
}
#loginModal .premium-security-bar {
  margin-top: 9px!important;
  padding: 8px 10px!important
}
#loginModal .premium-close {
  z-index: 30!important
}
#logoutConfirmModal {
  z-index: 3900!important;
  padding: 14px!important;
  background: rgba(1,5,10,.82)!important;
  backdrop-filter: none!important
}
.premium-confirm-card {
  position: relative;
  width: min(380px,calc(100vw - 28px));
  padding: 24px 20px 18px;
  border-radius: 24px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% -10%,rgba(55,197,255,.18),transparent 36%),linear-gradient(145deg,#0a1b2a,#06101a 72%,#040a11);
  border: 1px solid rgba(88,203,255,.3);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  animation: .22s both premiumConfirmIn
}
.premium-confirm-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg,transparent 34%,rgba(255,255,255,.06) 50%,transparent 66%);
  transform: translateX(-120%);
  animation: 3.2s ease-in-out infinite confirmSweep
}
.premium-confirm-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(92,208,255,.25);
  background: linear-gradient(145deg,#153b53,#081824);
  color: #dff8ff;
  font-size: 21px;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.1)
}
.premium-confirm-icon {
  width: 62px;
  height: 62px;
  margin: 2px auto 10px;
  border-radius: 19px;
  display: grid;
  place-items: center;
  color: #ffadc0;
  font-size: 25px;
  background: linear-gradient(145deg,#56233a,#21101c);
  border: 1px solid rgba(255,105,143,.36);
  box-shadow: inset 0 1px rgba(255,255,255,.1)
}
.premium-confirm-kicker {
  font-size: 7px;
  letter-spacing: .22em;
  color: #63d7ff;
  font-weight: 1000
}
.premium-confirm-card h3 {
  margin: 7px 0 5px;
  color: #f2fbff;
  font-size: 20px
}
.premium-confirm-card p {
  margin: 0 auto 16px;
  max-width: 290px;
  color: #7793a6;
  font-size: 10px;
  line-height: 1.5
}
.premium-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}
.premium-confirm-actions button {
  height: 44px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 1000;
  cursor: pointer
}
.premium-confirm-no {
  border: 1px solid rgba(115,156,177,.24);
  background: rgba(11,29,42,.8);
  color: #bdd1dc;
  box-shadow: inset 0 1px rgba(255,255,255,.05)
}
.premium-confirm-yes {
  border: 1px solid rgba(255,111,145,.34);
  background: linear-gradient(135deg,#d93461,#7a1e44);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.12)
}
.premium-confirm-no:active,
.premium-confirm-yes:active {
  transform: translateY(1px)
}
@keyframes premiumConfirmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.97)
  }
  to {
    opacity: 1;
    transform: none
  }
}
#offerModal .offer-modal-close {
  position: absolute!important;
  right: 10px!important;
  width: 36px!important;
  height: 36px!important;
  min-width: 36px!important;
  display: grid!important;
  place-items: center!important;
  border-radius: 12px!important;
  border: 1px solid rgba(103,220,255,.4)!important;
  background: linear-gradient(145deg,rgba(15,49,69,.97),rgba(5,17,28,.97))!important;
  color: #e9fbff!important;
  font-size: 24px!important;
  line-height: 1!important;
  box-shadow: inset 0 1px rgba(255,255,255,.12)!important;
  cursor: pointer!important
}
#offerModal .offer-modal-close:hover {
  transform: scale(1.04);
  border-color: rgba(110,225,255,.72)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.14)!important
}
#offerModal .modal-offer-media-wrap {
  position: relative;
  z-index: 1
}
#offerModal .offer-qty-list {
  margin: 2px 0!important;
  padding: 3px 6px 4px!important;
  border-radius: 10px!important
}
#offerModal .offer-qty-heading {
  font-size: 8px!important;
  margin-bottom: 2px!important;
  line-height: 1.1!important
}
#offerModal .offer-qty-item {
  flex-basis: 68px!important;
  padding: 3px 4px 4px!important;
  border-radius: 8px!important;
  gap: 1px!important
}
#offerModal .offer-qty-icon {
  flex-basis: 34px!important;
  margin-bottom: 1px!important
}
#offerModal .offer-qty-item > b {
  font-size: 12px!important;
  margin-top: 1px!important;
  gap: 2px!important
}
#offerModal .offer-qty-item > span {
  font-size: 8px!important
}
#offerModal .offer-qty-item small {
  font-size: 8.5px!important;
  font-weight: 500!important;
  color: #8bbcdb!important;
  display: inline!important;
  margin-left: 1px!important
}
#offerModal .cue-sl-v5 {
  margin: 4px 0 12px!important;
  padding: 3px 6px!important;
  border-radius: 10px!important
}
#offerModal .vip-showcase {
  position: relative;
  border-radius: 14px!important;
  border-color: rgba(87,202,255,.24)!important
}
#offerModal .vip-level-card {
  min-height: 0!important;
  padding: 8px!important;
  border-radius: 11px!important
}
#offerModal .vip-level-card:after {
  animation: none!important;
  display: none!important
}
#offerModal .vip-tier-icon {
  width: 27px!important;
  height: 27px!important;
  flex-basis: 27px!important;
  filter: none
}
#offerModal .vip-level-head b {
  font-size: 10px!important
}
#offerModal .vip-level-head span {
  font-size: 6px!important;
  opacity: .8
}
#offerModal .offer-modal-box {
  isolation: isolate!important;
  border-color: rgba(78,192,255,.27)!important;
  box-shadow: 0 0 0 1px rgba(74,186,255,.08)!important
}
#offerModal .offer-modal-box:before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,rgba(69,200,255,.08),transparent 28%,transparent 72%,rgba(137,87,255,.07));
  z-index: -1
}
@media (max-width:560px) {
  #loginModal .premium-auth-card {
    max-height: none!important;
    height: auto!important;
    overflow-y: visible!important;
    padding: 15px 12px 12px!important;
    border-radius: 20px!important
  }
  #loginModal .premium-auth-brand {
    margin-bottom: 11px!important
  }
  #loginModal .premium-brand-name {
    font-size: 14px!important
  }
  #loginModal .premium-auth-title h2 {
    font-size: 19px!important
  }
  #loginModal .premium-method {
    min-height: 50px!important;
    grid-template-columns: 36px 1fr 16px!important;
    padding: 7px 9px!important
  }
  #loginModal .method-icon {
    width: 36px!important;
    height: 36px!important;
    font-size: 16px!important
  }
  #loginModal .premium-auth-panel-wrap {
    padding: 11px 10px 10px!important
  }
  #loginModal .premium-input-wrap,
  #loginModal .premium-otp-row .premium-input-wrap,
  #loginModal .premium-otp-row .premium-main-btn {
    height: 40px!important
  }
  #loginModal .premium-security-bar {
    display: none!important
  }
  #offerModal .offer-modal-close {
    width: 33px!important;
    height: 33px!important;
    min-width: 33px!important;
    right: 7px!important;
    top: 7px!important;
    font-size: 21px!important
  }
  #offerModal .offer-qty-list {
    padding: 4px 6px 5px!important
  }
  #loginModal .premium-auth-card {
    width: calc(100vw - 16px)!important
  }
}
#profileModal .profile-hero-topline span {
  font-size: 8px!important;
  letter-spacing: .22em!important;
  text-shadow: none
}
#profileModal .profile-name-edit {
  position: relative!important;
  overflow: hidden!important
}
#profileModal .profile-name-edit:after {
  content: "";
  position: absolute;
  inset: -25%;
  background: linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform: translateX(-120%);
  animation: 3.8s ease-in-out infinite profileEditSweep;
  pointer-events: none
}
#profileModal .profile-logout-3d b {
  grid-column: 2/4!important;
  align-self: center!important;
  font-size: 11px!important;
  letter-spacing: .06em!important
}
#loginModal {
  overflow-y: auto!important;
  position: fixed!important;
  inset: 0!important;
  display: none;
  justify-content: center!important;
  padding: 12px!important
}
#loginModal.show {
  display: flex!important
}
#loginModal .login-box,
#loginModal .modal-box,
#loginModal .premium-auth-card {
  max-height: none!important;
  height: auto!important;
  overflow: visible!important
}
#loginModal .premium-auth-panel-wrap {
  min-height: 0!important
}
#loginModal .premium-login-panel {
  animation: none!important
}
#profileModal .profile-avatar-wrap > span,
#profileModal .profile-avatar-wrap::after {
  display: none!important
}
#profileModal #profileName {
  margin: 0 0 2px!important;
  font-size: 22px!important;
  font-weight: 1000!important;
  line-height: 1.15!important;
  letter-spacing: -.3px!important;
  background: linear-gradient(110deg,#fff 0,#a8e8ff 55%,#c4b5ff 100%)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  color: transparent!important;
  text-shadow: none!important
}
#profileModal .profile-name-sub {
  display: none!important
}
@media (max-width:640px) {
  #offerModal .vip-level-card .vip-level-head,
  .vip-showcase .vip-level-card .vip-level-head {
    margin: -9px -9px 8px!important;
    padding: 8px 10px!important;
    border-radius: 8px 8px 0 0!important
  }
}
.order-received-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3,10,20,.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}
.order-received-overlay.show {
  display: flex;
  animation: .32s both orcpOverlayIn
}
@keyframes orcpOverlayIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
.order-received-card {
  position: relative;
  width: min(420px,100%);
  padding: 32px 28px 28px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(160deg,#071626 0,#060f1c 55%,#04090f 100%);
  border: 1px solid rgba(60,200,255,.22);
  box-shadow: 0 0 0 1px rgba(40,170,255,.08), inset 0 1px rgba(255,255,255,.08);
  animation: .42s cubic-bezier(.22,1,.36,1) both orcpCardIn
}
@keyframes orcpCardIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.94)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.orcp-scene {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center
}
.orcp-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent
}
.orcp-ring-1 {
  inset: -8px;
  border-color: rgba(40,185,255,.35);
  animation: 4s linear infinite orcpRingSpin;
  box-shadow: none
}
.orcp-ring-2 {
  inset: -16px;
  border-color: rgba(100,100,255,.2);
  border-style: dashed;
  animation: 7s linear infinite reverse orcpRingSpin
}
.orcp-ring-3 {
  inset: -26px;
  border-color: rgba(40,185,255,.1);
  animation: 12s linear infinite orcpRingSpin
}
@keyframes orcpRingSpin {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}
.orcp-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(145deg,#18aaff,#1c6bff 50%,#6c40ff);
  box-shadow: 0 0 0 3px rgba(28,140,255,.22), inset 0 1px rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: .6s cubic-bezier(.22,1,.36,1) .1s both orcpIconPop;
  position: relative;
  z-index: 2
}
@keyframes orcpIconPop {
  from {
    transform: scale(0) rotate(-20deg)
  }
  to {
    transform: scale(1) rotate(0)
  }
}
.orcp-icon {
  font-size: 32px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
  animation: .5s cubic-bezier(.22,1,.36,1) .35s both orcpCheckBounce
}
@keyframes orcpCheckBounce {
  from {
    opacity: 0;
    transform: scale(.4)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
.orcp-kicker {
  text-align: center;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #3ad0ff;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: .85
}
.orcp-title {
  text-align: center;
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -.4px;
  background: linear-gradient(110deg,#fff 0,#9ae8ff 55%,#c0b0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.orcp-desc {
  text-align: center;
  font-size: 13px;
  color: #8aafca;
  line-height: 1.6;
  margin: 0 0 14px
}
.orcp-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 16px
}
.orcp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2da;
  box-shadow: none;
  animation: 1.6s ease-in-out infinite orcpDotPulse
}
.orcp-status-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #2da;
  text-transform: uppercase
}
.orcp-divider {
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(60,200,255,.18),transparent);
  margin: 0 0 14px
}
.orcp-note {
  text-align: center;
  font-size: 11px;
  color: #5b7d96;
  line-height: 1.55;
  margin: 0 0 22px
}
.orcp-note b {
  color: #7ab8d0;
  font-weight: 700
}
.orcp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,#1ab8ff,#1860ff);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.2);
  transition: transform .18s,box-shadow .18s;
  position: relative;
  overflow: hidden
}
.orcp-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform: translateX(-100%);
  transition: transform .5s
}
.orcp-btn:hover:before {
  transform: translateX(100%)
}
.orcp-btn:hover {
  transform: translateY(-2px);
  box-shadow: none
}
.orcp-btn:active {
  transform: translateY(0)
}
.orcp-btn b {
  font-size: 18px;
  opacity: .85
}
@media (max-width:480px) {
  #profileModal #profileName {
    font-size: 19px!important
  }
  .order-received-card {
    padding: 26px 20px 22px;
    border-radius: 22px
  }
  .orcp-title {
    font-size: 21px
  }
  .orcp-scene {
    width: 78px;
    height: 78px
  }
  .orcp-icon-wrap {
    width: 62px;
    height: 62px
  }
  .orcp-icon {
    font-size: 27px
  }
}
body {
  -webkit-overflow-scrolling: touch;
  background-color: #030a11!important;
  background-image: none!important
}
.offers,
.section,
.vip-level-grid,
.wrap {
  contain: layout style
}
#offerModal .vip-level-card::after {
  animation-duration: 9s!important
}
#offerModal:not(.show) .vip-level-card::after {
  animation-play-state: paused!important
}
.vip-title-gradient {
  animation-duration: 7s!important
}
.vip-showcase-title {
  animation-duration: 9s!important
}
.order-received-overlay:not(.show) .orcp-ring {
  animation-play-state: paused!important
}
.orcp-ring-1 {
  animation-duration: 5.5s!important
}
@media (max-width:640px) {
  .top {
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
  #cartModal,
  #loginModal,
  #offerModal,
  #orderModal,
  #profileModal {
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
  #logoutConfirmModal,
  .order-received-overlay {
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
}
.offer,
.premium-offer,
.profile-stat-card,
.vip-level-card {
  contain: layout paint style
}
html {
  scroll-behavior: smooth
}
button,
input,
select {
  transition: border-color .15s,background .15s!important
}
img {
  decoding: async;
  content-visibility: auto
}
@media (prefers-reduced-motion:reduce) {
  *,
  ::after,
  ::before {
    animation-duration: NaNs!important;
    animation-iteration-count: 1!important;
    transition-duration: NaNs!important
  }
}
.pf-login-flash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s,visibility .22s
}
.pf-login-flash.show {
  opacity: 1;
  visibility: visible
}
.pf-login-flash-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 36px 26px;
  border-radius: 28px;
  background: linear-gradient(155deg,#071828 0,#050f1a 60%,#020912 100%);
  border: 1px solid rgba(50,210,255,.3);
  box-shadow: 0 0 0 1px rgba(30,180,255,.08), inset 0 1px rgba(255,255,255,.1);
  animation: .52s cubic-bezier(.22,1,.36,1) both pfLFCardIn;
  min-width: 260px
}
@keyframes pfLFCardIn {
  from {
    opacity: 0;
    transform: translateY(32px) scale(.9)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
@keyframes pfLFCardOut {
  from {
    opacity: 1;
    transform: scale(1)
  }
  to {
    opacity: 0;
    transform: scale(.92) translateY(-10px)
  }
}
.pf-lf-scene {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px
}
.pf-lf-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent
}
.pf-lf-orbit-1 {
  inset: -8px;
  border-color: rgba(40,195,255,.38);
  animation: none
}
.pf-lf-orbit-2 {
  inset: -16px;
  border-color: rgba(100,80,255,.2);
  border-style: dashed;
  animation: none
}
.pf-login-flash.show .pf-lf-orbit-1 {
  animation: 3.5s linear infinite pfOrbit
}
.pf-login-flash.show .pf-lf-orbit-2 {
  animation: 6s linear infinite reverse pfOrbit
}
@keyframes pfOrbit {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}
.pf-lf-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(145deg,#16b8ff,#1c62ff 50%,#6c3fff);
  box-shadow: 0 0 0 3px rgba(22,160,255,.2), inset 0 1px rgba(255,255,255,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: .5s cubic-bezier(.22,1,.36,1) .12s both pfIconPop
}
@keyframes pfIconPop {
  from {
    transform: scale(0) rotate(-30deg)
  }
  to {
    transform: scale(1) rotate(0)
  }
}
.pf-lf-icon {
  font-size: 28px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  animation: .4s cubic-bezier(.22,1,.36,1) .3s both pfCheckIn
}
@keyframes pfCheckIn {
  from {
    opacity: 0;
    transform: scale(.3)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
.pf-lf-brand {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .28em;
  color: #38d0ff;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: .85
}
.pf-lf-label {
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.2px;
  background: linear-gradient(110deg,#fff 0,#92e8ff 55%,#c0aaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  text-align: center
}
.pf-lf-bar {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden
}
.pf-lf-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg,#16b8ff,#1c62ff,#6c3fff);
  box-shadow: none
}
.pf-login-flash.show .pf-lf-bar-fill {
  animation: 1s cubic-bezier(.4,0,.6,1) .1s both pfBarFill
}
@keyframes pfBarFill {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
.pf-logout-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s,visibility .2s
}
.pf-logout-flash.show {
  opacity: 1;
  visibility: visible
}
.pf-logout-flash-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 32px 18px;
  margin-top: 18px;
  border-radius: 20px;
  background: linear-gradient(145deg,#1a0520 0,#120415 60%,#0a020f 100%);
  border: 1px solid rgba(255,100,180,.28);
  box-shadow: 0 0 0 1px rgba(255,80,160,.06), inset 0 1px rgba(255,255,255,.08);
  animation: .4s cubic-bezier(.22,1,.36,1) both pfLOCardIn;
  min-width: 200px
}
.pf-logout-flash:not(.show) .pf-logout-flash-card {
  animation: .25s both pfLOCardOut
}
@keyframes pfLOCardIn {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(.92)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
@keyframes pfLOCardOut {
  from {
    opacity: 1
  }
  to {
    opacity: 0;
    transform: translateY(-14px)
  }
}
.pf-lof-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg,#ff5aa0,#c0185a 55%,#7a0a3c);
  box-shadow: 0 0 0 3px rgba(255,80,150,.18), inset 0 1px rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: .4s cubic-bezier(.22,1,.36,1) .08s both pfIconPop
}
.pf-lof-icon {
  font-size: 22px;
  color: #fff;
  font-weight: 900
}
.pf-lof-title {
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -.1px;
  background: linear-gradient(110deg,#fff,#ffb8d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.pf-lof-sub {
  font-size: 9px;
  color: #c06890;
  letter-spacing: .06em
}
.pf-order-status {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(2,6,14,.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .35s,visibility .35s
}
.pf-order-status.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}
.pf-os-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}
.pf-os-celebration i {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  left: calc(var(--i) * 3.6%);
  background: hsl(calc(var(--r)),80%,60%);
  animation: pfConfetti 1.8s cubic-bezier(.25,.46,.45,.94) calc(var(--i) * .04s) both
}
@keyframes pfConfetti {
  0 {
    transform: translateY(0) rotate(0);
    opacity: 1
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0
  }
}
.pf-os-card {
  position: relative;
  overflow: hidden;
  width: min(430px,94vw);
  padding: 34px 26px 28px;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(155deg,#071828 0,#050f1a 55%,#020912 100%);
  border: 1px solid rgba(55,195,255,.32);
  box-shadow: 0 0 0 1px rgba(28,160,255,.07), inset 0 1px rgba(255,255,255,.09);
  animation: .52s cubic-bezier(.22,1,.36,1) both pfOsCardIn
}
@keyframes pfOsCardIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.92)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.pf-os-scene {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center
}
.pf-os-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent
}
.pf-os-ring-1 {
  inset: -8px;
  border-color: rgba(40,185,255,.38);
  animation: 4.5s linear infinite pfOrbit;
  box-shadow: none
}
.pf-os-ring-2 {
  inset: -18px;
  border-color: rgba(80,80,255,.18);
  border-style: dashed;
  animation: 8s linear infinite reverse pfOrbit
}
.pf-os-icon-wrap {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(145deg,#16b8ff,#1c62ff 50%,#6c3fff);
  box-shadow: 0 0 0 3px rgba(22,160,255,.18), inset 0 1px rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: .55s cubic-bezier(.22,1,.36,1) .1s both pfIconPop
}
.pf-os-icon {
  font-size: 28px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  animation: .4s cubic-bezier(.22,1,.36,1) .28s both pfCheckIn
}
.pf-os-kicker {
  letter-spacing: .2em;
  font-size: 8px;
  color: #45d5ff;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 7px;
  opacity: .85
}
.pf-os-title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -.4px;
  background: linear-gradient(110deg,#fff 0,#90e8ff 55%,#b8a8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.pf-os-desc {
  margin: 0 auto 14px;
  max-width: 320px;
  font-size: 13px;
  color: #8aafca;
  line-height: 1.65
}
.pf-os-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 18px
}
.pf-os-badge-text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #2dd8ff;
  text-transform: uppercase
}
.pf-os-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,#1ab8ff,#1860ff);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
  transition: transform .18s,box-shadow .18s;
  position: relative;
  overflow: hidden
}
.pf-os-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform: translateX(-100%);
  transition: transform .45s
}
.pf-os-btn:hover:before {
  transform: translateX(100%)
}
.pf-os-btn:hover {
  transform: translateY(-2px)
}
.pf-os-btn:active {
  transform: translateY(0)
}
.pf-os-btn b {
  font-size: 18px;
  opacity: .8
}
@media (max-width:480px) {
  .pf-login-flash-card {
    padding: 26px 28px 22px;
    min-width: 220px
  }
  .pf-os-card {
    padding: 28px 20px 22px;
    border-radius: 22px
  }
  .pf-os-title {
    font-size: 20px
  }
}
body,
button,
input,
select,
textarea {
  font-family: Outfit,system-ui,-apple-system,sans-serif!important
}
.navlinks a {
  font-size: 13px!important;
  font-weight: 700!important;
  color: rgba(180,200,220,.75)!important;
  letter-spacing: .3px!important;
  transition: color .18s!important
}
.navlinks a:hover {
  color: #fff!important
}
.hero,
.hero:active,
.hero:focus,
.hero:focus-within,
.hero:hover {
  margin-top: 22px!important;
  border-radius: 26px!important;
  border: 1px solid rgba(34,130,200,.2)!important;
  box-shadow: 0 0 0 1px rgba(20,100,180,.08)!important;
  overflow: hidden!important;
  transition: box-shadow .4s,border-color .4s!important
}
.hero-media {
  background: linear-gradient(90deg,rgba(3,9,18,.97) 0,rgba(3,9,18,.78) 38%,rgba(3,9,18,.15) 100%),var(--bg-image) center/cover no-repeat!important;
  -webkit-tap-highlight-color: transparent!important
}
.hero-copy {
  position: relative;
  z-index: 3!important;
  width: min(680px,72%)!important;
  padding: 56px 50px!important
}
.hero h1 {
  font-family: Outfit,sans-serif!important;
  font-size: clamp(36px,5.5vw,62px)!important;
  font-weight: 900!important;
  line-height: .96!important;
  letter-spacing: -2.5px!important;
  margin: 16px 0 13px!important
}
.hero h1 span {
  background: linear-gradient(90deg,#fff 0,#74e8ff 55%,#22c0ff 100%)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  color: transparent!important;
  text-shadow: none!important
}
.hero h1 span[data-type=sub] {
  display: block!important;
  font-size: 20px!important;
  font-weight: 700!important;
  letter-spacing: .5px!important;
  color: rgba(90,210,255,.85)!important;
  background: 0 0!important;
  -webkit-background-clip: unset!important;
  background-clip: unset!important;
  text-shadow: none!important;
  margin-top: 12px!important
}
.hero p {
  font-size: 14px!important;
  color: rgba(190,215,230,.85)!important;
  line-height: 1.72!important;
  max-width: 540px!important;
  margin-bottom: 24px!important
}
.hero-actions .btn.primary {
  padding: 12px 22px!important;
  border-radius: 14px!important;
  background: linear-gradient(135deg,#1ab8ff,#1860ff)!important;
  box-shadow: none!important;
  font-size: 13px!important;
  font-weight: 900!important;
  transition: transform .2s,box-shadow .2s!important
}
.hero-actions .btn.primary:hover {
  transform: translateY(-2px)!important;
  box-shadow: none!important
}
.hero-actions .btn {
  padding: 11px 18px!important;
  border-radius: 14px!important;
  border: 1px solid rgba(34,192,255,.22)!important;
  background: rgba(10,28,48,.7)!important;
  font-size: 13px!important;
  font-weight: 800!important;
  transition: border-color .2s,transform .2s!important
}
.hero-actions .btn:hover {
  border-color: rgba(34,192,255,.5)!important;
  transform: translateY(-1px)!important
}
.dot {
  background: rgba(255,255,255,.22)!important;
  transition: width .28s,border-radius .28s,background .28s!important
}
.dot.active {
  width: 26px!important;
  border-radius: 8px!important;
  background: #22c0ff!important;
  box-shadow: none!important
}
.arrow {
  width: 44px!important;
  height: 44px!important;
  background: 0 0!important;
  border: 1px solid rgba(255,255,255,.05)!important;
  backdrop-filter: none!important;
  transition: background .3s,border-color .3s,color .3s!important;
  font-size: 24px!important;
  color: rgba(255,255,255,.35)!important
}
.arrow:hover {
  background: rgba(255,255,255,.04)!important;
  border-color: rgba(255,255,255,.15)!important;
  color: rgba(255,255,255,.9)!important
}
.title {
  font-family: Outfit,sans-serif!important;
  font-size: 27px!important;
  font-weight: 900!important;
  letter-spacing: -.5px!important
}
.sub {
  font-size: 12px!important;
  color: rgba(130,155,175,.8)!important
}
.offer-box {
  border: 1px solid rgba(30,65,95,.6)!important;
  border-radius: 22px!important;
  background: linear-gradient(155deg,rgba(7,18,30,.97),rgba(4,11,20,.99))!important;
  box-shadow: none!important
}
.checkchip,
.filter {
  border-radius: 99px!important;
  font-family: Outfit,sans-serif!important;
  font-size: 11px!important;
  font-weight: 700!important;
  border: 1px solid rgba(35,80,120,.55)!important;
  background: rgba(8,20,34,.7)!important;
  color: rgba(150,180,200,.8)!important;
  transition: .2s!important
}
.checkchip.active,
.filter.active {
  background: linear-gradient(135deg,#1a9ee8,#1a67f0)!important;
  border-color: rgba(34,192,255,.55)!important;
  color: #fff!important;
  box-shadow: none!important
}
.offer,
.premium-offer {
  border-radius: 18px!important;
  border: 0 !important;
  background: linear-gradient(155deg,#0b1a28 0,#060f1a 100%)!important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset!important;
  transform: translateZ(0) perspective(800px)!important;
  transition: transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s!important;
  will-change: transform!important
}
.offer:hover,
.premium-offer:hover {
  transform: translateY(-8px) rotateX(2deg) translateZ(0) perspective(800px)!important;
  border-color: rgba(34,192,255,.45)!important;
  box-shadow: 0 0 0 1px rgba(34,192,255,.12), inset 0 1px 0 rgba(255,255,255,.08)!important
}
.offer > .offer-media-wrap > .offer-media,
.offer-media {
  border-radius: 12px 12px 0 0!important;
  height: 130px!important;
  object-fit: cover!important;
  width: 100%!important
}
.offer h3 {
  font-family: Outfit,sans-serif!important;
  font-size: 14px!important;
  font-weight: 800!important;
  line-height: 1.3!important;
  color: #edf8ff!important
}
.offer small {
  font-size: 11px!important;
  color: rgba(130,155,175,.8)!important;
  line-height: 1.5!important
}
.price {
  font-family: Outfit,sans-serif!important;
  font-size: 22px!important;
  font-weight: 900!important;
  background: linear-gradient(90deg,#fff,#82e8ff)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  color: transparent!important
}
.game {
  border-radius: 20px!important;
  border: 1px solid rgba(28,60,90,.6)!important;
  background: linear-gradient(155deg,#0a1825,#060f1a)!important;
  transition: transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s!important
}
.game:hover {
  transform: translateY(-6px)!important;
  border-color: rgba(34,192,255,.38)!important;
  box-shadow: none!important
}
.game-body h3 {
  font-family: Outfit,sans-serif!important;
  font-size: 15px!important;
  font-weight: 800!important
}
.support-box {
  border-radius: 22px!important;
  border: 1px solid rgba(28,60,90,.55)!important;
  background: linear-gradient(145deg,rgba(8,20,34,.92),rgba(5,12,22,.96))!important;
  box-shadow: none!important
}
.support-btn.whatsapp {
  border-radius: 14px!important;
  background: linear-gradient(135deg,#22c55e,#15803d)!important;
  box-shadow: none!important;
  transition: transform .2s,box-shadow .2s!important
}
.support-btn.facebook {
  border-radius: 14px!important;
  background: linear-gradient(135deg,#3b82f6,#1d4ed8)!important;
  box-shadow: none!important;
  transition: transform .2s,box-shadow .2s!important
}
.support-btn:hover {
  transform: translateY(-2px)!important
}
footer {
  border-top: 1px solid rgba(34,80,120,.16)!important
}
footer .foot {
  font-size: 11px!important;
  color: rgba(100,130,155,.7)!important
}
#pool.hero .hero-media,
#pool.hero .hero-slide .hero-media {
  background-image: var(--bg-image)!important;
  background-color: transparent!important;
  background-position: center center!important;
  background-size: cover!important;
  background-repeat: no-repeat!important
}
#pool.hero::before {
  content: ""!important;
  display: block!important;
  position: absolute!important;
  z-index: -1!important;
  left: 3%!important;
  right: 3%!important;
  top: 7%!important;
  bottom: 5%!important;
  border-radius: 20px!important;
  pointer-events: none!important;
  background: radial-gradient(ellipse at 18% 52%,rgba(0,196,255,.18),transparent 54%),radial-gradient(ellipse at 50% 48%,rgba(31,157,255,.08),transparent 58%),radial-gradient(ellipse at 82% 50%,rgba(89,82,255,.16),transparent 54%)!important;
  filter: none!important;
  opacity: .68!important;
  animation: 8s ease-in-out infinite alternate liHeroRearHaloStable!important;
  display: none !important
}
#pool.hero::after {
  content: ""!important;
  display: block!important;
  position: absolute!important;
  z-index: -1!important;
  left: 13%!important;
  right: 13%!important;
  bottom: -6px!important;
  height: 16px!important;
  border-radius: 50%!important;
  pointer-events: none!important;
  background: radial-gradient(ellipse at center,rgba(0,190,255,.16) 0,rgba(65,91,255,.08) 42%,transparent 74%)!important;
  filter: none!important;
  opacity: .58!important;
  display: none !important
}
#pool.hero .hero-slide:active,
#pool.hero .hero-slide:focus,
#pool.hero .hero-slide:focus-visible,
#pool.hero:active,
#pool.hero:focus,
#pool.hero:focus-visible {
  outline: 0!important;
  filter: none!important;
  box-shadow: none!important
}
#pool.hero::after,
#pool.hero::before {
  visibility: visible!important;
  animation-play-state: running!important
}
@keyframes liHeroRearHaloStable {
  0,
  100% {
    opacity: .64;
    transform: scale(.995);
    filter: hue-rotate(0)
  }
  50% {
    opacity: .74;
    transform: scale(1.008);
    filter: hue-rotate(8deg)
  }
}
@media (max-width:600px) {
  .hero {
    border-radius: 20px!important
  }
  .hero-copy {
    width: 100%!important;
    padding: 26px 18px 50px!important
  }
  .hero h1 {
    font-size: 32px!important;
    letter-spacing: -1.5px!important
  }
  .offer,
  .premium-offer {
    border-radius: 14px!important
  }
  .offer:hover,
  .premium-offer:hover {
    transform: translateY(-4px) translateZ(0)!important
  }
  .game {
    border-radius: 16px!important
  }
  .support-box {
    border-radius: 18px!important
  }
  #pool.hero .hero-media,
  #pool.hero .hero-slide .hero-media {
    background-image: var(--bg-image)!important;
    background-position: center center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important
  }
  #pool.hero::before {
    left: 3%!important;
    right: 3%!important;
    top: 7%!important;
    bottom: 5%!important;
    filter: none!important;
    opacity: .64!important;
    display: none !important
  }
  #pool.hero::after {
    left: 13%!important;
    right: 13%!important;
    bottom: -6px!important;
    height: 15px!important;
    filter: none!important;
    opacity: .56!important;
    display: none !important
  }
}
@media (max-width:700px) {
  #orders .status-pill {
    font-size: 7px!important;
    padding: 4px 6px!important
  }
  #orders .mini-btn,
  #orders .order-txn-input,
  #orders .upload-mini {
    height: 27px!important;
    min-height: 27px!important;
    font-size: 7px!important;
    padding: 0 4px!important;
    border-radius: 7px!important
  }
  #orders .order-completion-input {
    height: 31px!important;
    min-height: 31px!important;
    font-size: 7px!important;
    padding: 5px!important
  }
}
input.field-error,
select.field-error,
textarea.field-error {
  border-color: #ff3b4e!important;
  background: rgba(255,40,60,.06)!important;
  box-shadow: 0 0 0 3px rgba(255,50,65,.18)!important;
  color: #fff!important;
  outline: 0!important;
  transition: border-color .18s,box-shadow .18s,background .18s!important
}
input.field-error::placeholder,
select.field-error::placeholder,
textarea.field-error::placeholder {
  color: rgba(255,120,130,.6)!important
}
.field-error-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(255,30,50,.08);
  border: 1px solid rgba(255,50,65,.28);
  color: #ff7282;
  font-size: 11px;
  font-weight: 700;
  font-family: Outfit,system-ui,sans-serif;
  line-height: 1.45;
  animation: .28s cubic-bezier(.22,1,.36,1) both errMsgIn
}
@keyframes errMsgIn {
  from {
    opacity: 0;
    transform: translateY(-5px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.field-error-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: .9;
  filter: none
}
.site-footer {
  padding: 30px 0 18px!important
}
.footer-legal-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(55,173,232,.22);
  border-radius: 22px;
  background: radial-gradient(circle at 0 0,rgba(36,169,255,.1),transparent 36%),radial-gradient(circle at 100% 100%,rgba(108,78,255,.08),transparent 32%),linear-gradient(145deg,rgba(8,24,38,.98),rgba(5,13,22,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025)
}
.footer-legal-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  margin-bottom: 17px
}
.footer-kicker {
  font-size: 9px;
  letter-spacing: 2.2px;
  font-weight: 1000;
  color: #51c9ff;
  text-transform: uppercase
}
.footer-legal-heading strong {
  font-size: 19px;
  letter-spacing: -.2px;
  color: #eef9ff
}
.footer-legal-sub {
  font-size: 10px;
  line-height: 1.5;
  color: #7f9aaf
}
.footer-legal-nav {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px
}
.footer-legal-btn {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 16px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 12px;
  border-radius: 15px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(54,102,135,.38);
  background: linear-gradient(145deg,rgba(10,28,43,.96),rgba(7,17,27,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .18s,border-color .18s,box-shadow .18s,background .18s
}
.footer-legal-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(82,193,255,.52);
  box-shadow: none;
  background: linear-gradient(145deg,rgba(12,34,51,.98),rgba(7,18,29,.98))
}
.footer-legal-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(145deg,rgba(28,160,231,.16),rgba(77,91,255,.12));
  border: 1px solid rgba(67,190,250,.17);
  font-size: 15px
}
.footer-legal-btn b {
  display: block;
  font-size: 11px;
  color: #eaf8ff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.footer-legal-btn small {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  color: #7892a8;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.footer-legal-btn i {
  font-style: normal;
  font-size: 15px;
  color: #59ceff;
  text-align: right
}
@media (max-width:700px) {
  .footer-legal-card {
    padding: 17px 14px;
    border-radius: 18px
  }
  .footer-legal-heading {
    margin-bottom: 13px
  }
  .footer-legal-heading strong {
    font-size: 16px
  }
  .footer-legal-sub {
    font-size: 9px
  }
  .footer-legal-nav {
    grid-template-columns: 1fr;
    gap: 8px
  }
  .footer-legal-btn {
    padding: 11px 10px
  }
}
#offerModal .vip-level-grid {
  gap: 7px!important;
  max-height: none!important;
  overflow: visible!important;
  overflow-y: visible!important
}
#offerModal .vip-showcase {
  overflow: visible!important
}
.status-pill.refund {
  border: 1px solid #d97706
}
.admin-status-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px
}
.admin-status-btn {
  flex: 1;
  min-width: 70px;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: .18s;
  text-align: center;
  -webkit-tap-highlight-color: transparent
}
.admin-status-btn:hover {
  background: rgba(255,255,255,.12);
  color: #fff
}
.refund-note-input {
  width: 100%;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 11px;
  resize: none;
  min-height: 40px
}
.refund-proof {
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(234,88,12,.35);
  background: rgba(234,88,12,.08);
  padding: 10px
}
.refund-proof-title {
  font-size: 11px;
  font-weight: 800;
  color: #fb923c;
  letter-spacing: .06em;
  margin-bottom: 7px
}
.refund-proof img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .2s
}
.refund-proof img:hover {
  opacity: .88
}
.refund-note {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.05)
}
.status-pill.refund {
  background: linear-gradient(135deg,#b45309,#7c2d12)!important;
  color: #fde68a!important
}
.completion-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
  gap: 7px;
  margin-top: 8px
}
.completion-gallery-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 9px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s,transform .15s
}
.completion-gallery-img:active,
.completion-gallery-img:hover {
  border-color: #2bd4ff;
  transform: scale(1.03)
}
.completion-proof-title {
  font-size: 11px;
  font-weight: 800;
  color: #6ee7b7;
  letter-spacing: .06em;
  margin-bottom: 6px
}
#imgLightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s,visibility .22s
}
#imgLightbox.show {
  opacity: 1;
  visibility: visible
}
#imgLightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: none
}
#imgLightboxClose {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  background: 0 0;
  border: none;
  line-height: 1;
  opacity: .8;
  transition: opacity .15s
}
#imgLightboxClose:hover {
  opacity: 1
}
.category-order-item {
  position: relative;
  user-select: none;
  -webkit-user-select: none
}
.category-order-item.drag-active {
  opacity: .45
}
.order-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0
}
.order-item-name {
  font-size: 12px;
  font-weight: 800;
  color: #e2f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.order-item-price {
  font-size: 11px;
  font-weight: 700;
  color: #4ade80
}
.saved-price b {
  font-size: 15px!important;
  font-weight: 900!important
}
.premium-section-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0 0 11px;
  color: #fff;
  position: relative
}
.premium-heading-orb {
  flex: 0 0 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff 0 10%,#6ef2ff 21%,#27b6ff 47%,#7b5cff 72%,transparent 73%);
  animation: 2.6s ease-in-out infinite premiumOrbPulse
}
.premium-heading-text {
  line-height: 1;
  font-weight: 1000;
  background: linear-gradient(90deg,#fff,#76e9ff 25%,#7f78ff 55%,#ff77b6 77%,#ffd56a);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: 5.8s ease-in-out infinite premiumHeadingFlow;
  white-space: nowrap
}
.premium-heading-line {
  height: 1px;
  flex: 1;
  min-width: 25px;
  background: linear-gradient(90deg,rgba(58,205,255,.7),rgba(132,98,255,.3),transparent);
  position: relative;
  overflow: hidden
}
.premium-heading-line:after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation: 4.3s ease-in-out infinite premiumLineSweep
}
.premium-heading-chip {
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 1px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg,#ff456b,#9b5cff 56%,#1fc8ff);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  transform: translateY(-1px)
}
.offer-search-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: calc(74px +4vh) 18px 28px
}
.offer-search-modal.show {
  display: flex;
  animation: .22s searchModalIn
}
.offer-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,7,12,.74);
  backdrop-filter: none
}
.offer-search-panel {
  position: relative;
  width: min(760px,100%);
  max-height: min(78vh,720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(83,204,255,.3);
  border-radius: 24px;
  background: linear-gradient(150deg,rgba(10,24,37,.98),rgba(7,15,28,.98) 58%,rgba(22,13,37,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08)
}
.offer-search-panel:before {
  content: "";
  position: absolute;
  inset: -35% -10%;
  pointer-events: none;
  background: conic-gradient(from 180deg,transparent,rgba(43,215,255,.09),transparent 28%,rgba(137,97,255,.08),transparent 56%,rgba(255,97,169,.06),transparent 76%);
  filter: none;
  animation: 9s linear infinite searchAura;
  display: none !important
}
.offer-search-field,
.offer-search-head,
.offer-search-results {
  position: relative;
  z-index: 1
}
.offer-search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 24px 24px 14px
}
.offer-search-kicker {
  font-size: 8px;
  letter-spacing: 2px;
  color: #6fe9ff;
  font-weight: 1000
}
.offer-search-head h2 {
  margin: 4px 0 5px;
  font-size: 27px;
  letter-spacing: -.7px;
  background: linear-gradient(90deg,#fff,#76eaff,#9b7cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.offer-search-head p {
  margin: 0;
  color: #7e92a8;
  font-size: 11px
}
.offer-search-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(90,197,239,.25);
  background: rgba(255,255,255,.035);
  color: #cceaff;
  font-size: 23px;
  cursor: pointer;
  transition: .2s
}
.offer-search-close:hover {
  transform: rotate(6deg) scale(1.05);
  border-color: #65ddff;
  box-shadow: none
}
.offer-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 22px 15px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid rgba(69,193,255,.3);
  background: linear-gradient(135deg,rgba(8,26,40,.98),rgba(18,18,41,.98));
  box-shadow: none
}
.offer-search-field:focus-within {
  border-color: #6de8ff;
  box-shadow: 0 0 0 3px rgba(46,198,255,.08)
}
.offer-search-field-icon {
  font-size: 24px;
  line-height: 1;
  color: #76eaff
}
.offer-search-field input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  background: 0 0;
  color: #fff;
  font-size: 14px
}
.offer-search-field input::placeholder {
  color: #647b90
}
.offer-search-clear {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #ccefff;
  cursor: pointer
}
.offer-search-results {
  overflow: auto;
  padding: 0 14px 16px;
  scrollbar-width: thin
}
.offer-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  margin-bottom: 7px;
  text-align: left;
  border: 1px solid rgba(63,112,145,.24);
  border-radius: 15px;
  background: linear-gradient(145deg,rgba(10,27,41,.82),rgba(10,17,29,.82));
  color: #fff;
  cursor: pointer;
  transition: transform .18s,border-color .18s,box-shadow .18s
}
.offer-search-result:hover {
  transform: translateY(-2px);
  border-color: rgba(73,216,255,.5);
  box-shadow: none
}
.offer-search-thumb {
  width: 62px;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(69,198,255,.2);
  background: #07111a;
  display: block
}
.offer-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
.offer-search-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px
}
.offer-search-copy strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.offer-search-copy small {
  font-size: 9px;
  color: #7890a4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.offer-search-price {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #63dcff;
  font-size: 13px;
  font-weight: 1000;
  white-space: nowrap
}
.offer-search-price b {
  font-size: 19px;
  color: #93a6b7
}
.offer-search-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 26px;
  color: #90a6b8
}
.offer-search-empty-orb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%,#fff,#54e4ff 28%,#7d69ff 62%,#ef64ac);
  color: #fff;
  font-size: 21px;
  box-shadow: none;
  animation: 2.8s ease-in-out infinite premiumOrbPulse
}
.offer-search-empty strong {
  color: #eaf8ff;
  font-size: 14px
}
.offer-search-empty small {
  max-width: 350px;
  color: #70889b;
  font-size: 10px;
  line-height: 1.5
}
@keyframes searchModalIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(.985)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
@keyframes searchAura {
  to {
    transform: rotate(360deg)
  }
}
@media (max-width:950px) {
  .offer-sort-row {
    gap: 12px
  }
  .best-deals-heading {
    max-width: none
  }
}
@media (max-width:600px) {
  .offer-sort-row {
    gap: 7px;
    min-height: 38px
  }
  .best-deals-heading {
    gap: 7px;
    max-width: 48vw;
    margin: 0
  }
  .premium-heading-text {
    font-size: 12px;
    letter-spacing: 1.15px
  }
  .premium-heading-line {
    min-width: 14px
  }
  .premium-heading-chip {
    display: none
  }
  .offer-search-modal {
    padding: 70px 9px 12px
  }
  .offer-search-panel {
    border-radius: 20px;
    max-height: 84vh
  }
  .offer-search-head {
    padding: 19px 17px 12px
  }
  .offer-search-head h2 {
    font-size: 22px
  }
  .offer-search-head p {
    font-size: 9px
  }
  .offer-search-close {
    width: 32px;
    height: 32px;
    font-size: 20px
  }
  .offer-search-field {
    margin: 0 13px 10px
  }
  .offer-search-field input {
    height: 48px;
    font-size: 12px
  }
  .offer-search-results {
    padding: 0 8px 10px
  }
  .offer-search-result {
    grid-template-columns: 56px minmax(0,1fr) auto;
    gap: 9px;
    padding: 8px
  }
  .offer-search-thumb {
    width: 56px;
    height: 37px
  }
  .offer-search-copy strong {
    font-size: 11px
  }
  .offer-search-copy small {
    font-size: 8px
  }
  .offer-search-price {
    font-size: 11px;
    gap: 4px
  }
  .offer-search-price b {
    font-size: 16px
  }
  .selected-offers-section {
    margin-top: 18px!important
  }
  .latest-offers-heading {
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 8px
  }
}
@media (prefers-reduced-motion:reduce) {
  .nav-search-btn *,
  .offer-search-empty-orb,
  .offer-search-panel:before,
  .premium-section-heading * {
    animation: none!important
  }
  .nav-search-btn,
  .offer-search-result {
    transition: none!important
  }
}
.premium-heading-orb {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  box-shadow: none
}
.premium-section-heading {
  gap: 11px;
  margin-bottom: 12px
}
.offer-sort-row {
  justify-content: flex-end
}
.best-deals-heading {
  flex: 0 0 auto
}
.best-deals-heading .premium-heading-line {
  flex: 0 0 clamp(28px,5vw,72px)
}
.offer-sort-row .offer-sort-control {
  flex: 0 0 auto
}
.best-deals-heading .premium-heading-line,
.latest-offers-heading .premium-heading-line {
  box-shadow: none
}
.best-deals-heading:after,
.latest-offers-heading:after {
  content: "";
  position: absolute;
  left: -4px;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg,rgba(87,225,255,.18),rgba(157,104,255,.16),transparent 72%);
  filter: none;
  pointer-events: none;
  display: none !important
}
@media (max-width:950px) {
  .premium-heading-text {
    font-size: 15px;
    letter-spacing: 1.7px
  }
  .offer-sort-row {
    justify-content: flex-end;
    gap: 12px;
    padding-right: 2px
  }
}
@media (max-width:600px) {
  .offer-sort-row {
    width: 100%;
    justify-content: flex-end;
    gap: 11px;
    min-height: 42px;
    padding-right: 2px
  }
  .best-deals-heading {
    flex: 0 0 auto;
    max-width: none;
    gap: 8px
  }
  .premium-heading-text {
    font-size: 14px;
    letter-spacing: 1.35px
  }
  .premium-heading-orb {
    width: 10px;
    height: 10px;
    flex-basis: 10px
  }
  .best-deals-heading .premium-heading-line {
    width: 30px;
    flex-basis: 30px;
    min-width: 30px
  }
  .latest-offers-heading {
    gap: 8px
  }
  .latest-offers-heading .premium-heading-line {
    min-width: 22px
  }
}
.offer-sort-row {
  display: grid!important;
  grid-template-columns: minmax(0,1fr) auto!important;
  align-items: center!important;
  width: 100%!important;
  gap: 18px!important;
  margin: 0 0 12px!important;
  padding: 0 8px 0 14px!important
}
.best-deals-heading {
  justify-self: start!important;
  margin: 0!important;
  max-width: none!important
}
.offer-sort-row .offer-sort-control {
  justify-self: end!important;
  margin: 0!important
}
.premium-heading-text {
  font-size: 17px!important;
  letter-spacing: 1.7px!important
}
.best-deals-heading .premium-heading-line {
  width: clamp(34px,7vw,90px)!important;
  flex-basis: clamp(34px,7vw,90px)!important
}
.hero-nav {
  gap: 7px!important;
  align-items: center!important
}
.hero-nav .dot.active {
  background: #48d7ff!important;
  box-shadow: none!important
}
.hero-welcome-slide {
  cursor: default!important
}
@media (max-width:600px) {
  .offer-sort-row {
    grid-template-columns: minmax(0,1fr) auto!important;
    gap: 8px!important;
    padding: 0 8px 0 16px!important;
    margin-top: -6px!important;
    margin-bottom: 4px!important;
    min-height: 35px!important
  }
  .premium-heading-text {
    font-size: 15px!important;
    letter-spacing: 1.5px!important
  }
  .best-deals-heading .premium-heading-line {
    width: 24px!important;
    flex-basis: 24px!important;
    min-width: 24px!important
  }
  .offer-sort-row .offer-sort-control {
    justify-self: end!important
  }
  .hero-nav {
    bottom: 10px!important
  }
  #offers {
    margin-top: 18px!important
  }
  #offerFilters {
    padding-top: 2px!important;
    padding-bottom: 4px!important
  }
}
.hero-nav .dot,
.hero-nav .dot.active {
  width: 5px!important;
  height: 5px!important;
  min-width: 5px!important;
  border-radius: 50%!important
}
.offer-sort-row {
  margin-top: -9px!important;
  min-height: 32px!important;
  margin-bottom: -10px!important
}
body.admin-premium #offers .offer-basics-compact > .admin-access-field .access-toggle {
  height: 39px!important;
  min-height: 39px!important
}
body.admin-premium #offers .offer-basics-compact > .vpn-conditional {
  grid-column: 1/-1!important;
  grid-row: 3!important
}
body.admin-premium #offers .offer-basics-compact > .admin-old-price-field {
  grid-column: 1!important;
  grid-row: 4!important
}
body.admin-premium #offers .offer-basics-compact > .admin-price-field {
  grid-column: 2!important;
  grid-row: 4!important
}
@media (max-width:700px) {
  body.admin-premium #offers .offer-basics-compact > .admin-name-field {
    grid-column: 1!important;
    grid-row: auto!important
  }
  body.admin-premium #offers .offer-basics-compact > .admin-access-field {
    grid-column: 2!important;
    grid-row: auto!important
  }
  body.admin-premium #offers .offer-basics-compact > .vpn-conditional {
    grid-column: 1/-1!important;
    grid-row: auto!important
  }
  body.admin-premium #offers .offer-basics-compact > .admin-old-price-field,
  body.admin-premium #offers .offer-basics-compact > .admin-price-field {
    grid-row: auto!important
  }
}
@media (max-width:600px) {
  .offer-sort-row {
    margin-top: -9px!important;
    min-height: 31px!important;
    margin-bottom: -10px!important
  }
}
.brand {
  display: flex!important;
  align-items: center!important;
  gap: 20px!important;
  text-decoration: none!important;
  position: relative;
  overflow: visible
}
@keyframes wFloat4tilt {
  0,
  100% {
    transform: translateY(0) rotate(8deg)
  }
  25% {
    transform: translateY(-2px) rotate(9deg)
  }
  55% {
    transform: translateY(-1px) rotate(7.5deg)
  }
  80% {
    transform: translateY(-2px) rotate(8.5deg)
  }
}
@media (max-width:650px) {
  .brand {
    gap: 12px!important;
    overflow: hidden
  }
}
#offerGrid .offer-countdown-overlay {
  position: relative!important;
  left: auto!important;
  right: auto!important;
  top: auto!important;
  bottom: auto!important;
  transform: none!important;
  width: 100%!important;
  min-width: 0!important;
  max-width: none!important;
  margin: 0 0 8px!important;
  box-sizing: border-box!important;
  z-index: 20!important;
  display: block!important
}
#offerGrid .offer-countdown-overlay span {
  display: block!important
}
#offerGrid .offer-countdown-overlay b {
  display: block!important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}
.offer-countdown-overlay,
.offer-countdown-overlay::after,
.offer-countdown-overlay::before {
  box-shadow: none!important;
  filter: none!important
}
.profile-crop-modal {
  z-index: 10080!important;
  background: rgba(1,5,10,.84)!important;
  backdrop-filter: none!important;
  touch-action: none
}
.profile-crop-box {
  position: relative;
  width: min(430px,calc(100vw - 20px));
  padding: 24px 18px 16px;
  border: 1px solid rgba(82,194,255,.28);
  border-radius: 24px;
  background: linear-gradient(145deg,#071523,#040c14);
  box-shadow: none;
  color: #eaf8ff;
  text-align: center
}
.profile-crop-close {
  top: 8px!important;
  right: 8px!important
}
.profile-crop-kicker {
  font-size: 8px;
  letter-spacing: .22em;
  color: #57ceff;
  font-weight: 1000
}
.profile-crop-box h2 {
  margin: 5px 0 4px;
  font-size: 21px
}
.profile-crop-box > p {
  margin: 0 auto 14px;
  color: #7895a8;
  font-size: 10px;
  line-height: 1.5;
  max-width: 300px
}
.profile-crop-stage {
  width: 320px;
  height: 320px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(95,201,255,.25);
  background: #08131d;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  touch-action: none;
  cursor: grab
}
.profile-crop-stage:active {
  cursor: grabbing
}
.profile-crop-stage canvas {
  display: block;
  width: 320px;
  height: 320px
}
.profile-crop-control {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px auto 11px;
  width: 320px;
  color: #83a7ba;
  font-size: 16px
}
.profile-crop-control input {
  flex: 1;
  accent-color: #38bfff
}
.profile-crop-actions {
  display: flex;
  gap: 8px;
  justify-content: center
}
.profile-crop-actions .btn {
  min-width: 110px
}
.profile-status-alert {
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(90,205,255,.34);
  background: linear-gradient(145deg,rgba(16,66,91,.34),rgba(14,28,51,.5));
  box-shadow: 0 0 0 1px rgba(77,201,255,.06);
  animation: 1.7s ease-in-out infinite profileStatusPulse
}
.profile-status-alert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  font-size: 7px;
  letter-spacing: .08em;
  color: #7fe0ff;
  margin-bottom: 4px
}
.profile-status-alert-top b {
  font-size: 6px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(55,194,255,.1);
  color: #a8ecff
}
.profile-status-alert strong {
  display: block;
  font-size: 10px;
  color: #f2fbff;
  margin-bottom: 3px
}
.profile-status-alert > span {
  display: block;
  font-size: 7px;
  color: #8faabc;
  line-height: 1.4
}
.profile-status-alert > small {
  display: block;
  font-size: 6.5px;
  color: #718c9f;
  margin-top: 4px
}
.profile-status-alert-order {
  margin-top: 7px
}
.profile-status-alert-order .customer-order-card {
  box-shadow: none!important
}
.profile-status-more {
  text-align: center;
  padding: 5px;
  color: #74c9e8;
  font-size: 7px
}
@media (max-width:560px) {
  .profile-crop-box {
    padding: 20px 10px 14px
  }
  .profile-crop-control,
  .profile-crop-stage {
    width: min(320px,calc(100vw - 70px))
  }
  .profile-crop-stage {
    height: min(320px,calc(100vw - 70px))
  }
  .profile-crop-stage canvas {
    width: 100%;
    height: 100%
  }
}
#loginModal {
  overflow: hidden!important;
  overscroll-behavior: none!important;
  touch-action: none!important;
  align-items: flex-start!important
}
#loginModal .premium-auth-card {
  max-height: calc(100vh - 24px)!important;
  overflow-y: auto!important;
  overflow-x: hidden!important;
  overscroll-behavior: contain!important;
  touch-action: pan-y!important;
  margin: 0 auto
}
#profileModal {
  overflow: hidden!important;
  overscroll-behavior: none!important;
  touch-action: none!important
}
#profileModal .premium-profile-box {
  overflow-y: auto!important;
  overflow-x: hidden!important;
  overscroll-behavior: contain!important;
  touch-action: pan-y!important;
  max-height: 84vh!important
}
#profileCropModal {
  overflow: hidden!important;
  overscroll-behavior: none!important;
  touch-action: none!important
}
.profile-crop-stage,
.profile-crop-stage canvas {
  touch-action: none!important;
  -webkit-user-select: none!important;
  user-select: none!important;
  -webkit-touch-callout: none!important
}
#profileModal .profile-hero {
  padding: 11px 12px 9px!important
}
#profileModal .profile-avatar-wrap {
  width: 64px!important;
  height: 64px!important;
  margin: 0 auto 6px!important
}
#profileModal .profile-avatar {
  width: 64px!important;
  height: 64px!important
}
#profileModal .profile-avatar-wrap::before {
  inset: -5px!important
}
#profileModal .profile-avatar-change {
  margin-top: 5px!important;
  padding: 5px 9px!important;
  font-size: 8px!important;
  min-height: 26px!important
}
#profileModal .profile-name-row {
  margin-top: 0!important;
  gap: 7px!important
}
#profileModal .profile-name-row h2 {
  font-weight: 1000!important;
  text-shadow: none!important;
  font-size: 18px!important
}
#profileModal .profile-name-edit {
  padding: 6px 8px!important;
  border-radius: 9px!important
}
#profileModal .profile-stats {
  margin: 7px 0 0!important;
  gap: 6px!important
}
#profileModal .profile-stat-card {
  padding: 8px 5px!important;
  min-height: 62px!important
}
#profileModal .profile-stat-icon {
  font-size: 11px!important
}
#profileModal .profile-stats b {
  font-size: 15px!important
}
#profileModal .profile-stats small {
  font-size: 8px!important
}
#profileModal .profile-level-strip {
  margin-top: 7px!important;
  padding: 8px 10px!important
}
#profileModal .profile-level-rank {
  font-size: 7px!important
}
#profileModal .profile-level-main strong {
  font-size: 11px!important
}
#profileModal .profile-level-next {
  font-size: 8px!important
}
#profileModal .profile-order-status {
  margin-top: 7px!important;
  padding: 10px!important
}
#profileModal .profile-order-status-head strong {
  font-size: 12px!important
}
#profileModal .profile-order-sub {
  font-size: 8px!important
}
#profileModal .profile-active-badge {
  font-size: 8px!important;
  padding: 4px 7px!important
}
#profileModal .profile-orders-list {
  gap: 7px!important;
  max-height: 205px!important
}
#profileModal .customer-order-card {
  padding: 11px!important;
  border-radius: 13px!important
}
#profileModal .customer-order-head strong {
  font-size: 11px!important
}
#profileModal .customer-order-head small {
  font-size: 7px!important
}
#profileModal .customer-order-meta {
  gap: 9px!important;
  margin-top: 8px!important;
  font-size: 8.5px!important;
  line-height: 1.35!important
}
#profileModal .customer-order-note {
  margin-top: 8px!important;
  padding: 8px 9px!important;
  font-size: 8.5px!important;
  line-height: 1.4!important
}
#profileModal .status-pill {
  font-size: 8px!important;
  padding: 4px 7px!important
}
#profileModal .profile-completed-btn {
  height: 38px!important;
  font-size: 9px!important
}
#profileModal .profile-completed-orders {
  max-height: 195px!important
}
.hero-welcome-media {
  background-image: var(--bg-image)!important;
  background-position: center center!important;
  background-size: cover!important;
  background-repeat: no-repeat!important
}
@media (max-width:768px) {
  .hero .arrow,
  .hero-actions .btn,
  .modal::after,
  .modal::before {
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
  .highlight-card,
  .nav-avatar,
  .profile-avatar,
  .selected-offer-card,
  .vip-tier-icon {
    filter: none!important
  }
  .animated-li-mark::before,
  .cat::before {
    animation: none!important;
    filter: none!important
  }
  #offerFilters .filter::after,
  #offerGrid .offer::after {
    display: none!important;
    content: none!important
  }
  #heroHighlights .selected-offer-card,
  #offerGrid .offer,
  .profile-avatar-wrap,
  .profile-hero {
    -webkit-backdrop-filter: none!important;
    backdrop-filter: none!important
  }
  #offerGrid .offer {
    content-visibility: auto;
    contain-intrinsic-size: 0 430px
  }
}
@media (max-width:600px) {
  #profileModal .premium-profile-box {
    width: min(390px,94vw)!important;
    max-height: 86vh!important;
    padding: 7px!important
  }
  #profileModal .profile-hero {
    padding: 10px 9px 8px!important
  }
  #profileModal .profile-avatar,
  #profileModal .profile-avatar-wrap {
    width: 60px!important;
    height: 60px!important
  }
  #profileModal .profile-name-row h2 {
    font-size: 17px!important
  }
  #profileModal .profile-stats b {
    font-size: 16px!important
  }
  #profileModal .profile-stats small {
    font-size: 8px!important
  }
  #profileModal .customer-order-head strong {
    font-size: 11px!important
  }
  #profileModal .customer-order-meta,
  #profileModal .customer-order-note {
    font-size: 8.5px!important
  }
  .hero-welcome-media {
    background-position: center center!important;
    background-size: cover!important
  }
  .login-modal {
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
  .premium-auth-card {
    background: #06101a!important
  }
  .login-modal.show .premium-auth-logo {
    animation: none!important
  }
  .premium-auth-card:after {
    display: none!important
  }
}
.login-modal .email-mode-btn::after,
.login-modal .email-mode-btn::before,
.login-modal .login-modal .premium-methods::before,
.login-modal .premium-auth-card::after,
.login-modal .premium-auth-card::before,
.login-modal .premium-auth-panel-wrap::after,
.login-modal .premium-auth-panel-wrap::before,
.login-modal .premium-main-btn::after,
.login-modal .premium-main-btn::before,
.login-modal .premium-method::after,
.login-modal .premium-method::before,
.login-modal .premium-verify-btn::after,
.login-modal .premium-verify-btn::before {
  display: none!important;
  content: none!important;
  animation: none!important
}
.premium-auth-logo {
  animation: none!important
}
.hero-slide,
.offer,
.selected-offer-card {
  will-change: transform,opacity;
  transform: translateZ(0);
  backface-visibility: hidden
}
.offer {
  contain: layout style
}
@media (max-width:900px) {
  .animated-li-mark::after,
  .animated-li-mark::before,
  .brand-logo.animated-li-mark::before,
  .cat::before,
  .premium-auth-card::before,
  .vip-showcase-title::after {
    animation: none!important
  }
  #offerGrid .offer {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px
  }
  *,
  ::after,
  ::before {
    backdrop-filter: none!important;
    -webkit-backdrop-filter: none!important
  }
  .order-received-overlay,
  .pf-order-status,
  .profile-crop-modal {
    background: rgba(2,7,14,.94)!important
  }
}
@media (max-width:1200px) {
  .animated-li-mark::before {
    animation-duration: 12s!important
  }
  .cat::before {
    animation-duration: 18s!important
  }
}
@media (prefers-reduced-motion:reduce) {
  *,
  ::after,
  ::before {
    animation-duration: NaNs!important;
    animation-iteration-count: 1!important;
    transition-duration: NaNs!important;
    scroll-behavior: auto!important
  }
}
.cat,
.hero-slide,
.offer,
.premium-method {
  touch-action: manipulation
}
img[loading=lazy] {
  content-visibility: auto
}
.modal {
  transform: translateZ(0);
  will-change: opacity,visibility
}
#offerGrid,
.category-filter-wrap {
  touch-action: pan-y
}
#offerGrid .offer:not(:hover) {
  will-change: auto
}
body::before {
  display: none!important;
  content: none!important
}
#pool .hero-media,
.hero-media,
.hero-slide .hero-media {
  transform: none!important
}
#cartModal:not(.show) *,
#loginModal:not(.show) *,
#offerModal:not(.show) *,
#profileModal:not(.show) * {
  animation-play-state: paused!important
}
#offerGrid .offer {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px
}
.order-received-overlay:not(.show) * {
  animation-play-state: paused!important
}
@media (max-width:900px) {
  .offer:hover,
  .premium-offer:hover {
    transform: translateY(-3px) translateZ(0)!important;
    box-shadow: none!important
  }
  .offers {
    perspective: none!important
  }
  .offer,
  .premium-offer {
    transform: translateZ(0)!important;
    box-shadow: none!important
  }
  html {
    scroll-behavior: auto!important
  }
}
@media (hover:none) and (pointer:coarse),
(max-width:960px) {
  .premium-heading-orb {
    animation: none!important;
    transform: scale(1)!important;
    opacity: .7!important
  }
  .premium-heading-line::after,
  .premium-heading-line::before {
    animation: none!important;
    transform: none!important
  }
  .offer-search-panel::before {
    animation: none!important;
    opacity: 0!important
  }
  .vip-level-card::after {
    animation: none!important
  }
  .top *,
  header * {
    animation-iteration-count: 1!important
  }
}
#offerModal .offer-modal-box,
#profileModal .premium-profile-box,
.modal-box {
  position: relative!important
}
#offerModal .offer-modal-close,
#profileModal .profile-close,
.modal .close {
  position: sticky!important;
  top: 10px!important;
  float: right!important;
  margin-top: 0!important;
  margin-bottom: -36px!important;
  margin-right: 0!important;
  z-index: 9999!important;
  transition: opacity .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1),background .2s,border-color .2s,box-shadow .2s!important;
  will-change: opacity,transform
}
#profileModal .profile-close {
  top: 8px!important;
  margin-bottom: -31px!important
}
.custom-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  width: max-content;
  background: linear-gradient(145deg,#2a2d3e,#1a1c29);
  padding: 6px 16px;
  border-radius: 40px;
  border: 1px solid rgba(0,255,136,.4);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  gap: 10px
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: .5;
  transition: .4s cubic-bezier(.4,0,.2,1);
  z-index: 1
}
.step-item.active {
  opacity: 1;
  transform: scale(1.1)
}
.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(0,0,0,.5));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
  transition: .4s;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.1)
}
.step-item.active .step-circle {
  background: linear-gradient(135deg,#0f8 0,#00b8ff 100%);
  color: #000;
  box-shadow: none;
  border: none;
  animation: 2s infinite pulse-glow-3d
}
.step-label {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  color: #aaa
}
.step-item.active .step-label {
  color: #fff;
  text-shadow: none
}
.step-line {
  width: 20px;
  height: 4px;
  background: #333;
  position: relative;
  top: -10px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none
}
.step-item.active + .step-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg,#0f8,#00b8ff);
  animation: 1.5s linear infinite line-flow-3d;
  box-shadow: none
}
@keyframes line-flow-3d {
  0 {
    transform: translateX(-100%)
  }
  100% {
    transform: translateX(200%)
  }
}
@keyframes gWordDrop {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(.85)
  }
  60% {
    opacity: 1;
    transform: translateY(2px) scale(1.03)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
@keyframes gHueRotate {
  0%,
  100% {
    filter: hue-rotate(0deg) brightness(1.05)
  }
  50% {
    filter: hue-rotate(180deg) brightness(1.2)
  }
}
@keyframes gBarSweep {
  0% {
    background-position: 0 50%
  }
  100% {
    background-position: 100% 50%
  }
}
.brand-gaming-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-left: 5px;
  position: relative;
  flex-shrink: 0
}
.gaming-letters-row {
  display: inline-block;
  font-family: Outfit,Inter,sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 3.5px;
  line-height: 1;
  color: gold;
  opacity: 1;
  text-shadow: none;
  animation: 7s linear infinite gHueRotate
}
.gaming-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg,transparent 0,transparent 18%,gold 25%,#ff4d6d 35%,#c77dff 43%,#00cfff 50%,#00e5a0 57%,#ff9a3c 65%,transparent 78%,transparent 100%);
  background-size: 400% 100%;
  animation: 4.5s linear infinite gBarSweep
}
.gaming-bar-top {
  margin-bottom: 2.5px
}
.gaming-bar-bot {
  margin-top: 2.5px;
  animation-delay: -2.25s
}
@media (max-width:600px) {
  #offerModal .offer-modal-close {
    top: 7px!important;
    margin-bottom: -33px!important
  }
  #profileModal .profile-close {
    top: 7px!important;
    margin-bottom: -30px!important
  }
  .top .brand {
    max-width: none!important;
    flex: 0 0 auto!important
  }
  .brand-gaming-text {
    margin-left: 4px;
    display: flex!important
  }
  .gaming-letters-row {
    font-size: 14px;
    letter-spacing: 2.2px;
    opacity: 1!important
  }
  .gaming-bar-top {
    margin-bottom: 2px
  }
  .gaming-bar-bot {
    margin-top: 2px
  }
}
#offerModal .offer-qty-slider-wrap {
  display: flex!important;
  align-items: center!important;
  gap: 8px!important;
  width: 100%!important;
  min-width: 0!important
}
#offerModal .offer-qty-items {
  display: flex!important;
  flex: 1 1 auto!important;
  align-items: stretch!important;
  justify-content: center!important;
  gap: 8px!important;
  min-width: 0!important;
  overflow-x: auto!important;
  overflow-y: hidden!important;
  padding: 2px!important;
  scroll-snap-type: x mandatory!important;
  scrollbar-width: none!important
}
#offerModal .offer-qty-items::-webkit-scrollbar {
  display: none!important
}
#offerModal .offer-qty-item {
  flex: 0 0 86px!important;
  width: 86px!important;
  min-width: 86px!important;
  max-width: 86px!important;
  box-sizing: border-box!important;
  scroll-snap-align: center!important
}
#offerModal .offer-qty-icon {
  flex: 0 0 38px!important
}
#offerModal .offer-qty-item > span {
  display: block!important;
  width: 100%!important;
  line-height: 1.15!important;
  white-space: normal!important
}
#offerModal .offer-qty-item > b {
  display: flex!important;
  align-items: baseline!important;
  justify-content: center!important;
  width: 100%!important;
  line-height: 1.05!important
}
#offerModal .qty-nav {
  flex: 0 0 34px!important;
  width: 34px!important;
  height: 48px!important;
  min-width: 34px!important
}
#offerModal .qty-nav.is-hidden {
  visibility: hidden!important;
  opacity: 0!important;
  pointer-events: none!important
}
#offerModal .offer-detail-strip {
  display: grid!important;
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  gap: 7px!important;
  width: 100%!important
}
#offerModal .offer-detail-strip > div {
  min-width: 0!important;
  width: 100%!important
}
#offerModal .offer-detail-strip > div:last-child {
  grid-column: auto!important
}
#offerModal .offer-detail-strip b {
  overflow-wrap: anywhere!important
}
@media (max-width:600px) {
  #offerModal .offer-qty-items {
    justify-content: flex-start!important;
    gap: 7px!important
  }
  #offerModal .offer-qty-item {
    flex-basis: 78px!important;
    width: 78px!important;
    min-width: 78px!important;
    max-width: 78px!important;
    min-height: 88px!important
  }
  #offerModal .offer-qty-icon {
    flex-basis: 34px!important;
    width: 34px!important;
    height: 34px!important
  }
  #offerModal .offer-qty-icon .icon-inline,
  #offerModal .offer-qty-icon img {
    width: 30px!important;
    height: 30px!important
  }
  #offerModal .qty-nav {
    flex-basis: 30px!important;
    width: 30px!important;
    min-width: 30px!important;
    height: 42px!important
  }
  #offerModal .offer-detail-strip {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
    gap: 6px!important
  }
  #offerModal .offer-detail-strip > div:last-child {
    grid-column: 1/-1!important
  }
}
body.admin-premium .highlight-slot-status {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(62,221,150,.28);
  border-radius: 11px;
  background: rgba(11,31,24,.72);
  color: #67f2b2;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px
}
#offerModal .offer-qty-item {
  min-height: 60px!important;
  height: auto!important;
  padding-bottom: 6px!important
}
#offerModal .offer-qty-list {
  min-height: auto!important;
  height: auto!important
}
#offerModal .offer-qty-slider-wrap {
  min-height: auto!important;
  height: auto!important;
  padding-bottom: 2px!important
}
#offerModal .offer-qty-icon {
  flex: 0 0 40px!important;
  width: 40px!important;
  height: 40px!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important
}
#offerModal .offer-qty-icon .icon-inline,
#offerModal .offer-qty-icon img {
  object-fit: contain!important;
  object-fit: contain!important;
  width: 36px!important;
  height: 36px!important;
  max-width: 100%!important;
  max-height: 100%!important;
  object-fit: contain!important
}
body.offer-modal-open {
  overflow: hidden!important;
  touch-action: none!important;
  overscroll-behavior: none
}
#offerFilters .filter.active,
.checkchip.active {
  background: linear-gradient(to bottom,#24b0ff,#0a66c2)!important;
  border-color: #0d84e8!important;
  color: #fff!important;
  text-shadow: none!important;
  box-shadow: none!important
}
/* ═══════════════════════════════════════════════════════════════
   LI GAMING — First-Open Premium Services Hub
   ═══════════════════════════════════════════════════════════════ */
.service-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(1,6,12,.76);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.service-intro-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.service-intro-open {
  overflow: hidden;
}
.service-intro-backdrop {
  position: absolute;
  inset: 0;
}
.service-intro-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 28px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid rgba(84,197,255,.24);
  border-radius: 24px;
  background: linear-gradient(145deg,#07131e 0%,#06101a 52%,#07101b 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.045);
  color: #eef9ff;
}
.service-intro-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(121,192,225,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  color: #c7e5f4;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.service-intro-head {
  padding-right: 44px;
  margin-bottom: 16px;
}
.service-intro-kicker,
.service-detail-kicker {
  display: block;
  margin-bottom: 4px;
  color: #58cfff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .26em;
}
.service-intro-head h2 {
  margin: 0;
  font-size: clamp(22px,4vw,32px);
  line-height: 1.08;
  letter-spacing: .04em;
}
.service-intro-head p {
  margin: 8px 0 0;
  color: #8ca8b9;
  font-size: 12px;
  line-height: 1.45;
}
.service-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
}
.service-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 11px;
  border: 1px solid rgba(60,145,183,.2);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(10,29,43,.94),rgba(7,19,30,.92));
  color: #f2fbff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.service-card:hover {
  transform: translateY(-1px);
  border-color: rgba(68,191,244,.45);
  background: linear-gradient(145deg,rgba(11,35,53,.98),rgba(7,22,34,.95));
}
.service-card:active { transform: translateY(0); }
.service-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(76,183,232,.22);
  border-radius: 12px;
  background: radial-gradient(circle at 35% 30%,rgba(55,199,255,.18),rgba(55,199,255,.035) 60%,transparent 70%);
  color: #7edfff;
  font-size: 20px;
  font-weight: 900;
}
.service-card > span:nth-child(2) { min-width: 0; }
.service-card b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}
.service-card small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #7d97a9;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.service-card i {
  color: #5c9db7;
  font-size: 22px;
  font-style: normal;
}
.service-detail[hidden] { display: none; }
.service-detail {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(66,177,223,.18);
  border-radius: 16px;
  background: rgba(4,13,22,.72);
}
.service-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.service-back {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(102,183,218,.19);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #bfe9f9;
  font-size: 22px;
  cursor: pointer;
}
.service-detail-head h3 {
  margin: 0;
  font-size: 15px;
}
.service-detail-list {
  display: grid;
  gap: 7px;
}
.service-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(72,153,191,.14);
  border-radius: 11px;
  background: rgba(7,21,33,.72);
}
.service-price-row strong { font-size: 11px; color: #eefbff; }
.service-price-row span { font-size: 11px; font-weight: 900; color: #ffd45f; white-space: nowrap; }
.service-note {
  margin: 8px 2px 0;
  color: #7c95a5;
  font-size: 9px;
  line-height: 1.45;
}
.service-intro-footer {
  margin-top: 14px;
  text-align: center;
}
.service-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(135deg,#1bbf82,#0f9564);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.service-intro-footer p {
  margin: 8px 0 2px;
  color: #8ea7b6;
  font-size: 10px;
}
.service-intro-footer p strong { color: #eefbff; }
.service-intro-footer small {
  display: block;
  color: #60798b;
  font-size: 8px;
  line-height: 1.4;
}
@media (max-width: 620px) {
  .service-intro-overlay { padding: 10px; }
  .service-intro-card {
    width: min(100%, 520px);
    max-height: calc(100dvh - 20px);
    padding: 16px;
    border-radius: 19px;
  }
  .service-intro-grid { gap: 7px; }
  .service-card {
    grid-template-columns: 34px minmax(0,1fr) 12px;
    gap: 7px;
    padding: 8px;
    border-radius: 13px;
  }
  .service-card-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .service-card b { font-size: 10px; }
  .service-card small { margin-top: 2px; font-size: 7px; }
  .service-card i { font-size: 17px; }
  .service-intro-head { margin-bottom: 10px; }
  .service-intro-head h2 { font-size: 21px; }
  .service-intro-head p { font-size: 9px; }
  .service-intro-close { width: 32px; height: 32px; font-size: 21px; }
}

/* LI GAMING — service detail typography V7 */
.sp-wrap{width:min(1680px,calc(100vw - 40px)) !important;padding:30px 0 70px !important}
.sp-top{margin-bottom:14px !important}
.sp-back{font-size:13px !important;padding:10px 14px !important}
.sp-hero{padding:40px !important;border-radius:30px !important}
.sp-hero-grid{grid-template-columns:180px minmax(0,1fr) !important;gap:30px !important}
.sp-logo-card{width:180px !important;height:180px !important;border-radius:32px !important}
.sp-logo-card img{width:126px !important;height:126px !important}
.sp-logo-card.wide img{width:148px !important}
.sp-logo-card.coc img{width:168px !important;height:168px !important}
.sp-eyebrow{font-size:13px !important;letter-spacing:.25em !important}
.sp-hero h1{font-size:clamp(44px,4.2vw,66px) !important;line-height:1.0 !important}
.sp-hero p{font-size:18px !important;line-height:1.75 !important;max-width:1200px !important}
.sp-badges{gap:9px !important;margin-top:16px !important}
.sp-badge{font-size:12px !important;min-height:36px !important;padding:0 14px !important}
.sp-section{margin-top:20px !important;padding:28px !important;border-radius:24px !important}
.sp-section-head{margin-bottom:17px !important}
.sp-section-head h2{font-size:27px !important}
.sp-section-head span{font-size:11px !important}
.sp-intro{font-size:16px !important;line-height:1.85 !important}
.sp-grid-2{gap:14px !important}
.sp-card{padding:19px !important;border-radius:18px !important}
.sp-card h3{font-size:18px !important}
.sp-card p{font-size:13px !important;line-height:1.75 !important}
.sp-checks{gap:12px !important}
.sp-check{padding:15px !important;border-radius:14px !important}
.sp-check strong{font-size:14px !important}
.sp-check small{font-size:12px !important;line-height:1.65 !important}
.sp-price-grid{gap:13px !important}
.sp-price{padding:17px !important;border-radius:17px !important}
.sp-price .label{font-size:12px !important}
.sp-price strong{font-size:25px !important}
.sp-price small{font-size:10px !important;line-height:1.55 !important}
.sp-table th,.sp-table td{font-size:13px !important;padding:14px 15px !important}
.sp-table th{font-size:11px !important}
.sp-note{font-size:11px !important;line-height:1.7 !important}
.sp-faq details{padding:14px 15px !important;border-radius:14px !important}
.sp-faq summary{font-size:14px !important}
.sp-faq p{font-size:12px !important;line-height:1.75 !important}
.sp-contact-copy strong{font-size:17px !important}
.sp-contact-copy span{font-size:12px !important}
.sp-wa{min-height:50px !important;padding:0 20px !important;font-size:12px !important}
.sp-visual{gap:14px !important;margin-top:18px !important}
.sp-visual-card{min-height:190px !important;padding:20px !important;border-radius:20px !important}
.sp-visual-card img{width:148px !important;height:148px !important}
.sp-visual-card.wide img{width:185px !important}
.sp-visual-copy strong{font-size:18px !important}
.sp-visual-copy span{font-size:12px !important}
.sp-mini{min-height:84px !important;padding:16px !important}
.sp-mini img{width:46px !important;height:46px !important}
.sp-mini strong{font-size:13px !important}
.sp-mini span{font-size:11px !important}
.sp-feature-banner{padding:17px !important}.sp-feature-banner img{width:74px !important;height:74px !important}.sp-feature-banner strong{font-size:15px !important}.sp-feature-banner p{font-size:11px !important}
.sp-list li{padding:12px 14px 12px 32px !important;font-size:12px !important;line-height:1.6 !important}
.sp-step{padding:15px !important}.sp-step strong{font-size:13px !important}.sp-step p{font-size:11px !important}
@media(max-width:700px){
  .sp-wrap{width:calc(100vw - 14px) !important;padding:12px 0 36px !important}
  .sp-hero{padding:20px !important;border-radius:22px !important}
  .sp-hero-grid{grid-template-columns:88px minmax(0,1fr) !important;gap:15px !important}
  .sp-logo-card{width:88px !important;height:88px !important;border-radius:20px !important}
  .sp-logo-card img{width:62px !important;height:62px !important}.sp-logo-card.wide img{width:75px !important}.sp-logo-card.coc img{width:82px !important;height:82px !important}
  .sp-eyebrow{font-size:9px !important}.sp-hero h1{font-size:31px !important}.sp-hero p{font-size:12.5px !important;line-height:1.65 !important}.sp-badge{font-size:9px !important;min-height:28px !important}
  .sp-section{padding:16px !important;border-radius:18px !important}.sp-section-head h2{font-size:20px !important}.sp-intro{font-size:12.5px !important;line-height:1.75 !important}.sp-card h3{font-size:13.5px !important}.sp-card p{font-size:10.5px !important;line-height:1.7 !important}.sp-check strong{font-size:11.5px !important}.sp-check small{font-size:9.5px !important}.sp-price strong{font-size:20px !important}.sp-price .label{font-size:9px !important}.sp-price small{font-size:8px !important}.sp-table th,.sp-table td{font-size:10px !important}.sp-faq summary{font-size:11.5px !important}.sp-faq p{font-size:10px !important;line-height:1.7 !important}
}

/* LI GAMING V39 — canonical homepage slider */
#pool.hero{
  position:relative!important;
  width:min(1180px,calc(100% - 48px))!important;
  aspect-ratio:2048/768!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:14px auto 0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:#06121d!important;
  box-sizing:border-box!important;
}
#pool.hero #heroSlides{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#pool.hero #heroSlides .hero-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  opacity:0!important;
  visibility:visible!important;
  pointer-events:none!important;
  transform:none!important;
  overflow:hidden!important;
  background:#06121d!important;
  transition:opacity .5s ease-in-out!important;
}
#pool.hero #heroSlides .hero-slide.active{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  z-index:2!important;
}
#pool.hero #heroSlides .hero-media.hero-media-img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  background:#06121d!important;
}
#pool.hero .hero-copy,#pool.hero .hero-overlay{display:none!important}
#pool.hero .arrow{z-index:8!important}
#pool.hero .hero-nav{z-index:9!important}
@media(max-width:600px){
  #pool.hero{
    width:calc(100% - 16px)!important;
    margin:0 auto!important;
    border-radius:15px!important;
  }
}


/* LI GAMING V41 — compact PC slider + soft cross-fade */
@media (min-width:601px){
  #pool.hero{
    position:relative!important;
    width:min(1080px,calc(100% - 48px))!important;
    height:min(360px,calc((100vw - 48px) / 3))!important;
    min-height:0!important;
    max-height:360px!important;
    margin:18px auto 0!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:24px!important;
    box-sizing:border-box!important;
  }
  #pool.hero #heroSlides{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #pool.hero #heroSlides .hero-slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:none!important;
    overflow:hidden!important;
    z-index:1!important;
    transition:opacity 1.25s ease-in-out!important;
    will-change:opacity;
  }
  #pool.hero #heroSlides .hero-slide.active{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    z-index:2!important;
  }
  #pool.hero #heroSlides .hero-media.hero-media-img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    background:#06121d!important;
  }
}


/* Make PNGs scale proportionally based on height to match Cash logo size */
#offerFilters .filter img {
  height: 28px !important; /* Made significantly larger as requested */
  width: auto !important;
  max-width: 80px !important;
  object-fit: contain !important;
  filter: none !important;
  margin: 0 !important;
}

#offerFilters .filter svg {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: none !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  #offerFilters .filter img {
    height: 22px !important;
    max-width: 60px !important;
  }
  #offerFilters .filter svg {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 600px) {
  #offerGrid, #offerGrid.offers, .offers {
    gap: 14px !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
    width: calc(100% + 10px) !important;
  }
}

/* === MODAL BORDER REMOVALS === */
#offerModal .offer-modal-box {
    border: none !important;
    box-shadow: none !important;
    background: linear-gradient(160deg, #0f1c2a 0%, #060e15 100%) !important;
}

#offerModal .offer-qty-list,
#offerModal .offer-qty-item,
#offerModal .offer-detail-strip > div,
#offerModal .modal-access,
#offerModal .offer-trust-mini,
#offerModal .vip-level-card,
#offerModal .vip-showcase,
#offerModal .vip-showcase-title {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#offerModal .offer-modal-box::before,
#offerModal .offer-modal-box::after,
#offerModal .offer-qty-list::before,
#offerModal .offer-qty-list::after,
#offerModal .offer-qty-item::before,
#offerModal .offer-qty-item::after,
#offerModal .offer-detail-strip > div::before,
#offerModal .offer-detail-strip > div::after,
#offerModal .modal-access::before,
#offerModal .modal-access::after,
#offerModal .offer-trust-mini::before,
#offerModal .offer-trust-mini::after,
#offerModal .vip-level-card::before,
#offerModal .vip-level-card::after,
#offerModal .vip-showcase::before,
#offerModal .vip-showcase::after {
    display: none !important;
}

/* Professional 3D Premium Graphics (No Borders) */
#offerModal .offer-detail-strip > div,
#offerModal .modal-access,
#offerModal .offer-trust-mini,
#offerModal .vip-showcase-title {
    background: linear-gradient(145deg, #102135, #08121e) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#offerModal .offer-qty-list {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 4px 0 20px !important;
}

/* Keep the VIP heading and tier cards, but remove their extra enclosing panel. */
#offerModal .vip-showcase {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#offerModal .vip-level-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#offerModal .offer-qty-heading {
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    color: #fff !important;
    text-shadow: none !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    display: block !important;
}

#offerModal .vip-showcase-title {
    padding: 14px 16px !important;
    margin-bottom: 22px !important;
    border-radius: 12px !important;
}

#offerModal .vip-level-card {
    padding: 14px !important;
    min-height: 135px !important;
}

#offerModal .vip-level-card .vip-level-head {
    margin: -14px -14px 12px !important;
    padding: 12px 14px !important;
}

#offerModal .offer-qty-item {
    background: linear-gradient(145deg, #162b45, #0c1a2c) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

/* VIP THEMES - 3D & Distinct Colors per Tier */
#offerModal .vip-level-card.vip-bronze { background: linear-gradient(145deg, #754823, #3d2616) !important; box-shadow: none !important; }
#offerModal .vip-level-card.vip-bronze .vip-level-head { background: linear-gradient(180deg, rgba(226,151,77,0.48), rgba(205,127,50,0.12)) !important; border-bottom: 1px solid rgba(255,190,111,0.18) !important; }

#offerModal .vip-level-card.vip-silver { background: linear-gradient(145deg, #545b63, #2b3038) !important; box-shadow: none !important; }
#offerModal .vip-level-card.vip-silver .vip-level-head { background: linear-gradient(180deg, rgba(220,228,238,0.34), rgba(192,202,216,0.07)) !important; border-bottom: 1px solid rgba(220,228,238,0.18) !important; }

#offerModal .vip-level-card.vip-gold { background: linear-gradient(145deg, #715817, #3b2d0b) !important; box-shadow: none !important; }
#offerModal .vip-level-card.vip-gold .vip-level-head { background: linear-gradient(180deg, rgba(255,215,0,0.40), rgba(255,215,0,0.08)) !important; border-bottom: 1px solid rgba(255,226,91,0.18) !important; }

#offerModal .vip-level-card.vip-emerald { background: linear-gradient(145deg, #205c37, #10331f) !important; box-shadow: none !important; }
#offerModal .vip-level-card.vip-emerald .vip-level-head { background: linear-gradient(180deg, rgba(80,220,130,0.38), rgba(80,200,120,0.08)) !important; border-bottom: 1px solid rgba(118,255,170,0.17) !important; }

#offerModal .vip-level-card.vip-diamond { background: linear-gradient(145deg, #20576a, #10313d) !important; box-shadow: none !important; }
#offerModal .vip-level-card.vip-diamond .vip-level-head { background: linear-gradient(180deg, rgba(76,233,255,0.36), rgba(0,255,255,0.08)) !important; border-bottom: 1px solid rgba(94,238,255,0.18) !important; }

#offerModal .vip-level-card.vip-black { background: linear-gradient(145deg, #48515e, #252b34) !important; box-shadow: none !important; }
#offerModal .vip-level-card.vip-black .vip-level-head { background: linear-gradient(180deg, rgba(219,230,255,0.28), rgba(200,220,255,0.06)) !important; border-bottom: 1px solid rgba(224,236,255,0.17) !important; }

/* Ensure Head spans full width and looks like a distinct header */
#offerModal .vip-level-card .vip-level-head {
    margin: -8px -8px 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: none !important;
}

/* NEW INCLUDED ITEMS SLIDER FIXES */
#offerModal .offer-qty-slider-wrap {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
}

#offerModal .offer-qty-items {
    flex: 1 !important;
    width: 100% !important;
    justify-content: center !important; 
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
}

/* Small Beautiful Arrow Keys */
#offerModal .qty-nav {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(41, 193, 255, 0.1) !important;
    border: 1px solid rgba(41, 193, 255, 0.3) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.3s ease, transform 0.2s !important;
    cursor: pointer !important;
    color: #36caff !important;
    padding: 0 !important;
}

#offerModal .qty-nav:hover {
    background: rgba(41, 193, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

#offerModal .qty-nav.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

#offerModal .qty-nav svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 3 !important;
}

#offerModal .qty-nav {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* INCLUDED ITEM THEMES */
#offerModal .offer-qty-item.qty-theme-cash { background: linear-gradient(145deg, #183d28, #0a1f14) !important; box-shadow: none !important; border: 1px solid rgba(80,200,120,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-coin { background: linear-gradient(145deg, #382c0f, #1f1807) !important; box-shadow: none !important; border: 1px solid rgba(255,215,0,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-vip { background: linear-gradient(145deg, #402711, #241508) !important; box-shadow: none !important; border: 1px solid rgba(255,165,0,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-cue { background: linear-gradient(145deg, #3d1b4d, #210d2b) !important; box-shadow: none !important; border: 1px solid rgba(200,80,255,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-golden { background: linear-gradient(145deg, #331d4d, #1a0f2b) !important; box-shadow: none !important; border: 1px solid rgba(255,215,0,0.12) !important; }
#offerModal .offer-qty-item.qty-theme-pass { background: linear-gradient(145deg, #0e3047, #061929) !important; box-shadow: none !important; border: 1px solid rgba(0,180,255,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-loyalty { background: linear-gradient(145deg, #0d2657, #05122b) !important; box-shadow: none !important; border: 1px solid rgba(50,120,255,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-cueFullMax { background: linear-gradient(145deg, #4a1515, #290909) !important; box-shadow: none !important; border: 1px solid rgba(255,80,80,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-goldenSpin { background: linear-gradient(145deg, #42360e, #261f06) !important; box-shadow: none !important; border: 1px solid rgba(255,230,50,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-box { background: linear-gradient(145deg, #3d1440, #210824) !important; box-shadow: none !important; border: 1px solid rgba(220,50,220,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-legendary { background: linear-gradient(145deg, #0e4545, #062424) !important; box-shadow: none !important; border: 1px solid rgba(50,220,220,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-treasure { background: linear-gradient(145deg, #452611, #241307) !important; box-shadow: none !important; border: 1px solid rgba(220,130,50,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-combo { background: linear-gradient(145deg, #4a1331, #29081a) !important; box-shadow: none !important; border: 1px solid rgba(255,50,150,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-avatar { background: linear-gradient(145deg, #0e3745, #061d26) !important; box-shadow: none !important; border: 1px solid rgba(0,200,255,0.15) !important; }
#offerModal .offer-qty-item.qty-theme-animatedFrame { background: linear-gradient(145deg, #1c134a, #0d0826) !important; box-shadow: none !important; border: 1px solid rgba(120,80,255,0.15) !important; }



/* NEW 3D GRAPHICS FOR ALL CARDS OVERRIDE V2 */
#offerGrid .offer, 
#offerGrid .premium-offer, 
#offerGrid .vip-offer-card, 
#offerGrid .no-login-offer,
#heroHighlights .selected-offer-card,
body .offer, 
body .premium-offer {
    border: 0 !important;
    outline: none !important;
    background: linear-gradient(155deg, rgba(32, 54, 82, 0.95) 0%, rgba(13, 26, 43, 0.98) 100%) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    transform: translateZ(0) perspective(800px) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#offerGrid .offer:hover, 
#offerGrid .premium-offer:hover, 
#heroHighlights .selected-offer-card:hover,
body .offer:hover, 
body .premium-offer:hover {
    transform: translateY(-6px) translateZ(0) perspective(800px) !important;
    box-shadow: none !important;
    border: 0 !important;
}

#offerGrid .offer h3, 
#offerGrid .offer .price, 
#heroHighlights .selected-offer-card h3, 
#heroHighlights .selected-offer-card .price {
    text-shadow: none !important;
}




















/* NEW LOGIN MODAL STYLES */

/* ULTIMATE BACKGROUND SCROLL FIX */
body.login-modal-open, html.login-modal-open {
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

#loginModal {
    font-family: Arial, Helvetica, sans-serif !important; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-start !important; 
    justify-content: center !important;
    padding: 0px !important; 
    overscroll-behavior: none !important; 
    overflow-y: auto !important; 
    box-sizing: border-box !important;
    z-index: 99999 !important;
    touch-action: none !important; /* Block touch on overlay */
}

#loginModal .login-box.premium-auth-card {
    background: linear-gradient(145deg, rgba(37, 50, 71, 0.98) 0%, rgba(20, 31, 52, 0.99) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important;
    border: none !important; 
    box-shadow: none !important; 
    position: relative;
    overflow: hidden;
    padding: 10px 20px 14px 20px !important; 
    max-width: 330px !important;
    width: 100% !important;
    
    /* MOVED SLIGHTLY HIGHER */
    margin-top: 35px !important; 
    margin-bottom: 40px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    transform: none !important;
    box-sizing: border-box !important;
    transition: height 0.3s ease, padding 0.3s ease;
    touch-action: auto !important; /* Allow touch inside modal */
}

/* Brand Area */
#loginModal .premium-auth-brand {
    text-align: center;
    margin-bottom: 0px !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#loginModal .brand-logo-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 6px;
    margin-bottom: 0px !important;
}

#loginModal .clean-auth-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px !important; 
    width: auto !important;
    position: relative;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#loginModal .clean-auth-logo img {
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
    position: relative;
    z-index: 2;
}
#loginModal .logo-gaming-text {
    font-size: 26px; 
    font-weight: 700; 
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none; 
    z-index: 2;
    line-height: 1;
    transform: translateY(2px);
}

#loginModal .auth-subtitle {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    margin: -5px 0 0 0 !important; 
    letter-spacing: 0.2px;
    text-align: center;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Google Button - Simple Font */
#loginModal .new-google-btn {
    width: 100%;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    color: #0f172a;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif !important; 
    font-weight: 500 !important; 
    font-size: 14px !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
    margin-top: 5px; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}
#loginModal .new-google-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}
#loginModal .new-google-btn .g-icon { width: 20px; height: 20px; }

/* OR Divider */
#loginModal .auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 12px;
}
#loginModal .auth-divider::before,
#loginModal .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#loginModal .auth-divider span { padding: 0 10px; }

/* Tabs Container */
#loginModal .auth-tabs-container {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 3px;
    border: none !important; 
    margin-bottom: 12px;
    gap: 3px;
    box-shadow: none;
}

/* SMOOTH TAB BACKGROUND TRANSITION (Fix for harsh blue light change) */
#loginModal .auth-tab {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background: transparent !important;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    text-transform: capitalize;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

#loginModal .auth-tab::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s ease-in-out; /* Buttery smooth fade */
}

#loginModal .auth-tab img { width: 14px !important; height: 14px !important; transition: all 0.3s ease; opacity: 1; }
#loginModal .auth-tab img[src*="15874"] {
    filter: invert(1) brightness(100) !important; 
}

#loginModal .auth-tab.active {
    color: #ffffff;
    box-shadow: none !important; 
}
#loginModal .auth-tab.active::before {
    opacity: 1; /* Fade in the blue background smoothly */
}
#loginModal .auth-tab.active img { transform: scale(1.1); }

/* Panel Wrappers */
#loginModal .premium-auth-panel-wrap {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: unset !important; 
    max-height: unset !important;
    overflow: visible !important; 
}

@keyframes smoothPanelFade {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

#loginModal .premium-login-panel {
    display: none !important;
}

#loginModal .premium-login-panel.active {
    display: block !important;
    animation: smoothPanelFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#loginModal .premium-login-panel.hidden {
    display: none !important;
}

/* Form Fields */
#loginModal .auth-field {
    margin-bottom: 12px;
    text-align: left;
}
#loginModal .auth-field label {
    display: block;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: capitalize;
}
#loginModal .auth-input-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); 
    border: none !important; 
    border-radius: 10px;
    padding: 0 12px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: none;
}
#loginModal .auth-input-box:focus-within {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}
#loginModal .auth-input-box > svg:not(.eye-icon) {
    width: 16px; height: 16px; stroke: #94a3b8; flex-shrink: 0;
}
#loginModal .auth-input-box input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 12px 10px;
    font-size: 13.5px;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif !important;
}
#loginModal .auth-input-box input::placeholder { color: #64748b; font-weight: 500; text-transform: capitalize; }

#loginModal .auth-input-box .eye-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: #94a3b8;
    cursor: pointer;
    background: transparent;
    z-index: 10;
}
#loginModal .auth-input-box .eye-icon:hover { stroke: #ffffff; }
#loginModal .auth-input-box input[type="password"],
#loginModal .auth-input-box input#loginPass,
#loginModal .auth-input-box input#createPass,
#loginModal .auth-input-box input#createPassConfirm {
    padding-right: 36px !important;
}

#loginModal .auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif !important;
}
#loginModal .remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    cursor: pointer;
    font-weight: 500;
}
#loginModal .remember-me input[type="checkbox"] {
    accent-color: #3b82f6;
    width: 16px; height: 16px;
    cursor: pointer;
    border: none;
}
#loginModal .forgot-pwd { color: #60a5fa; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
#loginModal .forgot-pwd:hover { opacity: 0.8; }

/* Main Login / Send OTP Button - Simple Font */
#loginModal .auth-login-btn,
#loginModal button[onclick*="sendOTP"],
#loginModal button[onclick*="verifyOTP"] {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none !important;
    border-radius: 10px;
    padding: 14px;
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 15px !important;
    font-weight: 500 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 16px;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none !important; 
}
#loginModal .auth-login-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}
#loginModal .auth-login-btn svg { width: 18px; height: 18px; stroke: #ffffff; }

/* Create Account Link - Simple Font */
#loginModal .auth-signup-row {
    text-align: center;
    margin-bottom: 16px;
    font-family: Arial, Helvetica, sans-serif !important;
}
#loginModal .auth-signup-row > span {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}
#loginModal .auth-create-btn {
    background: transparent;
    border: none !important;
    color: #60a5fa;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: underline !important; 
    text-transform: none !important;
}
#loginModal .auth-create-btn:hover { color: #3b82f6; }

/* Footer Features */
#loginModal .auth-footer-features {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    gap: 4px;
    margin-top: auto;
}
#loginModal .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex: 1;
}
#loginModal .feature-item svg { width: 16px; height: 16px; stroke: #60a5fa; fill: none; margin: 0 auto; }
#loginModal .feature-item .fill-icon { fill: #60a5fa; stroke: none; }
#loginModal .feature-item b { font-family: Arial, Helvetica, sans-serif !important; font-size: 10.5px; color: #f1f5f9; font-weight: 600; white-space: nowrap; line-height: 1.2; text-transform: capitalize; }
#loginModal .feature-item span { font-family: Arial, Helvetica, sans-serif !important; font-size: 9.5px; color: #64748b; font-weight: 500; white-space: nowrap; line-height: 1.2; text-transform: capitalize; }

/* Close Button */
#loginModal .close-btn-new {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.08);
    border: none !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #cbd5e1;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}
#loginModal .close-btn-new:hover { background: rgba(255,255,255,0.15); color: #fff; transform: rotate(90deg); }

#loginModal .hidden { display: none !important; }

/* NEW PROFILE MODAL STYLES V2 */
#profileModal .premium-profile-box-v2 {
    background: linear-gradient(145deg, #09121a 0%, #03080d 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 30px !important;
    border: none !important;
    padding: 16px 14px !important;
    max-width: 400px !important;
    width: 95% !important;
    margin: 40px auto !important;
    box-shadow: none !important;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#profileModal .profile-close-v2 {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255,255,255,0.1);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* HERO SECTION */
#profileModal .profile-hero-v2 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 16px;
    background: rgba(16, 185, 129, 0.03);
    border-radius: 18px;
    margin-bottom: 16px;
    box-shadow: none;
}

#profileModal .profile-avatar-frame-v2 {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v2 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#profileModal .profile-avatar-v2 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
}

#profileModal .profile-avatar-v2 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

#profileModal .profile-avatar-camera-icon {
    position: absolute;
    bottom: -2px; right: -2px;
    background: #064e3b;
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    border: 2px solid #09121a;
}

#profileModal .profile-info-v2 {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

#profileModal .profile-name-row-v2 h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

#profileModal .profile-badges-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profileModal .badge-vip-v2 {
    background: linear-gradient(135deg, #b45309, #d97706);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
}

#profileModal .badge-level-v2 {
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

#profileModal .profile-edit-btn-v2 {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}
#profileModal .profile-edit-btn-v2:hover { background: rgba(255, 255, 255, 0.15); }

/* STATS SECTION */
#profileModal .profile-stats-v2 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

#profileModal .stat-card-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

#profileModal .stat-card-v2.orders { box-shadow: none; }
#profileModal .stat-card-v2.pending { box-shadow: none; }
#profileModal .stat-card-v2.vip { box-shadow: none; }

#profileModal .stat-icon-v2 { font-size: 20px; margin-bottom: 6px; }
#profileModal .stat-card-v2 b { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 2px; }
#profileModal .stat-card-v2 small { font-size: 10.5px; color: #94a3b8; font-weight: 500; text-align: center; }

/* VIP PROGRESS */
#profileModal .profile-vip-progress-v2 {
    display: flex;
    align-items: center;
    padding: 18px 16px;
    border-radius: 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: none;
}

#profileModal .vip-progress-icon-v2 { margin-right: 16px; filter: none; }

#profileModal .vip-progress-info-v2 { flex: 1; display: flex; flex-direction: column; gap: 6px; }

#profileModal .vip-label-small { font-size: 11px; color: #94a3b8; font-weight: 600; }

#profileModal .vip-progress-title-row { display: flex; align-items: center; gap: 8px; }
#profileModal .vip-progress-title-row strong { font-size: 18px; font-weight: 800; color: #fff; }
#profileModal .vip-level-badge-small { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; width: 100%; margin: 4px 0; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-footer-row { display: flex; justify-content: space-between; font-size: 9.5px; color: #64748b; font-weight: 500; }
#profileModal .vip-points-text { color: #e2e8f0; font-weight: 700; }

/* ORDERS SECTION */
#profileModal .profile-orders-section-v2 {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    padding: 16px;
    box-shadow: none;
    margin-bottom: 16px;
}

#profileModal .orders-head-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
#profileModal .orders-title-v2 { font-size: 14.5px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 6px; }
#profileModal .orders-badge-v2 {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 800;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

#profileModal .empty-orders-state-v2 {
    text-align: center;
    padding: 24px 0;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}
#profileModal .empty-box-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.6; filter: grayscale(1); }
#profileModal .empty-title { font-size: 15px; font-weight: 700; color: #cbd5e1; margin-bottom: 4px; }
#profileModal .empty-sub { font-size: 11.5px; color: #64748b; font-weight: 500; }

#profileModal .profile-completed-btn-v2 {
    width: 100%;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
    padding: 12px 0 0 0;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    text-align: center;
}
#profileModal .profile-completed-btn-v2:hover { color: #fff; }

/* LOGOUT BUTTON */
#profileModal .logout-btn-v2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-radius: 18px;
    
    /* Beautiful glowing green background WITHOUT hard borders */
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(4, 120, 87, 0.2) 100%);
    box-shadow: none;
    border: none !important;
    
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#profileModal .logout-btn-v2:active {
    transform: scale(0.98);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 20px;
    background: rgba(255, 255, 255, 0.1);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
}

#profileModal .logout-icon-right {
    font-size: 22px;
    font-weight: bold;
    color: #10b981;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor.hidden { display: none !important; }
#profileModal .profile-name-editor {
    position: absolute;
    top: 50px;
    left: 16px;
    background: #0f172a;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    z-index: 10;
    display: flex;
    gap: 8px;
}
#profileModal .profile-name-editor input {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
}
#profileModal .profile-name-editor button {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/* NEW PROFILE MODAL STYLES V2 */
#profileModal .premium-profile-box-v2 {
    /* Slightly brighter background as requested */
    background: linear-gradient(145deg, #131e2b 0%, #0a111a 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 30px !important;
    border: none !important;
    padding: 16px 14px !important; /* Made smaller */
    max-width: 400px !important;
    width: 95% !important;
    margin: 20px auto !important; /* Pushed up slightly, taking less space */
    box-shadow: none !important;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#profileModal .profile-close-v2 {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255,255,255,0.1);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* HERO SECTION */
#profileModal .profile-hero-v2 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 14px;
    background: rgba(16, 185, 129, 0.04);
    border-radius: 18px;
    margin-bottom: 12px;
    box-shadow: none;
}

#profileModal .profile-avatar-frame-v2 {
    position: relative;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v2 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#profileModal .profile-avatar-v2 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
}

#profileModal .profile-avatar-v2 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* NEW SVG CAMERA ICON */
#profileModal .profile-avatar-camera-icon {
    position: absolute;
    bottom: -4px; right: -4px;
    background: #10b981;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #09121a;
    color: #fff;
    box-shadow: none;
}
#profileModal .profile-avatar-camera-icon::after {
    content: '';
    display: block;
    width: 14px; height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

#profileModal .profile-info-v2 {
    margin-left: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

#profileModal .profile-name-row-v2 h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

#profileModal .profile-badges-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#profileModal .badge-vip-v2 {
    background: linear-gradient(135deg, #b45309, #d97706);
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
}

#profileModal .badge-level-v2 {
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
}

#profileModal .profile-edit-btn-v2 {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(16, 185, 129, 0.15); /* More beautiful background */
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #34d399; /* Green text */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
}
#profileModal .profile-edit-btn-v2:hover { background: rgba(16, 185, 129, 0.25); }

/* STATS SECTION */
#profileModal .profile-stats-v2 {
    display: flex;
    gap: 10px;
    margin-bottom: 12px; /* Reduced margin */
}

#profileModal .stat-card-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px; /* Made smaller */
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05); /* Made brighter */
    position: relative;
    overflow: hidden;
}

#profileModal .stat-card-v2.orders { box-shadow: none; }
#profileModal .stat-card-v2.pending { box-shadow: none; }
#profileModal .stat-card-v2.vip { box-shadow: none; }

#profileModal .stat-icon-v2 { font-size: 18px; margin-bottom: 4px; }
#profileModal .stat-card-v2 b { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 2px; line-height: 1; }
#profileModal .stat-card-v2 small { font-size: 9.5px; color: #cbd5e1; font-weight: 600; text-align: center; }

/* VIP PROGRESS - MADE SMALLER */
#profileModal .profile-vip-progress-v2 {
    display: flex;
    align-items: center;
    padding: 12px 14px; /* Reduced height/padding */
    border-radius: 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: none;
}

#profileModal .vip-progress-icon-v2 { margin-right: 14px; filter: none; }

#profileModal .vip-progress-info-v2 { flex: 1; display: flex; flex-direction: column; gap: 4px; }

#profileModal .vip-label-small { font-size: 10px; color: #94a3b8; font-weight: 600; }

#profileModal .vip-progress-title-row { display: flex; align-items: center; gap: 8px; }
#profileModal .vip-progress-title-row strong { font-size: 16px; font-weight: 800; color: #fff; }
#profileModal .vip-level-badge-small { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 12px; font-size: 9px; font-weight: 600; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; width: 100%; margin: 2px 0; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-footer-row { display: flex; justify-content: space-between; font-size: 9px; color: #64748b; font-weight: 500; }
#profileModal .vip-points-text { color: #e2e8f0; font-weight: 700; }

/* ORDERS SECTION WITH TABS */
#profileModal .profile-orders-section-v2 {
    background: rgba(255, 255, 255, 0.03); /* Brighter */
    border-radius: 16px;
    padding: 16px;
    box-shadow: none;
    margin-bottom: 12px;
    min-height: 160px; /* Made more spacious for orders */
    display: flex;
    flex-direction: column;
}

#profileModal .orders-tabs-v2 {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 8px;
}
#profileModal .order-tab-item {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 0.2s;
}
#profileModal .order-tab-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
#profileModal .order-tab-item.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
#profileModal .order-tab-item.open {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
#profileModal .orders-badge-v2 {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    margin-left: 4px;
}

#profileModal .empty-orders-state-v2 {
    text-align: center;
    padding: 24px 0;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    flex: 1;
}
#profileModal .empty-box-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.6; filter: grayscale(1); }
#profileModal .empty-title { font-size: 15px; font-weight: 700; color: #cbd5e1; margin-bottom: 4px; }
#profileModal .empty-sub { font-size: 11.5px; color: #64748b; font-weight: 500; }

#profileModal .profile-completed-btn-v2 {
    display: none; /* Replaced by tabs above */
}

/* LOGOUT BUTTON */
#profileModal .logout-btn-v2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px; /* Slightly smaller vertically */
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(4, 120, 87, 0.2) 100%);
    box-shadow: none;
    border: none !important;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#profileModal .logout-btn-v2:active {
    transform: scale(0.98);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 18px;
    background: rgba(255, 255, 255, 0.1);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
}

#profileModal .logout-icon-right {
    font-size: 20px;
    font-weight: bold;
    color: #10b981;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor { display: none; }
#profileModal .profile-name-editor.show {
    display: flex;
    position: absolute;
    top: 50px;
    left: 16px;
    background: #0f172a;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    z-index: 10;
    gap: 8px;
}
#profileModal .profile-name-editor input {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
}
#profileModal .profile-name-editor button {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/* FIX CROP MODAL Z-INDEX SO IT APPEARS ABOVE PROFILE */
.profile-crop-modal {
    z-index: 100000 !important;
}

/* NEW PROFILE MODAL STYLES V3 - SCROLLABLE & REORDERED */
#profileModal .premium-profile-box-v2 {
    /* Brighter, more professional background */
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Subtle border for premium feel */
    padding: 24px 16px 16px 16px !important; 
    max-width: 420px !important;
    width: 95% !important;
    margin: 20px auto !important; 
    box-shadow: none !important;
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    overflow: hidden; /* Prevent modal overflow */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Don't exceed viewport */
}

/* Scroll Container inside Modal */
#profileModal .profile-scroll-container {
    overflow-y: auto; height: 100%; flex: 1 1 auto; min-height: 0; max-height: 100%; overscroll-behavior: contain;
    overflow-x: hidden;
    padding-right: 8px; /* For scrollbar */
    padding-top: 8px;
    padding-bottom: 20px;
}

/* Custom Scrollbar for the Profile */




#profileModal .profile-close-v2 {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}
#profileModal .profile-close-v2:hover { background: rgba(239, 68, 68, 0.8); }

/* HERO SECTION (NO BOX) */
#profileModal .profile-hero-v3 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 8px 16px 8px;
    margin-bottom: 16px;
    /* Removed background box! */
}

#profileModal .profile-avatar-frame-v3 {
    position: relative;
    width: 85px;
    height: 85px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v3 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#profileModal .profile-avatar-v3 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
}

#profileModal .profile-avatar-v3 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* NEW SVG CAMERA ICON */
#profileModal .profile-avatar-camera-icon-v3 {
    position: absolute;
    bottom: -2px; right: -2px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #1e293b;
    color: #fff;
    box-shadow: none;
    transition: transform 0.2s;
}
#profileModal .profile-avatar-wrap-v3:hover .profile-avatar-camera-icon-v3 { transform: scale(1.1); }

#profileModal .profile-info-v3 {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

#profileModal .profile-name-row-v3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

#profileModal .profile-name-row-v3 h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    text-shadow: none;
}

#profileModal .profile-badges-v3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profileModal .badge-vip-v3 {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
    color: #fff;
}

#profileModal .badge-level-v3 {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
}

/* Edit Button moved to name row, NO BORDER */
#profileModal .profile-edit-btn-v3 {
    background: transparent;
    border: none;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #34d399; /* Green text */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
}
#profileModal .profile-edit-btn-v3:hover { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* VIP PROGRESS (Moved below Hero) */
#profileModal .profile-vip-progress-v3 {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    box-shadow: none;
    border: 1px solid rgba(245, 158, 11, 0.1);
}

#profileModal .vip-progress-icon-v3 { margin-right: 14px; filter: none; }

#profileModal .vip-progress-info-v3 { flex: 1; display: flex; flex-direction: column; gap: 4px; }

#profileModal .vip-progress-header-v3 .vip-label-small { font-size: 11px; color: #cbd5e1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}

#profileModal .vip-progress-title-row { display: flex; align-items: center; gap: 8px; }
#profileModal .vip-progress-title-row strong { font-size: 18px; font-weight: 800; color: #fff; }
#profileModal .vip-progress-title-row .vip-level-badge-small { background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; width: 100%; margin: 4px 0; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-footer-row { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; font-weight: 600; }
#profileModal .vip-points-text { color: #f8fafc; font-weight: 800; }

/* ORDERS SECTION WITH TABS (Made Larger) */
#profileModal .profile-orders-section-v3 {
    background: rgba(255, 255, 255, 0.03); 
    border-radius: 20px;
    padding: 18px;
    box-shadow: none;
    margin-bottom: 20px;
    min-height: 220px; /* Made even more spacious */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.03);
}

#profileModal .orders-tabs-v3 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
}
#profileModal .order-tab-item {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#profileModal .order-tab-item:hover { color: #fff; background: rgba(255,255,255,0.08); }
#profileModal .order-tab-item.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    box-shadow: none;
}
#profileModal .orders-badge-v3 {
    background: #f59e0b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 4px;
    box-shadow: none;
}

#profileModal .empty-orders-state-v3 {
    text-align: center;
    padding: 30px 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#profileModal .empty-orders-state-v3 .empty-box-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.8; filter: grayscale(1); }
#profileModal .empty-orders-state-v3 .empty-title { font-size: 16px; font-weight: 800; color: #e2e8f0; margin-bottom: 6px; }
#profileModal .empty-orders-state-v3 .empty-sub { font-size: 12px; color: #94a3b8; font-weight: 600; }

/* STATS SECTION (Moved to bottom) */
#profileModal .profile-stats-v3 {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

#profileModal .stat-card-v3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px; 
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04); 
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: none;
}

#profileModal .stat-card-v3.orders { box-shadow: none; }
#profileModal .stat-card-v3.pending { box-shadow: none; }
#profileModal .stat-card-v3.vip { box-shadow: none; }

#profileModal .stat-icon-v3 { font-size: 20px; margin-bottom: 6px; filter: none; }
#profileModal .stat-card-v3 b { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 4px; line-height: 1; text-shadow: none; }
#profileModal .stat-card-v3 small { font-size: 10px; color: #94a3b8; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }

/* LOGOUT BUTTON (Extremely Beautiful) */
#profileModal .logout-btn-v3 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 24px; 
    border-radius: 20px;
    background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
    box-shadow: none;
    border: none !important;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#profileModal .logout-btn-v3::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s;
}
#profileModal .logout-btn-v3:hover::after {
    left: 150%;
}

#profileModal .logout-btn-v3:active {
    transform: scale(0.97);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 20px;
    margin-right: 12px;
    filter: none;
}

#profileModal .logout-icon-right {
    font-size: 20px;
    margin-left: 12px;
    opacity: 0.7;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor { display: none; }
#profileModal .profile-name-editor.show {
    display: flex;
    position: absolute;
    top: 60px;
    left: 100px;
    background: #0f172a;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    z-index: 10;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
#profileModal .profile-name-editor input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
    font-weight: 600;
}
#profileModal .profile-name-editor input:focus { border-color: #10b981; }
#profileModal .profile-name-editor button {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/* FIX CROP MODAL Z-INDEX SO IT APPEARS ABOVE PROFILE */
.profile-crop-modal {
    z-index: 100000 !important;
}

/* NEW PROFILE MODAL STYLES V4 - EXTREMELY COMPACT AND 3D */
#profileModal .premium-profile-box-v4 {
    background: linear-gradient(160deg, #111827 0%, #030712 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
    padding: 24px 20px 20px 20px !important; 
    max-width: 380px !important;
    width: 90% !important;
    margin: auto !important; 
    box-shadow: none !important;
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    position: relative;
}

#profileModal .profile-close-v4 {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #94a3b8;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    box-shadow: none;
}
#profileModal .profile-close-v4:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

/* HERO SECTION */
#profileModal .profile-header-v4 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#profileModal .profile-avatar-frame-v4 {
    position: relative;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v4 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#profileModal .profile-avatar-v4 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    box-shadow: none;
}

#profileModal .profile-avatar-v4 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 3D CAMERA ICON */
#profileModal .profile-avatar-camera-icon-v4 {
    position: absolute;
    bottom: -2px; right: -2px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #030712;
    color: #fff;
    box-shadow: none;
    transition: transform 0.2s;
}
#profileModal .profile-avatar-wrap-v4:hover .profile-avatar-camera-icon-v4 { transform: scale(1.1); }

#profileModal .profile-info-v4 {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

#profileModal .profile-name-row-v4 {
    display: flex;
    align-items: center;
    gap: 10px;
}

#profileModal .profile-name-row-v4 h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    text-shadow: none;
    letter-spacing: -0.5px;
}

#profileModal .profile-badges-v4 {
    display: flex;
    align-items: center;
    gap: 6px;
}

#profileModal .badge-vip-v4 {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
    color: #fff;
    text-transform: uppercase;
}

#profileModal .badge-level-v4 {
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Edit Button moved to name row, NO BORDER */
#profileModal .profile-edit-btn-v4 {
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 800;
    color: #10b981; 
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#profileModal .profile-edit-btn-v4:hover { background: rgba(16, 185, 129, 0.1); }

/* VIP PROGRESS - EXTREMELY THIN AND 3D */
#profileModal .profile-vip-progress-v4 {
    display: flex;
    align-items: stretch;
    padding: 10px 14px;
    border-radius: 14px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

#profileModal .vip-progress-left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 14px;
    border-right: 1px solid rgba(255,255,255,0.05);
    margin-right: 14px;
}

#profileModal .vip-progress-icon-v4 { 
    font-size: 24px; 
    filter: none; 
}

#profileModal .vip-progress-right { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }

#profileModal .vip-progress-top .vip-label { font-size: 9px; color: #94a3b8; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;}

#profileModal .vip-progress-mid { display: flex; align-items: center; gap: 6px; }
#profileModal .vip-progress-mid strong { font-size: 15px; font-weight: 800; color: #fff; text-shadow: none; }
#profileModal .vip-progress-mid .vip-level-badge { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 800; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 4px; background: rgba(0, 0, 0, 0.5); border-radius: 4px; overflow: hidden; width: 100%; margin: 2px 0; box-shadow: none; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-bottom { display: flex; justify-content: space-between; font-size: 9px; color: #64748b; font-weight: 600; }
#profileModal .vip-points { color: #cbd5e1; font-weight: 800; }

/* ORDERS SECTION - 3D AND COMPACT TABS */
#profileModal .profile-orders-section-v4 {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.3) 0%, rgba(15, 23, 42, 0.6) 100%); 
    border-radius: 16px;
    padding: 14px;
    box-shadow: none;
    margin-bottom: 20px;
    min-height: 140px; 
    border: 1px solid rgba(255,255,255,0.03);
}

#profileModal .orders-tabs-v4 {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
#profileModal .order-tab-btn {
    flex: 1;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.02);
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.3s;
    box-shadow: none;
}
#profileModal .order-tab-btn:hover { color: #94a3b8; background: rgba(0,0,0,0.4); }
#profileModal .order-tab-btn.active {
    color: #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.2);
    box-shadow: none;
}
#profileModal .tab-icon { font-size: 14px; filter: none; }
#profileModal .tab-badge {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    box-shadow: none;
    text-shadow: none;
}

/* Empty Orders Text (Only text, no box) */
#profileModal .empty-orders-text {
    text-align: center;
    padding: 30px 0;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-shadow: none;
}

/* 3 STATS - SMALL AND 3D */
#profileModal .profile-stats-v4 {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#profileModal .stat-card-v4 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px; 
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.7) 100%); 
    position: relative;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: none;
}

#profileModal .stat-icon-v4 { font-size: 16px; margin-bottom: 4px; filter: none; }
#profileModal .stat-card-v4 b { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 2px; line-height: 1; text-shadow: none; }
#profileModal .stat-card-v4 small { font-size: 9px; color: #64748b; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }

/* LOGOUT BUTTON - 3D GLOW */
#profileModal .logout-btn-v4 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px; 
    border-radius: 14px;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    box-shadow: none;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: none;
}

#profileModal .logout-btn-v4:active {
    transform: translateY(2px);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 16px;
    margin-right: 10px;
    filter: none;
}

#profileModal .logout-icon-right {
    font-size: 16px;
    margin-left: 10px;
    opacity: 0.5;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor { display: none; }
#profileModal .profile-name-editor.show {
    display: flex;
    position: absolute;
    top: 50px;
    left: 80px;
    background: #0f172a;
    padding: 10px;
    border-radius: 10px;
    box-shadow: none;
    z-index: 10;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
#profileModal .profile-name-editor input {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    outline: none;
    font-weight: 600;
    font-size: 13px;
}
#profileModal .profile-name-editor input:focus { border-color: #10b981; }
#profileModal .profile-name-editor button {
    background: linear-gradient(180deg, #10b981, #059669);
    border: none;
    border-radius: 6px;
    padding: 0 12px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
}

/* NEW PROFILE MODAL STYLES V5 - PREMIUM 3D GLASSMORPHISM & FULL SCROLL */

/* Outer box constraints to enable inner scrolling */
#profileModal .premium-profile-box-v4 {
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.95) 0%, rgba(3, 7, 18, 0.98) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    padding: 0 !important; /* Remove padding to let scroll wrapper take over */
    max-width: 390px !important;
    width: 92% !important;
    margin: auto !important; 
    box-shadow: none !important;
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    position: relative;
    overflow: hidden !important; /* Hide anything outside */
    max-height: 82vh !important; /* Strictly limit height */
    display: flex;
    flex-direction: column;
}

#profileModal .profile-close-v2 {
    position: absolute;
    top: 16px;
    left: 16px; /* Moved close button to left so edit button can take right side, or just keep it */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #94a3b8;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: none;
}
#profileModal .profile-close-v2:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; border-color: rgba(239, 68, 68, 0.4); transform: scale(1.05); }

/* Inner Scrollable Wrapper */
#profileModal .profile-scroll-wrapper-v5 {
    padding: 24px 20px;
    overflow-y: auto; height: 100%; flex: 1 1 auto; min-height: 0; max-height: 100%; overscroll-behavior: contain;
    width: 100%;
    flex: 1;
    /* Custom Scrollbar for sleek look */
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.5) transparent;
}
#profileModal .profile-scroll-wrapper-v5::-webkit-scrollbar { width: 4px; }
#profileModal .profile-scroll-wrapper-v5::-webkit-scrollbar-track { background: transparent; }
#profileModal .profile-scroll-wrapper-v5::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.5); border-radius: 10px; }

/* HERO SECTION - RESTRUCTURED FOR FAR RIGHT BUTTONS */
#profileModal .profile-header-v5 {
    display: flex;
    align-items: flex-start; /* align top to allow right side items to be at top corner */
    margin-bottom: 24px;
    padding-top: 8px;
}

#profileModal .profile-avatar-frame-v5 {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v5 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s;
}
#profileModal .profile-avatar-wrap-v5:hover { transform: scale(1.02); }

#profileModal .profile-avatar-v5 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    box-shadow: none;
}

#profileModal .profile-avatar-v5 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 3D PRO CAMERA ICON */
#profileModal .profile-avatar-camera-icon-v5 {
    position: absolute;
    bottom: -4px; right: -4px;
    background: linear-gradient(145deg, #10b981, #059669);
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #030712;
    color: #fff;
    box-shadow: none;
    transition: transform 0.3s;
}
#profileModal .profile-avatar-wrap-v5:hover .profile-avatar-camera-icon-v5 { transform: scale(1.1) rotate(5deg); }

#profileModal .profile-info-v5 {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    flex: 1;
}

#profileModal .profile-name-row-v5 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* pushes edit button to right */
    width: 100%;
}

#profileModal .profile-name-row-v5 h2 {
    font-size: 20px; /* Reduced from 24px so it doesn't wrap awkwardly */
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    text-shadow: none;
    letter-spacing: -0.5px;
    line-height: 1.2;
    flex: 1;
}

#profileModal .profile-actions-right-v5 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Edit Button - FAR RIGHT, SIMPLE FONT */
#profileModal .profile-edit-btn-v5 {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500; /* Simple font weight */
    color: #10b981; 
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: capitalize; /* Simple casing */
}
#profileModal .profile-edit-btn-v5:hover { color: #34d399; text-shadow: none; }

#profileModal .profile-badges-v5 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#profileModal .badge-vip-v5 {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
    color: #fff;
    text-transform: capitalize;
}

/* Level Badge - Move to right or keep here but sleek */
#profileModal .badge-level-v5 {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: none;
}

/* VIP PROGRESS - EXTREMELY THIN AND 3D */
#profileModal .profile-vip-progress-v5 {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 16px;
    margin-bottom: 24px;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

#profileModal .vip-progress-left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 14px;
    border-right: 1px solid rgba(255,255,255,0.05);
    margin-right: 14px;
}

#profileModal .vip-progress-icon-v5 { 
    font-size: 26px; 
    filter: none; 
}

#profileModal .vip-progress-right { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }

#profileModal .vip-progress-top .vip-label { font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}

#profileModal .vip-progress-mid { display: flex; align-items: center; gap: 8px; }
#profileModal .vip-progress-mid strong { font-size: 16px; font-weight: 700; color: #fff; text-shadow: none; }
#profileModal .vip-progress-mid .vip-level-badge { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 5px; background: rgba(0, 0, 0, 0.6); border-radius: 4px; overflow: hidden; width: 100%; box-shadow: none; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-bottom { display: flex; justify-content: space-between; font-size: 10px; color: #64748b; font-weight: 500; }
#profileModal .vip-points { color: #cbd5e1; font-weight: 600; }

/* ORDERS SECTION - 3D AND COMPACT TABS */
#profileModal .profile-orders-section-v5 {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%); 
    border-radius: 20px;
    padding: 16px;
    box-shadow: none;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.04);
}

#profileModal .orders-tabs-v5 {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
/* SIMPLE FONTS FOR TABS */
#profileModal .order-tab-btn-v5 {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.03);
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500; /* Simple weight */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s;
    box-shadow: none;
}
#profileModal .order-tab-btn-v5:hover { color: #e2e8f0; background: rgba(0,0,0,0.5); }
#profileModal .order-tab-btn-v5.active {
    color: #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: none;
}
#profileModal .tab-icon { font-size: 15px; filter: none; }
#profileModal .tab-badge {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}

/* Empty Orders Text (Only text, no box) */
#profileModal .empty-orders-text {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    text-shadow: none;
}

/* 3 STATS - SMALL AND 3D */
#profileModal .profile-stats-v5 {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

#profileModal .stat-card-v5 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 6px; 
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%); 
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: none;
    transition: transform 0.2s;
}
#profileModal .stat-card-v5:hover { transform: translateY(-2px); }

#profileModal .stat-icon-v5 { font-size: 18px; margin-bottom: 6px; filter: none; }
#profileModal .stat-card-v5 b { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1; text-shadow: none; }
#profileModal .stat-card-v5 small { font-size: 10px; color: #94a3b8; font-weight: 600; text-align: center; text-transform: capitalize; letter-spacing: 0.5px; }

/* LOGOUT BUTTON - 3D GLOW */
#profileModal .profile-logout-wrap-v5 {
    margin-top: auto; /* Push to bottom */
}

#profileModal .logout-btn-v5 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px; 
    border-radius: 16px;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    box-shadow: none;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: capitalize;
    letter-spacing: 0.5px;
    text-shadow: none;
}

#profileModal .logout-btn-v5:hover {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: none;
}

#profileModal .logout-btn-v5:active {
    transform: translateY(2px);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 18px;
    margin-right: 12px;
    filter: none;
}

#profileModal .logout-icon-right {
    font-size: 18px;
    margin-left: 12px;
    opacity: 0.5;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor { display: none; }
#profileModal .profile-name-editor.show {
    display: flex;
    position: absolute;
    top: 60px;
    right: 20px;
    background: #0f172a;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    z-index: 10;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: none;
}
#profileModal .profile-name-editor input {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
    font-weight: 500;
    font-size: 14px;
}
#profileModal .profile-name-editor input:focus { border-color: #10b981; }
#profileModal .profile-name-editor button {
    background: linear-gradient(180deg, #10b981, #059669);
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

/* NEW PROFILE MODAL STYLES V3 - SCROLLABLE & REORDERED */
#profileModal .premium-profile-box-v6 {
    /* Brighter, more professional background */
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Subtle border for premium feel */
    padding: 0 !important; 
    max-width: 420px !important;
    width: 95% !important;
    margin: 20px auto !important; 
    box-shadow: none !important;
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    overflow: hidden; /* Prevent modal overflow */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Don't exceed viewport */
}

/* Scroll Container inside Modal */
#profileModal .profile-scroll-container {
    overflow-y: auto; height: 100%; flex: 1 1 auto; min-height: 0; max-height: 100%; overscroll-behavior: contain; flex: 1; height: 100%; padding: 24px 16px 16px 16px !important;
    overflow-x: hidden;
    padding-right: 8px; /* For scrollbar */
    padding-top: 8px;
    padding-bottom: 20px;
}

/* Custom Scrollbar for the Profile */




#profileModal .profile-close-v6 {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}
#profileModal .profile-close-v6:hover { background: rgba(239, 68, 68, 0.8); }

/* HERO SECTION (NO BOX) */
#profileModal .profile-hero-v6 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 8px 16px 8px;
    margin-bottom: 16px;
    /* Removed background box! */
}

#profileModal .profile-avatar-frame-v6 {
    position: relative;
    width: 85px;
    height: 85px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v6 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#profileModal .profile-avatar-v6 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
}

#profileModal .profile-avatar-v6 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* NEW SVG CAMERA ICON */
#profileModal .profile-avatar-camera-icon-v6 {
    position: absolute;
    bottom: -2px; right: -2px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #1e293b;
    color: #fff;
    box-shadow: none;
    transition: transform 0.2s;
}
#profileModal .profile-avatar-wrap-v6:hover .profile-avatar-camera-icon-v6 { transform: scale(1.1); }

#profileModal .profile-info-v6 {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

#profileModal .profile-name-row-v6 {
    display: flex;
    align-items: center;
    gap: 12px;
}

#profileModal .profile-name-row-v6 h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    text-shadow: none;
}

#profileModal .profile-badges-v6 {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profileModal .badge-vip-v6 {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
    color: #fff;
}

#profileModal .badge-level-v6 {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
}

/* Edit Button moved to name row, NO BORDER */
#profileModal .profile-edit-btn-v6 {
    background: transparent;
    border: none;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #34d399; /* Green text */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
}
#profileModal .profile-edit-btn-v6:hover { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* VIP PROGRESS (Moved below Hero) */
#profileModal .profile-vip-progress-v6 {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    box-shadow: none;
    border: 1px solid rgba(245, 158, 11, 0.1);
}

#profileModal .vip-progress-icon-v6 { margin-right: 14px; filter: none; }

#profileModal .vip-progress-info-v6 { flex: 1; display: flex; flex-direction: column; gap: 4px; }

#profileModal .vip-progress-header-v6 .vip-label-small { font-size: 11px; color: #cbd5e1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}

#profileModal .vip-progress-title-row { display: flex; align-items: center; gap: 8px; }
#profileModal .vip-progress-title-row strong { font-size: 18px; font-weight: 500; color: #fff; }
#profileModal .vip-progress-title-row .vip-level-badge-small { background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; width: 100%; margin: 4px 0; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-footer-row { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; font-weight: 600; }
#profileModal .vip-points-text { color: #f8fafc; font-weight: 500; }

/* ORDERS SECTION WITH TABS (Made Larger) */
#profileModal .profile-orders-section-v6 {
    background: rgba(255, 255, 255, 0.03); 
    border-radius: 20px;
    padding: 18px;
    box-shadow: none;
    margin-bottom: 20px;
    min-height: 220px; /* Made even more spacious */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.03);
}

#profileModal .orders-tabs-v6 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
}
#profileModal .order-tab-item {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#profileModal .order-tab-item:hover { color: #fff; background: rgba(255,255,255,0.08); }
#profileModal .order-tab-item.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    box-shadow: none;
}
#profileModal .orders-badge-v6 {
    background: #f59e0b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 4px;
    box-shadow: none;
}

#profileModal .empty-orders-state-v6 {
    text-align: center;
    padding: 30px 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#profileModal .empty-orders-state-v6 .empty-box-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.8; filter: grayscale(1); }
#profileModal .empty-orders-state-v6 .empty-title { font-size: 16px; font-weight: 500; color: #e2e8f0; margin-bottom: 6px; }
#profileModal .empty-orders-state-v6 .empty-sub { font-size: 12px; color: #94a3b8; font-weight: 600; }

/* STATS SECTION (Moved to bottom) */
#profileModal .profile-stats-v6 {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

#profileModal .stat-card-v6 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px; 
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04); 
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: none;
}

#profileModal .stat-card-v6.orders { box-shadow: none; }
#profileModal .stat-card-v6.pending { box-shadow: none; }
#profileModal .stat-card-v6.vip { box-shadow: none; }

#profileModal .stat-icon-v6 { font-size: 20px; margin-bottom: 6px; filter: none; }
#profileModal .stat-card-v6 b { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 4px; line-height: 1; text-shadow: none; }
#profileModal .stat-card-v6 small { font-size: 10px; color: #94a3b8; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }

/* LOGOUT BUTTON (Extremely Beautiful) */
#profileModal .logout-btn-v6 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 24px; 
    border-radius: 20px;
    background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
    box-shadow: none;
    border: none !important;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#profileModal .logout-btn-v6::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s;
}
#profileModal .logout-btn-v6:hover::after {
    left: 150%;
}

#profileModal .logout-btn-v6:active {
    transform: scale(0.97);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 20px;
    margin-right: 12px;
    filter: none;
}

#profileModal .logout-icon-right {
    font-size: 20px;
    margin-left: 12px;
    opacity: 0.7;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor { display: none; }
#profileModal .profile-name-editor.show {
    display: flex;
    position: absolute;
    top: 60px;
    left: 100px;
    background: #0f172a;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    z-index: 10;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
#profileModal .profile-name-editor input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
    font-weight: 600;
}
#profileModal .profile-name-editor input:focus { border-color: #10b981; }
#profileModal .profile-name-editor button {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/* FIX CROP MODAL Z-INDEX SO IT APPEARS ABOVE PROFILE */
.profile-crop-modal {
    z-index: 100000 !important;
}

/* NEW PROFILE MODAL STYLES V3 - SCROLLABLE & REORDERED */
#profileModal .premium-profile-box-v2 {
    /* Brighter, more professional background */
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Subtle border for premium feel */
    padding: 24px 16px 16px 16px !important; 
    max-width: 420px !important;
    width: 95% !important;
    margin: 20px auto !important; 
    box-shadow: none !important;
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    overflow: hidden; /* Prevent modal overflow */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Don't exceed viewport */
}

/* Scroll Container inside Modal */
#profileModal .profile-scroll-container {
    overflow-y: auto; height: 100%; flex: 1 1 auto; min-height: 0; max-height: 100%; overscroll-behavior: contain;
    overflow-x: hidden;
    padding-right: 8px; /* For scrollbar */
    padding-top: 8px;
    padding-bottom: 20px;
}

/* Custom Scrollbar for the Profile */




#profileModal .profile-close-v2 {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.08);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}
#profileModal .profile-close-v2:hover { background: rgba(239, 68, 68, 0.8); }

/* HERO SECTION (NO BOX) */
#profileModal .profile-hero-v3 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 8px 16px 8px;
    margin-bottom: 16px;
    /* Removed background box! */
}

#profileModal .profile-avatar-frame-v3 {
    position: relative;
    width: 85px;
    height: 85px;
    flex-shrink: 0;
}

#profileModal .profile-avatar-wrap-v3 {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#profileModal .profile-avatar-v3 {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
}

#profileModal .profile-avatar-v3 img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* NEW SVG CAMERA ICON */
#profileModal .profile-avatar-camera-icon-v3 {
    position: absolute;
    bottom: -2px; right: -2px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #1e293b;
    color: #fff;
    box-shadow: none;
    transition: transform 0.2s;
}
#profileModal .profile-avatar-wrap-v3:hover .profile-avatar-camera-icon-v3 { transform: scale(1.1); }

#profileModal .profile-info-v3 {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

#profileModal .profile-name-row-v3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

#profileModal .profile-name-row-v3 h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    text-shadow: none;
}

#profileModal .profile-badges-v3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profileModal .badge-vip-v3 {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
    color: #fff;
}

#profileModal .badge-level-v3 {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
}

/* Edit Button moved to name row, NO BORDER */
#profileModal .profile-edit-btn-v3 {
    background: transparent;
    border: none;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #34d399; /* Green text */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
}
#profileModal .profile-edit-btn-v3:hover { background: rgba(16, 185, 129, 0.1); color: #10b981; }

/* VIP PROGRESS (Moved below Hero) */
#profileModal .profile-vip-progress-v3 {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    box-shadow: none;
    border: 1px solid rgba(245, 158, 11, 0.1);
}

#profileModal .vip-progress-icon-v3 { margin-right: 14px; filter: none; }

#profileModal .vip-progress-info-v3 { flex: 1; display: flex; flex-direction: column; gap: 4px; }

#profileModal .vip-progress-header-v3 .vip-label-small { font-size: 11px; color: #cbd5e1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}

#profileModal .vip-progress-title-row { display: flex; align-items: center; gap: 8px; }
#profileModal .vip-progress-title-row strong { font-size: 18px; font-weight: 800; color: #fff; }
#profileModal .vip-progress-title-row .vip-level-badge-small { background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; color: #fbbf24; }

#profileModal .vip-progress-bar-wrap { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; width: 100%; margin: 4px 0; }
#profileModal .vip-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); width: 30%; border-radius: 4px; box-shadow: none; }

#profileModal .vip-progress-footer-row { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; font-weight: 600; }
#profileModal .vip-points-text { color: #f8fafc; font-weight: 800; }

/* ORDERS SECTION WITH TABS (Made Larger) */
#profileModal .profile-orders-section-v3 {
    background: rgba(255, 255, 255, 0.03); 
    border-radius: 20px;
    padding: 18px;
    box-shadow: none;
    margin-bottom: 20px;
    min-height: 220px; /* Made even more spacious */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.03);
}

#profileModal .orders-tabs-v3 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
}
#profileModal .order-tab-item {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#profileModal .order-tab-item:hover { color: #fff; background: rgba(255,255,255,0.08); }
#profileModal .order-tab-item.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    box-shadow: none;
}
#profileModal .orders-badge-v3 {
    background: #f59e0b;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 4px;
    box-shadow: none;
}

#profileModal .empty-orders-state-v3 {
    text-align: center;
    padding: 30px 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#profileModal .empty-orders-state-v3 .empty-box-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.8; filter: grayscale(1); }
#profileModal .empty-orders-state-v3 .empty-title { font-size: 16px; font-weight: 800; color: #e2e8f0; margin-bottom: 6px; }
#profileModal .empty-orders-state-v3 .empty-sub { font-size: 12px; color: #94a3b8; font-weight: 600; }

/* STATS SECTION (Moved to bottom) */
#profileModal .profile-stats-v3 {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

#profileModal .stat-card-v3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px; 
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04); 
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: none;
}

#profileModal .stat-card-v3.orders { box-shadow: none; }
#profileModal .stat-card-v3.pending { box-shadow: none; }
#profileModal .stat-card-v3.vip { box-shadow: none; }

#profileModal .stat-icon-v3 { font-size: 20px; margin-bottom: 6px; filter: none; }
#profileModal .stat-card-v3 b { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 4px; line-height: 1; text-shadow: none; }
#profileModal .stat-card-v3 small { font-size: 10px; color: #94a3b8; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }

/* LOGOUT BUTTON (Extremely Beautiful) */
#profileModal .logout-btn-v3 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 24px; 
    border-radius: 20px;
    background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
    box-shadow: none;
    border: none !important;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#profileModal .logout-btn-v3::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s;
}
#profileModal .logout-btn-v3:hover::after {
    left: 150%;
}

#profileModal .logout-btn-v3:active {
    transform: scale(0.97);
    box-shadow: none;
}

#profileModal .logout-icon-left {
    font-size: 20px;
    margin-right: 12px;
    filter: none;
}

#profileModal .logout-icon-right {
    font-size: 20px;
    margin-left: 12px;
    opacity: 0.7;
}

/* Edit Name Editor Override */
#profileModal .profile-name-editor { display: none; }
#profileModal .profile-name-editor.show {
    display: flex;
    position: absolute;
    top: 60px;
    left: 100px;
    background: #0f172a;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    z-index: 10;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
#profileModal .profile-name-editor input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
    font-weight: 600;
}
#profileModal .profile-name-editor input:focus { border-color: #10b981; }
#profileModal .profile-name-editor button {
    background: #10b981;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

/* FIX CROP MODAL Z-INDEX SO IT APPEARS ABOVE PROFILE */
.profile-crop-modal {
    z-index: 100000 !important;
}

.profile-scroll-container { flex: 1; min-height: 0; }
#profileModal .profile-scroll-container::-webkit-scrollbar { display: none; } 
#profileModal .profile-scroll-container { scrollbar-width: none; -ms-overflow-style: none; }

/* NEW PROFILE MODAL STYLES V7 - THE ULTIMATE PREMIUM COMPACT SCROLLABLE V3 REVISION */
#profileModal .premium-profile-box-v2 {
    background: linear-gradient(145deg, #0d131f 0%, #060a10 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 215, 0, 0.1) !important;
    padding: 16px 8px 12px 8px !important; /* Extremely small side padding */
    max-width: 420px !important;
    width: 95% !important;
    margin: 20px auto !important; 
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
    height: 480px !important; max-height: 65vh !important;
}

#profileModal .profile-close-v2 {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
    width: 32px !important; 
    height: 32px !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 20px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
    backdrop-filter: none !important;
    transition: all 0.3s ease !important;
}

#profileModal .profile-scroll-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; position: relative !important; z-index: 1 !important;
    padding: 10px 4px !important; /* compact */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#profileModal .profile-scroll-container::-webkit-scrollbar {
    display: none !important;
}

#profileModal .profile-hero-v3 {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 4px 16px 4px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

#profileModal .profile-avatar-frame-v3 {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

#profileModal .profile-avatar-wrap-v3 {
    display: block !important;
    width: 100% !important; 
    height: 100% !important;
    border-radius: 50% !important;
    padding: 3px !important;
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    box-shadow: none !important;
}

#profileModal .profile-avatar-v3 {
    width: 100% !important; 
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 2px solid #000 !important;
}

#profileModal .profile-avatar-camera-icon-v3 {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #000 !important;
    cursor: pointer !important;
}
#profileModal .profile-avatar-camera-icon-v3 svg {
    stroke: #000 !important;
    width: 14px !important;
    height: 14px !important;
}

#profileModal .profile-info-v3 {
    flex: 1 !important;
    min-width: 0 !important; /* allows truncation */
}

#profileModal .profile-name-row-v3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

#profileModal .profile-name-row-v3 h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important; /* ensures edit button doesn't go offscreen */
}

#profileModal .profile-edit-btn-v3 {
    background: rgba(255, 215, 0, 0.1) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

#profileModal .profile-badges-v3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#profileModal .badge-vip-v3 {
    background: linear-gradient(90deg, rgba(255,215,0,0.1), rgba(255,140,0,0.1)) !important;
    border: 1px solid rgba(255,215,0,0.2) !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#profileModal .vip-icon { font-size: 12px !important; }
#profileModal .vip-text { font-size: 12px !important; font-weight: 700 !important; color: #ffd700 !important; }
#profileModal .badge-level-v3 {
    background: rgba(255,255,255,0.05) !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #aaa !important;
}

/* VIP STRIP */
#profileModal .profile-vip-progress-v3 {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,215,0,0.1) !important;
    border-radius: 16px !important;
    padding: 14px 12px !important;
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
}
#profileModal .profile-vip-progress-v3::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 40px !important; height: 100% !important;
    background: linear-gradient(90deg, rgba(255,215,0,0.05) 0%, transparent 100%) !important;
}

#profileModal .vip-progress-icon-v3 {
    background: rgba(255,215,0,0.1) !important;
    border: 1px solid rgba(255,215,0,0.2) !important;
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
}

#profileModal .vip-progress-info-v3 { flex: 1 !important; min-width: 0 !important; }
#profileModal .vip-label-small { font-size: 10px !important; text-transform: uppercase !important; color: #888 !important; letter-spacing: 0.5px !important; font-weight: 600 !important; }
#profileModal .vip-progress-title-row { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; }
#profileModal .vip-progress-title-row strong { font-size: 16px !important; color: #fff !important; }
#profileModal .vip-level-badge-small { font-size: 10px !important; background: rgba(255,255,255,0.1) !important; padding: 2px 6px !important; border-radius: 4px !important; color: #ffd700 !important; }

#profileModal .vip-progress-bar-wrap { height: 6px !important; background: rgba(255,255,255,0.05) !important; border-radius: 3px !important; overflow: hidden !important; margin-bottom: 4px !important; }
#profileModal .vip-progress-bar-fill { height: 100% !important; background: linear-gradient(90deg, #ffd700, #ff8c00) !important; border-radius: 3px !important; }
#profileModal .vip-progress-footer-row { display: flex !important; justify-content: space-between !important; font-size: 10px !important; color: #777 !important; }
#profileModal .vip-points-text { color: #ffd700 !important; font-weight: 600 !important; }

/* ORDERS SECTION */
#profileModal .profile-orders-section-v3 {
    background: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    border-radius: 16px !important;
    padding: 14px 10px !important;
    margin-bottom: 16px !important;
}

#profileModal .orders-tabs-v3 {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

#profileModal .order-tab-item {
    flex: 1 !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    padding: 10px 0 !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #888 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

#profileModal .order-tab-item.active {
    background: rgba(255,215,0,0.1) !important;
    border-color: rgba(255,215,0,0.3) !important;
    color: #ffd700 !important;
}

#profileModal .orders-badge-v3 {
    background: #ff8c00 !important;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
}

#profileModal .empty-orders-state-v3 {
    padding: 20px 0 !important;
    text-align: center !important;
    border: 1px dashed rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,0.1) !important;
}

/* STATS */
#profileModal .profile-stats-v3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

#profileModal .stat-card-v3 {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    padding: 12px 6px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

#profileModal .stat-icon-v3 { font-size: 18px !important; margin-bottom: 6px !important; }
#profileModal .stat-card-v3 b { font-size: 16px !important; color: #fff !important; margin-bottom: 2px !important; }
#profileModal .stat-card-v3 small { font-size: 10px !important; color: #777 !important; }

/* LOGOUT */
#profileModal .profile-logout-wrap-v3 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

#profileModal .logout-btn-v3 {
    width: 100% !important;
    background: linear-gradient(90deg, rgba(255,0,0,0.1), transparent) !important;
    border: 1px solid rgba(255,0,0,0.2) !important;
    padding: 14px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ff4d4d !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

#profileModal .logout-btn-v3:hover {
    background: rgba(255,0,0,0.15) !important;
    border-color: rgba(255,0,0,0.4) !important;
}

#profileModal { touch-action: auto !important; pointer-events: auto !important; } 
#profileModal * { touch-action: auto !important; } 
#profileModal .premium-profile-box-v2 { touch-action: auto !important; } 
#profileModal .profile-scroll-container { touch-action: auto !important; }
#profileModal .profile-logout-wrap-v3 { margin-top: 10px !important; margin-bottom: 6px !important; }
#profileModal .premium-profile-box-v2 { height: auto !important; max-height: 86vh !important; max-height: 86dvh !important; }
#profileModal .profile-scroll-container { height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; touch-action: pan-y !important; }

/* EPS direct hosted-checkout payment step (LI GAMING) */
.eps-direct-pay-panel{padding:18px;margin:15px 0 12px;border-color:rgba(46,220,157,.26);background:linear-gradient(145deg,rgba(12,31,43,.96),rgba(8,20,31,.96))}
.eps-method-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0 12px}
.eps-method-pill{display:flex;min-height:48px;align-items:center;justify-content:center;padding:10px 6px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);font-size:15px;font-weight:1000;letter-spacing:-.2px;color:#fff}
.eps-bkash-pill{border-color:rgba(220,25,107,.35);color:#ff77b5}
.eps-nagad-pill{border-color:rgba(255,151,32,.36);color:#ffb15b}
.eps-rocket-pill{border-color:rgba(174,73,197,.35);color:#d69ae7}
.eps-direct-pay-copy{margin:8px 0 0;color:#9fb2c4;font-size:12px;line-height:1.65}
.eps-direct-pay-button{width:100%;min-height:60px;display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 18px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:linear-gradient(135deg,#21d98b,#0d9b68);box-shadow:none;color:#fff;font-size:15px;font-weight:1000;letter-spacing:.1px;cursor:pointer;transition:transform .16s ease,filter .16s ease}
.eps-direct-pay-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.eps-direct-pay-button:disabled{opacity:.65;cursor:wait;transform:none}
.eps-direct-pay-button .pp-i{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eps-payment-footnote{margin:12px 4px 0;color:#8599ac;font-size:11px;line-height:1.55;text-align:center}
@media(max-width:390px){.eps-method-pill{font-size:13px;min-height:43px}.eps-direct-pay-button{font-size:13px;padding:13px 10px}}

.eps-payment-error{margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,120,120,.28);background:rgba(125,22,34,.22);color:#ffc1c7;font-size:12px;line-height:1.6;overflow-wrap:anywhere}


/* LI GAMING v15: clean, standard typography only on the 8 Ball Pool catalog page. */
body.li-pool-simple-font,
body.li-pool-simple-font * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-synthesis: none !important;
  letter-spacing: normal;
}
}


/* Cue artwork uploaded from Admin: retain the exact PNG and place it on a CSS-built 3D stage. */
.cue-artwork-banner{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:40px;margin:8px 0 9px;padding:3px 7px;overflow:hidden;border:1px solid rgba(132,112,255,.25);border-radius:10px;background:radial-gradient(ellipse at 50% 55%,rgba(168,47,255,.12),transparent 58%),radial-gradient(ellipse at 12% 16%,rgba(47,202,255,.08),transparent 37%),linear-gradient(128deg,#090d1b 0%,#110b25 45%,#0a1726 100%);box-shadow:0 3px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07)}
.cue-artwork-banner:before{content:"";position:absolute;z-index:0;left:12%;right:12%;top:3px;bottom:1px;border:1px solid rgba(77,205,255,.2);border-bottom-color:rgba(255,174,64,.2);border-radius:50%;transform:perspective(240px) rotateX(57deg) scaleY(.72);background:radial-gradient(ellipse at 50% 54%,rgba(97,59,231,.10),rgba(4,12,31,.01) 67%);box-shadow:0 0 7px rgba(64,172,255,.08)}
.cue-artwork-banner:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 20%,rgba(101,218,255,.06) 28%,transparent 35%,transparent 65%,rgba(255,193,89,.05) 75%,transparent 84%)}
.cue-artwork-banner img{position:relative;z-index:2;display:block;width:100%;max-width:100%;height:auto;max-height:31px;object-fit:contain;object-position:center;filter:drop-shadow(0 1px 1px rgba(0,0,0,.72)) drop-shadow(0 0 2px rgba(150,92,255,.18))}
.cue-sl-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(68px,74px);align-items:center;gap:5px;min-width:0}.cue-sl-layout.cue-sl-has-artwork{grid-template-columns:minmax(0,1.12fr) minmax(56px,.72fr) minmax(60px,.52fr)}
.cue-sl-stat-list{min-width:0;display:flex;flex-direction:column;gap:2px;padding-left:14px}.cue-sl-has-artwork .cue-sl-stat-list{padding-left:8px}
.cue-sl-artwork-wrap{display:none!important}
.cue-sl-artwork-wrap img{display:none!important}
.cue-sl-level-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;margin-right:3px;background:linear-gradient(145deg,#070f1c 0%,#0a1c30 50%,#040a14 100%);border:1px solid rgba(45,170,255,.65);border-radius:10px;padding:5px 3px;box-shadow:inset 0 1px rgba(255,255,255,.18);gap:2px}
.cue-sl-level-card span:first-child{font-size:5.5px;font-weight:900;letter-spacing:1.5px;color:#38a0c8;text-transform:uppercase}
.cue-sl-level-card b{font-size:clamp(22px,5vw,34px);font-weight:900;line-height:1;color:#fff;text-shadow:none}
.cue-sl-level-card span:last-child{font-size:6px;color:#28688a;letter-spacing:.7px;text-transform:uppercase}
@media(max-width:420px){.cue-artwork-banner{min-height:38px;margin:7px 0 9px;padding:3px 6px}.cue-artwork-banner img{max-height:29px}.cue-sl-layout{grid-template-columns:minmax(0,1fr) minmax(58px,64px);gap:3px}.cue-sl-layout.cue-sl-has-artwork{grid-template-columns:minmax(0,1.08fr) minmax(46px,.62fr) minmax(52px,.5fr)}.cue-sl-stat-list{padding-left:10px}.cue-sl-has-artwork .cue-sl-stat-list{padding-left:6px}.cue-sl-level-card{padding:5px 2px}.cue-sl-level-card b{font-size:23px}}