/* =====================================================================
   Liquid Glass 2.0 — material layer, loaded last.
   Three material tiers:
     shell   — fixed/floating chrome (sidebar, header, tab bar, modals,
               FABs): true translucency, backdrop blur + saturation.
     surface — in-flow content (cards, tables, panels): layered gradients,
               specular rim, inner highlight. No backdrop-filter — Chrome
               drops paint for blurred layers inside clipped, transformed
               cards (see ui-polish.css), so glass here is simulated.
     control — capsules (buttons, inputs, chips, nav pills).
   Every tier shares one rim: bright top-left edge, fading to a faint
   bottom edge, drawn with a border-box gradient behind a padding-box fill.
   ===================================================================== */

html[data-theme="dark"] {
  --lg-tint: 124, 176, 255; /* azure — every rim/sheen/highlight is drawn in this, never white */
  --lg-blur: 28px;
  --lg-sat: 170%;
  --lg-fill: rgba(20, 28, 58, .46);
  --lg-fill-strong: rgba(14, 20, 44, .68);
  --lg-fill-solid: rgba(13, 19, 42, .92);
  --lg-fill-surface:
    linear-gradient(180deg, rgba(var(--lg-tint), .03), rgba(var(--lg-tint), 0) 30%),
    linear-gradient(165deg, rgba(26, 35, 68, .72), rgba(12, 17, 38, .84));
  --lg-fill-well: rgba(5, 9, 24, .58);
  --lg-rim: linear-gradient(150deg, rgba(var(--lg-tint), .20), rgba(var(--lg-tint), .08) 35%, rgba(var(--lg-tint), .06) 100%);
  --lg-rim-soft: linear-gradient(150deg, rgba(var(--lg-tint), .13), rgba(var(--lg-tint), .06) 45%, rgba(var(--lg-tint), .05) 100%);
  --lg-rim-accent: linear-gradient(150deg, rgba(var(--lg-tint), .30), rgba(24, 231, 255, .22) 45%, rgba(124, 92, 255, .18) 100%);
  --lg-highlight: inset 0 1px 0 rgba(var(--lg-tint), .09);
  --lg-highlight-soft: inset 0 1px 0 rgba(var(--lg-tint), .07);
  --lg-shadow: 0 14px 34px -20px rgba(3, 6, 17, .55);
  --lg-shadow-float: 0 22px 54px -22px rgba(3, 6, 17, .70), 0 4px 14px -8px rgba(3, 6, 17, .40);
  --lg-ring: 0 0 0 3px rgba(24, 231, 255, .18), 0 0 0 1px rgba(24, 231, 255, .50);
  --lg-radius-shell: 22px;
  --lg-radius-card: 20px;
  --lg-radius-inner: 14px;
  --lg-radius-control: 999px;
  --lg-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- Ambient: soft colour fields the glass can refract ---------- */
html[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 22% 18%, rgba(24, 231, 255, .08), transparent 70%),
    radial-gradient(42vmax 34vmax at 80% 12%, rgba(124, 92, 255, .12), transparent 70%),
    radial-gradient(36vmax 30vmax at 70% 88%, rgba(255, 95, 215, .05), transparent 70%),
    radial-gradient(30vmax 26vmax at 12% 82%, rgba(49, 246, 160, .05), transparent 70%);
  filter: blur(18px);
  animation: lgDrift 46s var(--lg-ease) infinite alternate;
}
@media (max-width: 768px) {
  html[data-theme="dark"] body::after { filter: none; animation: none; transform: none; }
}
@keyframes lgDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
html[data-theme="dark"] body::before { opacity: .55; }

