/*
 * XYLO 75F — Global Visual Unification
 * Customer-facing visual layer only. No business/payment behavior.
 * Locked brand: #7040D8 -> #A050EC
 * Accent intensity: HIGH / Nexus-like prominence
 */

:root {
  --xylo-accent-start: #7040d8;
  --xylo-accent-end: #a050ec;
  --xylo-accent-rgb: 112, 64, 216;
  --xylo-accent-end-rgb: 160, 80, 236;
  --xylo-gradient: linear-gradient(135deg, var(--xylo-accent-start), var(--xylo-accent-end));
  --xylo-bg: #050507;
  --xylo-bg-soft: #08080b;
  --xylo-surface: #0b0b0f;
  --xylo-surface-2: #101015;
  --xylo-surface-3: #15151c;
  --xylo-text: #f7f5fb;
  --xylo-muted: #8d8997;
  --xylo-muted-2: #676471;
  --xylo-border: rgba(255,255,255,.085);
  --xylo-border-strong: rgba(160,80,236,.42);
  --xylo-tint-soft: rgba(112,64,216,.075);
  --xylo-tint: rgba(112,64,216,.14);
  --xylo-tint-strong: rgba(112,64,216,.24);
  --xylo-glow: 0 0 28px rgba(160,80,236,.16);
  --xylo-shadow: 0 20px 54px rgba(0,0,0,.34);
  --xylo-radius-card: 18px;
  --xylo-radius-control: 12px;
  --xylo-success: #22c55e;
  --xylo-danger: #ef4444;
  --xylo-warning: #f59e0b;
  --xylo-ease: cubic-bezier(.2,.8,.2,1);
  --xylo-fast: 130ms;
  --xylo-med: 190ms;
  --xylo-slow: 260ms;

  /* Normalize legacy customer accent variables. */
  --vip-accent: var(--xylo-accent-end);
  --vip-cyan: var(--xylo-accent-end);
  --vip-mag: var(--xylo-accent-end);
  --vip-accent-rgb: var(--xylo-accent-rgb);
  --status-accent: var(--xylo-accent-end);
  --status-accent-2: var(--xylo-accent-start);
  --status-accent-rgb: var(--xylo-accent-end-rgb);
}

html, body {
  background: var(--xylo-bg) !important;
  color: var(--xylo-text);
}

body {
  background:
    radial-gradient(720px 420px at 8% -8%, rgba(112,64,216,.17), transparent 62%),
    radial-gradient(620px 360px at 96% 5%, rgba(160,80,236,.10), transparent 66%),
    var(--xylo-bg) !important;
}

