/* pay2win shared desktop design system */
:root {
  --ds-container: 1200px;
  --ds-space-1: 8px;
  --ds-space-2: 12px;
  --ds-space-3: 16px;
  --ds-space-4: 24px;
  --ds-space-5: 32px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-bg: var(--color-bg-base, #fdfbf7);
  --ds-surface: var(--color-bg-card, #fff);
  --ds-surface-2: var(--color-bg-secondary, #f9f6f0);
  --ds-border: var(--color-border, #e5e0d8);
  --ds-text: var(--color-text-primary, #2f2a24);
  --ds-text-2: var(--color-text-secondary, #6b6258);
  --ds-muted: var(--color-text-muted, #90887e);
  --ds-accent: var(--color-accent-primary, #D9AA67);
  --ds-accent-hover: var(--color-accent-hover, #E4B978);
  --ds-shadow: var(--shadow-sm, 0 8px 24px rgba(0,0,0,.08));
}

html {
  font-size: 16px;
}

body {
  color: var(--ds-text);
  background: var(--ds-bg);
}

.theme-boot *,
.theme-changing *,
.theme-boot *::before,
.theme-boot *::after,
.theme-changing *::before,
.theme-changing *::after {
  transition: none !important;
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
}

.header,
.topbar {
  width: 100%;
  border-bottom: 1px solid var(--ds-border);
  background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}

.header-container,
.main-container,
.catalog-container,
.cabinet-container,
.support-chat-page,
.my-orders-page,
.order-page,
.admin-main {
  width: min(var(--ds-container), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.topbar {
  max-width: none;
  margin: 0;
  padding: 8px 16px;
}

.header-container {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
}

.header-nav,
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

.topbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.topbar .logo,
.topbar .cart-icon {
  flex: 0 0 auto;
}

.game-filter {
  flex: 0 0 auto;
  max-width: 520px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.game-filter::-webkit-scrollbar {
  display: none;
}

.game-filter-btn,
.nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.search-bar {
  flex: 0 1 340px;
  min-width: 0;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.search-bar input {
  min-width: 0;
  flex: 1 1 auto;
}

.search-btn {
  flex: 0 0 auto;
}

.topbar .header-actions {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.topbar #adminLink,
.topbar #ordersLink,
.topbar #cabinetBtn,
.topbar .cart-icon {
  order: 10;
}

.topbar .logo {
  display: none;
}

.topbar .game-filter-btn,
.topbar .nav-btn,
.topbar .search-btn {
  min-height: 32px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1;
}

.topbar .search-bar input {
  height: 32px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.topbar .cart-icon {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

.logo,
.logo h2 {
  margin: 0;
  color: var(--ds-text);
  text-decoration: none;
}

.btn,
.nav-btn,
.btn-login,
button[class*='btn'] {
  min-height: 40px;
  border-radius: var(--ds-radius-sm);
  font-weight: 700;
}

.btn,
.nav-btn,
button.btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  padding: 10px 16px;
  border: 1px solid var(--ds-border);
}

.btn-primary,
.btn.btn-primary,
.nav-btn.primary {
  border-color: transparent;
  background: var(--gradient-button, var(--ds-accent));
  color: #111111;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--gradient-button-hover, var(--ds-accent-hover));
}

.btn-primary:active,
.btn.btn-primary:active {
  background: #C99654;
  color: #111111;
}

.btn-primary:disabled,
.btn.btn-primary:disabled {
  background: rgba(217, 170, 103, 0.55);
  color: rgba(17, 17, 17, 0.65);
  cursor: not-allowed;
}

.btn-secondary,
.btn-outline,
.btn.secondary {
  background: var(--ds-surface-2);
  color: var(--ds-text);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.card,
.cabinet-section,
.order-card,
.chat-card,
.modal-content,
.login-container {
  border-radius: var(--ds-radius-lg);
}

img,
video {
  max-width: 100%;
}

[data-theme='dark'] .header,
[data-theme='dark'] .topbar {
  background: color-mix(in srgb, var(--ds-surface) 88%, transparent);
}

@media (max-width: 768px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .topbar .game-filter {
    order: 4;
    flex-basis: 100%;
    max-width: none;
  }

  .topbar .search-bar {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }

  .topbar .header-actions {
    justify-content: flex-end;
  }

  .header-container,
  .main-container,
  .catalog-container,
  .cabinet-container,
  .support-chat-page,
  .my-orders-page,
  .order-page,
  .admin-main {
    width: min(100% - 24px, var(--ds-container));
  }
}

/* ===================================
   Unified dark theme finish
   =================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-base: #0f1111;
  --color-bg-secondary: #171a1a;
  --color-bg-tertiary: #202424;
  --color-bg-card: #1b1f1f;
  --color-border: #343a3a;
  --color-text-primary: #f1eee8;
  --color-text-secondary: #c8c0b6;
  --color-text-muted: #8f877d;
  --color-accent-primary: #D9AA67;
  --color-accent-hover: #E4B978;
  --color-accent-soft: rgba(217, 170, 103, 0.18);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.36);

  --ds-bg: var(--color-bg-base);
  --ds-surface: var(--color-bg-card);
  --ds-surface-2: var(--color-bg-secondary);
  --ds-border: var(--color-border);
  --ds-text: var(--color-text-primary);
  --ds-text-2: var(--color-text-secondary);
  --ds-muted: var(--color-text-muted);
  --ds-accent: var(--color-accent-primary);
  --ds-accent-hover: var(--color-accent-hover);
}

html,
body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
}

.admin-main,
.support-chat-page,
.catalog-container,
.main-container {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}

body.has-app-background,
body.has-app-background .cabinet-page-main,
body.has-app-background .product-page-main,
body.has-app-background .content-fullscreen,
body.has-app-background .login-page,
body.has-app-background .not-found-page,
body.has-app-background .my-orders-page,
body.has-app-background .order-page,
body.has-app-background .catalog-page,
body.has-app-background .support-chat-page,
body.has-app-background .catalog-container,
body.has-app-background .main-container,
body.has-app-background #main-content {
  background: transparent !important;
  background-color: transparent !important;
}

.header,
.topbar,
.sidebar,
.filters-panel,
.filters-bar,
.catalog-filters,
.admin-card,
.admin-section,
.cabinet-section,
.order-card,
.chat-card,
.modal-content,
.login-container,
.register-container,
.cart-modal,
.table-container,
.support-chat-container,
.orders-list,
.profile-card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

input,
select,
textarea,
.form-input,
.form-select,
.form-textarea {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent-primary) 70%, transparent);
  outline-offset: 2px;
}

.login-form input,
.login-form input:focus,
.login-form input:active,
.login-form input:valid,
.login-form input:not(:placeholder-shown),
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active,
.login-form input:autofill,
.auth-form input,
.auth-form input:focus,
.auth-form input:active,
.auth-form input:valid,
.auth-form input:not(:placeholder-shown),
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus,
.auth-form input:-webkit-autofill:active,
.auth-form input:autofill {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active,
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus,
.auth-form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text-primary) !important;
  caret-color: var(--color-text-primary);
  box-shadow: 0 0 0 1000px var(--color-bg-secondary) inset !important;
  transition: background-color 9999s ease-out, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.login-form input:-webkit-autofill::first-line,
.auth-form input:-webkit-autofill::first-line,
.login-form input::first-line,
.auth-form input::first-line {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.login-form input,
.auth-form input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

button,
.btn,
.nav-btn,
.game-filter-btn {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.modal-content,
.admin-card,
.cabinet-section,
.order-card,
.chat-card,
.table-container {
  box-shadow: var(--shadow-sm);
}

/* ===================================
   Compact desktop scale / information architecture pass
   =================================== */
:root,
[data-theme="dark"] {
  --ds-container: 1180px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 14px;
}

html {
  font-size: 15px;
  overflow-y: auto;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.94rem;
  line-height: 1.45;
}

body > main,
.cabinet-page-main,
.product-page-main,
.content-fullscreen,
.login-page,
.not-found-page {
  flex: 1 0 auto;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--color-accent-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.btn-login-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.form-message {
  min-height: 20px;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

.form-message-success {
  color: var(--color-success, #7CB38B);
}

.form-message-error {
  color: var(--color-error, #E58E8E);
}

.not-found-page {
  display: grid;
  place-items: center;
  width: min(100% - 32px, 860px);
  margin: 0 auto;
  padding: 56px 0;
}

.not-found-card {
  width: 100%;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.not-found-code {
  margin: 0 0 8px;
  color: var(--color-accent-primary);
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
}

.not-found-card .btn {
  margin-top: 10px;
}

h1 { font-size: clamp(1.55rem, 2vw, 2.05rem); }
h2 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); }
h3 { font-size: 1rem; }

.header-container,
.main-container,
.catalog-container,
.cabinet-container,
.support-chat-page,
.my-orders-page,
.order-page,
.admin-main {
  width: min(var(--ds-container), calc(100% - 32px));
}

.header-container {
  min-height: 56px;
}

.header-nav,
.header-actions {
  gap: 8px;
}

.btn,
.nav-btn,
.btn-login,
button[class*='btn'] {
  min-height: 36px;
  border-radius: 8px;
  font-size: 0.86rem;
}

.btn,
.nav-btn,
button.btn {
  padding: 8px 12px;
}

input,
select,
textarea {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.compact-cart,
.cart-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.badge,
#cartCount {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
}

.loading,
.loading-state,
.empty-state,
.error-state {
  min-height: 220px;
  padding: 28px 18px;
}

/* Admin keeps its own sidebar layout while sharing the visual system. */
.admin-main {
  width: auto;
  max-width: none;
  margin-right: 0;
  margin-left: var(--sidebar-width, 236px);
}

/* Global async states */
.ui-skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg-tertiary, #202426) 78%, var(--color-border, #34383b));
  border-radius: 8px;
}

.ui-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: uiSkeletonShimmer 1.2s infinite;
}

@keyframes uiSkeletonShimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton::after {
    animation: none;
  }
}

.ui-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
  color: var(--color-text-secondary);
  text-align: center;
}

.ui-state h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1rem;
}

.ui-state p {
  margin: 0;
  max-width: 420px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.ui-state .btn,
.ui-state button {
  margin-top: 4px;
}

.catalog-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
}

.games-grid > .ui-state,
.products-grid > .ui-state,
#products > .ui-state,
#gamesGrid > .ui-state {
  grid-column: 1 / -1;
}

.catalog-skeleton-card {
  min-height: 392px;
  display: grid;
  grid-template-rows: 120px 1fr auto;
  gap: 14px;
  padding: 0 16px 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-bg-card) 94%, transparent);
  overflow: hidden;
}

.catalog-skeleton-card .media {
  margin: 0 -16px;
  border-radius: 0;
}

.catalog-skeleton-card .lines {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 4px;
}

.product-skeleton-layout {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.product-skeleton-media,
.product-skeleton-info {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg-card) 94%, transparent);
}

.product-skeleton-info {
  display: grid;
  gap: 16px;
}

.order-skeleton-list,
.cabinet-skeleton {
  display: grid;
  gap: 14px;
}

.order-skeleton-card {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg-card) 94%, transparent);
}

.auth-skeleton {
  width: 74px;
  height: 34px;
  border-radius: 8px;
}

button.is-loading,
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

@media (max-width: 860px) {
  .product-skeleton-layout {
    grid-template-columns: 1fr;
  }
}

.admin-sidebar.collapsed + .admin-main {
  margin-left: var(--sidebar-width-collapsed, 64px);
}

@media (max-width: 1024px) {
  .admin-main {
    width: auto;
    margin-left: 0;
  }
}

/* Late compact exceptions for controls that include "btn" in their class name. */
.qty-btn,
.cart-item-qty-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 0.9rem;
}

.btn-icon {
  min-height: 30px;
}

.card-btn-add {
  min-height: 38px;
}

.card-btn-view {
  min-height: 38px;
}

/* ===================================
   Final UI audit pass: themes, search, filters, scale
   =================================== */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-bg-base: #f6f1e8;
  --color-bg-secondary: #eee6da;
  --color-bg-tertiary: #e4d9ca;
  --color-bg-card: #fffaf2;
  --color-border: #d8cbb9;
  --color-text-primary: #221f1a;
  --color-text-secondary: #51483d;
  --color-text-muted: #827568;
  --color-accent-primary: #D9AA67;
  --color-accent-hover: #E4B978;
  --color-accent-soft: rgba(217, 170, 103, 0.13);
  --shadow-sm: 0 8px 24px rgba(61, 43, 25, 0.10);
  --shadow-md: 0 14px 34px rgba(61, 43, 25, 0.14);
  --shadow-lg: 0 24px 58px rgba(61, 43, 25, 0.18);
  --ds-bg: var(--color-bg-base);
  --ds-surface: var(--color-bg-card);
  --ds-surface-2: var(--color-bg-secondary);
  --ds-border: var(--color-border);
  --ds-text: var(--color-text-primary);
  --ds-text-2: var(--color-text-secondary);
  --ds-muted: var(--color-text-muted);
  --ds-accent: var(--color-accent-primary);
  --ds-accent-hover: var(--color-accent-hover);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-base: #0f1111;
  --color-bg-secondary: #171a1a;
  --color-bg-tertiary: #202424;
  --color-bg-card: #1b1f1f;
  --color-border: #343a3a;
  --color-text-primary: #f1eee8;
  --color-text-secondary: #c8c0b6;
  --color-text-muted: #8f877d;
  --color-accent-primary: #D9AA67;
  --color-accent-hover: #E4B978;
  --color-accent-soft: rgba(217, 170, 103, 0.18);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.36);
  --ds-bg: var(--color-bg-base);
  --ds-surface: var(--color-bg-card);
  --ds-surface-2: var(--color-bg-secondary);
  --ds-border: var(--color-border);
  --ds-text: var(--color-text-primary);
  --ds-text-2: var(--color-text-secondary);
  --ds-muted: var(--color-text-muted);
  --ds-accent: var(--color-accent-primary);
  --ds-accent-hover: var(--color-accent-hover);
}

body,
.header,
.topbar,
.footer,
.admin-sidebar,
.admin-header,
.admin-content,
.modal,
.cart-modal-overlay {
  color: var(--color-text-primary);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px max(16px, calc((100vw - var(--ds-container, 1180px)) / 2));
  border-bottom: 1px solid var(--color-border);
}

.logo,
.logo-icon {
  flex: 0 0 auto;
}

.logo-icon {
  display: none !important;
}

.topbar > .logo {
  display: none !important;
}

.game-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 42vw;
  overflow-x: auto;
  scrollbar-width: none;
}

.game-filter::-webkit-scrollbar {
  display: none;
}

.search-bar {
  position: relative;
  flex: 0 1 360px;
  margin-left: 12px;
}

.header-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.header-actions .auth-menu,
.topbar .auth-menu {
  top: calc(100% + 8px);
  right: 0;
  z-index: 1700;
  min-width: 220px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg-card) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
}

.header-actions .auth-menu a,
.topbar .auth-menu a {
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--color-text-primary);
  font-weight: 750;
  text-decoration: none;
}

.header-actions .auth-menu a:hover,
.topbar .auth-menu a:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-bg-secondary));
  color: var(--color-accent-primary);
}

