/* Zalut brand layer. Loaded last by renderPage, never on the admin page.
   Colour and shadow only: no layout, artwork, seller nick styles or status changes. */
:root[data-brand-palette="violet-lime"] {
  --brand-violet: #7050FF;
  --brand-lime: #DCFF64;
  --brand-ink: #101014;
  --brand-link: #B9A9FF;
  --brand-selected: #302447;
  --brand-border: #66518C;
  --bg-0: #101014;
  --bg-1: #18171F;
  --bg-2: #211F2B;
  --glass: #211F2B;
  --glass-hi: #2B2539;
  --line: rgba(226,220,255,.14);
  --line-hi: rgba(226,220,255,.27);
  --txt: #F5F3FF;
  --txt-2: #C0BACF;
  --txt-3: #A49CAF;
  /* --acc is also used for small text. The lighter violet keeps it readable. */
  --acc: var(--brand-link);
  --acc-2: #C9BDFF;
  --acc-3: var(--brand-lime);
  --grad: linear-gradient(#7050FF, #7050FF);
  --grad-anim: linear-gradient(#7050FF, #7050FF);
  --grad-soft: linear-gradient(rgba(112,80,255,.14), rgba(112,80,255,.14));
  --shadow: 0 20px 56px -20px rgba(0,0,0,.7);
  /* --ok, --warn, --err, --cy and game-specific --tone/--shade stay unchanged. */
}

html[data-brand-palette="violet-lime"] ::selection { background: var(--brand-lime); color: var(--brand-ink); }
html[data-brand-palette="violet-lime"] :focus-visible { outline-color: var(--brand-link); }

/* Navigation and shared surfaces. Preserve images and all backdrop artwork. */
html[data-brand-palette] .nav,
html[data-brand-palette] .nav.nav--scrolled,
html[data-brand-palette] .footer,
html[data-brand-palette] .mnav { background-color: var(--bg-1); border-color: var(--line); }
html[data-brand-palette] :is(.hd-menu,.bell__panel,.co-modal__body,.msheet__panel,.fx-dlg,.lv-modal) {
  background-color: var(--bg-2); border-color: var(--line-hi); color: var(--txt); box-shadow: var(--shadow);
}
html[data-brand-palette] :is(.p-card,.p-section,.set-card,.pdp-card,.pdp-buy,.auth2-card,.notif-list,.pg-empty) {
  background-color: var(--bg-1); border-color: var(--line);
}
html[data-brand-palette] :is(.search,.hd-bal,.hd-me,.hd-ico,.hd-lang,.btn-ghost,.btn--light) {
  background-color: var(--bg-2); border-color: var(--line-hi);
}
html[data-brand-palette] :is(.hd-bal__ico,.nav__games > span:first-child,.text-grad,.set-link,.co-promo__toggle) { color: var(--brand-link); }
html[data-brand-palette] .hd-bal__ico { background-color: var(--brand-selected); }
html[data-brand-palette] :is(.footer__col a,.footer__legal a,.auth2-link):hover { color: var(--brand-lime); }
html[data-brand-palette] .nav__games { background-color: var(--brand-selected); border-color: var(--brand-border); color: var(--txt); }

/* Primary actions are lime. Explicit exclusions retain destructive/demo/disabled states.
   Keep --grad violet for avatars, progress indicators and selected tabs with white text. */
html[data-brand-palette] :is(.btn-shimmer,.btn--dark,.hd-sell,.ct-card__buy,.pdp-buy__cta,.co-btn,.auth2-submit,.form__submit,.p-deposit__btn--primary,.ref-cta__btn,.hx-help__btn,.tg__more,.fx-dlg__ok,.chx-send):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-danger):not(.btn--danger):not(.ct-card__buy--demo) {
  background: var(--brand-lime); color: var(--brand-ink); border-color: var(--brand-lime);
  box-shadow: inset 0 -3px 0 rgba(16,16,20,.17), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-brand-palette] :is(.btn-shimmer,.btn--dark,.hd-sell,.ct-card__buy,.pdp-buy__cta,.co-btn,.auth2-submit,.form__submit,.p-deposit__btn--primary,.ref-cta__btn,.hx-help__btn,.tg__more,.fx-dlg__ok,.chx-send):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-danger):not(.btn--danger):not(.ct-card__buy--demo):hover {
  background: var(--brand-violet); border-color: var(--brand-violet); color: #fff; filter: none;
  box-shadow: inset 0 -3px 0 rgba(16,16,20,.24), inset 0 1px 0 rgba(255,255,255,.2);
}
html[data-brand-palette] .mnav__plus { background: var(--brand-lime); color: var(--brand-ink); }
html[data-brand-palette] .mnav__i.is-active .mnav__ico { background: var(--brand-selected); color: var(--brand-lime); }
html[data-brand-palette] :is(.btn-ghost,.btn--light,.nav__games):not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--brand-selected); border-color: var(--brand-link); color: var(--txt);
}