/* ---------- Tier 1: shell (real glass) ---------- */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .content-header,
html[data-theme="dark"] .mobile-bottom-nav,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .jetstream-modal-panel,
html[data-theme="dark"] .search-modal .modal-content,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .back-to-top,
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] body.page-detail-buybar .product-detail-stickybar {
  border: 1px solid transparent;
  background:
    var(--lg-fill) padding-box,
    var(--lg-rim) border-box;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
}
html[data-theme="dark"] .sidebar {
  border-radius: var(--lg-radius-shell);
  background:
    linear-gradient(180deg, rgba(24, 33, 66, .58), rgba(12, 18, 40, .50)) padding-box,
    var(--lg-rim) border-box;
}
html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .sidebar-footer {
  border-color: rgba(var(--lg-tint), .07);
}
html[data-theme="dark"] .content-header {
  border-radius: var(--lg-radius-shell);
  box-shadow: var(--lg-shadow), var(--lg-highlight);
}
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .jetstream-modal-panel,
html[data-theme="dark"] .search-modal .modal-content {
  border-radius: var(--lg-radius-shell);
  background:
    linear-gradient(180deg, rgba(24, 33, 66, .72), rgba(12, 18, 40, .78)) padding-box,
    var(--lg-rim) border-box;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: rgba(var(--lg-tint), .08); }
html[data-theme="dark"] .modal-backdrop {
  background: rgba(3, 6, 17, .42);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
html[data-theme="dark"] .modal-backdrop.show { opacity: 1; }
html[data-theme="dark"] .sidebar-overlay {
  background: rgba(3, 6, 17, .38);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
html[data-theme="dark"] .toast { border-radius: 20px; }
html[data-theme="dark"] .dropdown-menu {
  border-radius: 20px;
  padding: 8px;
}
html[data-theme="dark"] .dropdown-item { border-radius: 12px; color: var(--cyber-text); }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(var(--lg-tint), .08); color: #fff; }

/* Floating tab bar — thicker glass, capsule, active pill lit from inside */
html[data-theme="dark"] .mobile-bottom-nav {
  border-radius: var(--lg-radius-control);
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(26, 36, 70, .74), rgba(12, 18, 40, .76)) padding-box,
    var(--lg-rim) border-box;
}
html[data-theme="dark"] .mobile-bottom-nav a {
  border-radius: var(--lg-radius-control);
  transition: background .28s var(--lg-ease), color .2s, box-shadow .28s var(--lg-ease), transform .16s var(--lg-ease);
}
html[data-theme="dark"] .mobile-bottom-nav a.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(var(--lg-tint), .20), rgba(var(--lg-tint), .08));
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .34), inset 0 -1px 0 rgba(var(--lg-tint), .05), 0 6px 16px -6px rgba(24, 231, 255, .35);
}
html[data-theme="dark"] .mobile-bottom-nav a:active { transform: scale(.94); }

html[data-theme="dark"] .sidebar-footer .btn-ghost {
  color: #dbe3f5 !important;
  border-radius: var(--lg-radius-control);
}
/* FABs */
html[data-theme="dark"] .back-to-top {
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(30, 40, 78, .62), rgba(12, 18, 40, .58)) padding-box,
    var(--lg-rim) border-box;
}
html[data-theme="dark"] .whatsapp-fab {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(49, 246, 160, .92), rgba(10, 200, 125, .92)) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .70), rgba(var(--lg-tint), .12) 50%, rgba(var(--lg-tint), .25)) border-box;
  box-shadow: 0 18px 40px -12px rgba(49, 246, 160, .55), inset 0 1px 0 rgba(var(--lg-tint), .45), inset 0 -8px 16px -10px rgba(0, 0, 0, .25);
}

/* Sticky buy bar (product detail, mobile) */
html[data-theme="dark"] body.page-detail-buybar .product-detail-stickybar {
  border-radius: 24px;
}

/* Sticky search header on mobile (mobile-ux.css) */
@media (max-width: 768px) {
  html[data-theme="dark"] .products-header {
    background: rgba(9, 13, 28, .55);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    border-bottom: 1px solid rgba(var(--lg-tint), .07);
  }
}

