/* Light theme — clean white UI for readability */
html {
  color-scheme: light;
}

body {
  background-color: var(--page-bg) !important;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(37, 99, 235, 0.05), transparent 55%) !important;
  color: var(--ink);
}

::selection {
  background: var(--accent-100);
  color: var(--ink);
}

.hdr {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.announce {
  background: var(--accent-050) !important;
  color: var(--ink-2) !important;
  border-bottom-color: var(--line) !important;
}

.announce b { color: var(--ink) !important; }

.chip-btn,
.acct,
.mkt-search,
.filters,
.card,
.cat-tab,
.mkt-filter-btn,
.sortsel,
.admin-panel,
.kpi-card,
.form-card,
.cart-panel,
.cart-summary,
.modal,
.payment-option,
.page-btn,
.qty-control button,
.hdr-nav-drawer,
.hdr-menu-btn,
.modal-close,
.btn-secondary {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-2);
}

.acct {
  border: none !important;
}

.chip-btn:hover,
.nav a:hover,
.hdr-nav-link:hover {
  background: var(--hover-bg) !important;
  color: var(--ink) !important;
}

.chip-btn--logout {
  background: #fff5f5 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

.chip-btn--logout:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

.nav a.active,
.hdr-nav-link.active {
  color: var(--accent) !important;
  background: var(--accent-050) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.search:focus-within,
.mkt-search:focus-within {
  background: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-050) !important;
}

.acct-meta .n,
.filters-head .ttl,
.card-name,
.rrow.on .rname,
.rrow.active .rname {
  color: var(--ink) !important;
}

.cart-count {
  background: #fff !important;
  color: var(--accent) !important;
}

.card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-cat {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink-2) !important;
}

/* Rarity-tinted product image areas (preserve shop.css gradients on main grid) */
.card.card-hasbg .card-media .ph-img,
.grid-gamebg .card-media .ph-img {
  background: none !important;
  border: none !important;
}