.search-suggest {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  padding: 6px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.search-suggest.active {
  display: grid;
  gap: 4px;
}

.search-suggest-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.search-suggest-item:hover,
.search-suggest-item:focus-visible {
  background: var(--color-accent-soft);
}

.search-suggest-title {
  font-size: 0.88rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-meta,
.search-suggest-empty {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.search-suggest-empty {
  padding: 10px;
}

.filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
  padding: 10px 12px !important;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-card) !important;
}

.filters-bar[hidden] {
  display: none !important;
}

.catalog-attribute-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.filters-hint {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.catalog-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.catalog-filter-chip select,
.catalog-filter-chip input {
  width: 118px;
  min-height: 26px;
  height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.card-media,
.product-image-container,
.product-image,
.product-media {
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-secondary));
}

.card-media-inner img,
.card-media img,
.product-image-container img,
.product-image img,
.product-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.card {
  min-width: 0;
}

.content-fullscreen {
  width: min(var(--ds-container), calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0 24px;
}

.grid,
.grid-fullscreen {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

.theme-toggle {
  position: static;
  z-index: 1600;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
}

.theme-toggle-floating {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}

.theme-toggle:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  background: var(--color-bg-elevated);
}

.theme-toggle-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.user-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-secondary);
}

.user-role {
  color: var(--color-accent-primary);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-name:empty {
  display: none;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px;
  font-size: 0.84rem;
}

.admin-header {
  min-height: 52px;
  padding: 10px 18px;
}

.admin-content {
  padding: 16px;
}

.section-toolbar {
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 980px) {
  .topbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .game-filter,
  .search-bar,
  .header-actions {
    max-width: 100%;
  }

  .search-bar {
    order: 4;
    flex: 1 1 100%;
    margin-left: 0;
  }

  .header-actions {
    margin-left: auto;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nav-btn,
  .search-btn,
  .cart-icon,
  .theme-toggle {
    min-height: 36px;
  }
}

@media (max-width: 640px) {
  .topbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar-title {
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    width: auto;
    max-width: 100%;
  }

  .nav-btn {
    padding: 7px 9px;
    font-size: 0.78rem;
  }

  .cart-modal {
    width: min(100% - 18px, 520px);
    max-height: calc(100vh - 24px);
  }

  .admin-main,
  .admin-content {
    min-width: 0;
  }

  .admin-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .table-container {
    overflow-x: auto;
  }

  body {
    min-width: 0;
  }

  .content-fullscreen {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .content-fullscreen .grid,
  #products.grid {
    grid-template-columns: 1fr !important;
  }

  .search-bar {
    min-width: 0;
  }

  .search-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Product detail compact media override */
.product-detail-card {
  grid-template-columns: minmax(320px, 42%) minmax(0, 1fr) !important;
  gap: 0 !important;
  border-radius: 16px !important;
}

.product-media {
  min-height: 0 !important;
}

.product-image,
.product-video,
.media-placeholder,
.product-loading-media {
  height: 360px !important;
  min-height: 360px !important;
  object-fit: cover !important;
}

.product-info {
  padding: 22px !important;
}

@media (max-width: 768px) {
  .product-image,
  .product-video,
  .media-placeholder,
  .product-loading-media {
    height: 280px !important;
    min-height: 280px !important;
  }
}

/* Restore wide catalog canvas */
.content-fullscreen {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 22px 28px !important;
}

.content-fullscreen > h2,
.content-fullscreen .filters-bar,
.content-fullscreen #products,
.content-fullscreen #pagination-container {
  width: 100% !important;
  max-width: none !important;
}

.content-fullscreen .grid,
#products.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 18px !important;
}

.content-fullscreen .filters-bar {
  margin-bottom: 18px !important;
}

/* Keep the catalog/header working area wide on desktop, not boxed to 1180px. */
@media (min-width: 981px) {
  .topbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Catalog filter bar: category only, no unsupported attribute filters */
.catalog-attribute-filters,
#filters {
  display: none !important;
}

.content-fullscreen .filters-bar {
  min-height: 0;
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 14px !important;
  padding: 8px 10px !important;
  border-radius: 10px;
  align-items: center;
}

.content-fullscreen .filters-bar .filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.content-fullscreen .filters-bar label {
  margin: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.content-fullscreen .filters-bar select {
  min-height: 32px;
  height: 32px;
  padding: 5px 30px 5px 10px !important;
  border-radius: 8px !important;
  font-size: 0.82rem;
}

.card:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
}

/* Orders/cabinet information architecture cleanup */
.orders-refresh-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.my-orders-page .page-header {
  align-items: center;
}

.cabinet-orders-shortcut {
  display: none !important;
}

/* Quiet premium background. Inserted by utils.js as isolated layers. */
:root,
[data-theme='light'] {
  --app-bg-base: #f8f4ed;
  --app-bg-surface-shadow: rgba(118, 90, 54, 0.055);
  --app-bg-center-glow: rgba(198, 158, 102, 0.09);
  --app-bg-depth-glow: rgba(220, 195, 155, 0.045);
  --app-bg-gradient-wash: color-mix(in srgb, var(--color-bg-secondary) 72%, transparent);
  --app-bg-vignette: rgba(126, 95, 58, 0.12);
  --app-bg-gradient-opacity: 0.82;
  --app-bg-grain-opacity: 0.026;
  --app-bg-grain-blend: multiply;
  --app-bg-particle: rgba(150, 114, 70, 0.34);
  --app-bg-particle-bright: rgba(174, 130, 78, 0.42);
  --app-bg-particle-opacity: 0.7;
  --app-grid-underlay: rgba(102, 76, 44, 0.05);
}

[data-theme='dark'] {
  --app-bg-base: #161412;
  --app-bg-surface-shadow: rgba(0, 0, 0, 0.18);
  --app-bg-center-glow: rgba(206, 156, 92, 0.16);
  --app-bg-depth-glow: rgba(132, 82, 42, 0.055);
  --app-bg-gradient-wash: color-mix(in srgb, var(--color-bg-secondary) 42%, transparent);
  --app-bg-vignette: rgba(0, 0, 0, 0.34);
  --app-bg-gradient-opacity: 0.86;
  --app-bg-grain-opacity: 0.034;
  --app-bg-grain-blend: soft-light;
  --app-bg-particle: rgba(218, 168, 104, 0.48);
  --app-bg-particle-bright: rgba(238, 197, 132, 0.58);
  --app-bg-particle-opacity: 0.76;
  --app-grid-underlay: rgba(0, 0, 0, 0.18);
}

body.has-app-background {
  background: transparent !important;
  isolation: isolate;
}

body.has-app-background > header,
body.has-app-background > footer,
body.has-app-background > .topbar,
body.has-app-background > .header,
body.has-app-background > main,
body.has-app-background > .page-wrapper,
body.has-app-background > .content-fullscreen,
body.has-app-background > .login-page,
body.has-app-background > .not-found-page,
body.has-app-background > .cabinet-page-main,
body.has-app-background > .product-page-main,
body.has-app-background > .my-orders-page,
body.has-app-background > .order-page,
body.has-app-background > .catalog-page,
body.has-app-background > .support-chat-page,
body.has-app-background > .main-container,
body.has-app-background > .catalog-container,
body.has-app-background > #main-content {
  position: relative;
  z-index: 1;
}