/* Sidebar nav pills */
html[data-theme="dark"] .sidebar-link {
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background .26s var(--lg-ease), color .2s, box-shadow .26s var(--lg-ease), transform .16s var(--lg-ease);
}
html[data-theme="dark"] .sidebar-link:hover {
  background: rgba(var(--lg-tint), .06);
  color: #fff;
}
html[data-theme="dark"] .sidebar-link.active {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .16), rgba(var(--lg-tint), .06)) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .28), 0 8px 20px -10px rgba(24, 231, 255, .40);
}
html[data-theme="dark"] .sidebar-link.active .nav-icon { color: var(--cyber-cyan); }
html[data-theme="dark"] .sidebar-user {
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    rgba(var(--lg-tint), .05) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: var(--lg-highlight-soft);
}
html[data-theme="dark"] .sidebar-toggle { border-radius: 14px; }

/* ---------- Tier 2: surfaces (simulated glass) ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .dashboard-welcome,
html[data-theme="dark"] .trust-bar,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .payment-method,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .help-step,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .ticket-list-item,
html[data-theme="dark"] .related-product-card,
html[data-theme="dark"] .related-guide-card,
html[data-theme="dark"] .product-detail-image-card,
html[data-theme="dark"] .jetstream-section,
html[data-theme="dark"] .jetstream-action-panel,
html[data-theme="dark"] .analytics-empty,
html[data-theme="dark"] .restock-empty,
html[data-theme="dark"] .purchase-modal-product,
html[data-theme="dark"] .product-plan-option,
html[data-theme="dark"] .delivered-item-row,
html[data-theme="dark"] .auth-utility-card {
  border: 1px solid transparent;
  background:
    var(--lg-fill-surface) padding-box,
    var(--lg-rim) border-box;
  box-shadow: var(--lg-shadow), var(--lg-highlight);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .dashboard-welcome,
html[data-theme="dark"] .trust-bar,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .jetstream-section,
html[data-theme="dark"] .jetstream-action-panel,
html[data-theme="dark"] .auth-utility-card { border-radius: var(--lg-radius-card); }
html[data-theme="dark"] .payment-method,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .help-step,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .ticket-list-item,
html[data-theme="dark"] .related-product-card,
html[data-theme="dark"] .related-guide-card,
html[data-theme="dark"] .purchase-modal-product,
html[data-theme="dark"] .product-plan-option,
html[data-theme="dark"] .delivered-item-row { border-radius: var(--lg-radius-inner); }

/* Hover: rim brightens, no movement (see app.css flicker note); product
   cards keep their gentle lift. */
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .stat-card:hover,
html[data-theme="dark"] .dashboard-welcome:hover {
  border-color: transparent;
  background:
    var(--lg-fill-surface) padding-box,
    var(--lg-rim) border-box;
  box-shadow: var(--lg-shadow), var(--lg-highlight);
}
html[data-theme="dark"] .product-card:hover {
  border-color: transparent;
  background:
    var(--lg-fill-surface) padding-box,
    var(--lg-rim-accent) border-box;
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
}
html[data-theme="dark"] .stat-card .stat-label { padding-right: 28px; }
html[data-theme="dark"] .trust-bar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}
/* One material per box: panels nested inside a card sit flat on it */
html[data-theme="dark"] .card .jetstream-section,
html[data-theme="dark"] .card .card,
html[data-theme="dark"] .card .table-wrapper,
html[data-theme="dark"] .card .empty-state,
html[data-theme="dark"] .jetstream-section .jetstream-action-panel {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .payment-method:hover,
html[data-theme="dark"] .related-product-card:hover,
html[data-theme="dark"] .product-plan-option:hover,
html[data-theme="dark"] .ticket-list-item:hover {
  background:
    var(--lg-fill-surface) padding-box,
    var(--lg-rim-accent) border-box;
}
html[data-theme="dark"] .payment-method.selected,
html[data-theme="dark"] .payment-method.active,
html[data-theme="dark"] .product-plan-option.is-selected,
html[data-theme="dark"] .product-plan-option.active {
  background:
    linear-gradient(160deg, rgba(24, 231, 255, .16), rgba(124, 92, 255, .14)) padding-box,
    var(--lg-rim-accent) border-box;
  box-shadow: var(--lg-highlight), 0 0 0 1px rgba(24, 231, 255, .10), 0 12px 30px -14px rgba(24, 231, 255, .45);
}

/* Inner wells: image plate, trust items, table body, code */
html[data-theme="dark"] .product-card-image-wrapper,
html[data-theme="dark"] .trust-item,
html[data-theme="dark"] .purchase-trust-item,
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .product-detail-image-fallback {
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 18% 18%, rgba(24, 231, 255, .14), transparent 44%),
    radial-gradient(circle at 84% 86%, rgba(124, 92, 255, .16), transparent 48%),
    linear-gradient(180deg, rgba(10, 15, 34, .72), rgba(6, 10, 26, .84)) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .07);
}
html[data-theme="dark"] .product-card-image-wrapper { border-radius: var(--lg-radius-inner); }
html[data-theme="dark"] .product-card:hover .product-card-image-wrapper {
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .10);
}
html[data-theme="dark"] .trust-item,
html[data-theme="dark"] .purchase-trust-item { border-radius: 16px; }
html[data-theme="dark"] .stat-icon { border-radius: 14px; }

