/* 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);
}

.chip-btn:hover,
.nav a:hover,
.hdr-nav-link:hover {
  background: var(--hover-bg) !important;
  color: var(--ink) !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;
}

.card-media,
.ph-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,
.form-link {
  color: var(--ink-3) !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);
}

.card[data-rarity="super"] .card-rarity {
  background-image: var(--super-rainbow-gradient);
  background-size: var(--super-rainbow-size);
  animation: super-rainbow-shift var(--super-rainbow-duration) linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.card[data-rarity="legendary"] .card-rarity {
  background-image: var(--legendary-gradient);
  background-size: var(--super-rainbow-size);
  animation: super-rainbow-shift var(--super-rainbow-duration) linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.card[data-rarity="mythic"] .card-rarity {
  background-image: var(--mythic-gradient);
  background-size: var(--super-rainbow-size);
  animation: super-rainbow-shift var(--super-rainbow-duration) linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.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; }
}