/* No glassmorphism on operational/store surfaces. */
.glass,
.glass-card,
.hero-card,
.section-card,
.glass-header,
.drawer,
.xv-topPill,
.xv-menuControl,
.xv-nexus-shell .glass,
.xv74b-shell .glass,
.xv-catalog-main .glass,
.xv-status-shell .glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- Shared navigation ---------- */
.glass-header {
  background:
    linear-gradient(90deg, rgba(112,64,216,.16), rgba(11,11,15,.985) 32%, rgba(11,11,15,.985) 72%, rgba(160,80,236,.11)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(160,80,236,.22) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
}

.xv-menuControl,
.xv-topPill {
  background: #101015 !important;
  border: 1px solid rgba(160,80,236,.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 18px rgba(160,80,236,.07) !important;
}
.xv-menuControl:hover,
.xv-topPill:hover {
  background: #15131b !important;
  border-color: rgba(160,80,236,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--xylo-glow) !important;
}
.xv-menuControl:focus-visible,
.xv-topPill:focus-visible {
  outline: 2px solid rgba(160,80,236,.72) !important;
  outline-offset: 3px;
}

.drawer,
.drawer.glass {
  background:
    linear-gradient(180deg, rgba(112,64,216,.12), transparent 150px),
    #08080c !important;
  border-right: 1px solid rgba(160,80,236,.20) !important;
  box-shadow: 22px 0 54px rgba(0,0,0,.46) !important;
}

.drawer .nav-item,
.drawer a.nav-item,
.xv-drawerUtility {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.drawer .nav-item:hover,
.drawer a.nav-item:hover,
a.xv-drawerUtility:hover {
  background: rgba(112,64,216,.09) !important;
  border-color: rgba(160,80,236,.16) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.drawer .nav-item.active,
.drawer a.nav-item.active {
  background: linear-gradient(90deg, rgba(112,64,216,.26), rgba(160,80,236,.09)) !important;
  border-color: rgba(160,80,236,.32) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--xylo-accent-end) !important;
}
.drawer .nav-item.active::before,
.drawer a.nav-item.active::before {
  background: var(--xylo-accent-end) !important;
  box-shadow: 0 0 14px rgba(160,80,236,.48) !important;
}
.xv-drawerBrandSub,
.xv-roleBrandSub,
.xv-drawerUtilityIcon,
.xv-drawerChevron,
.nav-item i,
.xv-tabActive i {
  color: var(--xylo-accent-end) !important;
}

.xv-centerNav { border-color: rgba(255,255,255,.065) !important; }
.xv-tab { border-radius: 10px !important; }
.xv-tab:hover { background: rgba(112,64,216,.08) !important; }
.xv-tabActive {
  background: rgba(112,64,216,.14) !important;
  color: #fff !important;
}
.xv-tabActive::after {
  background: var(--xylo-gradient) !important;
  box-shadow: 0 0 16px rgba(160,80,236,.38) !important;
}

/* Reseller no longer owns a separate decorative green theme. */
.xv-nexus-reseller,
.xv74b-reseller,
.xv-catalog-reseller {
  --vip-accent: var(--xylo-accent-end) !important;
  --vip-accent-rgb: var(--xylo-accent-rgb) !important;
}

/* ---------- Dashboard / Home ---------- */
.xv-nexus-shell {
  --xv-accent: 112,64,216 !important;
  --xv-accent-2: 160,80,236 !important;
  --xv-accent-solid: #a050ec !important;
  --xv-accent-soft: #d6b4f6 !important;
  background: transparent !important;
}
.xv-nexus-shell.xv-nexus-reseller {
  --xv-accent: 112,64,216 !important;
  --xv-accent-2: 160,80,236 !important;
  --xv-accent-solid: #a050ec !important;
  --xv-accent-soft: #d6b4f6 !important;
}
.xv-nexus-hero,
.xv-nexus-metric,
.xv-nexus-wallets,
.xv-nexus-section,
.xv-nexus-shell .card,
.xv-nexus-shell .panel {
  background: var(--xylo-surface) !important;
  border-color: var(--xylo-border) !important;
  box-shadow: none !important;
}
.xv-nexus-hero {
  border-color: rgba(160,80,236,.28) !important;
  background:
    linear-gradient(105deg, rgba(112,64,216,.20), transparent 52%),
    var(--xylo-surface) !important;
}
.xv-nexus-hero::before {
  background: var(--xylo-gradient) !important;
}
.xv-nexus-metric::after {
  background: linear-gradient(90deg, var(--xylo-accent-start), var(--xylo-accent-end), transparent 82%) !important;
}
.xv-nexus-wallet-card {
  background: #0b0b0f !important;
  border-color: var(--xylo-border) !important;
}
.xv-nexus-wallet-card.is-active {
  background:
    linear-gradient(135deg, rgba(112,64,216,.27), rgba(160,80,236,.10) 64%),
    #0b0b0f !important;
  box-shadow: inset 0 3px 0 var(--xylo-accent-end) !important;
}
.xv-nexus-wallet-action,
.xv-nexus-link,
.xv-nexus-shell button:not(.xv-semantic-success):not(.xv-semantic-danger) {
  border-color: rgba(160,80,236,.29) !important;
}
.xv-nexus-wallet-action:hover,
.xv-nexus-link:hover {
  background: rgba(112,64,216,.16) !important;
  border-color: rgba(160,80,236,.48) !important;
}
.xv-nexus-shell input,
.xv-nexus-shell select,
.xv-nexus-shell textarea {
  background: #08080b !important;
  border-color: rgba(160,80,236,.27) !important;
  border-radius: var(--xylo-radius-control) !important;
  box-shadow: none !important;
}
.xv-nexus-shell input:focus,
.xv-nexus-shell select:focus,
.xv-nexus-shell textarea:focus {
  border-color: rgba(160,80,236,.70) !important;
  box-shadow: 0 0 0 3px rgba(160,80,236,.10) !important;
}

/* Guest/public home surfaces — solid Nexus style. */
.glass-card,
.hero-card,
.section-card {
  background: var(--xylo-surface) !important;
  border: 1px solid rgba(160,80,236,.22) !important;
  box-shadow: var(--xylo-shadow) !important;
}
.glass-card::before,
.hero-card::before,
.section-card::before {
  background:
    linear-gradient(120deg, rgba(112,64,216,.19), transparent 48%),
    radial-gradient(420px 220px at 92% 0%, rgba(160,80,236,.11), transparent 65%) !important;
  opacity: 1 !important;
}
.glass-card .cta,
.hero-card .btn-cta,
.section-card .btn-cta {
  background: var(--xylo-gradient) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 26px rgba(112,64,216,.24) !important;
}
.glass-card .bg-emerald-500\/10,
.hero-card .pill,
.section-card .pill {
  background: rgba(112,64,216,.14) !important;
  border-color: rgba(160,80,236,.36) !important;
  color: #e7d6f8 !important;
  box-shadow: none !important;
}
.glass-card .bg-emerald-400,
.hero-card .bg-emerald-400,
.section-card .bg-emerald-400 {
  background: var(--xylo-accent-end) !important;
  box-shadow: 0 0 14px rgba(160,80,236,.45) !important;
}
.info-item {
  background: #101015 !important;
  border-color: rgba(160,80,236,.16) !important;
}

/* ---------- Notifications / authenticated activity ---------- */
.xv74b-shell,
.xv74b-shell.xv74b-reseller {
  --xv74b-accent: 112,64,216 !important;
  --xv74b-accent2: 160,80,236 !important;
  --xv74b-accent-solid: #a050ec !important;
  --xv74b-accent-soft: #d6b4f6 !important;
  background: transparent !important;
}
.xv74b-hero {
  background:
    linear-gradient(110deg, rgba(112,64,216,.20), transparent 52%),
    var(--xylo-surface) !important;
  border-color: rgba(160,80,236,.25) !important;
}
.xv74b-hero::before { background: var(--xylo-gradient) !important; }
.xv74b-panel,
.xv74b-shell .xv74b-panel.glass,
.xv74b-notif-panel.card,
.xv74b-order-card {
  background: var(--xylo-surface) !important;
  border-color: var(--xylo-border) !important;
}
.xv74b-shell .notif-row {
  background: var(--xylo-surface-2) !important;
  border-color: rgba(255,255,255,.065) !important;
}
.xv74b-shell .notif-row:hover {
  background: #15131b !important;
  border-color: rgba(160,80,236,.30) !important;
}
.xv74b-shell .notif-row.notif-unread {
  background: linear-gradient(90deg, rgba(112,64,216,.18), rgba(112,64,216,.055)) !important;
  border-left-color: var(--xylo-accent-end) !important;
}
.xv74b-hero-action,
.xv74b-shell .xv-mark-read-btn,
.xv74b-table button {
  background: rgba(112,64,216,.13) !important;
  border-color: rgba(160,80,236,.34) !important;
  color: #fff !important;
}
.xv74b-hero-action:hover,
.xv74b-shell .xv-mark-read-btn:hover:not(:disabled),
.xv74b-table button:hover {
  background: rgba(112,64,216,.22) !important;
  border-color: rgba(160,80,236,.58) !important;
}

/* ---------- Products / catalog ---------- */
.xv-catalog-main,
.xv-catalog-main.xv-catalog-reseller {
  --xv-cat-accent: #a050ec !important;
  --xv-cat-accent-rgb: 160,80,236 !important;
  --xv-cat-accent-2: #7040d8 !important;
}
.xv-catalog-hero {
  border-color: rgba(160,80,236,.35) !important;
  background: #09090d !important;
}
.xv-catalog-hero::after { background: linear-gradient(90deg, #7040d8, #a050ec, transparent 78%) !important; }
.xv-catalog-hero-media::after { background: radial-gradient(70% 80% at 66% 44%, rgba(160,80,236,.24), transparent 70%) !important; }
.xv-catalog-kicker,
.xv-catalog-pick-badge {
  background: rgba(112,64,216,.14) !important;
  border-color: rgba(160,80,236,.38) !important;
  color: #eadcf9 !important;
}
.xv-catalog-primary,
.xv-game-pill.is-active,
.xv-game-pill.category-pill-active,
.xv-device-pill[aria-pressed="true"] {
  background: var(--xylo-gradient) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 10px 26px rgba(112,64,216,.24) !important;
}
.xv-catalog-filter-shell,
.xv-catalog-pick,
.xv-catalog-main .vip-product-card,
.xv-catalog-main .vip-product-body {
  background: var(--xylo-surface) !important;
}
.xv-catalog-filter-shell {
  border-color: rgba(160,80,236,.23) !important;
}
.xv-catalog-main .vip-product-card {
  border-color: rgba(160,80,236,.22) !important;
}
.xv-catalog-main .vip-product-card:hover {
  border-color: rgba(160,80,236,.56) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.40), 0 0 28px rgba(160,80,236,.08) !important;
}
.xv-catalog-main .vip-buy-btn {
  background: rgba(112,64,216,.13) !important;
  border-color: rgba(160,80,236,.36) !important;
}
.xv-catalog-main .vip-buy-btn:hover {
  background: var(--xylo-gradient) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.xv-catalog-main .vip-featured-badge {
  color: #eadcf9 !important;
  background: rgba(112,64,216,.16) !important;
  border-color: rgba(160,80,236,.36) !important;
}
.xv-catalog-main .vip-chip-delivery.is-fast {
  color: #d9c3f3 !important;
  border-color: rgba(160,80,236,.27) !important;
  background: rgba(112,64,216,.08) !important;
}
/* Money remains semantic green. */
.xv-catalog-main .vip-price-badge { color: #6ee7b7 !important; }

/* Buy modal presentation only. Required modal section order is untouched. */
#variantModal .modal-content,
#variantModal .buy-modal-content,
#variantModal .xv-checkout-shell {
  background: #0a0a0f !important;
  border-color: rgba(160,80,236,.28) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#variantModal #scrollHint,
.xv-modal-gallery-frame .xv-gallery-dots {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- Status ---------- */
.xv-status-shell {
  --status-accent: #a050ec !important;
  --status-accent-2: #7040d8 !important;
  --status-accent-rgb: 160,80,236 !important;
}
.xv-status-hero {
  background:
    linear-gradient(110deg, rgba(112,64,216,.21), transparent 52%),
    var(--xylo-surface) !important;
  border-color: rgba(160,80,236,.28) !important;
}
.xv-status-toolbar,
.xv-status-card,
.xv-status-filter-panel,
.xv-status-suggestions {
  background: var(--xylo-surface) !important;
  border-color: rgba(160,80,236,.18) !important;
}
.xv-status-search,
.xv-status-filter-trigger {
  background: #0a0a0e !important;
  border-color: rgba(160,80,236,.25) !important;
}
.xv-status-search:focus-within,
.xv-status-filter-trigger:hover {
  border-color: rgba(160,80,236,.58) !important;
  box-shadow: 0 0 0 3px rgba(160,80,236,.09) !important;
}
.xv-status-filter-icon,
.xv-status-filter-option i {
  background: rgba(112,64,216,.13) !important;
  color: var(--xylo-accent-end) !important;
}
.xv-status-filter-option:hover,
.xv-status-filter-option[aria-pressed="true"],
.xv-status-suggestion:hover,
.xv-status-suggestion.is-active {
  background: rgba(112,64,216,.14) !important;
}

/* ---------- Shared controls / transition rhythm ---------- */
.xv-nexus-shell :is(a,button,input,select,textarea),
.xv74b-shell :is(a,button,input,select,textarea),
.xv-catalog-main :is(a,button,input,select,textarea),
.xv-status-shell :is(a,button,input,select,textarea),
.glass-card :is(a,button,input,select,textarea),
.hero-card :is(a,button,input,select,textarea),
.section-card :is(a,button,input,select,textarea) {
  transition:
    background-color var(--xylo-med) var(--xylo-ease),
    border-color var(--xylo-med) var(--xylo-ease),
    color var(--xylo-fast) var(--xylo-ease),
    box-shadow var(--xylo-med) var(--xylo-ease),
    transform var(--xylo-fast) var(--xylo-ease),
    opacity var(--xylo-fast) var(--xylo-ease) !important;
}

:where(.xv-nexus-shell,.xv74b-shell,.xv-catalog-main,.xv-status-shell) :is(input,select,textarea):focus-visible {
  outline: none !important;
  border-color: rgba(160,80,236,.68) !important;
  box-shadow: 0 0 0 3px rgba(160,80,236,.10) !important;
}

/* Keep the approved 75E Deposit component authoritative. Only shared navigation above applies there. */
.xv-global-deposit {
  --xv-brand-start: #7040d8;
  --xv-brand-end: #a050ec;
}

@media (max-width: 767px) {
  .glass-header {
    background: #09090d !important;
    border-bottom-color: rgba(160,80,236,.24) !important;
  }
  .xv-nexus-main,
  .xv74b-main,
  .xv-catalog-main,
  .xv-status-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .xv-nexus-hero,
  .xv74b-hero,
  .xv-status-hero,
  .xv-catalog-hero {
    border-radius: 18px !important;
  }
}

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