html[data-theme="dark"] .table-wrapper .table thead th,
html[data-theme="dark"] .table-responsive .table thead th {
  background: rgba(var(--lg-tint), .04);
  border-bottom: 1px solid rgba(var(--lg-tint), .08);
  color: var(--cyber-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11.5px;
}
html[data-theme="dark"] .table-wrapper .table tbody tr,
html[data-theme="dark"] .table-responsive .table tbody tr { border-color: rgba(var(--lg-tint), .06); }
html[data-theme="dark"] .table-wrapper .table tbody tr:hover,
html[data-theme="dark"] .table-responsive .table tbody tr:hover { background: rgba(var(--lg-tint), .035); }

/* ---------- Tier 3: controls ---------- */
html[data-theme="dark"] .btn {
  border-radius: var(--lg-radius-control);
  border: 1px solid transparent;
  transition: background .26s var(--lg-ease), color .2s, box-shadow .26s var(--lg-ease), transform .14s var(--lg-ease), filter .2s;
}
html[data-theme="dark"] .btn:active { transform: scale(.965); filter: brightness(1.08); }

/* clear glass */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-linkish,
html[data-theme="dark"] .product-card-actions-inline .product-card-details-link,
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .range-btn,
html[data-theme="dark"] .date-toggle,
html[data-theme="dark"] .table-sort-link,
html[data-theme="dark"] .product-card-favorite button,
html[data-theme="dark"] .header-wallet-chip,
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .auth-back,
html[data-theme="dark"] .password-toggle-btn {
  color: #e2e8f0;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .10), rgba(var(--lg-tint), .04)) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .22), 0 6px 16px -10px rgba(3, 6, 17, .60);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-linkish:hover,
html[data-theme="dark"] .product-card-actions-inline .product-card-details-link:hover,
html[data-theme="dark"] .pagination .page-link:hover,
html[data-theme="dark"] .range-btn:hover,
html[data-theme="dark"] .date-toggle:hover,
html[data-theme="dark"] .product-card-favorite button:hover,
html[data-theme="dark"] .header-wallet-chip:hover,
html[data-theme="dark"] .password-toggle-btn:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .18), rgba(var(--lg-tint), .08)) padding-box,
    var(--lg-rim) border-box;
}
html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .range-btn.active,
html[data-theme="dark"] .range-btn.is-active,
html[data-theme="dark"] .date-toggle.active,
html[data-theme="dark"] .range-btn[aria-pressed="true"],
html[data-theme="dark"] .date-toggle[aria-pressed="true"] {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(24, 231, 255, .30), rgba(124, 92, 255, .24)) padding-box,
    var(--lg-rim-accent) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .36), 0 8px 20px -10px rgba(24, 231, 255, .45);
}
html[data-theme="dark"] .product-card-actions-inline .product-card-details-link {
  border-radius: var(--lg-radius-control);
  padding: 7px 14px;
  line-height: 1.2;
  text-decoration: none;
}