/* Form fields: keep invalid, error, success and disabled states owned by their page. */
html[data-brand-palette] :is(.field,.set-input,.form__row input,.form__row textarea,.form__row select,.auth2-field input,.co-buyerdata,input.co-promo__input,.fx-dlg__input):not(:disabled):not([aria-invalid="true"]):not(.is-error) {
  background-color: var(--bg-2); color: var(--txt);
}
html[data-brand-palette] :is(.search,.field,.set-input,.form__row input,.form__row textarea,.form__row select,.auth2-field input,.co-buyerdata,input.co-promo__input,.fx-dlg__input):not(:disabled):not([aria-invalid="true"]):not(.is-error):focus-within {
  background-color: #272035; border-color: var(--brand-link); box-shadow: 0 0 0 3px rgba(185,169,255,.2);
}
html[data-brand-palette] .search__input { background: transparent; }
html[data-brand-palette] :is(.co-promo__btn,.chx-go) { background: var(--brand-selected); border-color: var(--brand-border); color: var(--txt); }
html[data-brand-palette] :is(.co-promo__btn,.chx-go):not(:disabled):hover { background: var(--brand-violet); border-color: var(--brand-link); color: #fff; }
html[data-brand-palette] .pm-tile.is-active,
html[data-brand-palette] .pm-tile[aria-pressed="true"] { background-color: var(--brand-selected); border-color: var(--brand-link); }

/* Selected controls use violet; lime is reserved for main actions and small accents. */
html[data-brand-palette] :is(.cat-chip.is-active,.ct-pill.is-on,.ct-pages__n.is-on,.auth2-tab.is-active,.notif-tab.is-active,.sp-tab.is-active,.rv-chip.is-active,.hd-lang button.is-active) {
  background: var(--brand-violet); color: #fff; border-color: var(--brand-violet);
}
html[data-brand-palette] .pg-tabs__ind { background: var(--brand-violet); }
html[data-brand-palette] :is(.hd-menu__item.is-active,.hd-menu__item:hover):not(.hd-menu__item--danger) { background-color: var(--brand-selected); }
html[data-brand-palette] .lcard__fav.is-on svg { fill: var(--brand-lime); stroke: var(--brand-lime); }
html[data-brand-palette] .pdp-gal__thumb.is-active { border-color: var(--brand-lime); }
html[data-brand-palette] .auth2-card--perks { background: var(--grad-soft); border-color: var(--brand-border); }

/* Catalogue chrome only. Game artwork, category palettes and premium/sale badges remain native. */
html[data-brand-palette] .catalog-page :is(.ct-apps__input,.ct-search input,.ct-fbtn,.ct-fsel,.ct-sort select,.ct-view,.ct-pages__n,.ct-pages__nav) {
  background-color: var(--bg-2); color: var(--txt); border-color: var(--line-hi);
}
html[data-brand-palette] .catalog-page :is(.ct-card,.ct-list) { background-color: var(--bg-1); }
html[data-brand-palette] .catalog-page .ct-card:not(.is-premium):not(.is-choice):hover { background-color: var(--bg-2); border-color: var(--brand-border); }
html[data-brand-palette] .catalog-page .ct-dd__pop { background-color: var(--bg-2); border-color: var(--line-hi); }
html[data-brand-palette] .catalog-page .ct-apps__input:focus { border-color: var(--brand-link); box-shadow: 0 0 0 3px rgba(185,169,255,.2); }
html[data-brand-palette] .catalog-page .ct-apps__kind[aria-pressed="true"],
html[data-brand-palette] .catalog-page .ct .ct-mnav .cat-chip.is-active,
html[data-brand-palette] .catalog-page .ct-dd.is-on > .ct-fbtn,
html[data-brand-palette] .catalog-page .ct-tog.is-on,
html[data-brand-palette] .catalog-page .ct-view__b.is-on {
  background: var(--brand-selected); border-color: var(--brand-border); color: var(--txt);
}
html[data-brand-palette] .catalog-page .ct-pages__n.is-on { background: var(--brand-violet); color: #fff; border-color: var(--brand-violet); }
html[data-brand-palette] .catalog-page :is(.ct-desc,.ct-card__desc,.ct-row__attrs,.ct-app__meta) { color: var(--txt-2); }
html[data-brand-palette] .catalog-page :is(.ct-apps__status,.ct-lhead) { color: var(--txt-3); }
html[data-brand-palette] .game-page .gh .gh-card__btn { background: var(--brand-selected); border-color: var(--brand-border); color: var(--txt); }
html[data-brand-palette] .game-page .gh .gh-card:hover .gh-card__btn { background: var(--brand-violet); border-color: var(--brand-link); color: #fff; }

/* Account and chat keep financial statuses, staff warnings and payment-provider logos intact. */
html[data-brand-palette] .page-chats { --chat-surface: var(--bg-1); --chat-room: var(--bg-0); --chat-border: var(--line); }
html[data-brand-palette] .page-chats :is(.chx-head,.chx-foot) { background-color: var(--bg-1); }
html[data-brand-palette] .page-chats .chx-chip.is-active,
html[data-brand-palette] .page-chats .chx-row.is-active:not(.chx-row--support) { background-color: var(--brand-selected); border-color: var(--brand-border); color: var(--txt); }
html[data-brand-palette] .page-chats .chx-unread { background: var(--brand-lime); color: var(--brand-ink); }
html[data-brand-palette] .page-chats .chx-body .chat-line.is-me .chat-bubble:not(.sx-bubble--staff) { background-color: #4F38AC; border-color: var(--brand-border); }
html[data-brand-palette] .page-chats .chx-compose__hint { color: var(--txt-3); }
html[data-brand-palette] .bal-shell .bal-hero__val { color: var(--brand-lime); }

/* Page canvas only. Keep every component, game backdrop and card illustration intact.
   Explicit sizes replace the old 400px repeating doodle tile without affecting layout. */
html:root[data-brand-palette="violet-lime"] {
  background-color: #100D1B;
  background-image:
    radial-gradient(ellipse 76% 90% at -18% 12%, transparent 49.5%, rgba(113,77,222,.12) 49.8%, rgba(113,77,222,.24) 57.5%, rgba(113,77,222,.04) 57.8%, transparent 64%),
    radial-gradient(ellipse 84% 110% at 124% 42%, transparent 55%, rgba(195,226,122,.02) 55.2%, rgba(195,226,122,.10) 55.6%, transparent 55.9%),
    radial-gradient(ellipse 75% 90% at -10% 8%, rgba(101,62,192,.25), rgba(60,37,100,.09) 50%, transparent 74%),
    radial-gradient(ellipse 60% 85% at 108% 34%, rgba(144,115,238,.09), transparent 70%);
  background-size: 100% 1060px, 100% 1180px, 100% 1080px, 100% 1180px;
  background-position: center top;
  background-attachment: scroll;
  background-repeat: no-repeat;
}
/* Retain the sky layer's geometry/mask, replacing only its old planets and stars. */
html:root[data-brand-palette="violet-lime"] body::before {
  background-image: none;
  background-color: transparent;
}
/* Keep the existing footer's spacing and silhouette layer; only change its paint. */
html:root[data-brand-palette="violet-lime"] .footer {
  background-color: #100D1B;
  background-image: linear-gradient(180deg, transparent, #100D1B);
}
html:root[data-brand-palette="violet-lime"] .footer::before {
  background-image:
    radial-gradient(ellipse at 18% 100%, rgba(112,80,255,.16), transparent 68%),
    radial-gradient(ellipse at 95% 100%, rgba(220,255,100,.045), transparent 58%);
  background-size: 100% 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
/* Reading and chat pages retain their quiet, unpatterned canvas. */
html:root[data-brand-palette="violet-lime"]:has(main.legal),
html:root[data-brand-palette="violet-lime"]:has(.chx) { background-image: none; }

/* The same quiet curves scale to touch screens without a fixed paint layer. */
@media (max-width: 760px) {
  html:root[data-brand-palette="violet-lime"] {
    background-size: 160% 780px, 135% 900px, 120% 780px, 120% 900px;
    background-position: left top, right top, left top, right top;
  }
}