:root {
  --store-bg: #06070b;
  --store-surface: #0f1118;
  --store-surface-2: #131722;
  --store-surface-3: #191d2a;
  --store-border: rgba(255,255,255,0.08);
  --store-text: #f4f7ff;
  --store-muted: #8e95b5;
  --store-accent: #7c3aed;
  --store-accent-2: #a855f7;
  --store-success: #10b981;
  --store-danger: #f43f5e;
}

html[data-sidebar-color="dark"],
html[data-sidebar-color="dark"] body {
  background: var(--store-bg);
  color: var(--store-text);
  font-family: 'Wix Madefor Text', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.storefront-shell,
.storefront-shell .page-content,
.storefront-shell .container-fluid {
  background: var(--store-bg);
}

.storefront-shell .app-topbar,
.storefront-shell .app-sidebar {
  background: rgba(10, 12, 18, 0.96);
  border-color: var(--store-border);
}

.storefront-shell .app-sidebar {
  box-shadow: none;
}

.storefront-shell .page-content {
  min-height: 100vh;
}

.storefront-shell .page-content .container-fluid {
  padding-top: 28px;
  padding-bottom: 40px;
}

.storefront-shell .card,
.storefront-shell .alert {
  background: var(--store-surface);
  border: 1px solid var(--store-border);
  border-radius: 20px;
  color: var(--store-text);
  box-shadow: none;
}

.storefront-shell .text-muted,
.storefront-shell .form-label,
.storefront-shell .breadcrumb-item,
.storefront-shell .search-hint-pill,
.storefront-shell .store-page-copy,
.storefront-shell .store-brand-copy,
.storefront-shell .topbar-user-handle,
.storefront-shell .package-copy,
.storefront-shell .hero-summary-copy,
.storefront-shell .empty-copy,
.storefront-shell .stack-item-meta,
.storefront-shell .stack-item-subline {
  color: var(--store-muted) !important;
}

.storefront-shell h1,
.storefront-shell h2,
.storefront-shell h3,
.storefront-shell h4,
.storefront-shell h5,
.storefront-shell h6,
.storefront-shell .page-title-box,
.storefront-shell .store-page-title,
.storefront-shell .topbar-user-name,
.storefront-shell .store-brand-name {
  color: var(--store-text);
}

.store-brand-lockup,
.topbar-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.store-brand-mark,
.store-logo-sm {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--store-accent), var(--store-accent-2));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.store-logo-lg,
.store-brand-name {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.store-brand-copy,
.store-brand-lockup .store-brand-copy {
  font-size: 12px;
}

.sidebar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--store-text);
}

.status-pill-web {
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.16) !important;
  color: #d8c9ff !important;
  padding: 10px 14px;
}

.store-topbar-button,
.storefront-shell .btn-primary,
.storefront-shell .btn-outline-light,
.storefront-shell .btn-light {
  border-radius: 14px;
  padding: 10px 18px;
  box-shadow: none;
}

.storefront-shell .btn-primary {
  background: linear-gradient(135deg, var(--store-accent), var(--store-accent-2));
  border: 0;
}

.storefront-shell .btn-primary:hover,
.storefront-shell .btn-primary:focus {
  background: linear-gradient(135deg, #6d28d9, #9333ea);
}

.storefront-shell .btn-outline-light {
  border-color: rgba(255,255,255,0.12);
  color: var(--store-text);
}

.storefront-shell .btn-light {
  background: rgba(255,255,255,0.08);
  color: var(--store-text);
  border: 1px solid rgba(255,255,255,0.08);
}

.store-topbar-button:hover,
.storefront-shell .btn-outline-light:hover,
.storefront-shell .btn-light:hover {
  color: #fff;
}

.topbar-user-avatar,
.store-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
}

.store-profile-avatar--large {
  width: 72px;
  height: 72px;
  border-radius: 22px;
}

.topbar-user-avatar--fallback,
.store-profile-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.18);
  color: #e8dfff;
  font-weight: 700;
}

.sidebar-search-wrap .form-control,
.storefront-shell .form-control {
  background: var(--store-surface-2);
  border-color: rgba(255,255,255,0.08);
  color: var(--store-text);
  border-radius: 14px;
}

.storefront-shell .form-control:focus {
  background: var(--store-surface-2);
  color: #fff;
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.15);
}

.storefront-shell .form-control::placeholder {
  color: #8088a7;
}

.storefront-shell .navbar-nav .nav-link {
  border-radius: 14px;
  margin: 3px 12px;
  color: #c7cae1;
}

.storefront-shell .navbar-nav .nav-link:hover,
.storefront-shell .navbar-nav .nav-link.active {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

.storefront-shell .menu-title {
  color: #737a97;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-mini-card {
  margin: 8px 16px;
  padding: 14px 16px;
  border: 1px solid var(--store-border);
  border-radius: 16px;
  background: var(--store-surface);
}

.sidebar-mini-card--muted {
  background: var(--store-surface-2);
}

.sidebar-mini-label,
.store-overline {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8e95b5;
  margin-bottom: 10px;
}

.store-page-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.store-page-title {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
}

.stat-surface .card-body,
.section-surface .card-body,
.account-surface .card-body,
.hero-surface .card-body {
  background: transparent;
}

.stat-surface,
.section-surface,
.account-surface,
.hero-surface,
.package-card {
  overflow: hidden;
}

.stat-unit {
  color: var(--store-muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-surface {
  background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.28), transparent 40%), var(--store-surface);
}

.hero-title {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 800;
}

.hero-copy {
  max-width: 640px;
  color: #c8cce0;
  font-size: 16px;
}

.hero-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: #d6dbef;
}