/* tinted glass — primary */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-buy,
html[data-theme="dark"] .btn-purchase-confirm,
html[data-theme="dark"] .submit-btn,
html[data-theme="dark"] .btn-primary-auth {
  color: #fff;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .22), rgba(var(--lg-tint), 0) 55%),
    linear-gradient(135deg, rgba(124, 92, 255, .92), rgba(155, 108, 255, .92)) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .75), rgba(var(--lg-tint), .18) 50%, rgba(var(--lg-tint), .30)) border-box;
  box-shadow: 0 10px 24px -14px rgba(124, 92, 255, .55), inset 0 1px 0 rgba(var(--lg-tint), .30);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-buy:hover,
html[data-theme="dark"] .btn-purchase-confirm:hover,
html[data-theme="dark"] .submit-btn:hover,
html[data-theme="dark"] .btn-primary-auth:hover {
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .30), rgba(var(--lg-tint), 0) 55%),
    linear-gradient(135deg, rgba(141, 114, 255, .96), rgba(178, 120, 255, .96)) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .90), rgba(var(--lg-tint), .25) 50%, rgba(var(--lg-tint), .40)) border-box;
  box-shadow: 0 14px 30px -14px rgba(124, 92, 255, .65), inset 0 1px 0 rgba(var(--lg-tint), .36);
}
html[data-theme="dark"] .btn-primary-auth {
  color: #04111b;
  text-shadow: none;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .34), rgba(var(--lg-tint), 0) 55%),
    linear-gradient(135deg, rgba(24, 231, 255, .95), rgba(49, 246, 160, .95)) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .85), rgba(var(--lg-tint), .25) 50%, rgba(var(--lg-tint), .40)) border-box;
  box-shadow: 0 18px 40px -12px rgba(24, 231, 255, .60), inset 0 1px 0 rgba(var(--lg-tint), .60), inset 0 -10px 18px -12px rgba(0, 0, 0, .18);
}
html[data-theme="dark"] .btn-dark {
  color: #0b1224;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #9fdcff, #5fb2ff) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .95), rgba(var(--lg-tint), .55)) border-box;
  box-shadow: 0 14px 30px -14px rgba(var(--lg-tint), .40), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -8px 14px -10px rgba(3, 6, 17, .18);
}
html[data-theme="dark"] .btn-dark:hover {
  color: #0b1224;
  border-color: transparent;
  background:
    linear-gradient(180deg, #b4e4ff, #74bdff) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), 1), rgba(var(--lg-tint), .65)) border-box;
}
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-outline-danger {
  color: #ffb3c1;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 95, 135, .22), rgba(255, 95, 135, .10)) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .40), rgba(255, 95, 135, .35)) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .22);
}
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-outline-success {
  color: #04111b;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .30), rgba(var(--lg-tint), 0) 55%),
    linear-gradient(135deg, rgba(49, 246, 160, .95), rgba(10, 216, 127, .95)) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .80), rgba(var(--lg-tint), .25)) border-box;
  box-shadow: 0 14px 30px -12px rgba(49, 246, 160, .55), inset 0 1px 0 rgba(var(--lg-tint), .55);
}
html[data-theme="dark"] .btn-buy-insufficient,
html[data-theme="dark"] .btn-out-of-stock {
  color: var(--cyber-muted);
  border: 1px solid transparent;
  background:
    rgba(var(--lg-tint), .04) padding-box,
    linear-gradient(150deg, rgba(var(--lg-tint), .14), rgba(var(--lg-tint), .04)) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .08);
}