body.has-app-background > header,
body.has-app-background > .topbar,
body.has-app-background > .header {
  z-index: 1200;
}

html.auth-checking #authBtn,
html.auth-checking #cabinetBtn,
html.auth-checking #ordersLink,
html.auth-checking #adminLink {
  display: none !important;
}

body.auth-protected {
  visibility: hidden;
}

body.auth-protected.auth-unlocked {
  visibility: visible;
}

html.auth-checking .header-actions:has(#authBtn)::before,
html.auth-checking .header-nav:has(#authBtn)::before {
  content: "";
  width: 88px;
  height: 34px;
  flex: 0 0 88px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--color-bg-secondary), var(--color-bg-tertiary), var(--color-bg-secondary));
  background-size: 220% 100%;
  animation: uiSkeletonShimmer 1.2s ease-in-out infinite;
}

html.theme-boot *,
html.theme-boot *::before,
html.theme-boot *::after,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
  transition-duration: 0.01ms !important;
}

body.has-app-background > main,
body.has-app-background > .content-fullscreen,
body.has-app-background > .catalog-page,
body.has-app-background > .product-page-main,
body.has-app-background > .cabinet-page-main,
body.has-app-background > .my-orders-page,
body.has-app-background > .order-page,
body.has-app-background > .login-page,
body.has-app-background > .not-found-page,
body.has-app-background > .support-chat-page {
  z-index: 1;
}