.hero-summary-card {
  min-width: 240px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-summary-label,
.wallet-balance-label {
  color: var(--store-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-summary-value,
.wallet-balance-value {
  font-size: 30px;
  font-weight: 800;
  margin: 10px 0 8px;
}

.account-fact-list {
  display: grid;
  gap: 12px;
}

.account-fact-list.compact {
  gap: 10px;
}

.account-fact-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--store-surface-2);
  border: 1px solid var(--store-border);
  border-radius: 14px;
  color: #d8ddf1;
}

.package-card {
  background: linear-gradient(180deg, rgba(124,58,237,0.12), rgba(255,255,255,0.01)), var(--store-surface-2);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.package-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,58,237,0.45);
}

.package-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.24);
  color: #e2d8ff;
  font-size: 12px;
}

.package-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.package-points {
  color: #f6f7fb;
  font-weight: 700;
  font-size: 14px;
}

.package-price {
  font-size: 34px;
  font-weight: 800;
}

.stack-list {
  display: grid;
  gap: 14px;
}

.stack-item {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--store-surface-2);
  border: 1px solid var(--store-border);
}

.stack-item-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.stack-item-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stack-item-meta,
.stack-item-subline {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
}

.stack-status,
.round-result-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.08);
}

.stack-status.status-paid,
.round-result-pill.is-win {
  background: rgba(16,185,129,0.14);
  color: #8ef0c0;
}

.stack-status.status-pending {
  background: rgba(250,204,21,0.12);
  color: #f7df8b;
}

.stack-status.status-failed,
.round-result-pill.is-loss {
  background: rgba(244,63,94,0.14);
  color: #ff9cb0;
}

.stack-status.status-review {
  background: rgba(59,130,246,0.14);
  color: #9cc7ff;
}

.pagination-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pagination-summary {
  color: var(--store-muted);
  font-size: 13px;
}

.pagination-actions {
  display: flex;
  gap: 10px;
}

.pagination-actions .btn {
  min-width: 110px;
}

.empty-card-state,
.empty-state {
  padding: 24px;
  border-radius: 18px;
  background: var(--store-surface-2);
  border: 1px solid var(--store-border);
}

.wallet-balance-card {
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(255,255,255,0.04));
  border: 1px solid rgba(124,58,237,0.2);
}

.how-step-list {
  display: grid;
  gap: 18px;
}

.how-step-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}

.how-step-number {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,58,237,0.18);
  color: #f2ecff;
  font-weight: 800;
}

.search-hint-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.store-notice-banner {
  margin-bottom: 22px;
  background: var(--store-surface-2);
  color: var(--store-text);
}

.store-notice-banner.alert-info {
  border-left: 4px solid rgba(59,130,246,0.7);
}

.store-notice-banner.alert-warning {
  border-left: 4px solid rgba(245,158,11,0.7);
}

.form-control-dark {
  padding-right: 42px;
}

.sidebar-search-box .search-widget-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7d84a1;
}

[data-simplebar] {
  max-height: calc(100vh - 80px);
}

@media (max-width: 1199.98px) {
  .store-page-header {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 991.98px) {
  .storefront-shell .page-content .container-fluid {
    padding-top: 18px;
  }

  .hero-title {
    font-size: 34px;
  }
}

@media (max-width: 767.98px) {
  .store-brand-copy,
  .status-pill-web,
  .search-hint-pill {
    display: none;
  }

  .topbar-user-chip {
    max-width: 170px;
  }

  .store-page-title {
    font-size: 28px;
  }

  .stack-item-head {
    flex-direction: column;
    align-items: start;
  }

  .pagination-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-actions {
    width: 100%;
  }

  .pagination-actions .btn {
    flex: 1;
  }
}

.admin-user-item {
  width: 100%;
  text-align: left;
  color: inherit;
}

.admin-user-item.is-active {
  border-color: rgba(124,58,237,0.45);
  background: rgba(124,58,237,0.12);
}

.admin-detail-grid {
  display: grid;
  gap: 16px;
}

.admin-detail-card {
  padding: 20px;
  border-radius: 18px;
  background: var(--store-surface-2);
  border: 1px solid var(--store-border);
}

.admin-inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Dark form controls */
.form-control,
.form-select,
textarea.form-control,
input.form-control,
select.form-control {
  background: #131b2a !important;
  color: #eef2ff !important;
  border-color: rgba(255,255,255,.10) !important;
}

.form-control::placeholder,
textarea.form-control::placeholder,
input.form-control::placeholder {
  color: rgba(255,255,255,.46) !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input.form-control:focus,
select.form-control:focus {
  background: #131b2a !important;
  color: #fff !important;
  border-color: rgba(124,58,237,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.14) !important;
}


.admin-console-list {
  display: grid;
  gap: 0.9rem;
}