/* inputs — recessed wells */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .products-search-input,
html[data-theme="dark"] .auth-input,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .two-factor-input-wrap input {
  color: var(--cyber-text);
  background-color: var(--lg-fill-well);
  border: 1px solid rgba(var(--lg-tint), .10);
  border-radius: 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(var(--lg-tint), .06);
  transition: border-color .2s, box-shadow .26s var(--lg-ease), background-color .2s;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .search-input:focus,
html[data-theme="dark"] .products-search-input:focus,
html[data-theme="dark"] .auth-input:focus,
html[data-theme="dark"] .two-factor-input-wrap input:focus {
  background-color: rgba(5, 9, 24, .72);
  border-color: rgba(24, 231, 255, .55);
  box-shadow: var(--lg-ring), inset 0 2px 6px rgba(0, 0, 0, .30);
  outline: 0;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .products-search-input::placeholder,
html[data-theme="dark"] .auth-input::placeholder { color: rgba(152, 166, 199, .62); }
html[data-theme="dark"] .products-search-inline,
html[data-theme="dark"] .admin-search-form { border-radius: var(--lg-radius-control); }
html[data-theme="dark"] .products-search-inline .products-search-input,
html[data-theme="dark"] .admin-search-form .form-control { border-radius: var(--lg-radius-control); }

/* chips & badges — capsule glass */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .badge-pill,
html[data-theme="dark"] .badge-count,
html[data-theme="dark"] .product-stock,
html[data-theme="dark"] .stockout-chip,
html[data-theme="dark"] .product-instant-delivery,
html[data-theme="dark"] .product-card-stock-badge,
html[data-theme="dark"] .category-chip,
html[data-theme="dark"] .status-pill {
  border: 1px solid transparent;
  border-radius: var(--lg-radius-control);
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .10), rgba(var(--lg-tint), .03)) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .18);
}
html[data-theme="dark"] .category-chip.is-active {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(24, 231, 255, .30), rgba(124, 92, 255, .24)) padding-box,
    var(--lg-rim-accent) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--lg-tint), .36), 0 8px 20px -10px rgba(24, 231, 255, .45);
}
/* Inside product cards keep opaque fills (paint bug, ui-polish.css) */
html[data-theme="dark"] .product-card .product-instant-delivery,
html[data-theme="dark"] .product-card .product-card-stock-badge {
  background:
    linear-gradient(180deg, rgba(22, 30, 60, .98), rgba(9, 13, 31, .98)) padding-box,
    var(--lg-rim-soft) border-box;
}
html[data-theme="dark"] .product-card .product-card-favorite button {
  background:
    linear-gradient(180deg, rgba(22, 30, 60, .98), rgba(9, 13, 31, .98)) padding-box,
    var(--lg-rim-soft) border-box;
}

/* alerts */
html[data-theme="dark"] .alert {
  border: 1px solid transparent;
  border-radius: var(--lg-radius-inner);
  background:
    linear-gradient(180deg, rgba(var(--lg-tint), .08), rgba(var(--lg-tint), .03)) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: var(--lg-highlight-soft);
}
html[data-theme="dark"] .alert-success { background: linear-gradient(180deg, rgba(49, 246, 160, .16), rgba(49, 246, 160, .06)) padding-box, var(--lg-rim-soft) border-box; }
html[data-theme="dark"] .alert-danger { background: linear-gradient(180deg, rgba(255, 95, 135, .18), rgba(255, 95, 135, .07)) padding-box, var(--lg-rim-soft) border-box; }
html[data-theme="dark"] .alert-warning { background: linear-gradient(180deg, rgba(248, 213, 107, .16), rgba(248, 213, 107, .06)) padding-box, var(--lg-rim-soft) border-box; }
html[data-theme="dark"] .alert-info { background: linear-gradient(180deg, rgba(24, 231, 255, .14), rgba(24, 231, 255, .05)) padding-box, var(--lg-rim-soft) border-box; }

/* focus ring everywhere */
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .sidebar-link:focus-visible,
html[data-theme="dark"] .mobile-bottom-nav a:focus-visible,
html[data-theme="dark"] .product-card-details-link:focus-visible,
html[data-theme="dark"] .page-link:focus-visible {
  outline: 0;
  box-shadow: var(--lg-ring);
}