.app-background,
.app-background__base,
.app-background__gradient,
.app-background__vignette,
.app-background__particles,
.app-background__grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.app-background {
  z-index: 0;
  overflow: hidden;
  contain: paint;
}

.app-background__base {
  background:
    linear-gradient(180deg, var(--app-bg-base), color-mix(in srgb, var(--app-bg-base) 86%, var(--app-bg-surface-shadow)));
}

.app-background__gradient {
  inset: -8vmax;
  background:
    radial-gradient(circle at 50% 28%, var(--app-bg-center-glow), transparent 31%),
    radial-gradient(circle at 72% 70%, var(--app-bg-depth-glow), transparent 34%),
    linear-gradient(145deg, transparent 0%, var(--app-bg-gradient-wash) 48%, transparent 100%);
  opacity: var(--app-bg-gradient-opacity);
  transform: translate3d(0, 0, 0) scale(1.02);
}

.app-background__vignette {
  background:
    radial-gradient(circle at 50% 34%, transparent 0%, transparent 46%, var(--app-bg-vignette) 100%);
}

.app-background__particles {
  opacity: var(--app-bg-particle-opacity);
  overflow: hidden;
}

.app-background__particle {
  position: absolute;
  display: block;
  width: var(--particle-size, 2px);
  height: var(--particle-size, 2px);
  border-radius: 999px;
  background: var(--particle-color, var(--app-bg-particle));
  opacity: var(--particle-opacity, 0.045);
  transform: translate3d(0, 0, 0);
  animation: appParticleDrift var(--particle-duration, 18s) linear infinite;
  animation-delay: var(--particle-delay, 0s);
  will-change: transform;
}