.card[data-rarity="common"]:not(.card-pack) .card-media {
  background: linear-gradient(165deg, #f8fafc 0%, var(--r-bg-common) 100%) !important;
}
.card[data-rarity="uncommon"]:not(.card-pack) .card-media {
  background: linear-gradient(165deg, #f0fdf4 0%, var(--r-bg-uncommon) 100%) !important;
}
.card[data-rarity="rare"]:not(.card-pack) .card-media {
  background: linear-gradient(165deg, #f0f9ff 0%, var(--r-bg-rare) 100%) !important;
}
.card[data-rarity="epic"]:not(.card-pack) .card-media {
  background: linear-gradient(165deg, #faf5ff 0%, var(--r-bg-epic) 100%) !important;
}
.card[data-rarity="legendary"]:not(.card-pack) .card-media {
  background: linear-gradient(165deg, #fffbeb 0%, var(--r-bg-legendary) 100%) !important;
}
.card[data-rarity="mythic"]:not(.card-pack) .card-media {
  background: linear-gradient(165deg, #fff1f2 0%, var(--r-bg-mythic) 100%) !important;
}
.card[data-rarity="super"]:not(.card-pack) .card-media {
  background: linear-gradient(135deg, #fdf2f8 0%, #faf5ff 28%, #eff6ff 56%, #f0fdf4 84%, #fffbeb 100%) !important;
}

.card-pack .card-media {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

/* Empty placeholder slots only */
.card-media > .ph-img:not(:has(img)) {
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #eef1f6 62%, #e3e7ee 100%) !important;
}

.filters {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.fgroup-h,
.rname,
.price-inputs .pin span,
.count-tag {
  color: var(--ink-2) !important;
}

.rrow:hover {
  background: var(--hover-bg) !important;
}

.price-inputs .pin {
  background: var(--input-bg) !important;
  border-color: var(--line-2) !important;
}

.price-inputs .pin input {
  color: var(--ink) !important;
}

.price-inputs .pin input::placeholder {
  color: var(--ink-4) !important;
}

.cat-tab:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.cat-tab.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}

.sort-drop:not([hidden]) {
  display: block !important;
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-lg);
}

.sortsel.open {
  background: var(--accent-050) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.sort-opt:hover,
.sort-opt.active {
  background: var(--accent-050) !important;
  color: var(--accent) !important;
}

.page-btn.active,
.page-btn:hover {
  background: var(--accent-050) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.foot {
  background: linear-gradient(180deg, rgba(10, 15, 31, 0.92), rgba(10, 15, 31, 0.98)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.foot-brandcol p {
  color: rgba(226, 232, 240, 0.46) !important;
}

.foot-legal,
.foot-meta {
  color: rgba(255, 255, 255, 0.3) !important;
}

.foot .brand {
  color: #fff !important;
}

.foot-bar {
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

.foot-status {
  color: rgba(226, 232, 240, 0.55) !important;
}

.foot-promo {
  background: linear-gradient(150deg, #eff6ff, #f8fafc) !important;
  border-color: var(--line) !important;
}

.empty .e2 {
  color: var(--ink) !important;
}

.empty .e3 {
  color: var(--ink-3) !important;
}

.skeleton,
.skeleton-card {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
  background-size: 200% 100% !important;
}

.form-input,
.form-input:focus {
  background: var(--input-bg) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

.form-input:focus {
  box-shadow: 0 0 0 4px var(--accent-050) !important;
  border-color: var(--accent) !important;
}

.form-group label,
.form-card p.lead:not(.register-lead),
.form-link {
  color: var(--ink-3) !important;
}

.form-card p.register-benefits {
  color: color-mix(in srgb, var(--accent-600) 38%, var(--ink-2)) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface)),
    color-mix(in srgb, #6366f1 5%, var(--surface))
  ) !important;
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line)) !important;
  border-left-color: var(--accent) !important;
}

.toast {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

.toast.success {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: rgba(22, 163, 74, 0.25) !important;
}

.toast.error {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}

.toast.warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

.toast.info {
  background: var(--accent-050) !important;
  color: var(--accent-600) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

.payment-option.active {
  background: var(--accent-050) !important;
  border-color: var(--accent) !important;
}

.admin-nav a,
.admin-table th,
.admin-table td,
.kpi-card .label {
  color: var(--ink-3) !important;
}

.admin-nav a.active,
.admin-nav a:hover,
.kpi-card .value,
.admin-head h1,
.detail-info h1,
.cart-page h1,
.checkout-page h1,
.order-page h1,
.form-card h1 {
  color: var(--ink) !important;
}

.order-page-head {
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
}

.order-card,
.order-empty,
.order-loading {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.order-meta-item {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

.order-card-id strong,
.order-nick-value,
.order-empty-title {
  color: var(--ink) !important;
}

.order-total-value {
  color: var(--accent-600) !important;
}

.admin-table th,
.admin-table td {
  border-bottom-color: var(--line) !important;
}

.rbox-check {
  stroke: #fff;
}

.rdot {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06);
}

.price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.price-old {
  color: var(--price-old) !important;
}

.price-now {
  color: var(--price-now) !important;
}

.price-disc {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.18) !important;
}

.price-pack-hint {
  color: var(--ink-4) !important;
  font-size: 11px;
}

.pack-badge {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-sm);
}

.sale-chip {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.add-btn {
  min-width: 64px;
}

.cart-min-order,
.checkout-min-order {
  color: #b45309 !important;
  background: #fffbeb !important;
  border-color: rgba(217, 119, 6, 0.22) !important;
}

@media (max-width: 900px) {
  .filters-scrim.show {
    background: rgba(15, 23, 42, 0.35) !important;
  }

  .filters.open {
    background: var(--surface) !important;
  }
}

@media (max-width: 640px) {
  .mkt-bn-slide {
    min-height: 168px;
    padding: 28px 52px 28px 24px;
  }

  .mkt-banner h1 {
    font-size: 24px;
  }

  .mkt-banner .sub {
    font-size: 13px;
  }

  .mkt-bn-arrow {
    width: 32px;
    height: 32px;
  }

  .mkt-bn-arrow.left { left: 8px; }
  .mkt-bn-arrow.right { right: 8px; }
}