/* ==========================================================================
   DPX NIGHT - Aurora dark-glass skin for the PUBLIC Digital Products pages.
   Scope: body.dpx-night ONLY (digital-products.html, seller-store.html,
   digital-product-detail.html). Seller DP dashboard pages + every freelancing
   page stay light and must never carry this class.
   Loads LAST (after theme-lancr.css + fp-type.css) so equal-specificity ties
   resolve to this file. Colors / surfaces / shadows / glows only - zero
   layout or interaction change.
   Palette: Aurora (violet #8b5cf6 primary, blue #3b82f6, teal #2dd4bf),
   vivid neon intensity. No em-dash in any rendered copy.
   ========================================================================== */

/* ---------- 1. Token flip ---------- */
body.dpx-night {
  color-scheme: dark;
  --dpx-bg: #07090f;
  --dpx-surface: rgba(255, 255, 255, 0.055);
  --dpx-surface-2: rgba(255, 255, 255, 0.095);
  --dpx-line: rgba(255, 255, 255, 0.11);
  --dpx-line-2: rgba(255, 255, 255, 0.07);
  --dpx-text: #f2f4f8;
  --dpx-text-2: #c3c9d4;
  --dpx-muted: #98a1b3;
  --dpx-faint: #6b7487;
  /* aurora accents */
  --dpxn-violet: #8b5cf6;
  --dpxn-violet-2: #a78bfa;
  --dpxn-blue: #3b82f6;
  --dpxn-teal: #2dd4bf;
  --dpxn-cyan: #22d3ee;
  --dpxn-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 48%, #2563eb 100%);
  --dpxn-glass: rgba(15, 18, 28, 0.72);
  --dpxn-glass-hard: rgba(12, 15, 24, 0.94);
  --dpxn-glass-brd: rgba(255, 255, 255, 0.12);
  --dpxn-glow-v: 0 0 34px -4px rgba(139, 92, 246, 0.45);
  --dpxn-glow-c: 0 0 30px -6px rgba(34, 211, 238, 0.35);
  /* flip system shadows to dark + violet-tinted elevation */
  --dpx-sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --dpx-sh-2: 0 10px 30px -18px rgba(0, 0, 0, 0.65);
  --dpx-sh-3: 0 26px 64px -32px rgba(0, 0, 0, 0.8);
  --dpx-glow: 0 14px 40px -14px rgba(124, 92, 246, 0.38);
  --dpx-blue-ring: 0 0 0 3px rgba(139, 92, 246, 0.28);
  /* aurora gradient for icon chips + primary buttons (was near-black) */
  --dpx-grad: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 55%, #2563eb 100%);
  --dpx-grad-text: linear-gradient(120deg, #e6e9f2, #b9c2d8 60%, #8f9ab3);
}

/* ---------- 2. Page background + aurora orbs (vivid) ---------- */
body.fp-ed.dpx-night { background: #07090f; color: var(--dpx-text); }
body.fp-ed.dpx-night.fp-pub::before,
body.fp-ed.dpx-night[data-spx-theme]::before {
  content: "";
  position: fixed;
  inset: 0;
  height: auto; /* editorial's fp-pub wash caps height at 600px - stretch back to full viewport */
  z-index: -1;
  pointer-events: none;
  /* !important: theme-lancr's body.fp-pub::before light wash is !important and would
     otherwise beat this later, higher-specificity rule (important > normal, always) */
  background:
    radial-gradient(54% 44% at 10% 6%, rgba(139, 92, 246, 0.34), transparent 64%),
    radial-gradient(48% 42% at 92% 18%, rgba(59, 130, 246, 0.26), transparent 66%),
    radial-gradient(52% 46% at 20% 96%, rgba(45, 212, 191, 0.18), transparent 66%),
    radial-gradient(40% 34% at 72% 88%, rgba(139, 92, 246, 0.14), transparent 70%) !important;
  -webkit-mask-image: none; /* editorial fades the wash out at 55% - the aurora runs full-bleed */
  mask-image: none;
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
/* editorial's companion body.fp-pub::after paints a light graph-paper grid over the hero - off at night */
body.fp-ed.dpx-night.fp-pub::after { background-image: none; }

/* ---------- 3. Navbar: dark glass ---------- */
body.dpx-night .site-header {
  /* was 0.62 - on the DP browse page the product grid read straight through the bar. */
  background: rgba(8, 10, 17, 0.93);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, 0.7);
}
/* glowing dark logo: white monogram + aurora neon halo. The JS navbar renders img.brand-mono-img
   (buildBrandLink in main.js) - .brand-mark-image only exists in static navbars, so cover BOTH.
   site-customization.js only rewrites .brand-mark-image-* srcs, so this stays safe. */
body.dpx-night .brand-mark-image,
body.dpx-night .brand-mono-img,
body.dpx-night .brand-lockup-img,
body.dpx-night .fp-side-mono {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(139, 92, 246, 0.4)) drop-shadow(0 0 16px rgba(99, 102, 241, 0.18));
}
/* soft breathing aura behind the mark (transform/opacity only - compositor cheap) */
body.dpx-night .brand-img-link { position: relative; isolation: isolate; }
body.dpx-night .brand-img-link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.26), rgba(34, 211, 238, 0.07) 55%, transparent 72%);
  z-index: -1;
  pointer-events: none;
  animation: dpxnLogoBreath 3.6s ease-in-out infinite alternate;
}
@keyframes dpxnLogoBreath {
  from { opacity: 0.3; transform: scale(0.9); }
  to { opacity: 0.6; transform: scale(1.08); }
}
body.dpx-night .brand-name .bn-1 { color: var(--dpxn-violet-2); }
body.dpx-night .brand-name .bn-2 { color: #f2f4f8; }
body.dpx-night .brand-sub, body.dpx-night .brand-text small { color: #8b93a3; }
body.dpx-night .nav-link { color: #c3c9d4; }
body.dpx-night .nav-link:hover { color: #ffffff; }
body.dpx-night .nav-link-secondary { color: #c3c9d4; }
body.dpx-night .nav-link-secondary:hover { color: #ffffff; }
body.dpx-night .fp-nav-trigger { color: #c3c9d4; }
body.dpx-night .fp-nav-trigger:hover { color: #ffffff; }
body.dpx-night .fp-nav-item.fp-open > .fp-nav-trigger { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
body.dpx-night .fp-cv { color: #8b93a3; }
body.dpx-night .menu-toggle span { background: #f2f4f8; }

/* mega menu + dropdown cards (light #fff/#fcfbf9 in editorial.css) -> dark glass panels */
body.dpx-night .fp-mega-card,
body.dpx-night .fp-drop-card {
  background: var(--dpxn-glass-hard);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--dpxn-glass-brd);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.85), var(--dpxn-glow-v), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.dpx-night .fp-rail { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
body.dpx-night .fp-rail-label, body.dpx-night .fp-mega-label, body.dpx-night .fp-col-label { color: #8b93a3; }
body.dpx-night .fp-rail-item { color: #c3c9d4; }
body.dpx-night .fp-rail-item:hover, body.dpx-night .fp-rail-item.is-active { background: rgba(139, 92, 246, 0.16); color: #ffffff; }
body.dpx-night .fp-mega-head { color: #f2f4f8; }
body.dpx-night .fp-mega-grid a, body.dpx-night .fp-sub a, body.dpx-night .fp-sub { color: #c3c9d4; }
body.dpx-night .fp-mega-grid a:hover, body.dpx-night .fp-sub a:hover { color: #ffffff; }
body.dpx-night .fp-drop-link { color: #e6e9f2; }
body.dpx-night .fp-drop-link small { color: #8b93a3; }
body.dpx-night .fp-drop-link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
body.dpx-night .fp-chip, body.dpx-night .fp-ch2 { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); color: #c3c9d4; }
body.dpx-night .fp-chip:hover, body.dpx-night .fp-ch2:hover { color: #ffffff; border-color: rgba(167, 139, 250, 0.5); }
body.dpx-night .fp-mega-seeall { color: var(--dpxn-violet-2); }

/* Join button -> aurora neon. body.fp-ed.dpx-night (0,3,1) outranks editorial's vivid
   .fp-ed:is([data-spx-theme...]) .join-button (0,3,0) and the hover (0,4,1) beats theme-lancr (0,4,0). */
body.fp-ed.dpx-night .join-button {
  background: var(--dpxn-grad);
  color: #ffffff;
  border: 0;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4), 0 10px 30px -8px rgba(99, 102, 241, 0.65), var(--dpxn-glow-v);
}
body.fp-ed.dpx-night .join-button:hover { background: var(--dpxn-grad); color: #ffffff; filter: brightness(1.1); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.55), 0 12px 36px -8px rgba(99, 102, 241, 0.8), var(--dpxn-glow-v); }
/* plain nav links: editorial's vivid neutralizer (0,4,0) sets hover color to near-black --ink; outrank it */
body.fp-ed.dpx-night .nav-link:hover,
body.fp-ed.dpx-night .nav-link-secondary:hover,
body.fp-ed.dpx-night .dropdown-toggle:hover { color: #ffffff; }

/* logged-in dropdowns (buyer/seller variants) - generic dark glass.
   NOTE: .seller-profile-menu is the always-visible navbar WRAPPER around the avatar pill
   (the popup itself carries .dropdown-menu) - styling the wrapper paints a permanent slab. */
body.dpx-night .dropdown-menu,
body.dpx-night .seller-notification-menu,
body.dpx-night .seller-inbox-menu,
body.dpx-night .seller-help-menu {
  /* Near-opaque (0.985): at 0.94 the bright product thumbnails behind bled through and read
     as "too transparent". The Inbox menu was never in this list at all, so it kept the light
     editorial white panel - now it gets the dark glass too. */
  background: rgba(13, 16, 26, 0.985);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid var(--dpxn-glass-brd);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.85);
  color: #e6e9f2;
}
body.dpx-night .dropdown-item, body.dpx-night .dropdown-menu a { color: #c3c9d4; }
body.dpx-night .dropdown-item:hover, body.dpx-night .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
/* menu ITEMS that editorial paints with explicit near-black --ink (they beat inherited color) */
body.dpx-night .seller-notification-item strong,
body.dpx-night .seller-notification-head button,
body.dpx-night .seller-help-menu-item,
body.dpx-night .seller-profile-menu-item { color: #e6e9f2; }
body.dpx-night .seller-notification-item p, body.dpx-night .seller-notification-time { color: #98a1b3; }
body.dpx-night .seller-notification-item:hover,
body.dpx-night .seller-help-menu-item:hover,
body.dpx-night .seller-profile-menu-item:hover { background: rgba(255, 255, 255, 0.07); }
body.dpx-night .seller-switch-buyer-card { background: rgba(255, 255, 255, 0.06); }
body.dpx-night .seller-icon-button { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); color: #e6e9f2; }
body.dpx-night .seller-icon-button:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #ffffff; }
body.dpx-night .fp-langsel-slot button, body.dpx-night [data-fp-langsel] button { color: #c3c9d4; }
/* native select popups inherit color-scheme dark; theme-lancr forces navy option text - recolor */
body.dpx-night select option { color: #e6e9f2; background-color: #10141e; }

/* mobile stacked menu sheet */
@media (max-width: 900px) {
  body.dpx-night .navigation {
    background: rgba(9, 11, 18, 0.97);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* footer: deepen to blend with the night bg; lockup gets a soft violet halo */
body.fp-ed.dpx-night .ed-footer { background: #05070d; }
body.dpx-night .ed-footer .ed-brand-img { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(139, 92, 246, 0.35)); }

/* ---------- 4. Shared dpx components ---------- */
body.dpx-night .dpx-btn-primary { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 12px 34px -10px rgba(99, 102, 241, 0.6); }
body.dpx-night .dpx-btn-primary:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.5), 0 16px 42px -10px rgba(99, 102, 241, 0.75); }
body.dpx-night .dpx-btn-ghost { background: rgba(255, 255, 255, 0.06); color: #e6e9f2; border-color: rgba(255, 255, 255, 0.14); }
body.dpx-night .dpx-btn-ghost:hover { border-color: rgba(167, 139, 250, 0.55); color: #ffffff; }
body.dpx-night .dpx-btn-dark { background: #f2f4f8; color: #0b0e16; }
body.dpx-night .dpx-btn-dark:hover { background: #ffffff; }
body.dpx-night .dpx-glass {
  background: rgba(15, 18, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
body.dpx-night .dpx-chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #c3c9d4; }
body.dpx-night .dpx-chip:hover { border-color: rgba(255, 255, 255, 0.3); color: #ffffff; }
body.dpx-night .dpx-chip.is-active { background: rgba(139, 92, 246, 0.18); border-color: var(--dpxn-violet); color: #d6c9ff; }
body.dpx-night .dpx-card:hover { border-color: rgba(167, 139, 250, 0.4); }
body.dpx-night .dpx-card-media { background: linear-gradient(145deg, #161a24, #0d1017); }
body.dpx-night .dpx-card-media-ph { color: #39415a; }
body.dpx-night .dpx-skel {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 480px 100%;
}
body.dpx-night .dpx-empty { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.14); }
body.dpx-night .dpx-empty-ic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
/* toasts (also gives the browse page its missing toast base styles) */
body.dpx-night .dpx-toast-wrap { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1300; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
body.dpx-night .dpx-toast {
  padding: 11px 18px; border-radius: var(--dpx-r4); font-weight: 600; font-size: 13.5px;
  background: var(--dpxn-glass-hard); color: #f2f4f8;
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.8), var(--dpxn-glow-v);
  opacity: 0; transform: translateY(10px); transition: opacity var(--dpx-dur-3), transform var(--dpx-dur-3);
}
body.dpx-night .dpx-toast.is-in { opacity: 1; transform: translateY(0); }
body.dpx-night .dpx-toast--err { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.8), 0 0 30px -6px rgba(239, 68, 68, 0.4); }
body.dpx-night .dpx-toast.is-out { opacity: 0; }

/* form fields (Phase 25). The primitive in digital-products.css is built entirely on tokens this
   file already flips - surface, surface-2, line, text, muted, faint, blue-ring - so it arrives
   dark for free. Two things do NOT come from the flip:
   1. `--dpx-blue` is not flipped, so the focus BORDER would stay the light theme's #2563eb while
      the ring next to it turned violet. Same accent for both here.
   2. A 5.5%-white surface needs the blur to read as glass rather than as a grey box, matching how
      the toast and menu surfaces are treated above. */
body.dpx-night .dpx-input,
body.dpx-night .dpx-select,
body.dpx-night .dpx-textarea {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.dpx-night .dpx-input:focus,
body.dpx-night .dpx-select:focus,
body.dpx-night .dpx-textarea:focus { border-color: #8b5cf6; }
body.dpx-night .dpx-input.is-bad,
body.dpx-night .dpx-select.is-bad,
body.dpx-night .dpx-textarea.is-bad { border-color: #f87171; }
body.dpx-night .dpx-err { color: #f87171; }
body.dpx-night .dpx-label .dpx-req { color: #f87171; }
/* level chip: the white L3 chip gets a glass treatment; other tiers are self-contained pills */
body.dpx-night .fp-level--l3 { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); color: #c3c9d4; }

/* FPModal -> forced dark glass (their own dark styles only fire on OS dark mode) */
body.dpx-night .fpm-ov { background: rgba(4, 6, 12, 0.66); }
body.dpx-night .fpm-dlg {
  background: rgba(17, 20, 31, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #eef2fb;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.09), var(--dpxn-glow-v);
}
body.dpx-night .fpm-t { color: #f4f7ff; }
body.dpx-night .fpm-m { color: #aeb7cc; }
body.dpx-night .fpm-m b, body.dpx-night .fpm-m strong { color: #dbe3f4; }
/* This dialog is dark whatever the OS scheme is, so the base light-mode heading colour would be
   near-black on near-black here. Mirrors the b/strong line above. */
body.dpx-night .fpm-m h1, body.dpx-night .fpm-m h2, body.dpx-night .fpm-m h3,
body.dpx-night .fpm-m h4, body.dpx-night .fpm-m .fpm-strong { color: #f0f4ff; }
body.dpx-night .fpm-field input, body.dpx-night .fpm-field textarea { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #eef2fb; }
body.dpx-night .fpm-field input:focus, body.dpx-night .fpm-field textarea:focus { background: rgba(255, 255, 255, 0.07); border-color: var(--dpxn-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
body.dpx-night .fpm-btn.is-cancel { background: rgba(255, 255, 255, 0.07); color: #c7d0e2; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); }
body.dpx-night .fpm-btn.is-cancel:hover { background: rgba(255, 255, 255, 0.11); }

/* ---------- 5. Browse page (.dpx-br-*) ---------- */
/* search: glass field */
body.dpx-night .dpx-br-search {
  background: rgba(15, 18, 28, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.dpx-night .dpx-br-search:focus-within { border-color: var(--dpxn-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.24), var(--dpxn-glow-v); }
body.dpx-night .dpx-br-search input::placeholder { color: #6b7487; }
body.dpx-night .dpx-br-suggest {
  background: var(--dpxn-glass-hard);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-color: var(--dpxn-glass-brd);
  box-shadow: 0 30px 64px -22px rgba(0, 0, 0, 0.85);
}
body.dpx-night .dpx-br-sugg:hover, body.dpx-night .dpx-br-sugg.is-active { background: rgba(255, 255, 255, 0.07); }
body.dpx-night .dpx-br-tag:hover { border-color: rgba(167, 139, 250, 0.55); color: #ffffff; }
/* category cards: glass look WITHOUT backdrop-filter (in-flow + always visible; keeping the
   compositor layer count low - only floating overlays get real blur) */
body.dpx-night .dpx-br-cat:hover { border-color: rgba(167, 139, 250, 0.5); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7), var(--dpxn-glow-v); }
body.dpx-night .dpx-br-cat.is-on { border-color: var(--dpxn-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22), var(--dpxn-glow-v); }
body.dpx-night .dpx-br-cat-ic { box-shadow: var(--dpxn-glow-v); }
/* stats tiles: soft top highlight only */
/* sidebar filters */
body.dpx-night .dpx-br-fclear { color: var(--dpxn-violet-2); }
body.dpx-night .dpx-br-opt input { accent-color: var(--dpxn-violet); }
body.dpx-night .dpx-br-fseg button.is-on { background: #f2f4f8; border-color: #f2f4f8; color: #0b0e16; }
body.dpx-night .dpx-br-fbadge { background: var(--dpxn-violet); }
/* toolbar */
body.dpx-night .dpx-br-sel {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23aab3c5' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-color: rgba(255, 255, 255, 0.06);
}
body.dpx-night .dpx-br-sel:focus-visible { border-color: var(--dpxn-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.24); }
body.dpx-night .dpx-br-viewbtn.is-active { background: rgba(255, 255, 255, 0.16); color: #ffffff; box-shadow: none; }
/* shelf arrows: glass orbs, violet on hover */
body.dpx-night .dpx-br-nav {
  background: rgba(15, 18, 28, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f2f4f8;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.75), var(--dpxn-glow-v);
}
body.dpx-night .dpx-br-nav:hover { background: var(--dpxn-grad); border-color: rgba(167, 139, 250, 0.6); color: #ffffff; }
/* product cards: dark media, aurora hover glow */
body.dpx-night .dpx-br-cmedia { background: linear-gradient(145deg, #161a24, #0d1017); }
body.dpx-night .dpx-br-card:hover .dpx-br-cmedia { box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.75), var(--dpxn-glow-v); }
body.dpx-night .dpx-br-card.is-hovering .dpx-br-cmedia,
body.dpx-night .dpx-br-card:focus-within .dpx-br-cmedia {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.85), var(--dpxn-glow-v), var(--dpxn-glow-c);
}
body.dpx-night span.dpx-br-cimg.is-ph { color: #39415a; }
/* hover info panel: WAS white -> dark glass, aurora edge */
body.dpx-night .dpx-br-info {
  background: rgba(13, 16, 24, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 30px 56px -22px rgba(0, 0, 0, 0.85), var(--dpxn-glow-v);
  color: var(--dpx-text);
}
/* Add-to-cart: base rule paints it with --dpx-text (now near-white) + white label -> aurora gradient instead */
body.dpx-night .dpx-br-add { background: var(--dpxn-grad); color: #ffffff; box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.65); }
body.dpx-night .dpx-br-add:hover { background: var(--dpxn-grad); filter: brightness(1.12); }
body.dpx-night .dpx-br-iact-btn:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
body.dpx-night .dpx-br-iact-btn.is-on { background: var(--dpxn-violet); color: #ffffff; }
/* labels: sale chip was near-black (invisible on dark) -> neon violet */
body.dpx-night .dpx-br-label--sale { background: var(--dpxn-grad); color: #ffffff; box-shadow: 0 3px 14px -3px rgba(139, 92, 246, 0.6); }
/* wish/save button: page css keeps a white circle while the flipped icon color goes light -> dark glass circle.
   Saved (.is-on) = filled heart with a pink NEON glow ring so saved items read at a glance. */
body.dpx-night .dpx-br-wish, body.dpx-night .dpx-store-wish {
  background: rgba(15, 18, 28, 0.82);
  color: #f2f4f8;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform var(--dpx-dur-2), color var(--dpx-dur-2), background var(--dpx-dur-2), box-shadow var(--dpx-dur-2);
}
body.dpx-night .dpx-br-wish svg, body.dpx-night .dpx-store-wish svg { width: 18px; height: 18px; }
body.dpx-night .dpx-br-wish:hover, body.dpx-night .dpx-store-wish:hover {
  color: #ff5c8d;
  box-shadow: 0 3px 12px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 92, 141, 0.45), 0 0 14px -2px rgba(255, 92, 141, 0.45);
}
body.dpx-night .dpx-br-wish.is-on, body.dpx-night .dpx-store-wish.is-on {
  color: #ff4d84;
  background: rgba(255, 77, 132, 0.15);
  box-shadow: 0 0 0 1px rgba(255, 77, 132, 0.6), 0 0 20px -2px rgba(255, 77, 132, 0.7), 0 3px 12px -2px rgba(0, 0, 0, 0.55);
}
body.dpx-night .dpx-br-wish.is-on svg, body.dpx-night .dpx-store-wish.is-on svg {
  filter: drop-shadow(0 0 5px rgba(255, 77, 132, 0.95)) drop-shadow(0 0 12px rgba(255, 77, 132, 0.5));
}
/* unflipped light-theme link blue (--dpx-blue-600 #1d4ed8) is near-invisible on dark -> aurora accents */
body.dpx-night .dpx-br-ctitle a:hover,
body.dpx-night .dpx-br-seller-nm:hover,
body.dpx-night .dpx-br-viewall:hover,
body.dpx-night .dpx-store-ctitle a:hover { color: #ffffff; }
body.dpx-night .dpx-store-viewall, body.dpx-night .dpx-store-rv-prod { color: var(--dpxn-violet-2); }
/* unflipped dark green (--dpx-green-700 #047857) reads murky on near-black -> bright emerald */
body.dpx-night .dpx-price-free,
body.dpx-night .dpx-br-price .free,
body.dpx-night .dpx-store-price .dpx-price-free,
body.dpx-night .dpx-store-rv-vf { color: #34d399; }
body.dpx-night .dpx-store-kyc { color: #34d399; background: rgba(16, 185, 129, 0.16); }
/* list view */
body.dpx-night .dpx-br-results.is-list .dpx-br-card { border-color: rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.04); }
body.dpx-night .dpx-br-results.is-list .dpx-br-iact-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* compare bar + overlay + mobile filter drawer */
body.dpx-night .dpx-br-overlay { background: rgba(3, 5, 10, 0.6); }
@media (max-width: 1080px) {
  body.dpx-night .dpx-br-side { background: rgba(11, 14, 22, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 22px 0 60px -18px rgba(0, 0, 0, 0.8); }
}
body.dpx-night .dpx-br-fseg button.is-on:hover { color: #0b0e16; }
/* focus rings -> violet */
body.dpx-night .dpx-br-clink:focus-visible,
body.dpx-night .dpx-br-ctitle a:focus-visible,
body.dpx-night .dpx-br-wish:focus-visible,
body.dpx-night .dpx-br-cat:focus-visible,
body.dpx-night .dpx-br-iact-btn:focus-visible,
body.dpx-night .dpx-br-add:focus-visible,
body.dpx-night .dpx-br-nav:focus-visible { outline-color: var(--dpxn-violet); }

/* ---------- 6. Store page (.dpx-store-*) ---------- */
/* sticky scroll-spy section nav: page css hardcodes a light frosted bar -> dark glass */
body.dpx-night .dpx-store-nav {
  background: rgba(8, 10, 17, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
body.dpx-night .dpx-store-tab.is-active { color: var(--dpxn-violet-2); }
body.dpx-night .dpx-store-tab.is-active::after { background: var(--dpxn-violet); }
body.dpx-night .dpx-store-banner { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(139, 92, 246, 0.18); }
body.dpx-night .dpx-store-av { border-color: #10131d; }
body.dpx-night .dpx-store-iconbtn:hover { border-color: rgba(167, 139, 250, 0.5); }
body.dpx-night .dpx-store-sale { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(139, 92, 246, 0.25), var(--dpxn-glow-v); }
body.dpx-night .dpx-store-card:hover { border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 24px 52px -22px rgba(0, 0, 0, 0.8), var(--dpxn-glow-v); }
body.dpx-night .dpx-store-cmedia { background: linear-gradient(145deg, #161a24, #0d1017); }
body.dpx-night span.dpx-store-cimg.is-ph { color: #39415a; }
body.dpx-night .dpx-store-tag--sale { background: var(--dpxn-grad); color: #ffffff; box-shadow: 0 3px 14px -3px rgba(139, 92, 246, 0.6); }
body.dpx-night .dpx-store-viewbtn.is-active { background: rgba(255, 255, 255, 0.16); color: #ffffff; box-shadow: none; }
body.dpx-night .dpx-store-coltile:hover { border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.8), var(--dpxn-glow-v); }
body.dpx-night .dpx-store-coltile-cell { background-color: #171c28; }
body.dpx-night .dpx-store-coltile-cell.is-ph { background: linear-gradient(135deg, #171c28, #10141e); }
body.dpx-night .dpx-store-stars span { color: #2d3546; }
body.dpx-night .dpx-store-rel:hover { border-color: rgba(167, 139, 250, 0.45); }
body.dpx-night .dpx-store-share-btn:hover { border-color: rgba(167, 139, 250, 0.5); color: #ffffff; }
body.dpx-night .dpx-menu {
  background: var(--dpxn-glass-hard);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: var(--dpxn-glass-brd);
  box-shadow: 0 24px 56px -20px rgba(0, 0, 0, 0.85);
}
body.dpx-night .dpx-store-share-qr { background: #ffffff; border-radius: var(--dpx-r4); }

/* ---------- 7. Product detail page (.dp-*) ---------- */
body.dpx-night .dp-gallery-main { background: linear-gradient(135deg, #161a24, #0d1017); }
body.dpx-night .dp-gallery, body.dpx-night .dp-buybox {
  box-shadow: 0 16px 40px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.dpx-night .dp-buybox { border-color: rgba(255, 255, 255, 0.12); }

/* ---------- 8. Aurora Portal entry transition ----------
   Plays when ENTERING the dark DP world (from a light page, external link or fresh visit): the
   inline head script on the 3 dark pages adds html.dpxn-enter pre-paint. It skips dark->dark
   navigation and reloads via a sessionStorage departure-timestamp (the site ships
   Referrer-Policy: no-referrer, so document.referrer is unusable), plus reduced-motion.
   Overlay lives on html::after (body::after is taken by editorial's fp-pub top wash):
   starts as the light-page surface, blooms a violet/cyan energy ring, then collapses into a
   portal point revealing the dark theme. pointer-events none throughout, clip-path ends at 0%
   + opacity 0 (forwards) - it can never block the page, no JS cleanup. */
/* Static light cover holds the "old page" look pre-paint; the canvas engine
   (dpx-night-portal.js) adds html.dpxn-live and takes over. If the engine ever
   fails to load, the delayed CSS-only portal collapse below still frees the page. */
html.dpxn-enter::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-color: #f3f5fa;
  background-image:
    radial-gradient(closest-side, rgba(34, 211, 238, 0) 58%, rgba(255, 255, 255, 0.95) 66%, rgba(34, 211, 238, 0.9) 70%, rgba(139, 92, 246, 0.6) 76%, rgba(34, 211, 238, 0) 82%),
    radial-gradient(closest-side, rgba(139, 92, 246, 0.55), rgba(139, 92, 246, 0) 70%),
    radial-gradient(closest-side, rgba(59, 130, 246, 0.4), rgba(45, 212, 191, 0) 72%);
  background-repeat: no-repeat;
  background-position: 50% 42%;
  animation: dpxnPortal 1.05s cubic-bezier(0.72, 0, 0.3, 1) 1.25s both;
}
html.dpxn-live::after { display: none !important; animation: none !important; }
/* the NEW world arrives: page content settles in from a blurred zoom while the
   engine's warp streaks finish (engine path only - keyed on dpxn-live) */
html.dpxn-live body.dpx-night main {
  animation: dpxnArrive 0.6s var(--dpx-ease) 1.42s both;
}
@keyframes dpxnArrive {
  from { opacity: 0.25; transform: scale(1.035); filter: blur(10px) saturate(1.35); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes dpxnPortal {
  0% { clip-path: circle(150% at 50% 42%); opacity: 1; background-size: 0vmax 0vmax, 0vmax 0vmax, 24vmax 24vmax; }
  12% { clip-path: circle(150% at 50% 42%); background-size: 10vmax 10vmax, 16vmax 16vmax, 40vmax 40vmax; }
  46% { clip-path: circle(150% at 50% 42%); opacity: 1; background-size: 150vmax 150vmax, 190vmax 190vmax, 210vmax 210vmax; }
  92% { opacity: 1; }
  100% { clip-path: circle(0% at 50% 42%); opacity: 0; background-size: 260vmax 260vmax, 300vmax 300vmax, 320vmax 320vmax; }
}
/* the nav logo "lands" with a glow pop right as the portal finishes */
html.dpxn-enter body.dpx-night .brand-mono-img,
html.dpxn-enter body.dpx-night .brand-mark-image {
  animation: dpxnLogoPop 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.2) 1.05s both;
}
@keyframes dpxnLogoPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(167, 139, 250, 0.7)) drop-shadow(0 0 20px rgba(99, 102, 241, 0.4)); }
  100% { transform: scale(1); }
}

/* ---------- 9. Guards ---------- */
@supports not (backdrop-filter: blur(1px)) {
  body.dpx-night .site-header { background: rgba(8, 10, 17, 0.96); }
  body.dpx-night .dpx-br-search { background: rgba(15, 18, 28, 0.96); }
  body.dpx-night .dpx-br-info { background: rgba(13, 16, 24, 0.97); }
  body.dpx-night .fp-mega-card, body.dpx-night .fp-drop-card, body.dpx-night .dpx-br-suggest,
  body.dpx-night .dpx-menu, body.dpx-night .fpm-dlg, body.dpx-night .dpx-toast,
  body.dpx-night .dpx-cart-bar { background: rgba(12, 15, 24, 0.99); }
}

/* ── 10. Navbar cart chip (Phase 8) - buyer DP pages only ─────────────────── */
body.dpx-night .dpx-navcart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 4px; border-radius: var(--dpx-r3); border: 1px solid var(--dpxn-glass-brd); background: rgba(255, 255, 255, 0.05); color: #e6e9f2; text-decoration: none; transition: border-color var(--dpx-dur-2), background var(--dpx-dur-2), color var(--dpx-dur-2); }
body.dpx-night .dpx-navcart:hover { border-color: rgba(167, 139, 250, 0.55); background: rgba(139, 92, 246, 0.16); color: #ffffff; }
body.dpx-night .dpx-navcart:focus-visible { outline: 2px solid var(--dpxn-violet); outline-offset: 2px; }
body.dpx-night .dpx-navcart svg { width: 18px; height: 18px; }
body.dpx-night .dpx-navcart-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--dpx-pill); background: var(--dpxn-grad); color: #fff; font-family: var(--dpx-font-num); font-size: 11px; font-weight: 800; box-shadow: 0 0 12px -2px rgba(139, 92, 246, 0.9); }
body.dpx-night .dpx-navcart-n[hidden] { display: none; }
/* phone: the chip moves out of the collapsed nav and pins to the right of the header, so the
   cart stays one tap away instead of hiding behind the hamburger */
body.dpx-night .dpx-navcart.is-compact { margin: 0 10px 0 auto; }

/* ── 10b. Navbar search chip (Phase 25) ───────────────────────────────────────
   The Cmd-K palette shipped in Phase 24 with a click trigger nobody rendered, so the only way
   to reach it was to already know the shortcut. This is that trigger. dpx-components.js mounts
   it only when window.FPSearch exists, so it can never appear where it would do nothing. */
body.dpx-night .dpx-navsearch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 9px 0 11px; margin: 0 6px 0 10px; border-radius: var(--dpx-r3); border: 1px solid rgba(150, 180, 235, 0.18); background: rgba(255, 255, 255, 0.05); color: #b9c7e2; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--dpx-dur-2) var(--dpx-ease), background var(--dpx-dur-2) var(--dpx-ease), color var(--dpx-dur-2) var(--dpx-ease); }
body.dpx-night .dpx-navsearch:hover { border-color: rgba(167, 139, 250, 0.55); background: rgba(139, 92, 246, 0.16); color: #ffffff; }
body.dpx-night .dpx-navsearch:focus-visible { outline: 2px solid var(--dpxn-violet); outline-offset: 2px; }
body.dpx-night .dpx-navsearch svg { width: 17px; height: 17px; flex: none; }
body.dpx-night .dpx-navsearch-k { padding: 2px 6px; border-radius: var(--dpx-r1); border: 1px solid rgba(150, 180, 235, 0.22); background: rgba(10, 14, 26, 0.55); color: #93a5c4; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
/* Phone: the cart chip pins itself right with margin-left:auto, and a second chip in that flow
   fights it. The browse page carries a real search input at this width anyway, so the chip
   stands down rather than shipping a broken header. */
body.dpx-night .dpx-navsearch.is-compact { display: none; }
/* Touch-only: there is no Cmd-K to press, so the badge would be a lie. The button still works. */
@media (pointer: coarse) {
  body.dpx-night .dpx-navsearch-k { display: none; }
  body.dpx-night .dpx-navsearch { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body.dpx-night .join-button:hover, body.dpx-night .dpx-br-add:hover { filter: none; }
  html.dpxn-enter::after { display: none; animation: none; }
  body.dpx-night .brand-img-link::before { animation: none; opacity: 0.7; transform: none; }
  html.dpxn-enter body.dpx-night .brand-mono-img,
  html.dpxn-enter body.dpx-night .brand-mark-image { animation: none; }
}

/* ── 12. The signed-in workspace shell on a dark page ─────────────────────────
   A signed-in seller browsing the public marketplace was served the LIGHT workspace chrome on
   top of the dark page: a 250px pure-white sidebar, a white account pill, a white "Today" bar
   inside the bell and a near-white Announcements button. Measured, not guessed - six elements
   were painting >225 on all three channels over a #080a11 page.

   The logo case is the sharpest one: DPXN-5 already inverted `.fp-side-mono` to white for the
   dark skin, but nobody ever darkened the sidebar behind it. So half the dark treatment had
   shipped and the monogram was white-on-white.

   These live here rather than in main.js on purpose: main.js builds this shell for 105+ pages
   and is out of scope, while dpx-night.css loads on the DP dark pages ONLY - so none of this
   can reach a freelancing page. */

/* the sidebar shell (this is what the logo sits on) */
body.dpx-night .fp-side {
  background: rgba(10, 13, 22, 0.94);
  border-right-color: rgba(255, 255, 255, 0.10);
}
body.dpx-night .fp-side-top,
body.dpx-night .fp-side-foot { border-color: rgba(255, 255, 255, 0.10); }
body.dpx-night .fp-side-brand-tx { color: #eef2fb; }
body.dpx-night .fp-side-label { color: #7d8caa; }
body.dpx-night .fp-side-link,
body.dpx-night .fp-side-link .fp-side-ic,
body.dpx-night .fp-side-link .fp-side-tx { color: #c3cbdd; }
body.dpx-night .fp-side-link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
body.dpx-night .fp-side-link.is-active { background: rgba(139, 92, 246, 0.16); color: #ffffff; }
/* the icon and label are separate spans with their own colour, so they need saying too */
body.dpx-night .fp-side-link:hover .fp-side-ic,
body.dpx-night .fp-side-link:hover .fp-side-tx,
body.dpx-night .fp-side-link.is-active .fp-side-ic,
body.dpx-night .fp-side-link.is-active .fp-side-tx { color: inherit; }
body.dpx-night .fp-side-collapse {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #9fb0d0;
}
body.dpx-night .fp-side-collapse:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.55);
  color: #ffffff;
}

/* the account pill */
body.dpx-night .seller-profile-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #eef2fb;
}
body.dpx-night .seller-profile-button:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.55);
}
body.dpx-night .seller-profile-copy strong { color: #f4f7ff; }
body.dpx-night .seller-profile-copy small { color: #9fb0d0; }
body.dpx-night .seller-profile-chevron { color: #9fb0d0; }
/* the avatar plate shows through around a non-square photo */
body.dpx-night .seller-profile-avatar,
body.dpx-night .seller-inbox-av { background: rgba(255, 255, 255, 0.08); }

/* inside the bell dropdown */
body.dpx-night .seller-notification-group {
  /* OPAQUE on purpose: this is a sticky day header, so rows scroll underneath it */
  background: #0d1120;
  background-image: none;
  border-color: rgba(255, 255, 255, 0.08);
  color: #8b9ab5;
}
body.dpx-night .seller-notification-foot-link.is-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #c3cbdd;
}
body.dpx-night .seller-notification-foot-link.is-secondary:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.55);
  color: #ffffff;
}

/* Inbox dropdown - the whole menu was built for the light theme (white panel, near-black rows).
   On the dark nav the near-white heading landed on a white panel = invisible "Inbox" title.
   Panel bg is fixed in the shared dropdown rule above; here we recolour every inner element. */
body.dpx-night .seller-inbox-menu .seller-notification-head {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dpx-night .seller-inbox-menu .seller-notification-head strong { color: #f2f4f8; }
body.dpx-night .seller-inbox-menu .seller-notification-head span { color: #98a1b3; }
body.dpx-night .seller-inbox-item { color: #e6e9f2; }
body.dpx-night .seller-inbox-row1 strong { color: #f2f4f8; }
body.dpx-night .seller-inbox-row1 em { color: #8b9ab5; }
body.dpx-night .seller-inbox-preview { color: #98a1b3; }
body.dpx-night .seller-inbox-item:hover { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
body.dpx-night .seller-inbox-item.is-unread { background: rgba(139, 92, 246, 0.12); }
body.dpx-night .seller-inbox-item.is-unread::before { background: #a78bfa; }
body.dpx-night .seller-inbox-item.is-unread:hover { background: rgba(139, 92, 246, 0.18); }
body.dpx-night .seller-inbox-item.is-unread .seller-inbox-preview { color: #c3cbdd; }
body.dpx-night .seller-inbox-item.is-unread .seller-inbox-row1 em { color: #c4b5fd; }
body.dpx-night .seller-inbox-foot {
  color: #c4b5fd;
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.dpx-night .seller-inbox-foot:hover { background: rgba(139, 92, 246, 0.12); }
body.dpx-night .seller-inbox-empty { color: #98a1b3; }
body.dpx-night .seller-inbox-empty a { color: #c4b5fd; }

/* profile dropdown leading icons - violet glass tiles on the night theme */
body.dpx-night .seller-profile-menu-ic {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(167, 139, 250, 0.26);
  color: #c4b5fd;
}
body.dpx-night .seller-profile-menu-item:hover .seller-profile-menu-ic,
body.dpx-night .seller-switch-buyer-card:hover .seller-profile-menu-ic {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(167, 139, 250, 0.5);
  color: #ffffff;
}
body.dpx-night .seller-profile-menu-item-muted .seller-profile-menu-ic {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.24);
  color: #f87171;
}
body.dpx-night .seller-profile-menu-item-muted:hover .seller-profile-menu-ic {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.42);
  color: #fca5a5;
}