.app-background__particle:nth-child(1) { left: 7%; top: 18%; --particle-size: 1px; --particle-duration: 24s; --particle-delay: -2s; }
.app-background__particle:nth-child(2) { left: 14%; top: 64%; --particle-size: 1.5px; --particle-duration: 27s; --particle-delay: -7s; }
.app-background__particle:nth-child(3) { left: 21%; top: 38%; --particle-size: 1px; --particle-duration: 25s; --particle-delay: -4s; }
.app-background__particle:nth-child(4) { left: 29%; top: 78%; --particle-size: 1.5px; --particle-duration: 29s; --particle-delay: -11s; }
.app-background__particle:nth-child(5) { left: 36%; top: 22%; --particle-size: 2px; --particle-duration: 26s; --particle-delay: -8s; }
.app-background__particle:nth-child(6) { left: 43%; top: 56%; --particle-size: 1px; --particle-duration: 28s; --particle-delay: -3s; }
.app-background__particle:nth-child(7) { left: 51%; top: 31%; --particle-size: 1.5px; --particle-duration: 24s; --particle-delay: -12s; }
.app-background__particle:nth-child(8) { left: 58%; top: 72%; --particle-size: 1px; --particle-duration: 27s; --particle-delay: -6s; }
.app-background__particle:nth-child(9) { left: 65%; top: 15%; --particle-size: 2px; --particle-duration: 30s; --particle-delay: -13s; }
.app-background__particle:nth-child(10) { left: 72%; top: 49%; --particle-size: 1.5px; --particle-duration: 25s; --particle-delay: -9s; }
.app-background__particle:nth-child(11) { left: 81%; top: 28%; --particle-size: 1px; --particle-duration: 26s; --particle-delay: -5s; }
.app-background__particle:nth-child(12) { left: 89%; top: 69%; --particle-size: 1.5px; --particle-duration: 28s; --particle-delay: -15s; }
.app-background__particle:nth-child(13) { left: 11%; top: 86%; --particle-size: 2px; --particle-duration: 31s; --particle-delay: -10s; }

.app-background__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: var(--app-bg-grain-opacity);
  mix-blend-mode: var(--app-bg-grain-blend);
}

@keyframes appParticleDrift {
  0% {
    transform: translate3d(-14px, 16px, 0);
  }

  100% {
    transform: translate3d(24px, -26px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .app-background__gradient,
  .app-background__particles,
  .app-background__grain {
    display: none;
  }
}

@media (max-width: 768px) {
  .app-background__particles,
  .app-background__grain {
    display: none;
  }
}

body.has-app-background .landing-page .games-grid {
  position: relative;
  isolation: isolate;
}

body.has-app-background .landing-page .games-grid::before {
  content: '';
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 24px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, transparent 0%, var(--app-grid-underlay) 76%),
    linear-gradient(180deg, transparent, var(--app-grid-underlay));
}