@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --rp-ink: #111111;
  --rp-deep: #171717;
  --rp-surface: #202020;
  --rp-surface-2: #2a2a2a;
  --rp-line: rgba(252, 175, 23, .25);
  --rp-ivory: #f4f0e8;
  --rp-muted: #b7b2a9;
  --rp-copper: #fcaf17;
  --rp-copper-bright: #fcaf17;
  --rp-rust: #fcaf17;
  --rp-shadow: 0 28px 80px rgba(0, 0, 0, .48);
  --rp-serif: "Barlow Condensed", Impact, sans-serif;
  --rp-sans: "DM Sans", system-ui, sans-serif;
  --rp-mono: "DM Mono", monospace;
  --vx-lime: #fcaf17;
  --vx-amber: #fcaf17;
  --lime: #fcaf17;
  --red: #fcaf17;
}

* { box-sizing: border-box; }
html {
  color-scheme: dark;
  background: var(--rp-ink) !important;
  scroll-behavior: smooth;
  scrollbar-color: #74614b var(--rp-ink);
}
body {
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(159, 112, 70, .14), transparent 36rem),
    linear-gradient(145deg, #131a1a 0%, #0e1314 68%, #151918 100%) !important;
  color: var(--rp-ivory) !important;
  font-family: var(--rp-sans) !important;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::after {
  content: "";
  position: fixed;
  z-index: 9997;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(242, 222, 188, .09) 4px, transparent 5px);
  mix-blend-mode: soft-light;
}
img, svg, video, canvas { max-width: 100%; }
img { object-fit: cover; }
h1, h2, h3, h4, .section-title, .heading h1, .title, .header h1 {
  color: var(--rp-ivory) !important;
  font-family: var(--rp-serif) !important;
  font-weight: 500;
  letter-spacing: -.035em;
}
a { color: var(--rp-copper-bright); text-underline-offset: 3px; }
button, input, select, textarea { font-family: var(--rp-sans) !important; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button, [role="button"] { transition: transform .22s cubic-bezier(.2,.7,.25,1), color .2s ease, background-color .2s ease, border-color .2s ease; }
button:not(:disabled):active, [role="button"]:active { transform: translateY(1px) scale(.985); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rp-copper-bright) !important;
  outline-offset: 4px;
}
input, select, textarea {
  background: #111818 !important;
  border-color: #49514c !important;
  color: var(--rp-ivory) !important;
  border-radius: 11px;
}
input::placeholder, textarea::placeholder { color: #888d85 !important; }

/* Shared member shell: cinematic framing without constraining desktop operations. */
.app, .page, .profile-app, body.app-responsive > main, body.app-responsive > div:not(.app-toast) {
  color: var(--rp-ivory) !important;
}
.app {
  position: relative;
  width: min(100%, 1120px) !important;
  min-height: 100dvh;
  margin-inline: auto;
  overflow: clip !important;
  padding-bottom: max(104px, calc(112px + env(safe-area-inset-bottom))) !important;
  background: linear-gradient(160deg, rgba(26, 35, 35, .98), rgba(14, 20, 20, .99)) !important;
  border-inline: 1px solid rgba(220, 198, 160, .12);
  box-shadow: 0 0 100px rgba(0, 0, 0, .42);
}
.app > .hero, .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--rp-ivory) !important;
  background-color: #202727 !important;
}
.app > .hero {
  min-height: clamp(235px, 34vw, 370px);
  border-radius: 0 0 26px 26px;
  border-bottom: 1px solid rgba(231, 197, 151, .2);
}
.app > .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 15, 15, .86) 0%, rgba(13, 18, 18, .55) 48%, rgba(13, 18, 18, .08) 100%),
    linear-gradient(0deg, rgba(10, 14, 14, .75), transparent 60%);
}
.app > .hero::after {
  content: "UNIVERS · INDÉPENDANT";
  position: absolute;
  z-index: 2;
  right: clamp(16px, 4vw, 42px);
  bottom: 19px;
  inset: auto clamp(16px, 4vw, 42px) 19px auto;
  color: rgba(240, 222, 190, .8) !important;
  font: 500 9px/1 var(--rp-mono);
  letter-spacing: .2em;
}
.hero-media { filter: saturate(.82) contrast(1.04); }
.hero-copy, .hero-in { position: relative; z-index: 2; }
.vortex-word, .logo, .brand {
  color: var(--rp-ivory) !important;
  font-family: var(--rp-serif) !important;
  font-style: normal !important;
  font-size: clamp(30px, 5vw, 48px) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-shadow: 0 3px 22px rgba(0,0,0,.56);
}
.vortex-word span { color: var(--rp-copper-bright) !important; }
.slogan, .hero p { color: rgba(241, 234, 219, .88) !important; }
.value { color: rgba(241, 234, 219, .85) !important; }
.value svg, .value i { color: var(--rp-copper-bright) !important; }
.main, .content, .profile-content, main {
  color: var(--rp-ivory);
}
.main, .content { padding-inline: clamp(14px, 3vw, 34px) !important; }
.actions {
  position: relative;
  z-index: 3;
  margin-top: -25px !important;
  padding: 9px !important;
  gap: 8px !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 17px !important;
  background: rgba(27, 37, 36, .97) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.28) !important;
}
.act {
  min-height: 66px;
  border: 1px solid rgba(215,163,110,.22);
  border-radius: 12px !important;
  background: linear-gradient(145deg, #3c3328, #282a25) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
  color: var(--rp-ivory) !important;
  font-size: 12px !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.act:hover { transform: translateY(-2px); border-color: rgba(233,189,137,.55); }
.act small { color: var(--rp-muted); font-size: 9px !important; }
.ticker {
  min-height: 39px;
  border: 1px solid var(--rp-line) !important;
  border-radius: 9px !important;
  background: #171f1e !important;
  color: #d7d0c2 !important;
  font: 10px var(--rp-mono) !important;
}
.ticker b, .ticker-item b { color: var(--rp-copper-bright) !important; }
.santa, .brands, .promo {
  border: 1px solid rgba(224, 184, 133, .25) !important;
  border-radius: 16px !important;
  color: var(--rp-ivory) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
}
.santa::before, .brands::before, .promo::before {
  background: linear-gradient(90deg, rgba(14,20,19,.88), rgba(14,20,19,.57) 55%, rgba(14,20,19,.06)) !important;
}
.santa h1, .brands h2, .promo h2 { color: var(--rp-ivory) !important; }
.santa p, .brands p, .promo p { color: rgba(241,234,219,.78) !important; }
.cta, .brands a, .promo a {
  border: 1px solid rgba(233,189,137,.8) !important;
  border-radius: 99px !important;
  background: rgba(21,28,27,.86) !important;
  color: var(--rp-copper-bright) !important;
  padding: 9px 16px !important;
}
.balances { gap: 12px !important; }
.bal, .summary {
  min-height: 100px;
  border: 1px solid rgba(219,204,175,.18) !important;
  border-radius: 16px !important;
  background-color: #1c2726 !important;
  color: var(--rp-ivory) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
  transition: transform .24s ease, border-color .24s ease;
}
a.bal:hover, a.summary:hover { transform: translateY(-3px); border-color: rgba(233,189,137,.48) !important; }
.bal.red, .bal.light { color: var(--rp-ivory) !important; }
.bal strong, .summary strong { color: var(--rp-ivory) !important; font: 600 22px var(--rp-serif) !important; }
.bal small, .summary small { color: var(--rp-muted) !important; }
.bal .round, .summary-icon {
  color: var(--rp-copper-bright) !important;
  background: rgba(215,163,110,.13) !important;
  border: 1px solid rgba(215,163,110,.25);
}
.group, .card, .product, .panel, .form-card, .rules-card, .reward-card,
.info, .status-card, .week-card, .sheet, .balance, .summary, .actions {
  border-color: var(--rp-line) !important;
  background-color: var(--rp-surface) !important;
  color: var(--rp-ivory) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22) !important;
}
.group { padding: clamp(17px, 3vw, 27px) !important; border-radius: 17px !important; }
.group label, .eyebrow, .plan { color: var(--rp-copper-bright) !important; }
.group h2 { color: var(--rp-ivory) !important; font: 500 clamp(32px, 5vw, 48px)/.95 var(--rp-serif) !important; }
.group h3 { color: #d6c5a9 !important; }
.group p, .copy, .notice, .desc, .details, .heading p, .subtitle { color: var(--rp-muted) !important; }
.timeline::before { background: rgba(215,163,110,.35) !important; }
.year b { background: #66513a !important; color: #f4e7cf !important; box-shadow: 0 0 0 4px rgba(215,163,110,.08); }
.year:nth-child(2n) b, .year:nth-child(3n) b { background: #3e4c42 !important; }

/* Catalogue keeps real product data intact while making each entry read as a collectible. */
.heading { margin: 23px 2px 13px !important; }
.heading-copy { border-left-color: var(--rp-copper) !important; }
.heading h1 { font-size: clamp(25px, 3.5vw, 37px) !important; }
.plan { border: 1px solid rgba(215,163,110,.34) !important; background: #292c27 !important; }
.products { gap: 12px !important; }
.badge { border: 1px solid rgba(241,234,219,.28); background: rgba(17,23,23,.88) !important; color: var(--rp-ivory) !important; font: 10px var(--rp-mono) !important; }
.product-body h2 { font-size: clamp(17px, 2vw, 22px) !important; }
.desc, .details { font-size: 11px !important; }
.details { gap: 5px !important; }
.details b { color: var(--rp-copper-bright) !important; }
.sold-out { color: #d8a079 !important; }
.buy, .btn, .primary-button, .submit-button, .submit, button[type="submit"], .confirm, .primary, .checkin-button, .understand {
  border: 1px solid #e9bd89 !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, #d0a06d, #e3b985) !important;
  color: #201b15 !important;
  box-shadow: 0 8px 20px rgba(168,112,65,.2) !important;
  font-weight: 700 !important;
}
.buy:hover, .btn:hover, .primary-button:hover, .submit:hover, button[type="submit"]:hover, .understand:hover { filter: brightness(1.06); }
.buy:disabled, button:disabled { opacity: .5 !important; }
.products-state, .empty, .state-empty {
  border: 1px dashed rgba(215,163,110,.36) !important;
  border-radius: 14px !important;
  background: #192120 !important;
  color: var(--rp-muted) !important;
}
.products-state.error, .error, .state-error, .field-error { color: #e7a98e !important; }

/* Shared public pages, profile and transaction forms. */
.header {
  min-height: 70px;
  background: rgba(18,25,25,.96) !important;
  border-bottom: 1px solid var(--rp-line) !important;
}
.header h1 { font-size: clamp(17px, 2.5vw, 23px) !important; }
.header .logo, .header .brand {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  font-size: clamp(18px, 4.8vw, 25px) !important;
  letter-spacing: .035em !important;
  line-height: 1.2;
}
.header h1 {
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.header .back { flex: 0 0 24px; }
.title::before { background: var(--rp-copper) !important; }
.feature i { color: var(--rp-copper-bright) !important; background: #2a3531 !important; }
.back { color: var(--rp-copper-bright) !important; }
.page .content { padding: clamp(18px, 4vw, 38px) !important; }
.page .content h2, .page .content h3, .title { color: var(--rp-ivory) !important; }
.page .content li::marker { color: var(--rp-copper-bright); }
.card, .form-card, .rules-card, .reward-card, .status-card, .week-card, .panel {
  border-radius: 17px !important;
  background: linear-gradient(145deg, #202a29, #18201f) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
}
.field, .field input, .field select, .field textarea {
  border-color: #4c5650 !important;
  background: #141b1a !important;
  color: var(--rp-ivory) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}
.field:focus-within { border-color: var(--rp-copper) !important; box-shadow: 0 0 0 3px rgba(215,163,110,.13) !important; }
.field-label, label { color: #d6c9b2; }
.tab.active, .nav-item.active { color: var(--rp-copper-bright) !important; border-color: var(--rp-copper) !important; }
.table-wrap, .table-responsive, [data-purpose="table"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table, .table-responsive table, [data-purpose="table"] table { min-width: 35rem; }
table { border-collapse: collapse; color: var(--rp-ivory); }
th { color: var(--rp-copper-bright); font: 500 10px var(--rp-mono); letter-spacing: .1em; text-transform: uppercase; }
td, th { border-bottom: 1px solid var(--rp-line) !important; padding: 12px 10px; }
.app-toast { background: #d7a36e !important; color: #201b15 !important; border: 1px solid #edc99b !important; }
.app-toast-error { background: #6c4034 !important; color: #f4dfd2 !important; }
.success, .state-success { color: #d6c398 !important; border-color: rgba(215,163,110,.5) !important; }

/* Login and registration: editorial two-panel composition, elegant on wide displays too. */
body:has(.login-card), body:has(#registration-form) {
  background:
    linear-gradient(90deg, rgba(11,16,16,.78), rgba(11,16,16,.53) 47%, rgba(11,16,16,.79)),
    url("/attached_assets/rockstar-games/gta-vi-vice-city.webp") 58% 42% / cover fixed !important;
}
body:has(.login-card)::before, body:has(#registration-form)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(9,13,13,.8), transparent 50%), radial-gradient(circle at 16% 20%, rgba(180,120,67,.16), transparent 35%);
}
body:has(.login-card) .page, body:has(#registration-form) .page {
  z-index: 1;
  width: min(100%, 1160px) !important;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .82fr);
  align-content: center;
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
  padding: clamp(26px, 5vw, 72px) !important;
}
body:has(.auth-media) .auth-media { display: none !important; }
body:has(.login-card) .promo, body:has(#registration-form) .promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: min(620px, 76dvh);
  height: auto !important;
  margin: 0 !important;
  padding: clamp(30px, 6vw, 76px) !important;
  border: 1px solid rgba(233,189,137,.26);
  border-radius: 22px !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(14,19,18,.9), rgba(14,19,18,.4) 60%, rgba(14,19,18,.04)),
    url("/attached_assets/rockstar-games/gta-vi-jason-lucia.webp") center/cover !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
}
body:has(.login-card) .promo-media, body:has(#registration-form) .promo-media { display: none !important; }
body:has(.login-card) .promo::after, body:has(#registration-form) .promo::after {
  content: "IMAGES DE JEUX · CRÉDIT AUX AYANTS DROIT · PLATEFORME INDÉPENDANTE";
  position: absolute;
  right: 18px;
  bottom: 15px;
  color: rgba(241,234,219,.7);
  font: 8px var(--rp-mono);
  letter-spacing: .08em;
}
body:has(.login-card) .promo-main, body:has(#registration-form) .promo-main {
  width: auto !important;
  max-width: 540px !important;
  margin: auto 0 10px !important;
  color: var(--rp-ivory) !important;
  font: 600 clamp(44px, 7vw, 82px)/.98 var(--rp-serif) !important;
  letter-spacing: -.06em !important;
  text-transform: none !important;
}
body:has(.login-card) .promo-script, body:has(#registration-form) .script {
  color: var(--rp-copper-bright) !important;
  font: 500 italic 1em var(--rp-serif) !important;
  letter-spacing: -.04em !important;
}
body:has(.login-card) .promo-small, body:has(#registration-form) .promo-small {
  margin: 20px 0 0 !important;
  color: #e0d7c6 !important;
  font: 10px/1.8 var(--rp-mono) !important;
  letter-spacing: .18em !important;
}
body:has(.login-card) .login-card, body:has(#registration-form) .card {
  width: 100%;
  max-width: 520px;
  justify-self: center;
  padding: clamp(25px, 4vw, 48px) !important;
  border: 1px solid rgba(220,198,160,.2) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(31,41,40,.97), rgba(18,25,24,.98)) !important;
  box-shadow: 0 28px 75px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.07) !important;
}
body:has(.login-card) .login-card::before, body:has(#registration-form) .card header::before {
  content: "ROCKSTAR · ESPACE PRIVÉ";
  display: block;
  margin: 0 0 19px;
  color: var(--rp-copper-bright) !important;
  font: 500 9px var(--rp-mono) !important;
  letter-spacing: .2em !important;
}
body:has(.login-card) .welcome { color: var(--rp-copper-bright) !important; }
body:has(.login-card) h1, body:has(#registration-form) h1 { font-size: clamp(30px, 4vw, 44px) !important; }
body:has(.login-card) .subtitle, body:has(#registration-form) .subtitle { font-size: 14px !important; line-height: 1.6; }
body:has(.login-card) .field-label svg, body:has(#registration-form) .field-icon { color: var(--rp-copper-bright) !important; }
body:has(.login-card) .country, body:has(#registration-form) .phone-prefix {
  color: var(--rp-ivory) !important;
  border-color: rgba(215,163,110,.22) !important;
}
body:has(.login-card) .primary-button, body:has(#registration-form) .submit {
  min-height: 58px;
  color: #201b15 !important;
}
body:has(.login-card) .signup, body:has(#registration-form) .login a {
  border-color: rgba(215,163,110,.5) !important;
  color: var(--rp-ivory) !important;
}
body:has(.login-card) .signup strong, body:has(.login-card) .forgot, body:has(#registration-form) .login a { color: var(--rp-copper-bright) !important; }
body:has(.login-card) .signup {
  min-height: 54px;
  border: 1px solid rgba(215,163,110,.62) !important;
  background: #252c29 !important;
  color: var(--rp-ivory) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
}
body:has(.login-card) .signup > svg,
body:has(.login-card) .signup .chevron { color: var(--rp-copper-bright) !important; }
body:has(.login-card) .signup strong { color: var(--rp-copper-bright) !important; }
body:has(.login-card) .remember input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 18px;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0;
  padding: 0;
  border: 1px solid #b98f61 !important;
  border-radius: 4px;
  background: #161e1c !important;
  box-shadow: none !important;
}
body:has(.login-card) .remember input[type="checkbox"]:checked {
  border-color: var(--rp-copper-bright) !important;
  background: #b98454 !important;
  box-shadow: inset 0 0 0 4px #202724 !important;
}
body:has(.login-card) .button-arrow,
body:has(#registration-form) .arrow {
  background: #202724 !important;
  color: var(--rp-copper-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(233,189,137,.28) !important;
}
body:has(.login-card) .button-arrow svg,
body:has(#registration-form) .arrow svg { color: var(--rp-copper-bright) !important; }
body:has(.login-card) .promo-script::after,
body:has(#registration-form) .script::after {
  background: var(--rp-copper-bright) !important;
  box-shadow: none !important;
}
body:has(#registration-form) .phone-prefix svg,
body:has(#registration-form) .field-icon,
body:has(#registration-form) .toggle,
body:has(#registration-form) .info { color: var(--rp-copper-bright) !important; }
body:has(#registration-form) .country-option.selected {
  border-color: rgba(233,189,137,.6) !important;
  background: linear-gradient(90deg, #383128, #2d302a) !important;
}
body:has(#registration-form) .country-option .check {
  background: var(--rp-copper-bright) !important;
  color: #201b15 !important;
}
body:has(#registration-form) .submit .arrow { color: var(--rp-copper-bright) !important; }
body:has(.login-card) .country-modal, body:has(#registration-form) .modal {
  background: rgba(5,9,9,.78) !important;
}
body:has(.login-card) .country-sheet, body:has(#registration-form) .sheet {
  border: 1px solid var(--rp-line) !important;
  background: #1c2524 !important;
  color: var(--rp-ivory) !important;
}
body:has(.login-card) .country-sheet-head, body:has(#registration-form) .sheet-head {
  background: #1b2423 !important;
  border-color: var(--rp-line) !important;
}
body:has(.login-card) .country-option, body:has(#registration-form) .country-option {
  background: #202a29 !important;
  border-color: var(--rp-line) !important;
  color: var(--rp-ivory) !important;
}

/* Campaign notice keeps the existing dialog's state and content contract. */
.campaign-overlay {
  background: rgba(7,11,11,.78) !important;
  backdrop-filter: blur(8px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.82) !important;
}
.campaign-popup {
  border: 1px solid rgba(233,189,137,.62) !important;
  border-radius: 21px !important;
  background: #1b2423 !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.7) !important;
  filter: none !important;
}
.campaign-photo {
  border-radius: 20px 20px 0 0 !important;
  background-image: linear-gradient(90deg, rgba(11,16,15,.66), rgba(11,16,15,.1)), url("/attached_assets/rockstar-games/gta-vi-vice-city.webp") !important;
  background-size: cover !important;
  background-position: 61% 46% !important;
}
.campaign-photo-source { display: none !important; }
.campaign-photo::after { display: block !important; background: linear-gradient(0deg, rgba(13,19,18,.72), transparent 56%) !important; }
.campaign-brand { color: var(--rp-ivory) !important; text-shadow: 0 2px 12px #000 !important; }
.campaign-brand small { margin-left: 0 !important; color: var(--rp-copper-bright); font: 9px var(--rp-mono) !important; letter-spacing: .16em; }
.campaign-brand strong { font: 500 24px/1.1 var(--rp-serif) !important; }
.campaign-brand em { color: var(--rp-copper-bright); }
.campaign-close {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  top: 12px !important;
  right: 12px !important;
  border: 1px solid rgba(241,234,219,.45) !important;
  border-radius: 50% !important;
  background: rgba(16,23,22,.76) !important;
  color: var(--rp-ivory) !important;
}
.campaign-close svg { display: block !important; width: 19px; height: 19px; color: var(--rp-ivory); }
.campaign-panel {
  margin: -12px 10px 10px !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 16px !important;
  background: #202a29 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
}
.notice-title { color: var(--rp-ivory) !important; font: 600 17px/1.2 var(--rp-serif) !important; }
.notice-title small { color: var(--rp-muted) !important; }
.bell-box, .offer, .campaign-banner.green, .campaign-banner.yellow {
  border: 1px solid rgba(215,163,110,.24) !important;
  background: #2c332d !important;
  color: var(--rp-copper-bright) !important;
  box-shadow: none !important;
}
.campaign-list li { color: #ded8ca !important; border-color: var(--rp-line) !important; }
.campaign-list b { color: var(--rp-copper-bright) !important; }
.campaign-list .ico { background: #2a3331 !important; color: var(--rp-copper-bright) !important; box-shadow: none !important; }
.campaign-ice { display: none !important; }
.understand { min-height: 50px !important; color: #201b15 !important; }
.understand span { background: #1c2422 !important; color: var(--rp-copper-bright) !important; }

/* Transaction history and account actions use restrained data typography. */
.amount, .details b, .balance strong, .amount strong { color: var(--rp-copper-bright) !important; }
.transaction, .record, .history-item, .menu-item {
  border-color: var(--rp-line) !important;
  background: #1b2524 !important;
  color: var(--rp-ivory) !important;
}
.menu-item { transition: transform .2s ease, border-color .2s ease; }
.menu-item:hover { transform: translateX(3px); border-color: rgba(233,189,137,.38) !important; }

@media (min-width: 768px) {
  body { padding: 22px; }
  .app { border-radius: 24px; }
  .app > .hero { border-radius: 22px; margin: 14px 14px 0; }
  .hero-in, .hero-copy { padding-left: clamp(26px, 4vw, 54px) !important; }
  .main, .content { max-width: 1000px; margin-inline: auto; }
  .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .balances { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .products { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  body { padding: 0 !important; }
  .app { border-radius: 0 !important; border-inline: 0; }
  .app > .hero { min-height: 232px; border-radius: 0 0 22px 22px; margin: 0; }
  .main, .content { padding-inline: 14px !important; }
  .products { grid-template-columns: 1fr; }
  .details { font-size: 10px !important; }
  .balances { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body:has(.login-card) .page, body:has(#registration-form) .page {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 13px;
    width: 100% !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)) !important;
  }
  body:has(.login-card) .promo, body:has(#registration-form) .promo {
    align-self: stretch;
    min-height: 175px;
    height: 175px !important;
    flex: none;
    padding: 18px 18px 27px !important;
    border-radius: 17px !important;
    background-position: 57% 41% !important;
  }
  body:has(.login-card) .promo-main, body:has(#registration-form) .promo-main {
    margin: auto 0 0 !important;
    font-size: clamp(29px, 8vw, 40px) !important;
    line-height: .98 !important;
    max-width: 88% !important;
  }
  body:has(.login-card) .promo-small, body:has(#registration-form) .promo-small {
    max-width: 72%;
    margin-top: 6px !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
  }
  body:has(.login-card) .promo::after, body:has(#registration-form) .promo::after {
    right: 9px;
    bottom: 7px;
    max-width: 54%;
    font-size: 6px;
    line-height: 1.25;
    text-align: right;
  }
  body:has(.login-card) .login-card, body:has(#registration-form) .card { max-width: 560px; padding: 25px 21px !important; }
  body:has(.login-card) .login-card::before, body:has(#registration-form) .card header::before { margin-bottom: 13px; }
}
@media (max-width: 380px) {
  .balances { gap: 7px !important; }
  .bal { padding: 12px !important; }
  .details { font-size: 9px !important; }
  .campaign-panel { margin-inline: 7px !important; padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Legacy shared CSS also styles transient feedback and raster dock icons. */
.toast {
  background: #fcaf17 !important;
  color: #111111 !important;
  border: 1px solid #fcaf17 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.toast.error, .toast-error {
  background: #a92f25 !important;
  border-color: #a92f25 !important;
  color: #ffffff !important;
}
.bottom .nav.product img { display: none !important; }
.bottom .nav.product::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("/assets/icons/gamepad.svg") center / contain no-repeat;
  mask: url("/assets/icons/gamepad.svg") center / contain no-repeat;
}

/* Final cross-route art direction: after-hours crime cinema, not showroom chrome. */
body {
  background:
    radial-gradient(ellipse at 78% 0%, rgba(184, 75, 62, .095), transparent 34rem),
    linear-gradient(145deg, #151817 0%, #0d1110 64%, #171714 100%) !important;
}
body::after {
  opacity: .045;
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(239, 226, 201, .08) 5px, transparent 6px);
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background: linear-gradient(90deg, #101313e8, #10131388 56%, #101313e8),
    url("/attached_assets/rockstar-games/gta-vi-vice-city.webp") center 44% / cover no-repeat;
  filter: saturate(.55) contrast(1.08);
}
::selection { color: #15120f; background: #dfbd7d; }

/* Global controls: quiet, legible, touch-sized; status colors retain meaning. */
button, [role="button"], a { transition-property: transform, opacity, color, background-color, border-color; }
input, select, textarea {
  min-width: 0;
  accent-color: var(--rp-copper);
  border-radius: 8px;
}
button:disabled { cursor: not-allowed; }
.success, .state-success, .status.success {
  color: #a9c9ad !important;
  border-color: rgba(169, 201, 173, .42) !important;
}
.pending, .status.pending { color: #dfbd7d !important; }
.failed, .status.failed, .error, .state-error, .field-error {
  color: #df9482 !important;
}
.app-toast {
  background: #dfbd7d !important;
  border-color: #f0d8a5 !important;
  color: #211b14 !important;
}
.app-toast-error { background: #8b4037 !important; color: #f7e6dd !important; }

/* The same frame language across every legacy shell; retain their real content. */
.app, .profile-app {
  width: min(100%, 1120px) !important;
  min-width: 0;
  overflow-x: clip !important;
  background: linear-gradient(155deg, rgba(28, 33, 31, .985), rgba(13, 17, 16, .99)) !important;
  border-color: rgba(225, 211, 182, .13) !important;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .5) !important;
}
.app > .hero::after, .profile-app > .hero::after {
  content: "" !important;
  inset: 0 !important;
  right: auto !important;
  bottom: auto !important;
  pointer-events: none;
}
.hero, .app > .hero, .profile-app > .hero {
  color: var(--rp-ivory) !important;
  border-color: rgba(223, 189, 125, .24) !important;
}
.hero h1, .hero h2, .hero h3, .header h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.logo, .brand, .vortex-word, .mark {
  color: var(--rp-ivory) !important;
  font-family: var(--rp-serif) !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
}
.vortex-word span, .mark-symbol { color: var(--rp-copper-bright) !important; }
.header {
  display: flex;
  min-width: 0;
  gap: clamp(8px, 2vw, 16px);
  padding-inline: clamp(12px, 3vw, 24px) !important;
  color: var(--rp-ivory) !important;
  background: rgba(19, 24, 22, .97) !important;
  border-color: var(--rp-line) !important;
}
.header .logo, .header .brand { flex: 0 0 auto; }
.header h1 { flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.08; }
.header .back { flex: 0 0 38px; }
.hero > .head { position: relative; z-index: 3; }
.hero > .head .logo {
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  filter: none !important;
  white-space: nowrap;
}
.hero > .head .back {
  color: var(--rp-copper-bright) !important;
  border-color: rgba(223, 189, 125, .4) !important;
  background: #111715 !important;
}
.main, .content, main { min-width: 0; }

/* Member home: broad, cinematic masthead and quieter, sharper utility rails. */
body:has(.actions .act) .app > .hero {
  min-height: clamp(270px, 34vw, 440px);
  background-image: linear-gradient(90deg, rgba(10, 14, 13, .8), rgba(10, 14, 13, .34) 55%, rgba(10, 14, 13, .03)),
    url("/attached_assets/rockstar-games/gta-vi-vice-city.webp") !important;
  background-position: center, 66% 50% !important;
  background-size: cover !important;
}
body:has(.actions .act) .vortex-word {
  display: block;
  font-size: clamp(39px, 6vw, 72px) !important;
  letter-spacing: .07em !important;
}
body:has(.actions .act) .hero-in { padding-top: clamp(48px, 8vw, 92px) !important; }
body:has(.actions .act) .actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -26px !important;
}
body:has(.actions .act) .act {
  min-height: 74px;
  background: linear-gradient(145deg, #342c25, #252a27) !important;
}
body:has(.actions .act) .santa,
body:has(.actions .act) .brands {
  min-height: 148px;
  border-color: rgba(223, 189, 125, .3) !important;
}
body:has(.actions .act) .santa::before,
body:has(.actions .act) .brands::before {
  background: linear-gradient(90deg, rgba(12, 16, 15, .88), rgba(12, 16, 15, .55) 58%, rgba(12, 16, 15, .08)) !important;
}
body:has(.actions .act) .santa h1 {
  font: 700 clamp(26px, 4vw, 38px)/.96 var(--rp-serif) !important;
  letter-spacing: .035em;
}

/* Catalogue: editorial inventory cards with room for long titles and figures. */
body:has(#products) .app > .hero,
body:has(.products) .app > .hero {
  min-height: 270px;
  background-image: linear-gradient(90deg, rgba(10, 14, 13, .78), rgba(10, 14, 13, .28) 62%, transparent),
    url("/attached_assets/rockstar-games/gta-v-01.webp") !important;
  background-position: center, 58% 48% !important;
}
body:has(#products) .content, body:has(.products) .content {
  max-width: 1050px;
  margin-inline: auto;
}
body:has(#products) .product, body:has(.products) .product {
  min-width: 0;
  min-height: 176px;
  height: auto;
  grid-template-columns: minmax(112px, 34%) minmax(0, 1fr);
  gap: 14px;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #252b28, #171c1b) !important;
  border-color: rgba(225, 211, 182, .17) !important;
}
body:has(#products) .product-image, body:has(.products) .product-image {
  min-height: 160px;
  background: #151a19;
}
body:has(#products) .product-image img, body:has(.products) .product-image img {
  filter: saturate(.78) contrast(1.06);
}
body:has(#products) .product-body, body:has(.products) .product-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body:has(#products) .product-body h2, body:has(.products) .product-body h2 {
  font-size: clamp(20px, 2.1vw, 27px) !important;
  line-height: 1.02;
  overflow-wrap: anywhere;
}
body:has(#products) .details, body:has(.products) .details { overflow-wrap: anywhere; }
body:has(#products) .buy, body:has(.products) .buy {
  min-height: 42px;
  align-self: flex-end;
  margin-top: auto;
  background: var(--rp-copper) !important;
  border-color: #d37a62 !important;
  color: #fff4e8 !important;
  box-shadow: none !important;
}
body:has(#products) .badge, body:has(.products) .badge {
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: rgba(223, 189, 125, .5);
  background: rgba(17, 21, 20, .92) !important;
  color: var(--rp-ivory) !important;
}

/* Account, team and ledger: coherent data panels, not decorative fake metrics. */
body:has(.profile-app) .profile-app { zoom: 1; }
body:has(.profile-app) .profile-app > .hero,
body:has(.invite) .app > .hero {
  min-height: 290px;
  background-image: linear-gradient(90deg, rgba(10, 14, 13, .78), rgba(10, 14, 13, .35) 58%, transparent),
    url("/attached_assets/rockstar-games/la-noire-02.webp") !important;
  background-position: center, 52% 48% !important;
}
body:has(.profile-app) .hero-top { padding-top: 28px; }
body:has(.profile-app) .hero-copy { margin-top: 16px; }
body:has(.profile-app) .hero-account, body:has(.profile-app) .vip-badge {
  border-color: rgba(223, 189, 125, .55) !important;
  background: rgba(20, 25, 23, .86) !important;
  color: var(--rp-ivory) !important;
}
body:has(.profile-app) .balance,
body:has(.invite) .invite,
body:has(.invite) .stat,
body:has(.invite) .level,
body:has(.invite) .bonus,
body:has(.history-head) .panel,
body:has(.history-head) .member {
  background-color: #202624 !important;
  border: 1px solid var(--rp-line) !important;
  color: var(--rp-ivory) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}
body:has(.profile-app) .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:has(.profile-app) .menu-item {
  min-width: 0;
  background: linear-gradient(145deg, #222825, #191e1c) !important;
  border: 1px solid var(--rp-line) !important;
  color: var(--rp-ivory) !important;
}
body:has(.profile-app) .menu-icon {
  background: rgba(184, 75, 62, .16) !important;
  color: #df9b83 !important;
}
body:has(.profile-app) .menu-icon.logo-icon { background: var(--rp-copper) !important; color: #fff4e8 !important; }
body:has(.profile-app) .logout-trigger {
  background: linear-gradient(145deg, #352321, #241b1a) !important;
  color: #efb1a0 !important;
}
body:has(.invite) .invite {
  min-height: 132px;
  background-image: linear-gradient(100deg, rgba(22, 28, 25, .88), rgba(22, 28, 25, .65)),
    url("/attached_assets/rockstar-games/gta-vi-vice-city.webp") !important;
  background-size: cover !important;
  background-position: center, 70% 54% !important;
}
body:has(.invite) .copy-row {
  background: rgba(15, 19, 18, .94) !important;
  color: var(--rp-ivory) !important;
  box-shadow: inset 0 0 0 1px var(--rp-line) !important;
}
body:has(.invite) .copy-row small, body:has(.invite) .columns span { color: var(--rp-muted) !important; }
body:has(.invite) .copy, body:has(.invite) .level-name {
  background: var(--rp-copper) !important;
  color: #fff2e8 !important;
}
body:has(.invite) .progress { background: #363d38 !important; }
body:has(.invite) .progress i { background: var(--rp-copper-bright) !important; }
body:has(.history-head) .tabs { background: #171d1b !important; }
body:has(.history-head) .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:has(.history-head) .member { min-height: 72px; text-align: left; }
body:has(#list) .summary, body:has(#list) .tx {
  border: 1px solid var(--rp-line) !important;
  background: linear-gradient(145deg, #242a27, #171c1b) !important;
  color: var(--rp-ivory) !important;
}
body:has(#list) .summary { min-height: 82px; }
body:has(#list) .filters { flex-wrap: wrap; }
body:has(#list) .filter {
  min-height: 42px;
  border: 1px solid var(--rp-line) !important;
  background: #1b211f !important;
  color: var(--rp-muted) !important;
}
body:has(#list) .filter.active,
body:has(#list) .retry {
  background: var(--rp-copper) !important;
  border-color: #d37a62 !important;
  color: #fff4e8 !important;
  box-shadow: none !important;
}
body:has(#list) .tx:has(.credit)::before { background: #8fac91 !important; }
body:has(#list) .tx:has(.debit)::before { background: var(--rp-copper-bright) !important; }
body:has(#list) .credit { color: #a9c9ad !important; }
body:has(#list) .debit { color: #e0bd83 !important; }
body:has(#list) .failed { color: #df9482 !important; }

/* Recharge, withdrawal, balance and transaction forms share one restrained kit. */
body:has(.amount-card) .app, body:has(.withdraw) .app { width: min(100%, 760px) !important; }
body:has(.amount-card) .app > .hero, body:has(.withdraw) .app > .hero {
  min-height: 255px;
  background-image: linear-gradient(90deg, rgba(10, 14, 13, .82), rgba(10, 14, 13, .45) 58%, transparent),
    url("/attached_assets/rockstar-games/gta-vi-jason-lucia.webp") !important;
  background-position: center, 62% 45% !important;
}
body:has(.amount-card) main, body:has(.withdraw) main { max-width: 620px; margin-inline: auto; }
body:has(.amount-card) .card, body:has(.withdraw) .card {
  border: 1px solid var(--rp-line) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #242a27, #171c1b) !important;
}
body:has(.amount-card) .amounts .amount {
  border: 1px solid var(--rp-line) !important;
  background: #171d1b !important;
  color: var(--rp-ivory) !important;
}
body:has(.amount-card) .amount.active {
  border-color: var(--rp-copper) !important;
  background: var(--rp-copper) !important;
  color: #fff4e8 !important;
}
body:has(.amount-card) .method { background: linear-gradient(110deg, #33302a, #242a27) !important; }
body:has(.amount-card) .confirm, body:has(.withdraw) .confirm,
body:has(.amount-card) .primary, body:has(.withdraw) .primary {
  min-height: 48px;
  background: var(--rp-copper) !important;
  color: #fff4e8 !important;
  border: 1px solid #d37a62 !important;
  box-shadow: none !important;
}
body:has(.amount-card) .modal, body:has(.withdraw) .modal,
body:has(.amount-card) .overlay, body:has(.withdraw) .overlay {
  background: rgba(7, 10, 9, .78) !important;
}
body:has(.amount-card) .modal { border: 1px solid var(--rp-line); background: #1b211f !important; color: var(--rp-ivory); }
body:has(.amount-card) .modal-head { background: #222825 !important; }
body:has(.amount-card) .channel, body:has(.amount-card) .detail-box,
body:has(.amount-card) .status { background: #151a18 !important; border-color: var(--rp-line) !important; color: var(--rp-ivory) !important; }
body:has(.amount-card) .channel.selected { border-color: var(--rp-copper-bright) !important; }
body:has(.amount-card) .warning { background: rgba(184, 75, 62, .14) !important; color: #e6aa98 !important; }
body:has(.amount-card) .error { background: rgba(184, 75, 62, .16) !important; color: #f0a294 !important; }
body:has(.amount-card) .manual-pay-message { background: rgba(223, 189, 125, .1) !important; border-color: rgba(223, 189, 125, .35) !important; color: #e8d6ae !important; }
body:has(.withdraw) .wallet, body:has(.withdraw) .advice { border-color: var(--rp-line) !important; }
body:has(.withdraw) .notice { background: rgba(223, 189, 125, .1) !important; border-color: rgba(223, 189, 125, .26) !important; }

/* Standalone editorial pages are pulled into the same game-world image language. */
.art-halo::before, .art-halo::after { background: var(--rp-copper-bright) !important; }
body:has(.art-box) .app > .hero,
body:has(.rules-card) .app > .hero {
  background-image: linear-gradient(90deg, rgba(10, 14, 13, .78), rgba(10, 14, 13, .32) 62%, transparent),
    url("/attached_assets/rockstar-games/red-dead-redemption-2-01.webp") !important;
  background-position: center, 60% 50% !important;
  background-size: cover !important;
}
body:has(.art-box) .header, body:has(.rules-card) .header {
  min-height: 76px;
  background: rgba(18, 23, 21, .97) !important;
}
body:has(.art-box) .card, body:has(.rules-card) .rule,
body:has(.rules-card) .rules-card {
  border-color: var(--rp-line) !important;
  background: linear-gradient(145deg, #232926, #171c1a) !important;
}
body:has(.art-box) .copy, body:has(.rules-card) .rule p { color: #c5c1b6 !important; }
body:has(.art-box) .art-box {
  color: #f3e8d3 !important;
  background: var(--rp-copper) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .3) !important;
}
body:has(.rules-card) .rule h4 { color: var(--rp-ivory) !important; }
body:has(.rules-card) .rule::before { background: var(--rp-copper) !important; }
body:has(.rules-card) .chapter, body:has(.rules-card) .num { color: var(--rp-copper-bright) !important; }
body:has(.rules-card) .important {
  background: rgba(223, 189, 125, .09) !important;
  border-color: rgba(223, 189, 125, .38) !important;
}
body:has(.rules-card) .important h3, body:has(.rules-card) .alert { color: var(--rp-copper-bright) !important; }
body:has(.rules-card) .banner { border-color: var(--rp-line) !important; }
body:has(.notice) > .app > .hero {
  background: #151b19 !important;
}
body:has(.notice) .app > header.hero img {
  filter: saturate(.68) contrast(1.08);
}
body:has(.notice) .app > header.hero::before {
  background: linear-gradient(90deg, rgba(10, 14, 13, .88), rgba(10, 14, 13, .5) 58%, rgba(10, 14, 13, .1)),
    linear-gradient(0deg, rgba(10, 14, 13, .7), transparent 65%) !important;
}
body:has(.notice) .app > header.hero .logo { color: var(--rp-ivory) !important; }
body:has(.notice) .notice {
  border-color: var(--rp-line) !important;
  background: linear-gradient(145deg, #232926, #171c1a) !important;
  color: #c5c1b6 !important;
}
body:has(.notice) .banner { border-color: var(--rp-line) !important; }

/* Home universe index: labels remain readable across six works on phones. */
body:has(.actions .act) .group label {
  font: 500 10px/1.3 var(--rp-mono) !important;
  letter-spacing: .12em !important;
}
body:has(.actions .act) .group h2 {
  font: 700 clamp(36px, 5vw, 58px)/.94 var(--rp-serif) !important;
  letter-spacing: .015em !important;
  text-wrap: balance;
}
body:has(.actions .act) .group h3 {
  font: 600 clamp(16px, 2.2vw, 21px)/1.12 var(--rp-sans) !important;
  color: #ddd3c1 !important;
}
body:has(.actions .act) .timeline {
  gap: 8px;
  align-items: start;
}
body:has(.actions .act) .timeline::before { background: rgba(223, 189, 125, .35) !important; }
body:has(.actions .act) .timeline .year { min-width: 0; }
body:has(.actions .act) .timeline .year b {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(239, 226, 201, .35);
  background: #302923 !important;
  color: var(--rp-copper-bright) !important;
  font: 600 11px/1 var(--rp-mono) !important;
  box-shadow: 0 0 0 4px #1c211f;
}
body:has(.actions .act) .timeline .year:nth-child(2n) b,
body:has(.actions .act) .timeline .year:nth-child(3n) b { background: #302923 !important; }
body:has(.actions .act) .timeline .year span {
  display: block;
  margin-top: 8px;
  color: #d3cec2 !important;
  font: 500 10px/1.25 var(--rp-mono) !important;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}

/* Link-styled CTA for the revised about-page banner; visible in every state. */
body:has(.art-box) .banner-link {
  position: absolute;
  z-index: 2;
  right: clamp(10px, 2.5vw, 22px);
  bottom: 14px;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(239, 226, 201, .72);
  border-radius: 999px;
  background: rgba(20, 24, 22, .88);
  color: var(--rp-ivory) !important;
  font: 600 11px/1.2 var(--rp-sans);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
body:has(.art-box) .banner-link:hover {
  transform: translateY(-2px);
  background: #292b25;
}
body:has(.art-box) .banner-link:focus-visible {
  outline: 2px solid var(--rp-copper-bright) !important;
  outline-offset: 4px;
}

/* 1440px: let the application occupy a deliberate editorial canvas. */
@media (min-width: 768px) {
  body { padding: 24px !important; }
  .app, .profile-app {
    margin-inline: auto;
    border-radius: 22px !important;
  }
  .app > .hero, .profile-app > .hero {
    margin: 14px 14px 0 !important;
    border-radius: 16px !important;
  }
  .main, .content { padding-inline: clamp(24px, 4vw, 48px) !important; }
  body:has(.actions .act) .main { max-width: 1100px; }
  body:has(.products) .products, body:has(#products) .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  body:has(.profile-app) .main { max-width: 1040px; }
  body:has(.actions .act) .group { padding: clamp(24px, 3.5vw, 42px) !important; }
}

@media (max-width: 767px) {
  body { padding: 0 !important; }
  .app, .profile-app { width: 100% !important; border-radius: 0 !important; }
  .app > .hero, .profile-app > .hero { margin: 0 !important; }
  .main, .content, main { padding-inline: clamp(10px, 4vw, 16px) !important; }
  .header { gap: 9px; }
  .header .logo { max-width: 84px; }
  .app > .hero::after, .profile-app > .hero::after { border-radius: inherit; }
  body:has(.profile-app) .menu { grid-template-columns: 1fr; }
  body:has(.products) .products, body:has(#products) .products { grid-template-columns: 1fr; }
  body:has(.products) .product, body:has(#products) .product {
    grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
    gap: 10px;
  }
  body:has(.products) .product-image, body:has(#products) .product-image { min-height: 150px; }
  body:has(.actions .act) .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  body:has(.actions .act) .group-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  body:has(.actions .act) .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 16px;
    margin-top: 20px;
  }
  body:has(.actions .act) .timeline::before { display: none; }
  body:has(.actions .act) .timeline .year span {
    min-height: 2.5em;
    font-size: 10px !important;
    line-height: 1.3;
  }
  body:has(.actions .act) .group p { font-size: 12px !important; line-height: 1.55; }
  body:has(.art-box) .banner-link {
    right: 9px;
    bottom: 10px;
    min-height: 42px;
    padding-inline: 9px;
    font-size: 9px;
  }
  body:has(.art-box) .banner-copy {
    left: 12px !important;
    top: 14px !important;
    max-width: 47%;
    font-size: 10px !important;
    line-height: 1.2;
    transform: none !important;
  }
  body:has(.art-box) .banner { height: 118px !important; }
}

@media (max-width: 380px) {
  .header { padding-inline: 10px !important; gap: 7px; }
  .header .logo { max-width: 70px; font-size: 16px !important; }
  .header h1 { font-size: 16px !important; }
  .balances { gap: 7px !important; }
  .bal, .balance { min-width: 0; padding-inline: 10px !important; }
  .bal strong, .balance strong { font-size: clamp(14px, 5vw, 19px) !important; overflow-wrap: anywhere; }
  .actions { gap: 5px !important; }
  .act { grid-template-columns: 22px minmax(0, 1fr); padding-inline: 5px !important; font-size: 9px !important; }
  .act small { font-size: 7px !important; }
  body:has(.products) .product, body:has(#products) .product {
    grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
    gap: 8px;
    padding: 6px;
  }
  body:has(.products) .product-body h2, body:has(#products) .product-body h2 { font-size: 17px !important; }
  .details { font-size: 9px !important; }
  body:has(.actions .act) .act { min-height: 65px; }
  body:has(.amount-card) .modal-body { padding-inline: 16px; }
}

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

/* ROCKSTAR member platform — black, warm paper, signal yellow. */
:root {
  --rp-ink: #111111;
  --rp-deep: #171717;
  --rp-surface: #202020;
  --rp-surface-2: #292929;
  --rp-line: rgba(252, 175, 23, .24);
  --rp-ivory: #f4f0e8;
  --rp-muted: #b8b2a8;
  --rp-copper: #fcaf17;
  --rp-copper-bright: #fcaf17;
  --rp-rust: #fcaf17;
  --vx-lime: #fcaf17;
  --vx-amber: #fcaf17;
  --lime: #fcaf17;
  --red: #fcaf17;
}

html {
  color-scheme: dark !important;
  background: #111 !important;
  scrollbar-color: #fcaf17 #111;
}
body {
  color: var(--rp-ivory) !important;
  background: #111 !important;
  font-family: var(--rp-sans) !important;
}
body::before { display: none !important; }
body::after { opacity: .025 !important; }
::selection { color: #111 !important; background: #fcaf17 !important; }
h1, h2, h3, h4, .section-title, .heading h1, .title, .header h1 {
  color: var(--rp-ivory) !important;
  font-family: var(--rp-serif) !important;
  font-weight: 600;
  letter-spacing: -.015em;
}
a { color: #fcaf17; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #fcaf17 !important;
  outline-offset: 3px;
}
input, select, textarea {
  color: var(--rp-ivory) !important;
  background: #151515 !important;
  border: 1px solid #555 !important;
  border-radius: 3px !important;
}
input::placeholder, textarea::placeholder { color: #aaa49a !important; }

.app, .profile-app {
  color: var(--rp-ivory) !important;
  background: #151515 !important;
  border-color: rgba(252,175,23,.15) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.48) !important;
}
.app > .hero, .profile-app > .hero, .hero {
  color: var(--rp-ivory) !important;
  border-radius: 0 !important;
  border-color: rgba(252,175,23,.3) !important;
}
.app > .hero::after, .profile-app > .hero::after {
  background: linear-gradient(90deg, rgba(8,8,8,.89), rgba(8,8,8,.56) 54%, rgba(8,8,8,.15)) !important;
}
.hero::before { display: none !important; }
.hero h1, .hero h2, .hero h3 { text-wrap: balance; }
.logo, .brand, .vortex-word, .mark, .hero-logo {
  color: #f4f0e8 !important;
  font-family: var(--rp-serif) !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
}
.vortex-word span, .mark-symbol { color: #fcaf17 !important; }
.main, .content, main { color: var(--rp-ivory); min-width: 0; }
.group, .card, .product, .panel, .form-card, .rules-card, .reward-card,
.info, .status-card, .week-card, .sheet, .balance, .summary,
.intro, .empty, .account, .level, .bonus, .stat, .menu-item {
  color: var(--rp-ivory) !important;
  border: 1px solid rgba(252,175,23,.21) !important;
  border-radius: 3px !important;
  background: #202020 !important;
  box-shadow: none !important;
}
.group p, .copy, .notice, .desc, .details, .subtitle, .intro p,
.empty p, .account p, .menu-text span, .bonus p { color: #b8b2a8 !important; }
.eyebrow, .plan, .amount, .details b, .balance strong,
.amount strong, .group label, th, .back { color: #fcaf17 !important; }
.btn, .primary-button, .submit-button, .submit, button[type="submit"],
.confirm, .primary, .checkin-button, .understand, .buy, .cta, .add,
.copy, .filter.active, .retry, .art-box {
  color: #17130b !important;
  background: #fcaf17 !important;
  border: 1px solid #fcaf17 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.act, .tab, .nav-item, .nav, .filter, .badge, .plan, .level-name,
.icon-btn, .circle, .hero-account, .vip-badge, .summary-icon,
.balance-icon, .menu-icon, .round, .copy-account-icon {
  border-radius: 2px !important;
}
.act {
  color: #f4f0e8 !important;
  border: 1px solid rgba(252,175,23,.28) !important;
  background: #252525 !important;
  box-shadow: none !important;
}
.act:hover, .tab.active, .nav-item.active {
  color: #17130b !important;
  border-color: #fcaf17 !important;
  background: #fcaf17 !important;
}
.badge, .plan, .filter {
  color: #f4f0e8 !important;
  border: 1px solid rgba(252,175,23,.28) !important;
  background: #202020 !important;
}
.tab.active, .nav-item.active, .filter.active { color: #17130b !important; background: #fcaf17 !important; }
.cta { color: #17130b !important; background: #fcaf17 !important; }
.btn:hover, .primary-button:hover, .submit:hover, .buy:hover,
button[type="submit"]:hover { background: #ffd166 !important; }
.error, .state-error, .field-error, .failed { color: #ff9d8f !important; }
.success, .state-success, .status.success { color: #a9c9ad !important; }
.pending, .status.pending { color: #fcaf17 !important; }
.header {
  display: flex;
  min-width: 0;
  gap: clamp(8px, 2vw, 16px);
  color: var(--rp-ivory) !important;
  background: #151515 !important;
  border-color: rgba(252,175,23,.22) !important;
}
.header h1 { flex: 1 1 auto; min-width: 0; line-height: 1.08; }
.header .logo, .header .brand { flex: 0 1 auto; min-width: 0; }
.header .back { flex: 0 0 38px; }
.table-wrap, .table-responsive, [data-purpose="table"] {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table { color: var(--rp-ivory); border-collapse: collapse; }
th { font: 500 10px var(--rp-mono); text-transform: uppercase; letter-spacing: .1em; }
td, th { border-bottom: 1px solid rgba(252,175,23,.2) !important; }
.app-toast { color: #17130b !important; background: #fcaf17 !important; border-color: #fcaf17 !important; }
.app-toast-error { color: #f7e6dd !important; background: #8b4037 !important; }

/* Withdrawal accounts — true header grid prevents logo/title collisions at 320px. */
body:has(#accountArea) .app { width: min(100%, 620px) !important; }
body:has(#accountArea) .app > .hero {
  height: 255px !important;
  min-height: 255px !important;
  background-color: #111 !important;
  background-image: linear-gradient(90deg,rgba(8,8,8,.85),rgba(8,8,8,.44) 62%,rgba(8,8,8,.18)),
    url("/attached_assets/rockstar-games/gta-v-02.webp") !important;
  background-position: center, 57% 48% !important;
  background-size: cover !important;
  overflow: hidden;
}
body:has(#accountArea) .hero-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 10px 12px !important;
  padding: 26px 17px !important;
}
body:has(#accountArea) .hero-row .back {
  grid-column: 1;
  grid-row: 1;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(252,175,23,.68) !important;
  border-radius: 2px !important;
  color: #fcaf17 !important;
  background: #111 !important;
}
body:has(#accountArea) .hero-row .logo {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  height: auto !important;
  justify-self: start;
  font-size: clamp(21px, 6vw, 30px) !important;
  line-height: 1 !important;
  filter: none !important;
  white-space: nowrap;
}
body:has(#accountArea) .hero-row .hero-copy {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding: 7px 0 0 !important;
}
body:has(#accountArea) .hero-copy h1 {
  font-size: clamp(27px, 7vw, 38px) !important;
  line-height: .98 !important;
  margin: 0 0 8px !important;
}
body:has(#accountArea) .hero-copy p { max-width: 270px; font-size: 12px !important; }
body:has(#accountArea) .slogan { display: none !important; }
body:has(#accountArea) main { padding: 0 14px 120px !important; }
body:has(#accountArea) .intro {
  margin-top: -24px !important;
  padding: 19px !important;
  border-radius: 3px !important;
  background: #202020 !important;
}
body:has(#accountArea) .intro-head { grid-template-columns: 66px minmax(0,1fr) !important; gap: 14px !important; }
body:has(#accountArea) .wallet-hero {
  width: 64px !important; height: 64px !important;
  border-radius: 2px !important; color: #fcaf17 !important;
  background: #171717 !important; border: 1px solid rgba(252,175,23,.35);
}
body:has(#accountArea) .wallet-hero svg { width: 35px !important; }
body:has(#accountArea) .intro h2 { font-size: 23px !important; line-height: 1 !important; }
body:has(#accountArea) .intro p { font-size: 12px !important; line-height: 1.45 !important; }
body:has(#accountArea) .benefits { gap: 8px !important; margin-top: 18px !important; }
body:has(#accountArea) .benefit { color: #b8b2a8 !important; font-size: 10px !important; }
body:has(#accountArea) .benefit i {
  width: 38px !important; height: 38px !important; margin-bottom: 8px !important;
  color: #fcaf17 !important; background: #151515 !important;
  border: 1px solid rgba(252,175,23,.3); border-radius: 2px !important;
}
body:has(#accountArea) .benefit strong { color: #f4f0e8 !important; font-size: 10px !important; }
body:has(#accountArea) .add {
  display: grid !important; height: 54px !important; margin: 14px 0 0 !important;
  border-radius: 2px !important; color: #17130b !important;
  background: #fcaf17 !important; box-shadow: none !important;
}
body:has(#accountArea) .add-plus {
  width: 28px !important; height: 28px !important; border-radius: 2px !important;
  color: #17130b !important; background: #f4f0e8 !important;
}
body:has(#accountArea) .empty {
  margin-top: 15px !important; min-height: 250px;
  padding: 24px 18px !important;
  border: 1px dashed rgba(252,175,23,.4) !important;
  background: #181818 !important; text-align: center;
}
body:has(#accountArea) .empty-art { width: 116px !important; height: 116px !important; }
body:has(#accountArea) .empty-art::before {
  inset: 12px !important; border-radius: 2px !important; background: #222 !important;
}
body:has(#accountArea) .empty-art::after {
  width: 6px !important; height: 6px !important; border-radius: 0 !important;
  background: #fcaf17 !important;
  box-shadow: 112px -24px 0 #fcaf17, 94px 72px 0 #fcaf17, 22px 86px 0 #fcaf17 !important;
}
body:has(#accountArea) .big-wallet { width: 70px !important; color: #fcaf17 !important; filter: none !important; }
body:has(#accountArea) .plus-float {
  width: 34px !important; height: 34px !important; border-radius: 2px !important;
  color: #17130b !important; background: #fcaf17 !important; box-shadow: none !important;
}
body:has(#accountArea) .note { display: none !important; }
body:has(#accountArea) .empty h2 { font-size: 21px !important; }
body:has(#accountArea) .empty p { font-size: 12px !important; }
body:has(#accountArea) .account {
  grid-template-columns: 48px minmax(0,1fr) auto !important;
  padding: 13px !important; border-radius: 3px !important;
}
body:has(#accountArea) .operator-logo { border-radius: 2px !important; }
body:has(#accountArea) .account h3 { font-family: var(--rp-serif); font-size: 19px !important; }
body:has(#accountArea) .status { border-radius: 2px !important; }
body:has(#accountArea) .icon-btn {
  border: 1px solid rgba(252,175,23,.28) !important;
  border-radius: 2px !important; color: #fcaf17 !important; background: #181818 !important;
}
body:has(#accountArea) .confirm-box { background: rgba(0,0,0,.78) !important; }
body:has(#accountArea) .confirm-card {
  border-radius: 3px !important; background: #202020 !important;
  border: 1px solid rgba(252,175,23,.34) !important; color: #f4f0e8 !important;
}
body:has(#accountArea) .confirm-actions button { border-radius: 2px !important; }
body:has(#accountArea) .cancel { color: #f4f0e8 !important; background: #303030 !important; }
body:has(#accountArea) .delete { color: #17130b !important; background: #fcaf17 !important; }
body:has(#accountArea) .bottom {
  width: min(94vw, 600px) !important;
  height: 70px !important;
  left: 50% !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(252,175,23,.34) !important;
  border-radius: 2px !important;
  background: rgba(17,17,17,.97) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.58) !important;
}
body:has(#accountArea) .bottom .nav { border-radius: 2px !important; }

/* Add/edit account form and its native operator sheet keep open/closed states intact. */
body:has(#accountForm) .app { width: min(100%, 620px) !important; }
body:has(#accountForm) .app > .hero {
  height: 220px !important;
  min-height: 220px !important;
  background-image: linear-gradient(90deg,rgba(8,8,8,.86),rgba(8,8,8,.48) 64%,rgba(8,8,8,.18)),
    url("/attached_assets/rockstar-games/gta-v-02.webp") !important;
  background-size: cover !important;
  background-position: center, 57% 48% !important;
}
body:has(#accountForm) .hero-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 9px 12px !important;
  padding: 23px 17px !important;
}
body:has(#accountForm) .hero-row .back {
  grid-column: 1; grid-row: 1;
  width: 40px !important; height: 40px !important;
  border: 1px solid rgba(252,175,23,.68) !important;
  border-radius: 2px !important; color: #fcaf17 !important; background: #111 !important;
}
body:has(#accountForm) .hero-row .logo {
  grid-column: 2; grid-row: 1; justify-self: start;
  width: auto !important; height: auto !important; filter: none !important;
  color: #f4f0e8 !important; font-size: clamp(20px,6vw,28px) !important;
  line-height: 1 !important; white-space: nowrap;
}
body:has(#accountForm) .hero-copy {
  grid-column: 1 / -1; grid-row: 2; min-width: 0; padding: 5px 0 0 !important;
}
body:has(#accountForm) .hero-copy h1 {
  max-width: none !important; font-size: clamp(27px,7vw,36px) !important;
  line-height: .98 !important; margin: 0 0 7px !important;
}
body:has(#accountForm) .hero-copy p { max-width: 280px !important; font-size: 11px !important; }
body:has(#accountForm) .slogan { display: none !important; }
body:has(#accountForm) main { padding: 0 14px 35px !important; }
body:has(#accountForm) .form-card {
  margin-top: -18px !important; padding: 20px !important;
  border: 1px solid rgba(252,175,23,.26) !important;
  border-radius: 3px !important; background: #202020 !important;
  box-shadow: none !important;
}
body:has(#accountForm) .field-row { grid-template-columns: 38px minmax(0,1fr) !important; gap: 10px !important; }
body:has(#accountForm) .field-icon {
  width: 36px !important; height: 36px !important; border-radius: 2px !important;
  color: #fcaf17 !important; background: #151515 !important;
  border: 1px solid rgba(252,175,23,.3) !important;
}
body:has(#accountForm) .field label { color: #f4f0e8 !important; }
body:has(#accountForm) .input, body:has(#accountForm) .select-trigger {
  min-width: 0; height: 46px !important; padding-inline: 12px !important;
  border: 1px solid #595959 !important; border-radius: 2px !important;
  color: #f4f0e8 !important; background: #151515 !important;
}
body:has(#accountForm) .input:focus, body:has(#accountForm) .select-trigger:focus-visible {
  border-color: #fcaf17 !important; box-shadow: 0 0 0 2px rgba(252,175,23,.18) !important;
}
body:has(#accountForm) .security {
  border: 1px solid rgba(252,175,23,.24) !important;
  border-radius: 2px !important; background: #191919 !important;
}
body:has(#accountForm) .security-icon {
  border-radius: 2px !important; background: #2a2a2a !important; color: #fcaf17 !important;
}
body:has(#accountForm) .security-icon svg { color: #fcaf17 !important; }
body:has(#accountForm) .security strong { color: #fcaf17 !important; }
body:has(#accountForm) .security p { color: #b8b2a8 !important; }
body:has(#accountForm) .confirm {
  height: 48px !important; border-radius: 2px !important;
  color: #17130b !important; background: #fcaf17 !important; box-shadow: none !important;
}
body:has(#accountForm) .error { color: #ff9d8f !important; }
body:has(#accountForm) .overlay { background: rgba(0,0,0,.76) !important; }
body:has(#accountForm) .sheet {
  border: 1px solid rgba(252,175,23,.35) !important;
  border-radius: 3px 3px 0 0 !important; color: #f4f0e8 !important; background: #202020 !important;
}
body:has(#accountForm) .handle { border-radius: 0 !important; background: #fcaf17 !important; }
body:has(#accountForm) .close { border-radius: 2px !important; color: #fcaf17 !important; background: #151515 !important; }
body:has(#accountForm) .operator {
  min-height: 50px; color: #f4f0e8 !important;
  border-bottom-color: #414141 !important; background: #202020 !important;
}
body:has(#accountForm) .operator:first-of-type { background: #292929 !important; }
body:has(#accountForm) .operator.selected .radio { border-color: #fcaf17 !important; }
body:has(#accountForm) .operator.selected .radio::after { background: #fcaf17 !important; }
body:has(#accountForm) .placeholder .op-logo { color: #17130b !important; background: #fcaf17 !important; }

/* Member profile and team pages: editorial hierarchy, no decorative race slogans. */
body:has(.profile-app) .profile-app { zoom: 1 !important; }
body:has(.profile-app) .profile-app > .hero,
body:has(.invite) .app > .hero {
  background-image: linear-gradient(90deg,rgba(8,8,8,.83),rgba(8,8,8,.43) 62%,rgba(8,8,8,.16)),
    url("/attached_assets/rockstar-games/la-noire-02.webp") !important;
  background-size: cover !important;
  border-radius: 0 !important;
}
body:has(.profile-app) .magic, body:has(.invite) .magic { display: none !important; }
body:has(.profile-app) .hero-account, body:has(.profile-app) .vip-badge {
  border-color: rgba(252,175,23,.45) !important;
  border-radius: 2px !important; background: #171717 !important; color: #f4f0e8 !important;
}
body:has(.profile-app) .copy-account-icon { border-radius: 2px !important; color: #fcaf17 !important; }
body:has(.profile-app) .actions {
  border-radius: 3px !important; background: #1b1b1b !important;
  border-color: rgba(252,175,23,.24) !important;
}
body:has(.profile-app) .action, body:has(.profile-app) .act {
  border-radius: 2px !important; background: #262626 !important;
  border-color: rgba(252,175,23,.25) !important; color: #f4f0e8 !important;
}
body:has(.profile-app) .action.active, body:has(.profile-app) .act:hover {
  background: #fcaf17 !important; color: #17130b !important;
}
body:has(.profile-app) .action svg, body:has(.profile-app) .act svg { color: #fcaf17 !important; }
body:has(.profile-app) .action.active svg { color: #17130b !important; }
body:has(.profile-app) .balance, body:has(.profile-app) .menu-item {
  border-radius: 3px !important; border-color: rgba(252,175,23,.22) !important;
  background-color: #202020 !important; box-shadow: none !important;
}
body:has(.profile-app) .balance.red, body:has(.profile-app) .balance.light {
  color: #f4f0e8 !important;
  background-image: linear-gradient(90deg,rgba(15,15,15,.8),rgba(15,15,15,.48)),
    url("/attached_assets/rockstar-games/red-dead-redemption-2-01.webp") !important;
  background-size: cover !important;
}
body:has(.profile-app) .balance strong { color: #fcaf17 !important; }
body:has(.profile-app) .balance-icon, body:has(.profile-app) .menu-icon {
  border-radius: 2px !important; color: #fcaf17 !important; background: #2a2a2a !important;
}
body:has(.profile-app) .menu-text strong { color: #f4f0e8 !important; font-family: var(--rp-sans) !important; }
body:has(.profile-app) .menu-icon.logo-icon { color: #17130b !important; background: #fcaf17 !important; }
body:has(.profile-app) .logout-trigger {
  color: #ff9d8f !important; background: #2a1d1b !important;
}
body:has(.profile-app) .logout-trigger .menu-icon { color: #ff9d8f !important; background: #392522 !important; }
body:has(.profile-app) .promo, body:has(.profile-app) .santa, body:has(.profile-app) .brands {
  border-radius: 3px !important; border-color: rgba(252,175,23,.32) !important;
}
body:has(.invite) .invite, body:has(.invite) .stat, body:has(.invite) .level,
body:has(.invite) .bonus {
  border-radius: 3px !important; border-color: rgba(252,175,23,.22) !important;
  background-color: #202020 !important; box-shadow: none !important;
}
body:has(.invite) .copy-row { border-radius: 2px !important; background: #151515 !important; }
body:has(.invite) .copy-row strong, body:has(.invite) .columns strong { color: #f4f0e8 !important; }
body:has(.invite) .copy, body:has(.invite) .level-name {
  border-radius: 2px !important; background: #fcaf17 !important; color: #17130b !important;
}
body:has(.invite) .progress { background: #3c3c3c !important; }
body:has(.invite) .progress i { background: #fcaf17 !important; }
body:has(.invite) .bonus h2 { border-left-color: #fcaf17 !important; }
body:has(.invite) .bonus::after { color: rgba(252,175,23,.12) !important; }
body:has(.invite) .bonus::after { content: "ROCKSTAR" !important; }
body:has(.invite) .bottom .nav.product img,
body:has(.profile-app) .bottom .nav.product img { display: none !important; }
body:has(.invite) .nav.active, body:has(.profile-app) .nav-item.active {
  border-radius: 2px !important; background: #fcaf17 !important; color: #17130b !important;
}
body:has(.invite) .bottom .nav.active,
body:has(.profile-app) .bottom .nav-item.active {
  background: #191919 !important;
  color: #fcaf17 !important;
}
.hero-top > button, .hero .back, .hero .circle {
  border-radius: 2px !important;
  background: #171717 !important;
  color: #fcaf17 !important;
  border: 1px solid #fcaf17 !important;
  box-shadow: none !important;
}
body:has(.login-card) .promo, body:has(#registration-form) .promo,
body:has(.login-card) .login-card, body:has(#registration-form) .card {
  border-radius: 3px !important;
}
body:has(.login-card) .login-card, body:has(#registration-form) .card {
  background: #171717 !important;
  border-color: #414141 !important;
}
body:has(.login-card) .signup,
body:has(.login-card) .input-wrap,
body:has(.login-card) .phone-field,
body:has(#registration-form) .field {
  border-radius: 2px !important;
}

@media (max-width: 767px) {
  body { padding: 0 !important; }
  .app, .profile-app { width: 100% !important; border-radius: 0 !important; }
  .app > .hero, .profile-app > .hero { margin: 0 !important; }
}
@media (max-width: 390px) {
  body:has(#accountArea) .hero-row { padding: 23px 14px !important; gap: 8px 10px !important; }
  body:has(#accountArea) .hero-copy h1 { font-size: clamp(26px, 8vw, 32px) !important; }
  body:has(#accountArea) main { padding-inline: 10px !important; }
  body:has(#accountArea) .intro { padding: 15px !important; }
  body:has(#accountArea) .intro-head { grid-template-columns: 54px minmax(0,1fr) !important; gap: 11px !important; }
  body:has(#accountArea) .wallet-hero { width: 52px !important; height: 52px !important; }
  body:has(#accountArea) .wallet-hero svg { width: 30px !important; }
  body:has(#accountArea) .intro h2 { font-size: 20px !important; }
  body:has(#accountArea) .benefit { font-size: 9px !important; }
  body:has(#accountArea) .benefit strong { font-size: 9px !important; }
  body:has(#accountArea) .empty { padding-inline: 11px !important; }
  .header { gap: 7px !important; padding-inline: 10px !important; }
  .header .logo { max-width: 74px; font-size: 16px !important; }
  .header h1 { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}