/* ---------- Auth (login / register inline styles) ---------- */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .signal-card {
  border: 1px solid transparent;
  border-radius: var(--lg-radius-shell);
  background:
    radial-gradient(480px 260px at 100% 0%, rgba(124, 92, 255, .16), transparent 60%),
    linear-gradient(180deg, rgba(24, 33, 66, .62), rgba(12, 18, 40, .70)) padding-box,
    var(--lg-rim) border-box;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
}
html[data-theme="dark"] .auth-utility-card {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 768px) {
  html[data-theme="dark"] {
    --lg-radius-shell: 26px;
    --lg-radius-card: 22px;
    --lg-radius-inner: 16px;
  }
  html[data-theme="dark"] .mobile-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 6px;
  }
  html[data-theme="dark"] .mobile-bottom-nav a { padding: 10px 6px; border-radius: 999px; }
  html[data-theme="dark"] .content-header { border-radius: 22px; }
}

/* ---------- Accessibility fallbacks ---------- */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] .sidebar,
  html[data-theme="dark"] .content-header,
  html[data-theme="dark"] .mobile-bottom-nav,
  html[data-theme="dark"] .modal-content,
  html[data-theme="dark"] .jetstream-modal-panel,
  html[data-theme="dark"] .toast,
  html[data-theme="dark"] .dropdown-menu,
  html[data-theme="dark"] .back-to-top,
  html[data-theme="dark"] .auth-card,
  html[data-theme="dark"] body.page-detail-buybar .product-detail-stickybar {
    background: var(--lg-fill-solid) padding-box, var(--lg-rim) border-box;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme="dark"] body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body::after { animation: none; }
}

/* ---------- Mobile: filter pills scroll instead of wrapping; stacked-table pills hug content ---------- */
@media (max-width: 640px) {
  .dash-filters .range-toggle {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dash-filters .range-toggle::-webkit-scrollbar { display: none; }
  .dash-filters .range-btn { white-space: nowrap; flex: 0 0 auto; }
  .table-wrapper .table td > .badge,
  .table-responsive .table td > .badge,
  .glass-table .table td > .badge,
  .card-body > .table td > .badge,
  .table-wrapper .table td > .status-pill,
  .table-responsive .table td > .status-pill,
  .glass-table .table td > .status-pill,
  .card-body > .table td > .status-pill {
    justify-self: start;
    width: auto;
    max-width: 100%;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .sidebar,
  html[data-theme="dark"] .content-header,
  html[data-theme="dark"] .mobile-bottom-nav,
  html[data-theme="dark"] .modal-content,
  html[data-theme="dark"] .jetstream-modal-panel,
  html[data-theme="dark"] .toast,
  html[data-theme="dark"] .dropdown-menu,
  html[data-theme="dark"] .back-to-top,
  html[data-theme="dark"] .auth-card,
  html[data-theme="dark"] body.page-detail-buybar .product-detail-stickybar {
    background: var(--lg-fill-solid) padding-box, var(--lg-rim) border-box;
  }
}

/* ---------- Wallet top-up wizard method cards ---------- */
html[data-theme="dark"] .pay-method {
  border: 1px solid transparent;
  border-radius: var(--lg-radius-inner);
  background:
    var(--lg-fill-surface) padding-box,
    var(--lg-rim-soft) border-box;
  box-shadow: var(--lg-shadow), var(--lg-highlight-soft);
}
html[data-theme="dark"] .pay-method:hover {
  background:
    var(--lg-fill-surface) padding-box,
    var(--lg-rim) border-box;
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
}
html[data-theme="dark"] .pay-method.is-selected {
  background:
    linear-gradient(160deg, rgba(24, 231, 255, .16), rgba(124, 92, 255, .12)) padding-box,
    var(--lg-rim-accent) border-box;
  box-shadow: var(--lg-ring), var(--lg-shadow), var(--lg-highlight);
}
html[data-theme="dark"] .pay-method.is-selected::after {
  background: linear-gradient(180deg, var(--cyber-cyan), #0ea5e9);
  color: #04101f;
}