/* HuaJia original-style upgrade.
   Keeps the existing dark/magenta butterfly language, but tightens typography,
   spacing, cards, buttons, and ad-copy presentation across copied pages only. */

:root {
  --hj-bg: #07070b;
  --hj-bg-soft: #101018;
  --hj-panel: rgba(18, 17, 24, .78);
  --hj-panel-strong: rgba(24, 22, 32, .88);
  --hj-text: #f7f1f6;
  --hj-muted: rgba(247, 241, 246, .62);
  --hj-faint: rgba(247, 241, 246, .36);
  --hj-line: rgba(247, 241, 246, .12);
  --hj-line-strong: rgba(247, 241, 246, .22);
  --hj-pink: var(--magenta);
  --hj-pink-soft: var(--magenta-2);
  --hj-gold: #d7b76a;
  --hj-glow: rgb(var(--magenta-rgb) / .24);
  --hj-serif: "Noto Serif TC", "ZCOOL XiaoWei", "Noto Sans TC", serif;
  --hj-sans: "Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
  background:
    radial-gradient(900px 620px at 18% 8%, rgb(var(--magenta-rgb) / .13), transparent 58%),
    radial-gradient(860px 620px at 86% 18%, rgba(215, 183, 106, .08), transparent 56%),
    linear-gradient(135deg, #050508 0%, #0b0b12 52%, #050508 100%) !important;
  color: var(--hj-text);
  font-family: var(--hj-sans) !important;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.32) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 42%, rgb(var(--magenta-rgb) / .08) 42.06% 42.15%, transparent 42.28%);
  background-size: 118px 118px, 100% 100%;
}

body > * {
  position: relative;
  z-index: 1;
}

.header,
.navbar,
.topbar,
.admin-topbar {
  background: rgba(7, 7, 11, .82) !important;
  border-bottom: 1px solid var(--hj-line) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px rgba(0,0,0,.32);
}

.brand-name-zh,
.footer-brand-zh,
.hero-title,
.section-title,
.banner-title,
.page-title,
h1,
h2 {
  font-family: var(--hj-serif) !important;
  letter-spacing: .02em;
}

.brand-name-zh em,
.footer-brand-zh em,
.hero-title em,
.section-title em,
.banner-title em {
  color: var(--hj-pink-soft) !important;
  text-shadow: 0 0 22px rgb(var(--magenta-rgb) / .38);
}

.nav a,
.header-quick-chip,
.chip,
.filter-label,
.section-eyebrow,
.hero-eyebrow,
.brand-name-en {
  letter-spacing: .18em !important;
}

.hero {
  background:
    radial-gradient(820px 520px at 68% 36%, rgb(var(--magenta-rgb) / .18), transparent 62%),
    linear-gradient(135deg, #07070b, #101018 58%, #07070b) !important;
}

.hero-vignette {
  background:
    linear-gradient(90deg, rgba(7,7,11,.9), rgba(7,7,11,.58) 42%, rgba(7,7,11,.18)),
    linear-gradient(180deg, rgba(7,7,11,.55), transparent 42%, rgba(7,7,11,.88)) !important;
}

.hero-title {
  font-weight: 700 !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.hero-sub,
.section-sub,
.banner-sub,
.footer-mission,
p {
  color: var(--hj-muted);
}

.btn-magenta,
.header-cta,
.banner-cta,
.footer-cta-btn,
.card-cta {
  border: 1px solid rgba(248, 168, 211, .46) !important;
  background: linear-gradient(135deg, var(--magenta-deep) 0%, var(--magenta) 52%, #f8a8d3 100%) !important;
  box-shadow: 0 12px 34px rgb(var(--magenta-rgb) / .24), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.btn-magenta:hover,
.header-cta:hover,
.banner-cta:hover,
.footer-cta-btn:hover,
.card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgb(var(--magenta-rgb) / .34), 0 0 0 1px rgba(248,168,211,.26) !important;
}

.btn-line,
.banner-cta-line,
.footer-cta-line,
.chip,
.header-quick-chip {
  border-color: var(--hj-line-strong) !important;
  background: rgba(255,255,255,.035) !important;
}

.btn-line:hover,
.banner-cta-line:hover,
.footer-cta-line:hover,
.chip:hover,
.chip.active,
.header-quick-chip:hover {
  border-color: rgba(248, 168, 211, .64) !important;
  color: var(--hj-pink-soft) !important;
  background: rgb(var(--magenta-rgb) / .08) !important;
  box-shadow: 0 0 28px rgb(var(--magenta-rgb) / .12);
}

.card,
.panel,
.banner,
.footer,
.sidebar,
.table-wrap,
.member-card,
.product-card,
.announcement-card,
.booking-card,
.profile-card,
.voucher-card {
  border-color: var(--hj-line) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.024)) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 72px rgba(0,0,0,.34);
}

.card:hover,
.member-card:hover,
.product-card:hover,
.announcement-card:hover,
.voucher-card:hover {
  border-color: rgba(248,168,211,.34) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.42), 0 0 34px rgb(var(--magenta-rgb) / .1);
}

.tag-pill,
.tag-line,
.perk,
.badge {
  border-color: rgba(248,168,211,.26) !important;
  background: rgb(var(--magenta-rgb) / .07) !important;
  color: rgba(247,241,246,.86) !important;
}

.tag-vip,
.tag-hot,
.perk-promo {
  color: var(--hj-gold) !important;
  border-color: rgba(215,183,106,.46) !important;
  background: rgba(215,183,106,.08) !important;
}

.hj-copy-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--hj-line);
  background: rgb(var(--magenta-rgb) / .055);
  color: rgba(247,241,246,.86);
}

.hj-copy-strip strong {
  color: var(--hj-pink-soft);
  font-family: var(--hj-serif);
  font-size: 18px;
  font-weight: 700;
}

.hj-copy-strip span {
  color: var(--hj-muted);
  font-size: 13px;
}

.hj-copy-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(248,168,211,.36);
  color: var(--hj-text);
  text-decoration: none;
  font-size: 13px;
}

@media (max-width: 760px) {
  .hj-copy-strip {
    grid-template-columns: 1fr;
    padding: 12px 18px;
  }

  .hero-title {
    font-size: clamp(42px, 11vw, 72px) !important;
  }
}

/* Campaign media upgrade: new original-style ad artwork and backgrounds. */
html {
  background: #050506 !important;
}

body {
  background:
    linear-gradient(180deg, rgba(5,5,6,.38), rgba(5,5,6,.84)),
    url("./media/site-ambient.svg") center top / cover fixed no-repeat !important;
}

body::before {
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(255,248,220,.34) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 41%, rgba(215,183,106,.12) 41.05% 41.16%, transparent 41.28%),
    linear-gradient(70deg, transparent 0 58%, rgb(var(--magenta-rgb) / .08) 58.05% 58.14%, transparent 58.26%);
  background-size: 132px 132px, 100% 100%, 100% 100%;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: auto !important;
  cursor: pointer !important;
  background:
    radial-gradient(420px 260px at 82% 18%, rgba(215,183,106,.12), transparent 68%),
    radial-gradient(520px 300px at 76% 52%, rgb(var(--magenta-rgb) / .12), transparent 70%);
  mix-blend-mode: screen;
  opacity: .78;
  animation: hj-ambient-drift 11s ease-in-out infinite alternate;
}

@keyframes hj-ambient-drift {
  from { transform: translate3d(-10px, -8px, 0) scale(1); opacity: .58; }
  to { transform: translate3d(12px, 10px, 0) scale(1.025); opacity: .86; }
}

.hero {
  isolation: isolate;
  background: #050506 !important;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hj-hero-art, url("./media/hero-bg.svg"));
  background-position: center center;
  background-size: cover;
  opacity: .98;
  transform: scale(1.02);
  animation: hj-hero-cinema 18s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(560px 360px at 70% 42%, rgba(255,232,166,.14), transparent 70%),
    linear-gradient(115deg, transparent 0 58%, rgba(255,232,166,.18) 58.06% 58.2%, transparent 58.32%);
  mix-blend-mode: screen;
  opacity: .7;
}

@keyframes hj-hero-cinema {
  from { transform: scale(1.02) translate3d(-10px, 0, 0); filter: saturate(1.02) contrast(1.02); }
  to { transform: scale(1.085) translate3d(12px, -8px, 0); filter: saturate(1.16) contrast(1.08); }
}

.hero-video {
  display: none !important;
}

.hero-vignette {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.72) 34%, rgba(5,5,6,.18) 78%, rgba(5,5,6,.08) 100%),
    linear-gradient(180deg, rgba(5,5,6,.48) 0%, transparent 44%, rgba(5,5,6,.92) 100%) !important;
}

.hero-grain {
  z-index: 2 !important;
  opacity: .12 !important;
}

.heroA-stage {
  text-shadow: 0 18px 54px rgba(0,0,0,.68);
}

.heroA-stage .hero-title {
  max-width: 950px;
  letter-spacing: .015em !important;
}

.heroA-stage .hero-title em {
  background: linear-gradient(135deg, #ffe8a6 0%, #f8a8d3 50%, #d7b76a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

.hero-eyebrow {
  color: var(--hj-gold) !important;
}

.hero-eyebrow::before {
  background: var(--hj-gold) !important;
  box-shadow: 0 0 12px rgba(215,183,106,.76) !important;
}

.hero-sub {
  color: rgba(247,241,246,.74) !important;
}

.hero-carousel {
  background:
    linear-gradient(180deg, rgba(5,5,6,.92), rgba(10,8,12,.98)),
    url("./media/site-ambient.svg") center / cover no-repeat !important;
}

.slide-bg {
  filter: contrast(1.1) saturate(1.08) brightness(.9) !important;
}

.slide:nth-child(1) .slide-bg { background-image: url("./media/ad-reserve.svg") !important; }
.slide:nth-child(2) .slide-bg { background-image: url("./media/ad-vip.svg") !important; }
.slide:nth-child(3) .slide-bg { background-image: url("./media/ad-newcast.svg") !important; }
.slide:nth-child(4) .slide-bg { background-image: url("./media/ad-weekly.svg") !important; }

.slide::after {
  background:
    linear-gradient(90deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.7) 44%, rgba(5,5,6,.12) 82%, rgba(5,5,6,.04) 100%),
    linear-gradient(180deg, rgba(5,5,6,.2), rgba(5,5,6,.7)) !important;
}

.slide-tag,
.banner-eyebrow {
  color: var(--hj-gold) !important;
  border-color: rgba(215,183,106,.44) !important;
  background: rgba(7,7,11,.58) !important;
}

.slide-tag::before {
  background: var(--hj-gold) !important;
  box-shadow: 0 0 10px rgba(215,183,106,.7) !important;
}

.slide-title em,
.banner-title em {
  background: linear-gradient(135deg, #fff1bf 0%, #d7b76a 44%, #f8a8d3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
  padding: 0.04em 0.12em 0.08em 0.02em !important;
  margin-right: -0.06em !important;
  letter-spacing: -.025em !important;
  text-shadow: none !important;
}

.banner {
  background:
    linear-gradient(135deg, #0a0507 0%, #260915 52%, #090708 100%) !important;
}

.banner::before {
  background-image: var(--hj-banner-art, url("./media/banner-reward.svg")) !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: .86 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.56) 50%, rgba(5,5,6,.12) 100%),
    radial-gradient(520px 320px at 76% 44%, rgba(255,232,166,.16), transparent 70%);
}

.banner > * {
  z-index: 1;
}

.banner-title {
  text-shadow: 0 18px 52px rgba(0,0,0,.62);
}

.banner-countdown {
  border-color: rgba(215,183,106,.32) !important;
  background: rgba(7,7,11,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 40px rgba(0,0,0,.24);
}

.countdown-cell {
  background: rgba(215,183,106,.12) !important;
  border: 1px solid rgba(215,183,106,.18);
}

.hero-image {
  background-image: var(--hj-hero-art, url("./media/hero-bg.svg")) !important;
}

.hj-copy-strip {
  background:
    linear-gradient(90deg, rgba(215,183,106,.11), rgb(var(--magenta-rgb) / .06), rgba(7,7,11,.72)) !important;
  border-bottom-color: rgba(215,183,106,.18) !important;
}

.hj-copy-strip strong {
  color: #ffe8a6 !important;
}

@media (max-width: 900px) {
  body { background-attachment: scroll !important; }

  .hero::before {
    background-position: 66% center;
    opacity: .92;
  }

  .hero::after {
    opacity: .46;
  }

  .slide-bg {
    background-position: 68% center !important;
  }

  .banner::before {
    background-position: 70% center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .hero::before {
    animation: none !important;
  }
}

/* JKFace-inspired product UX pass: keep HuaJia identity, improve scan speed and conversion. */
:root {
  --hj-jk-bg: #121212;
  --hj-jk-card: #171717;
  --hj-jk-card-2: #1f1f1f;
  --hj-jk-text: #fafafa;
  --hj-jk-sub: rgba(250,250,250,.68);
  --hj-jk-line: rgba(255,255,255,.14);
  --hj-jk-hot: var(--magenta);
  --hj-jk-hot-2: var(--magenta-2);
  --hj-jk-chip: #333;
  --hj-serif: "Noto Serif TC", "ZCOOL XiaoWei", "Noto Sans TC", serif;
  --hj-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Noto Sans TC", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  font-family: var(--hj-sans) !important;
  background-color: var(--hj-jk-bg) !important;
}

body {
  background:
    radial-gradient(820px 440px at 72% 12%, rgba(228,59,215,.13), transparent 62%),
    radial-gradient(760px 460px at 15% 6%, rgba(255,79,191,.08), transparent 58%),
    #121212 !important;
}

.header,
.navbar,
.topbar {
  min-height: 56px;
  background: rgba(18,18,18,.96) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

.brand-name-zh,
.footer-brand-zh {
  font-family: var(--display-zh, 'Noto Serif TC', serif) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.brand-name-zh em,
.footer-brand-zh em {
  color: var(--hj-jk-hot) !important;
  text-shadow: 0 0 18px rgba(228,59,215,.42) !important;
}

.nav a,
.header-quick-chip,
.header-live-label,
.slide-tag,
.banner-eyebrow,
.filter-label,
.brand-name-en {
  font-family: var(--hj-sans) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
/* section-eyebrow 升級為 Cinzel 金色 spaced caps（不再混在 sans 群組） */
.section-eyebrow {
  font-family: var(--display-latin, 'Cinzel', serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: var(--gold, #c89f4a) !important;
}

.nav a.active::after,
.progress-bar::after,
.chip.active::after {
  background: var(--hj-jk-hot) !important;
  box-shadow: 0 0 10px rgba(228,59,215,.72) !important;
}

.header-cta,
.btn-magenta,
.slide-cta,
.banner-cta,
.footer-cta-btn,
.card-cta {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #d92fd1 0%, #ff4fbf 100%) !important;
  box-shadow: 0 12px 30px rgba(228,59,215,.3) !important;
  font-family: var(--hj-sans) !important;
  font-weight: 900 !important;
}

.header-cta:hover,
.btn-magenta:hover,
.slide-cta:hover,
.banner-cta:hover,
.footer-cta-btn:hover,
.card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(228,59,215,.44) !important;
}

.btn-line,
.banner-cta-line,
.footer-cta-line {
  border-color: rgba(255,255,255,.86) !important;
  color: #fff !important;
  background: rgba(18,18,18,.42) !important;
  font-weight: 800 !important;
}

.hero {
  min-height: 64vh !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.heroA-stage {
  min-height: 64vh !important;
  padding-top: 48px !important;
  padding-bottom: 52px !important;
}

.heroA-stage .hero-title {
  font-family: var(--hj-sans) !important;
  font-weight: 950 !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  max-width: 820px;
}

.heroA-stage .hero-title em {
  background: linear-gradient(135deg, #fff 0%, #ff7bd0 42%, #e43bd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-sub {
  max-width: 560px !important;
  color: rgba(250,250,250,.76) !important;
  font-weight: 600;
}

.hj-copy-strip {
  grid-template-columns: 1fr auto;
  padding: 10px 40px !important;
  background: #191919 !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}

.hj-copy-strip strong {
  font-family: var(--hj-sans) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.hj-copy-strip span {
  color: rgba(250,250,250,.62) !important;
  font-weight: 600;
}

.hj-copy-strip a {
  background: linear-gradient(135deg, #d92fd1, #ff4fbf);
  border: 0 !important;
  font-weight: 900;
}

.hero-carousel {
  height: 430px !important;
  padding: 22px 40px 58px;
  border-bottom-color: rgba(255,255,255,.12) !important;
  background: #121212 !important;
}

.carousel-track {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
}

.slide-content {
  padding: 48px 58px 72px !important;
}

.slide-tag {
  color: #fff !important;
  border: 0 !important;
  background: rgba(228,59,215,.92) !important;
  border-radius: 999px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
}

.slide-title,
.section-title,
.banner-title {
  font-family: var(--display-zh, 'Noto Serif TC', 'Songti TC', serif) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

.slide-title em,
.section-title em,
.banner-title em {
  font-style: normal !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--magenta, #ec4899) !important;
  text-shadow: 0 0 32px rgb(var(--magenta-rgb, 236 72 153) / 0.42) !important;
}

.counter {
  top: 34px !important;
  right: 58px !important;
  border: 0 !important;
  background: rgba(18,18,18,.68) !important;
  font-weight: 900;
}

.carousel-controls {
  left: 40px !important;
  right: 40px !important;
  bottom: 20px !important;
}

.dot {
  height: 5px !important;
  border-radius: 999px;
  background: rgba(255,255,255,.18) !important;
}

.dot::after {
  background: var(--hj-jk-hot) !important;
}

.hj-jk-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: 18px;
  padding: 30px 40px 24px;
  background: #121212;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.hj-jk-rail-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(250,250,250,.78);
  text-decoration: none;
  transition: transform .2s ease, color .2s ease;
}

.hj-jk-rail-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.72);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), rgba(255,255,255,.04) 48%, rgba(0,0,0,.18));
  font-size: 27px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.hj-jk-rail-item strong {
  font-size: 14px;
  font-weight: 950;
  color: #fff;
}

.hj-jk-rail-item small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(250,250,250,.46);
}

.hj-jk-rail-item.active .hj-jk-rail-icon,
.hj-jk-rail-item:hover .hj-jk-rail-icon {
  border-color: var(--hj-jk-hot);
  box-shadow: 0 0 0 4px rgba(228,59,215,.1), 0 10px 28px rgba(228,59,215,.24);
}

.hj-jk-rail-item.active strong,
.hj-jk-rail-item:hover strong {
  color: var(--hj-jk-hot-2);
}

.hj-jk-rail-item:hover {
  transform: translateY(-3px);
}

.section {
  padding: 54px 40px 36px !important;
  background: #121212 !important;
}

.section-head {
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding-bottom: 22px !important;
  border-bottom: 0 !important;
}

.section-num-big {
  display: none !important;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px !important;
  font-family: var(--display-latin, 'Cinzel', serif) !important;
  color: var(--gold, #c89f4a) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold, #c89f4a);
}

.section-title {
  font-size: clamp(30px, 3vw, 44px) !important;
}

.section-sub {
  font-weight: 700;
}

.section-live {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.13) !important;
}

.section-link {
  border: 0 !important;
  background: linear-gradient(135deg, #d92fd1, #ff4fbf) !important;
  color: #fff !important;
  font-family: var(--hj-sans) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.filters {
  border: 0 !important;
  gap: 10px !important;
  margin-bottom: 26px !important;
  padding-bottom: 0 !important;
}

.filter-group {
  gap: 10px !important;
  padding: 0 !important;
}

.filter-group:not(:last-child) {
  border-right: 0 !important;
  margin-right: 12px !important;
  padding-right: 12px !important;
}

.filter-label {
  display: none !important;
}

.chip,
.tag-line,
.tag-pill,
.perk {
  border: 0 !important;
  border-radius: 6px !important;
  background: #333 !important;
  color: rgba(250,250,250,.86) !important;
  font-family: var(--hj-sans) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.chip {
  padding: 8px 13px !important;
  font-size: 13px !important;
}

.chip.active,
.tag-hot,
.tag-stock,
.tag-prem {
  background: linear-gradient(135deg, #d92fd1, #ff4fbf) !important;
  color: #fff !important;
}

.grid {
  gap: 24px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 16px !important;
  background: #171717 !important;
  box-shadow: none !important;
}

.card::before {
  content: "🔥 超級熱門";
  position: absolute;
  right: 18px;
  top: calc(min(100vw, 1440px) * .198);
  z-index: 4;
  padding: 8px 13px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #d92fd1, #ff4fbf);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(228,59,215,.28);
}

.card-img {
  aspect-ratio: 16 / 9 !important;
  background: #222 !important;
}

.card-img::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.74) 100%) !important;
}

.card-body {
  padding: 18px !important;
}

.card-name {
  font-family: var(--hj-sans) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}

.card-name em {
  color: rgba(250,250,250,.52) !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.card-rating {
  color: #fff !important;
  font-weight: 950 !important;
}

.card-meta {
  color: rgba(250,250,250,.68) !important;
  font-weight: 700;
  line-height: 1.55 !important;
}

.card-stats {
  border-bottom-color: rgba(255,255,255,.12) !important;
  color: rgba(250,250,250,.56) !important;
}

.card-foot {
  gap: 12px;
  border-top-color: rgba(255,255,255,.12) !important;
}

.card-price {
  font-family: var(--hj-sans) !important;
  color: #fff !important;
  font-weight: 950 !important;
}

.card-cta {
  min-width: 122px;
  text-align: center;
  justify-content: center;
}

.banner,
.footer {
  border-color: rgba(255,255,255,.12) !important;
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hj-jk-rail { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
}

@media (max-width: 900px) {
  .hj-copy-strip { padding: 10px 16px !important; }
  .hero { min-height: 56vh !important; }
  .heroA-stage { min-height: 56vh !important; padding: 30px 18px 42px !important; }
  .heroA-stage .hero-title { font-size: clamp(42px, 13vw, 72px) !important; }
  .hero-carousel { height: 360px !important; padding: 14px 14px 50px !important; }
  .slide-content { padding: 32px 20px 66px !important; }
  .hj-jk-rail { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; overflow: visible !important; padding: 14px 6px !important; gap: 2px !important; }
  .hj-jk-rail-item { padding: 8px 2px !important; min-width: 0 !important; gap: 4px !important; overflow: hidden !important; }
  .hj-jk-rail-icon { width: 38px !important; height: 38px !important; font-size: 15px !important; margin-bottom: 0 !important; }
  .hj-jk-rail-item strong { font-size: 10.5px !important; letter-spacing: 0 !important; line-height: 1.1 !important; text-align: center; max-width: 100%; overflow: hidden; }
  .hj-jk-rail-item small { display: none !important; }
  .section { padding: 38px 16px 24px !important; }
  .section-head { grid-template-columns: 1fr !important; }
  .grid { gap: 12px !important; }
  .card::before { display: none; }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card { border-radius: 12px !important; }
  .card-img { aspect-ratio: 4 / 5 !important; }
  .card-body { padding: 11px !important; }
  .card-name { font-size: 16px !important; }
  .card-meta { font-size: 11px !important; }
  .card-foot { flex-direction: column; align-items: stretch; }
  .card-cta { width: 100%; min-width: 0; }
}

/* Brand wordmark: HuaJia keeps the calligraphy / brush identity. */
.brand-name-zh,
.footer-brand-zh,
.sidebar-head .brand-name-zh,
.sidebar-head .brand-name {
  font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif TC", cursive !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  transform: translateY(1px);
}

.brand-name-zh {
  font-size: 34px !important;
}

.footer-brand-zh {
  font-size: 52px !important;
}

.brand-name-zh em,
.footer-brand-zh em {
  font-style: normal !important;
  color: var(--hj-jk-hot-2) !important;
  text-shadow: 0 0 18px rgba(255,79,191,.48) !important;
}

/* Ice butterfly palette: keep brush logo, shift the product UI away from magenta into midnight blue. */
:root {
  --hj-jk-bg: #050813;
  --hj-jk-card: rgba(8, 14, 28, .92);
  --hj-jk-card-2: rgba(12, 22, 42, .92);
  --hj-jk-text: #f7f1f6;
  --hj-jk-sub: rgba(247, 241, 246, .72);
  --hj-jk-line: rgba(157, 218, 255, .2);
  --hj-jk-hot: var(--magenta);
  --hj-jk-hot-2: var(--magenta-2);
  --hj-jk-chip: rgba(148, 202, 255, .12);
  --hj-ice-deep: #02040b;
  --hj-ice-panel: rgba(7, 13, 27, .78);
  --hj-ice-blue: var(--magenta);
  --hj-ice-cyan: var(--magenta-2);
  --hj-ice-white: #f7f1f6;
}

html,
body {
  color: var(--hj-ice-white) !important;
  background-color: var(--hj-ice-deep) !important;
}

body {
  background:
    radial-gradient(760px 420px at 78% 12%, rgb(var(--magenta-rgb) / .16), transparent 62%),
    radial-gradient(680px 460px at 18% 7%, rgba(30,64,175,.22), transparent 60%),
    linear-gradient(180deg, #02040b 0%, #07101f 44%, #02040b 100%) !important;
}

body::before {
  opacity: .24 !important;
  background-image:
    radial-gradient(circle, rgba(247,241,246,.42) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 41%, rgb(var(--magenta-2-rgb) / .12) 41.05% 41.16%, transparent 41.28%) !important;
}

body::after {
  background:
    radial-gradient(480px 300px at 82% 22%, rgb(var(--magenta-rgb) / .22), transparent 68%),
    radial-gradient(560px 320px at 72% 54%, rgb(var(--magenta-2-rgb) / .16), transparent 72%) !important;
}

.header,
.navbar,
.topbar,
.admin-topbar,
.bottom-nav {
  background: rgba(2, 4, 11, .92) !important;
  border-color: rgb(var(--magenta-2-rgb) / .14) !important;
  box-shadow: 0 14px 46px rgba(0,0,0,.34), inset 0 -1px 0 rgb(var(--magenta-2-rgb) / .08) !important;
}

.brand-name-zh,
.footer-brand-zh,
.sidebar-head .brand-name-zh,
.sidebar-head .brand-name {
  font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif TC", cursive !important;
  color: var(--hj-ice-white) !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
}

.brand-name-zh em,
.footer-brand-zh em {
  color: var(--hj-ice-cyan) !important;
  text-shadow: 0 0 18px rgb(var(--magenta-2-rgb) / .72), 0 0 34px rgb(var(--magenta-rgb) / .36) !important;
}

.nav a.active,
.nav a:hover,
.header-live-feed strong,
.header-stat strong,
.hero-eyebrow,
.section-eyebrow,
.footer h5,
.chip.active,
.card-rating .star {
  color: var(--hj-ice-cyan) !important;
}

.nav a.active::after,
.progress-bar::after,
.chip.active::after {
  background: var(--hj-ice-cyan) !important;
  box-shadow: 0 0 12px rgb(var(--magenta-2-rgb) / .8) !important;
}

.header-cta,
.btn-magenta,
.slide-cta,
.banner-cta,
.footer-cta-btn,
.card-cta,
.section-link,
.hj-copy-strip a,
.chip.active,
.tag-hot,
.tag-stock,
.tag-prem {
  color: #2a0511 !important;
  background: linear-gradient(135deg, #f8e1ec 0%, var(--magenta-2) 46%, var(--magenta) 100%) !important;
  box-shadow: 0 12px 32px rgb(var(--magenta-rgb) / .28), 0 0 0 1px rgba(248,225,236,.22) inset !important;
  text-shadow: none !important;
}

.btn-line,
.banner-cta-line,
.footer-cta-line,
.header-quick-chip {
  border-color: rgb(var(--magenta-2-rgb) / .34) !important;
  color: var(--hj-ice-white) !important;
  background: rgba(7,13,27,.48) !important;
}

.btn-line:hover,
.banner-cta-line:hover,
.footer-cta-line:hover,
.header-quick-chip:hover {
  border-color: var(--hj-ice-cyan) !important;
  color: var(--hj-ice-cyan) !important;
  background: rgb(var(--magenta-rgb) / .1) !important;
}

.hero::before {
  background-image: var(--hj-hero-art, url("./media/ice-butterfly-hero.svg")) !important;
  background-position: center center !important;
  opacity: .96 !important;
}

.hero::after {
  background:
    radial-gradient(600px 380px at 71% 47%, rgb(var(--magenta-2-rgb) / .2), transparent 72%),
    linear-gradient(115deg, transparent 0 58%, rgb(var(--magenta-2-rgb) / .16) 58.06% 58.2%, transparent 58.32%) !important;
}

.hero-vignette {
  background:
    linear-gradient(90deg, rgba(2,4,11,.96) 0%, rgba(2,4,11,.75) 35%, rgba(2,4,11,.12) 82%),
    linear-gradient(180deg, rgba(2,4,11,.52) 0%, transparent 46%, rgba(2,4,11,.94) 100%) !important;
}

.heroA-stage .hero-title em,
.slide-title em,
.section-title em,
.banner-title em {
  background: linear-gradient(135deg, #f7f1f6 0%, var(--magenta-2) 44%, var(--magenta) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  display: inline-block !important;
  padding: 0.04em 0.12em 0.08em 0.02em !important;
  margin-right: -0.06em !important;
  letter-spacing: -.025em !important;
}

.hero-sub,
.section-sub,
.slide-sub,
.banner-sub,
.footer-mission,
p {
  color: rgba(247,241,246,.74) !important;
}

.hj-copy-strip,
.hj-jk-rail,
.hero-carousel,
.section,
.footer {
  background: rgba(2,4,11,.94) !important;
  border-color: rgb(var(--magenta-2-rgb) / .14) !important;
}

.hj-copy-strip {
  background: linear-gradient(90deg, rgb(var(--magenta-rgb) / .13), rgba(8,14,28,.88)) !important;
}

.hj-copy-strip strong {
  color: var(--hj-ice-white) !important;
}

.carousel-track,
.card,
.banner,
.sidebar,
.panel,
.member-card,
.product-card,
.booking-card,
.profile-card,
.voucher-card {
  background: linear-gradient(145deg, rgba(9,18,36,.9), rgba(4,8,18,.94)) !important;
  border-color: rgb(var(--magenta-2-rgb) / .2) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.44), 0 0 26px rgb(var(--magenta-rgb) / .08) !important;
}

.card:hover,
.member-card:hover,
.product-card:hover,
.voucher-card:hover {
  border-color: rgb(var(--magenta-2-rgb) / .42) !important;
  box-shadow: 0 28px 88px rgba(0,0,0,.52), 0 0 34px rgb(var(--magenta-rgb) / .16) !important;
}

.slide-tag,
.banner-eyebrow,
.tag-line,
.tag-pill,
.perk,
.badge,
.chip {
  background: rgb(var(--magenta-2-rgb) / .12) !important;
  border: 1px solid rgb(var(--magenta-2-rgb) / .18) !important;
  color: rgba(247,241,246,.88) !important;
}

.hj-jk-rail-icon {
  border-color: rgb(var(--magenta-2-rgb) / .72) !important;
  background: radial-gradient(circle at 35% 28%, rgba(224,250,255,.24), rgb(var(--magenta-rgb) / .1) 48%, rgba(2,4,11,.5)) !important;
  box-shadow: inset 0 0 0 1px rgba(224,250,255,.08), 0 0 24px rgb(var(--magenta-rgb) / .08) !important;
}

.hj-jk-rail-item.active .hj-jk-rail-icon,
.hj-jk-rail-item:hover .hj-jk-rail-icon {
  border-color: var(--hj-ice-cyan) !important;
  box-shadow: 0 0 0 4px rgb(var(--magenta-rgb) / .1), 0 10px 30px rgb(var(--magenta-rgb) / .24) !important;
}

.hj-jk-rail-item.active strong,
.hj-jk-rail-item:hover strong,
.card-price,
.card-name em {
  color: var(--hj-ice-cyan) !important;
}

.banner::before {
  background-image: var(--hj-banner-art, url("./media/ice-butterfly-hero.svg")) !important;
  opacity: .5 !important;
}

.banner::after {
  background:
    linear-gradient(90deg, rgba(2,4,11,.92) 0%, rgba(2,4,11,.6) 54%, rgba(2,4,11,.22) 100%),
    radial-gradient(520px 320px at 76% 44%, rgb(var(--magenta-rgb) / .18), transparent 70%) !important;
}

@media (max-width: 900px) {
  .hero::before {
    background-position: 68% center !important;
  }
}

/* Replace the JKFace-like round quick icons with a quieter editorial category strip. */
.hj-jk-rail {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 40px !important;
  min-height: 72px;
  align-items: stretch;
  overflow-x: auto;
  background: rgba(2, 4, 11, .92) !important;
  border-top: 1px solid rgb(var(--magenta-2-rgb) / .1);
  border-bottom: 1px solid rgb(var(--magenta-2-rgb) / .14) !important;
  scrollbar-width: none;
}

.hj-jk-rail::-webkit-scrollbar {
  display: none;
}

.hj-jk-rail-item {
  position: relative;
  flex: 0 0 auto;
  min-width: 138px;
  padding: 16px 24px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  border-right: 1px solid rgb(var(--magenta-2-rgb) / .12);
  color: rgba(247,241,246,.72) !important;
  transform: none !important;
}

.hj-jk-rail-item:first-child {
  border-left: 1px solid rgb(var(--magenta-2-rgb) / .12);
}

.hj-jk-rail-icon {
  display: none !important;
}

.hj-jk-rail-item small {
  order: 1;
  color: rgb(var(--magenta-2-rgb) / .52) !important;
  font-size: 9px !important;
  line-height: 1;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.hj-jk-rail-item strong {
  order: 2;
  color: rgba(247,241,246,.9) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
}

.hj-jk-rail-item::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hj-ice-cyan), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .22s ease, transform .22s ease;
}

.hj-jk-rail-item.active,
.hj-jk-rail-item:hover {
  background: linear-gradient(180deg, rgb(var(--magenta-rgb) / .08), rgb(var(--magenta-rgb) / .02));
}

.hj-jk-rail-item.active strong,
.hj-jk-rail-item:hover strong {
  color: var(--hj-ice-cyan) !important;
}

.hj-jk-rail-item.active::after,
.hj-jk-rail-item:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .hj-jk-rail {
    min-height: 58px;
    padding: 0 14px !important;
  }

  .hj-jk-rail-item {
    min-width: 112px;
    padding: 12px 16px 10px !important;
  }

  .hj-jk-rail-item:first-child {
    border-left: 0;
  }

  .hj-jk-rail-item strong {
    font-size: 13px !important;
  }

  .hj-jk-rail-item small {
    font-size: 8px !important;
  }

  .hj-jk-rail-item::after {
    left: 16px;
    right: 16px;
  }
}

/* Final brand/font + mobile nav correction requested by owner. */
.brand-name-zh,
.footer-brand-zh,
.sidebar-head .brand-name-zh,
.auth-stage-brand-zh {
  font-family: "ZCOOL XiaoWei", "Noto Serif TC Local", "Noto Serif TC", "PMingLiU", "Songti TC", serif !important;
  font-weight: 400 !important;
  letter-spacing: .045em !important;
  line-height: 1 !important;
  transform: none !important;
}

.brand-name-zh em,
.footer-brand-zh em,
.auth-stage-brand-zh em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--hj-ice-cyan) !important;
  text-shadow: 0 0 16px rgb(var(--magenta-2-rgb) / .62), 0 0 30px rgb(var(--magenta-rgb) / .28) !important;
}

.brand-name-zh {
  font-size: 31px !important;
}

.footer-brand-zh {
  font-size: 48px !important;
}

.sidebar-head .brand-name-zh,
.auth-stage-brand-zh {
  font-size: 30px !important;
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: 74px !important;
    z-index: 999 !important;
    align-items: center !important;
    padding: 0 10px calc(env(safe-area-inset-bottom, 0px) * .5) !important;
    border: 1px solid rgb(var(--magenta-2-rgb) / .22) !important;
    border-radius: 18px !important;
    background: rgba(2, 4, 11, .88) !important;
    box-shadow: 0 -10px 36px rgba(0,0,0,.52), 0 0 28px rgb(var(--magenta-rgb) / .1), inset 0 1px 0 rgba(247,241,246,.08) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
  }

  .bottom-nav::before {
    background: linear-gradient(90deg, transparent, rgb(var(--magenta-2-rgb) / .9), transparent) !important;
  }

  .bnav-item {
    min-width: 0;
    color: rgba(247,241,246,.56) !important;
    font-family: var(--hj-sans) !important;
    font-weight: 700 !important;
  }

  .bnav-icon-wrap svg {
    stroke: currentColor !important;
  }

  .bnav-item.active,
  .bnav-item--center .bnav-label {
    color: var(--hj-ice-cyan) !important;
  }

  .bnav-item.active .bnav-icon-wrap svg {
    stroke: var(--hj-ice-cyan) !important;
    filter: drop-shadow(0 0 8px rgb(var(--magenta-2-rgb) / .56)) !important;
  }

  .bnav-item--center .bnav-icon-wrap {
    background: linear-gradient(135deg, #f8e1ec 0%, var(--magenta-2) 48%, var(--magenta) 100%) !important;
    box-shadow: 0 10px 30px rgb(var(--magenta-rgb) / .3), 0 0 0 6px rgb(var(--magenta-rgb) / .08) !important;
  }

  .bnav-item--center .bnav-icon-wrap svg {
    stroke: #2a0511 !important;
  }
}

/* Absolute ice-blue reset: remove remaining pink/gold warmth from earlier exploration layers. */
/* removed rogue ice-forced :root block — was overriding v6 magenta tokens with !important
   keeping vars wired to v6 tokens via the bridging block at end of file */

body {
  background:
    radial-gradient(900px 520px at 82% 8%, rgb(var(--magenta-rgb) / .22), transparent 62%),
    radial-gradient(760px 480px at 18% 5%, rgb(var(--magenta-deep-rgb) / .18), transparent 62%),
    linear-gradient(180deg, #050208 0%, #110a14 48%, #050208 100%) !important;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(247,241,246,.42) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 42%, rgb(var(--magenta-2-rgb) / .12) 42.06% 42.15%, transparent 42.28%) !important;
}

body::after {
  background:
    radial-gradient(520px 330px at 78% 18%, rgb(var(--magenta-rgb) / .18), transparent 68%),
    radial-gradient(620px 360px at 68% 58%, rgb(var(--magenta-2-rgb) / .13), transparent 70%) !important;
}

.hero,
.hero-carousel,
.section,
.footer,
.hj-jk-rail,
.hj-copy-strip,
.header,
.sidebar,
.bottom-nav {
  background-color: rgba(2,4,11,.94) !important;
}

.heroA-stage .hero-title em,
.hero-title em,
.slide-title em,
.section-title em,
.banner-title em,
.footer-mission em,
.brand-name-zh em,
.footer-brand-zh em,
.auth-stage-brand-zh em {
  background: linear-gradient(135deg, #f7f1f6 0%, var(--magenta-2) 48%, var(--magenta) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  display: inline-block !important;
  padding: 0.04em 0.12em 0.08em 0.02em !important;
  margin-right: -0.06em !important;
  letter-spacing: -.025em !important;
}

.brand-name-zh em,
.footer-brand-zh em,
.auth-stage-brand-zh em {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  background: none !important;
  color: var(--magenta-2) !important;
  text-shadow: 0 0 16px rgb(var(--magenta-2-rgb) / .62), 0 0 30px rgb(var(--magenta-rgb) / .28) !important;
}

.hero-eyebrow,
.section-eyebrow,
.slide-tag,
.banner-eyebrow,
.footer h5,
.nav a.active,
.nav a:hover,
.card-name em,
.card-price,
.hj-copy-strip strong,
.hj-jk-rail-item.active strong,
.hj-jk-rail-item:hover strong,
.bnav-item.active,
.bnav-item--center .bnav-label {
  color: var(--magenta-2) !important;
}

.hero-eyebrow::before,
.slide-tag::before,
.nav a.active::after,
.progress-bar::after,
.chip.active::after,
.online-status::before,
.section-live-dot,
.header-live-label::before,
.header-quick-dot,
.header-quick-pulse {
  background: var(--magenta-2) !important;
  box-shadow: 0 0 12px rgb(var(--magenta-2-rgb) / .78) !important;
}

.btn-magenta,
.header-cta,
.banner-cta,
.footer-cta-btn,
.card-cta,
.section-link,
.hj-copy-strip a,
.chip.active,
.tag-hot,
.tag-stock,
.tag-prem,
.bnav-item--center .bnav-icon-wrap {
  color: #02101d !important;
  background: linear-gradient(135deg, #f7f1f6 0%, var(--magenta-2) 45%, var(--magenta) 100%) !important;
  border-color: rgb(var(--magenta-2-rgb) / .42) !important;
  box-shadow: 0 12px 34px rgb(var(--magenta-rgb) / .26), inset 0 1px 0 rgba(247,241,246,.36) !important;
}

.btn-magenta:hover,
.header-cta:hover,
.banner-cta:hover,
.footer-cta-btn:hover,
.card-cta:hover,
.section-link:hover,
.hj-copy-strip a:hover {
  box-shadow: 0 18px 46px rgb(var(--magenta-rgb) / .36), 0 0 0 1px rgb(var(--magenta-2-rgb) / .3) !important;
}

.btn-line,
.banner-cta-line,
.footer-cta-line,
.header-quick-chip,
.chip,
.tag-line,
.tag-pill,
.perk,
.badge,
.countdown-cell,
.banner-countdown,
.section-live {
  color: rgba(247,241,246,.86) !important;
  border-color: rgb(var(--magenta-2-rgb) / .24) !important;
  background: rgb(var(--magenta-rgb) / .08) !important;
  box-shadow: none !important;
}

.card,
.carousel-track,
.banner,
.panel,
.member-card,
.product-card,
.announcement-card,
.booking-card,
.profile-card,
.voucher-card,
.auth-card,
.auth-stage {
  border-color: rgb(var(--magenta-2-rgb) / .2) !important;
  background:
    linear-gradient(145deg, rgba(9,18,36,.9), rgba(3,8,18,.96)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.44), 0 0 28px rgb(var(--magenta-rgb) / .08) !important;
}

.hj-copy-strip {
  background: linear-gradient(90deg, rgb(var(--magenta-rgb) / .14), rgba(7,13,27,.9), rgba(2,4,11,.94)) !important;
}

.hj-jk-rail-item.active,
.hj-jk-rail-item:hover {
  background: linear-gradient(180deg, rgb(var(--magenta-rgb) / .1), rgb(var(--magenta-rgb) / .025)) !important;
}

.hj-jk-rail-item::after,
.bottom-nav::before {
  background: linear-gradient(90deg, transparent, var(--magenta-2), transparent) !important;
}

.banner::after,
.hero-vignette {
  background:
    linear-gradient(90deg, rgba(2,4,11,.96) 0%, rgba(2,4,11,.74) 38%, rgba(2,4,11,.16) 82%, rgba(2,4,11,.08) 100%),
    linear-gradient(180deg, rgba(2,4,11,.5) 0%, transparent 45%, rgba(2,4,11,.94) 100%) !important;
}

/* Corrected ice overlay after color reset. */
.hero-vignette {
  background:
    linear-gradient(90deg, rgba(2,4,11,.96) 0%, rgba(2,4,11,.74) 38%, rgba(2,4,11,.16) 82%, rgba(2,4,11,.08) 100%),
    linear-gradient(180deg, rgba(2,4,11,.5) 0%, transparent 45%, rgba(2,4,11,.94) 100%) !important;
}

.banner::after {
  background:
    linear-gradient(90deg, rgba(2,4,11,.94) 0%, rgba(2,4,11,.68) 54%, rgba(2,4,11,.2) 100%),
    radial-gradient(520px 320px at 76% 44%, rgb(var(--magenta-rgb) / .2), transparent 70%) !important;
}

/* Status tags also use the ice-blue active treatment. */
.tag-pill.tag-hot,
.tag-pill.tag-stock,
.tag-pill.tag-prem,
.tag-line.tag-more,
.perk.perk-promo {
  color: #02101d !important;
  border-color: rgb(var(--magenta-2-rgb) / .42) !important;
  background: linear-gradient(135deg, #f7f1f6 0%, var(--magenta-2) 45%, var(--magenta) 100%) !important;
  box-shadow: 0 10px 26px rgb(var(--magenta-rgb) / .22), inset 0 1px 0 rgba(247,241,246,.34) !important;
}

/* Keep the bottom booking nav visible in the design preview at every viewport width. */
body {
  padding-bottom: max(96px, calc(86px + env(safe-area-inset-bottom, 0px))) !important;
}

.bottom-nav {
  display: flex !important;
  position: fixed !important;
  left: clamp(10px, 3vw, 28px) !important;
  right: clamp(10px, 3vw, 28px) !important;
  bottom: 10px !important;
  height: 74px !important;
  z-index: 9999 !important;
  align-items: center !important;
  padding: 0 10px calc(env(safe-area-inset-bottom, 0px) * .5) !important;
  border: 1px solid rgb(var(--magenta-2-rgb) / .24) !important;
  border-radius: 18px !important;
  background: rgba(2, 4, 11, .9) !important;
  box-shadow: 0 -10px 36px rgba(0,0,0,.52), 0 0 30px rgb(var(--magenta-rgb) / .12), inset 0 1px 0 rgba(247,241,246,.08) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
}

.bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgb(var(--magenta-2-rgb) / .9), transparent) !important;
}

.bnav-item {
  min-width: 0 !important;
  color: rgba(247,241,246,.58) !important;
  font-family: var(--hj-sans) !important;
  font-weight: 700 !important;
}

.bnav-icon-wrap svg {
  stroke: currentColor !important;
}

.bnav-item.active,
.bnav-item--center .bnav-label {
  color: var(--hj-ice-cyan) !important;
}

.bnav-item.active .bnav-icon-wrap svg {
  stroke: var(--hj-ice-cyan) !important;
  filter: drop-shadow(0 0 8px rgb(var(--magenta-2-rgb) / .56)) !important;
}

.bnav-item--center .bnav-icon-wrap {
  background: linear-gradient(135deg, #f7f1f6 0%, var(--magenta-2) 45%, var(--magenta) 100%) !important;
  box-shadow: 0 10px 30px rgb(var(--magenta-rgb) / .32), 0 0 0 6px rgb(var(--magenta-rgb) / .08) !important;
}

.bnav-item--center .bnav-icon-wrap svg {
  stroke: #02101d !important;
}

/* Use generated original raster carousel artwork instead of SVG placeholders. */
.slide:nth-child(1) .slide-bg { background-image: image-set(url("./generated/carousel-01-private-reserve-pink.avif") type("image/avif"), url("./generated/carousel-01-private-reserve-pink.webp") type("image/webp"), url("./generated/carousel-01-private-reserve-pink.png") type("image/png")) !important; }
.slide:nth-child(2) .slide-bg { background-image: image-set(url("./generated/carousel-02-vip-pink.avif") type("image/avif"), url("./generated/carousel-02-vip-pink.webp") type("image/webp"), url("./generated/carousel-02-vip-pink.png") type("image/png")) !important; }
.slide:nth-child(3) .slide-bg { background-image: image-set(url("./generated/carousel-03-new-arrival-pink.avif") type("image/avif"), url("./generated/carousel-03-new-arrival-pink.webp") type("image/webp"), url("./generated/carousel-03-new-arrival-pink.png") type("image/png")) !important; }
.slide:nth-child(4) .slide-bg { background-image: image-set(url("./generated/carousel-04-weekly-reward-pink.avif") type("image/avif"), url("./generated/carousel-04-weekly-reward-pink.webp") type("image/webp"), url("./generated/carousel-04-weekly-reward-pink.png") type("image/png")) !important; }
[data-theme="ice"] .slide:nth-child(1) .slide-bg, html[data-hj-theme="ice"] .slide:nth-child(1) .slide-bg { background-image: image-set(url("./generated/carousel-01-private-reserve.avif") type("image/avif"), url("./generated/carousel-01-private-reserve.webp") type("image/webp"), url("./generated/carousel-01-private-reserve.png") type("image/png")) !important; }
[data-theme="ice"] .slide:nth-child(2) .slide-bg, html[data-hj-theme="ice"] .slide:nth-child(2) .slide-bg { background-image: image-set(url("./generated/carousel-02-vip.avif") type("image/avif"), url("./generated/carousel-02-vip.webp") type("image/webp"), url("./generated/carousel-02-vip.png") type("image/png")) !important; }
[data-theme="ice"] .slide:nth-child(3) .slide-bg, html[data-hj-theme="ice"] .slide:nth-child(3) .slide-bg { background-image: image-set(url("./generated/carousel-03-new-arrival.avif") type("image/avif"), url("./generated/carousel-03-new-arrival.webp") type("image/webp"), url("./generated/carousel-03-new-arrival.png") type("image/png")) !important; }
[data-theme="ice"] .slide:nth-child(4) .slide-bg, html[data-hj-theme="ice"] .slide:nth-child(4) .slide-bg { background-image: image-set(url("./generated/carousel-04-weekly-reward.avif") type("image/avif"), url("./generated/carousel-04-weekly-reward.webp") type("image/webp"), url("./generated/carousel-04-weekly-reward.png") type("image/png")) !important; }

/* Make the carousel visibly multi-slide: stronger controls. */
.carousel-controls {
  padding: 8px 12px !important;
  border: 1px solid rgb(var(--magenta-2-rgb) / .22) !important;
  border-radius: 999px !important;
  background: rgba(2,4,11,.72) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}

.arrow {
  width: 44px !important;
  height: 44px !important;
  border-color: rgb(var(--magenta-2-rgb) / .42) !important;
  color: var(--magenta-2) !important;
  background: rgb(var(--magenta-rgb) / .1) !important;
  font-size: 18px !important;
}

.arrow:hover {
  color: #02101d !important;
  background: linear-gradient(135deg, #f7f1f6, var(--magenta-2) 50%, var(--magenta)) !important;
}

.counter {
  border-color: rgb(var(--magenta-2-rgb) / .28) !important;
  color: #f8e1ec !important;
  background: rgba(2,4,11,.76) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.32), 0 0 18px rgb(var(--magenta-rgb) / .12) !important;
}

.counter strong {
  color: var(--magenta-2) !important;
}

.dot {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgb(var(--magenta-2-rgb) / .22) !important;
}

.dot::after {
  background: linear-gradient(90deg, #f7f1f6, var(--magenta-2), var(--magenta)) !important;
}

/* Carousel artwork visibility fix: generated banners have clean left space, so pull art inward and lighten overlay. */
.hero-carousel {
  height: clamp(430px, 38vw, 560px) !important;
}

.slide-bg {
  opacity: 1 !important;
  filter: none !important;
  background-size: cover !important;
  background-position: 62% center !important;
  transform: scale(1.01) !important;
}

.slide.active .slide-bg {
  transform: scale(1.055) !important;
}

.slide::after {
  background:
    linear-gradient(90deg, rgba(2,4,11,.55) 0%, rgba(2,4,11,.22) 38%, rgba(2,4,11,0) 60%, rgba(2,4,11,0) 100%),
    linear-gradient(180deg, rgba(2,4,11,0) 0%, rgba(2,4,11,.05) 60%, rgba(2,4,11,.22) 100%) !important;
}

.slide-content {
  max-width: 560px !important;
}

@media (max-width: 900px) {
  .hero-carousel {
    height: clamp(520px, 100vw, 640px) !important;
    padding: 0 0 50px !important;
  }

  /* Image at top fills width, no crop; bottom area uses theme-tinted background */
  .slide-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: rgb(var(--magenta-deep-rgb) / .12) !important;
    filter: none !important;
  }

  /* Soft theme-tinted gradient blending image into text area — no harsh dark block */
  .slide::after {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 38%,
        rgb(var(--magenta-deep-rgb) / .35) 55%,
        rgb(var(--magenta-deep-rgb) / .55) 100%
      ) !important;
  }

  .slide-content {
    justify-content: flex-end !important;
    padding: 22px 18px 30px !important;
  }

  .slide-title {
    font-size: clamp(26px, 7.5vw, 40px) !important;
    line-height: 1.18 !important;
  }

  .slide-sub {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
  }

  .slide-tag {
    font-size: 9px !important;
    padding: 5px 11px !important;
    margin-bottom: 10px !important;
  }

  .slide-cta {
    margin-top: 12px !important;
    font-size: 12.5px !important;
    padding: 9px 16px !important;
  }

  .counter {
    top: 14px !important;
    bottom: auto !important;
    right: 14px !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.18em !important;
    background: rgba(10,10,10,0.5) !important;
    backdrop-filter: blur(8px) !important;
  }
}

/* Hard fix: render carousel images as real <img> elements so all 4 slides are visibly present. */
.slide {
  isolation: isolate;
}

.slide-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 8%;
  display: block;
  opacity: 1;
  filter: none;
  transform: scale(1.01);
  transition: transform 6s linear;
}

.slide.active .slide-art {
  transform: scale(1.055);
}

.slide-bg {
  display: none !important;
}

.slide::after {
  z-index: 1 !important;
}

.slide-content,
.counter,
.carousel-controls {
  z-index: 3 !important;
}

@media (max-width: 900px) {
  .slide-art {
    object-fit: contain !important;
    object-position: center top !important;
    filter: none !important;
    background-color: rgb(var(--magenta-deep-rgb) / .12) !important;
  }
}

/* Carousel stability pass: keep generated art above track glass backgrounds and shorten the empty transition moment. */
#heroCarousel .carousel-track {
  background: transparent !important;
  overflow: visible !important;
  transition-duration: .42s !important;
}

#heroCarousel .slide {
  background: #02040b !important;
}

#heroCarousel .slide-art {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

#heroCarousel .slide::after {
  z-index: 2 !important;
}

#heroCarousel .slide-content,
#heroCarousel .counter,
#heroCarousel .carousel-controls {
  z-index: 4 !important;
}

/* Final carousel fallback: paint each generated banner on the slide itself, not only on child layers. */
#heroCarousel .slide:nth-child(1) { background-image: image-set(url("./generated/carousel-01-private-reserve-pink.avif") type("image/avif"), url("./generated/carousel-01-private-reserve-pink.webp") type("image/webp"), url("./generated/carousel-01-private-reserve-pink.png") type("image/png")) !important; }
#heroCarousel .slide:nth-child(2) { background-image: image-set(url("./generated/carousel-02-vip-pink.avif") type("image/avif"), url("./generated/carousel-02-vip-pink.webp") type("image/webp"), url("./generated/carousel-02-vip-pink.png") type("image/png")) !important; }
#heroCarousel .slide:nth-child(3) { background-image: image-set(url("./generated/carousel-03-new-arrival-pink.avif") type("image/avif"), url("./generated/carousel-03-new-arrival-pink.webp") type("image/webp"), url("./generated/carousel-03-new-arrival-pink.png") type("image/png")) !important; }
#heroCarousel .slide:nth-child(4) { background-image: image-set(url("./generated/carousel-04-weekly-reward-pink.avif") type("image/avif"), url("./generated/carousel-04-weekly-reward-pink.webp") type("image/webp"), url("./generated/carousel-04-weekly-reward-pink.png") type("image/png")) !important; }
[data-theme="ice"] #heroCarousel .slide:nth-child(1), html[data-hj-theme="ice"] #heroCarousel .slide:nth-child(1) { background-image: image-set(url("./generated/carousel-01-private-reserve.avif") type("image/avif"), url("./generated/carousel-01-private-reserve.webp") type("image/webp"), url("./generated/carousel-01-private-reserve.png") type("image/png")) !important; }
[data-theme="ice"] #heroCarousel .slide:nth-child(2), html[data-hj-theme="ice"] #heroCarousel .slide:nth-child(2) { background-image: image-set(url("./generated/carousel-02-vip.avif") type("image/avif"), url("./generated/carousel-02-vip.webp") type("image/webp"), url("./generated/carousel-02-vip.png") type("image/png")) !important; }
[data-theme="ice"] #heroCarousel .slide:nth-child(3), html[data-hj-theme="ice"] #heroCarousel .slide:nth-child(3) { background-image: image-set(url("./generated/carousel-03-new-arrival.avif") type("image/avif"), url("./generated/carousel-03-new-arrival.webp") type("image/webp"), url("./generated/carousel-03-new-arrival.png") type("image/png")) !important; }
[data-theme="ice"] #heroCarousel .slide:nth-child(4), html[data-hj-theme="ice"] #heroCarousel .slide:nth-child(4) { background-image: image-set(url("./generated/carousel-04-weekly-reward.avif") type("image/avif"), url("./generated/carousel-04-weekly-reward.webp") type("image/webp"), url("./generated/carousel-04-weekly-reward.png") type("image/png")) !important; }

#heroCarousel .slide {
  background-color: #02040b !important;
  background-size: cover !important;
  background-position: 62% 8% !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 900px) {
  #heroCarousel .slide {
    background-position: center top !important;
    background-size: 100% auto !important;
    background-color: rgb(var(--magenta-deep-rgb) / .12) !important;
  }
}

/* Carousel viewport fix: each banner owns the full frame, so adjacent slides never peek in. */
#heroCarousel {
  padding: 0 !important;
  overflow: hidden !important;
}

#heroCarousel .carousel-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#heroCarousel .slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
}

#heroCarousel .slide-content {
  padding: 52px 56px 88px !important;
}

#heroCarousel .carousel-controls {
  left: 40px !important;
  right: 40px !important;
  bottom: 20px !important;
}

@media (max-width: 900px) {
  #heroCarousel .slide-content {
    padding: 34px 20px 78px !important;
  }

  #heroCarousel .carousel-controls {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* Featured cards: full-bleed poster cards like the reference. */
#featuredGrid {
  gap: 24px !important;
}

#featuredGrid .card {
  overflow: hidden !important;
  border: 1px solid rgb(var(--magenta-2-rgb) / .28) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(4,10,21,.98), rgba(2,5,12,.98)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.44), 0 0 28px rgb(var(--magenta-rgb) / .1) !important;
}

#featuredGrid .card-img {
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  background: #02040b !important;
  border-radius: 16px 16px 0 0 !important;
}

#featuredGrid .card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: none !important;
  filter: none !important;
}

#featuredGrid .card:hover .card-img img {
  transform: scale(1.025) !important;
  filter: none !important;
}

#featuredGrid .card-img::after {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(2,4,11,0) 78%, rgba(2,4,11,.18) 100%) !important;
}

#featuredGrid .card-num,
#featuredGrid .card-tag-row,
#featuredGrid .online-status {
  z-index: 3 !important;
}

#featuredGrid .card::before {
  top: auto !important;
  right: 18px !important;
  bottom: 230px !important;
  z-index: 5 !important;
}

#featuredGrid .card-body {
  padding: 18px 20px 20px !important;
}

#featuredGrid .card-name {
  font-size: 22px !important;
}

#featuredGrid .card-foot {
  padding-top: 16px !important;
}

@media (max-width: 700px) {
  #featuredGrid {
    gap: 12px !important;
  }

  #featuredGrid .card {
    border-radius: 13px !important;
  }

  #featuredGrid .card-img {
    aspect-ratio: 3 / 4 !important;
    border-radius: 13px 13px 0 0 !important;
  }

  #featuredGrid .card-body {
    padding: 12px !important;
  }

  #featuredGrid .card::before {
    display: none !important;
  }
}

/* Typography safety pass: large display text must not be clipped by animation wrappers. */
.hero-title,
.heroA-stage .hero-title,
.slide-title,
.banner-title,
.section-title {
  overflow: visible !important;
  max-width: min(100%, 980px) !important;
  text-wrap: balance;
}

.hero-title-row {
  overflow: visible !important;
  display: block !important;
  padding: .04em 0 .08em !important;
}

.hero-title-row > span {
  overflow: visible !important;
}

.heroA-stage .hero-title {
  font-size: clamp(54px, 7.2vw, 108px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

.heroA-stage {
  padding-left: clamp(28px, 4.8vw, 72px) !important;
  padding-right: clamp(24px, 4vw, 64px) !important;
  overflow: visible !important;
}

.slide-title {
  font-size: clamp(34px, 4.7vw, 60px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.04em !important;
}

.banner {
  overflow: hidden !important;
}

.banner-text {
  padding-top: clamp(68px, 7vw, 96px) !important;
  padding-bottom: clamp(58px, 6vw, 86px) !important;
  overflow: visible !important;
}

.banner-title {
  font-size: clamp(36px, 4.2vw, 58px) !important;
  line-height: 1.22 !important;
  letter-spacing: -.04em !important;
  padding: .06em 0 .1em !important;
}

@media (max-width: 900px) {
  .heroA-stage .hero-title {
    font-size: clamp(44px, 12vw, 72px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.04em !important;
  }

  .slide-title {
    font-size: clamp(32px, 10vw, 50px) !important;
    line-height: 1.16 !important;
  }

  .banner-title {
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: 1.24 !important;
  }
}

/* AI fusion Hero: full-screen cinematic background with motion layers. */
.hero {
  min-height: 100vh !important;
  overflow: hidden !important;
  background: #02040b !important;
}

.hero::before {
  inset: 0 !important;
  background-image: var(--hj-hero-art, image-set(url("./hero-fixed-final/hero-fusion-desktop-pink.avif") type("image/avif"), url("./hero-fixed-final/hero-fusion-desktop-pink.webp") type("image/webp"), url("./hero-fixed-final/hero-fusion-desktop-pink.png") type("image/png"))) !important;
  background-size: cover !important;
  background-position: 50% center !important;
  opacity: 1 !important;
  transform: scale(1.015) !important;
  filter: none !important;
  animation: hj-fusion-bg-drift 18s ease-in-out infinite alternate !important;
}
[data-theme="ice"] .hero::before, html[data-hj-theme="ice"] .hero::before {
  background-image: var(--hj-hero-art, image-set(url("./hero-fixed-final/hero-fusion-desktop.avif") type("image/avif"), url("./hero-fixed-final/hero-fusion-desktop.webp") type("image/webp"), url("./hero-fixed-final/hero-fusion-desktop.png") type("image/png"))) !important;
}

.hero-vignette {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(2,4,11,.55) 0%, rgba(2,4,11,.28) 30%, rgba(2,4,11,.04) 56%, rgba(2,4,11,0) 100%),
    linear-gradient(180deg, rgba(2,4,11,.05) 0%, transparent 50%, rgba(2,4,11,.35) 100%) !important;
}

.hero::after {
  z-index: 2 !important;
  background:
    radial-gradient(620px 420px at 66% 42%, rgb(var(--magenta-rgb) / .12), transparent 70%),
    radial-gradient(460px 280px at 82% 22%, rgb(var(--magenta-2-rgb) / .08), transparent 72%) !important;
  opacity: .4 !important;
  mix-blend-mode: screen !important;
  animation: hj-fusion-aurora 6.8s ease-in-out infinite alternate !important;
}

.hero-grain {
  z-index: 2 !important;
  opacity: .72 !important;
}

.hero-grain::before,
.hero-grain::after {
  content: "" !important;
  position: absolute !important;
  inset: -18% !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(247,241,246,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(125,211,252,.48) 0 1px, transparent 2px) !important;
  background-size: 86px 86px, 137px 137px !important;
  background-position: 0 0, 28px 42px !important;
  opacity: .33 !important;
  animation: hj-fusion-stars 24s linear infinite !important;
}

.hero-grain::after {
  background-size: 156px 156px, 220px 220px !important;
  opacity: .18 !important;
  filter: blur(.2px) !important;
  animation-duration: 38s !important;
  animation-direction: reverse !important;
}

/* Stars are champagne gold across rating UI and ambient particles. */
#headerStatRating + .header-stat-label,
.card-rating .star,
.banner-stat-label {
  color: #f8d88a !important;
  text-shadow: 0 0 14px rgba(248,216,138,.38) !important;
}

.hero-grain::before,
.hero-grain::after {
  background-image:
    radial-gradient(circle, rgba(255,236,178,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(248,216,138,.55) 0 1px, transparent 2px) !important;
}

.heroA-stage {
  min-height: 100vh !important;
  width: 45% !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding-top: 86px !important;
  padding-bottom: 220px !important;
  justify-content: center !important;
}

.heroA-stage .hero-title {
  font-size: clamp(48px, 5.8vw, 88px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.065em !important;
}

.heroA-stage .hero-sub {
  max-width: 520px !important;
}

.heroA-scroll {
  display: none !important;
}

.btn-magenta,
.btn-line {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease !important;
}

.btn-magenta:hover,
.btn-line:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 0 1px rgb(var(--magenta-2-rgb) / .34), 0 16px 46px rgb(var(--magenta-rgb) / .38), 0 0 34px rgb(var(--magenta-2-rgb) / .22) !important;
}

@keyframes hj-fusion-bg-drift {
  from { transform: scale(1.015) translate3d(-6px, 0, 0); filter: contrast(1.05) saturate(1.08) brightness(.94); }
  to { transform: scale(1.04) translate3d(8px, -7px, 0); filter: contrast(1.08) saturate(1.15) brightness(1); }
}

@keyframes hj-fusion-aurora {
  from { opacity: .5; transform: translate3d(-12px, 8px, 0) scale(1); }
  to { opacity: .82; transform: translate3d(18px, -12px, 0) scale(1.035); }
}

@keyframes hj-fusion-stars {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(54px, -72px, 0); }
}

@media (max-width: 900px) {
  .hero {
    min-height: 100vh !important;
  }

  .hero::before {
    background-image: var(--hj-hero-art, image-set(url("./hero-fixed-final/hero-fusion-desktop-pink.avif") type("image/avif"), url("./hero-fixed-final/hero-fusion-desktop-pink.webp") type("image/webp"), url("./hero-fixed-final/hero-fusion-desktop-pink.png") type("image/png"))) !important;
    background-position: 64% center !important;
    transform: scale(1.02) !important;
    filter: none !important;
  }
  [data-theme="ice"] .hero::before, html[data-hj-theme="ice"] .hero::before {
    background-image: var(--hj-hero-art, image-set(url("./hero-fixed-final/hero-fusion-desktop.avif") type("image/avif"), url("./hero-fixed-final/hero-fusion-desktop.webp") type("image/webp"), url("./hero-fixed-final/hero-fusion-desktop.png") type("image/png"))) !important;
  }

  .hero-vignette {
    background:
      linear-gradient(180deg, rgba(2,4,11,.42) 0%, rgba(2,4,11,.28) 28%, rgba(2,4,11,.74) 66%, rgba(2,4,11,.96) 100%),
      radial-gradient(440px 360px at 50% 72%, rgba(2,4,11,.86), transparent 76%) !important;
  }

  .heroA-stage {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    align-items: center !important;
    text-align: center !important;
    padding: 120px 24px 300px !important;
    justify-content: flex-end !important;
  }

  .heroA-stage .hero-eyebrow,
  .heroA-stage .hero-cta-row {
    justify-content: center !important;
    align-self: center !important;
  }

  .heroA-stage .hero-sub {
    max-width: 330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 560px) {
  .hero::before {
    background-image: image-set(url("./hero-fixed-final/hero-fusion-mobile-pink.avif") type("image/avif"), url("./hero-fixed-final/hero-fusion-mobile-pink.webp") type("image/webp"), url("./hero-fixed-final/hero-fusion-mobile-pink.png") type("image/png")) !important;
    background-position: center top !important;
    filter: none !important;
  }
  [data-theme="ice"] .hero::before, html[data-hj-theme="ice"] .hero::before {
    background-image: image-set(url("./hero-fixed-final/hero-fusion-mobile.avif") type("image/avif"), url("./hero-fixed-final/hero-fusion-mobile.webp") type("image/webp"), url("./hero-fixed-final/hero-fusion-mobile.png") type("image/png")) !important;
  }

  .hero-vignette {
    background:
      linear-gradient(180deg, rgba(2,4,11,.28) 0%, rgba(2,4,11,.2) 30%, rgba(2,4,11,.74) 64%, rgba(2,4,11,.96) 100%),
      radial-gradient(380px 300px at 50% 78%, rgba(2,4,11,.82), transparent 78%) !important;
  }
}

/* VIP reward banner uses the provided hero package, not the homepage Hero. */
.banner::before {
  background-image: image-set(url("./hero-package/hero-desktop-pink.avif") type("image/avif"), url("./hero-package/hero-desktop-pink.webp") type("image/webp"), url("./hero-package/hero-desktop-pink.png") type("image/png")) !important;
  background-size: cover !important;
  background-position: right center !important;
  opacity: 1 !important;
  filter: none !important;
}
[data-theme="ice"] .banner::before, html[data-hj-theme="ice"] .banner::before {
  background-image: image-set(url("./hero-package/hero-desktop.avif") type("image/avif"), url("./hero-package/hero-desktop.webp") type("image/webp"), url("./hero-package/hero-desktop.png") type("image/png")) !important;
}

.banner::after {
  background:
    linear-gradient(90deg, rgba(2,4,11,.96) 0%, rgba(2,4,11,.84) 42%, rgba(2,4,11,.22) 72%, rgba(2,4,11,.08) 100%),
    radial-gradient(560px 340px at 76% 44%, rgb(var(--magenta-rgb) / .2), transparent 72%) !important;
}

@media (max-width: 1024px) {
  .banner::before {
    background-image: image-set(url("./hero-package/hero-tablet-pink.avif") type("image/avif"), url("./hero-package/hero-tablet-pink.webp") type("image/webp"), url("./hero-package/hero-tablet-pink.png") type("image/png")) !important;
    background-position: center center !important;
  }
  [data-theme="ice"] .banner::before, html[data-hj-theme="ice"] .banner::before {
    background-image: image-set(url("./hero-package/hero-tablet.avif") type("image/avif"), url("./hero-package/hero-tablet.webp") type("image/webp"), url("./hero-package/hero-tablet.png") type("image/png")) !important;
  }
}

@media (max-width: 768px) {
  .banner::before {
    background-image: image-set(url("./hero-package/hero-mobile-pink.avif") type("image/avif"), url("./hero-package/hero-mobile-pink.webp") type("image/webp"), url("./hero-package/hero-mobile-pink.png") type("image/png")) !important;
    background-position: center top !important;
  }
  [data-theme="ice"] .banner::before, html[data-hj-theme="ice"] .banner::before {
    background-image: image-set(url("./hero-package/hero-mobile.avif") type("image/avif"), url("./hero-package/hero-mobile.webp") type("image/webp"), url("./hero-package/hero-mobile.png") type("image/png")) !important;
  }
}

/* Final polish: all rating/star symbols are champagne gold, never ice blue. */
:root {
  --hj-star-gold: #f8d88a !important;
  --hj-star-gold-2: #ffe9a8 !important;
  --hj-star-glow: rgba(248,216,138,.48) !important;
  --gold: #f8d88a !important;
  --gold-2: #ffe9a8 !important;
  --gold-glow: rgba(248,216,138,.22) !important;
}

#headerStatRating + .header-stat-label,
.card-rating .star,
.detail-rating-stars,
.review-stars,
.history-rate-stars,
.luxe-card__rating,
.mall-item-img,
.welcome-kicker,
.banner-stat-label,
[class*="rating"] .star,
[class*="rate"] [class*="star"] {
  color: var(--hj-star-gold) !important;
  -webkit-text-fill-color: var(--hj-star-gold) !important;
  text-shadow: 0 0 10px rgba(248,216,138,.48), 0 0 22px rgba(248,216,138,.22) !important;
}

.hero-grain::before,
.hero-grain::after,
.age-gate-overlay::before {
  background-image:
    radial-gradient(circle, rgba(255,236,178,.86) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(248,216,138,.58) 0 1px, transparent 2px) !important;
}

/* Mobile stability: avoid GPU flicker from animated full-screen filters and particles. */
@media (max-width: 768px), (pointer: coarse) {
  .hero::before,
  .hero::after,
  .hero-grain::before,
  .hero-grain::after {
    animation: none !important;
    will-change: auto !important;
  }

  .hero::before {
    transform: none !important;
    filter: contrast(1.04) saturate(1.08) brightness(.9) !important;
  }

  .hero::after {
    opacity: .48 !important;
  }

  .hero-grain {
    opacity: .42 !important;
  }
}

/* Theme switcher: ice blue / luxury pink. */
.hj-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgb(var(--magenta-2-rgb) / .28);
  border-radius: 999px;
  background: rgba(2,4,11,.72);
  box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(150%);
}

.hj-theme-toggle button {
  min-width: 48px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(247,241,246,.74);
  font: 800 11px/1 'Noto Sans TC', sans-serif;
  letter-spacing: .08em;
  transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hj-theme-toggle button:hover {
  transform: translateY(-1px);
  color: #fff;
}

html[data-hj-theme="ice"] .hj-theme-toggle [data-hj-theme-choice="ice"],
html[data-hj-theme="pink"] .hj-theme-toggle [data-hj-theme-choice="pink"] {
  color: #02101d;
  border-color: rgba(255,255,255,.36);
  background: linear-gradient(135deg, #f7f1f6 0%, var(--magenta-2) 46%, var(--magenta) 100%);
  box-shadow: 0 8px 26px rgb(var(--magenta-rgb) / .34);
}

html[data-hj-theme="pink"] .hj-theme-toggle {
  border-color: rgba(251,113,190,.3);
}

html[data-hj-theme="pink"] .hj-theme-toggle [data-hj-theme-choice="pink"] {
  background: linear-gradient(135deg, #fff1f8 0%, var(--magenta-2) 45%, var(--magenta) 100%);
  box-shadow: 0 8px 26px rgb(var(--magenta-rgb) / .36);
}

@media (max-width: 768px) {
  .hj-theme-toggle {
    right: 12px;
    bottom: 154px;
    transform: scale(.92);
    transform-origin: right bottom;
  }
}

html[data-hj-theme="ice"] {
  --magenta: var(--magenta-2) !important;
  --magenta-2: #a5f3fc !important;
  --magenta-deep: #0ea5e9 !important;
  --magenta-glow: rgba(56,189,248,.28) !important;
  --hj-pink: var(--magenta-2) !important;
  --hj-pink-soft: #a5f3fc !important;
  --hj-glow: rgba(56,189,248,.28) !important;
  --hj-jk-hot: var(--magenta-2) !important;
  --hj-jk-hot-2: #a5f3fc !important;
  --hj-ice-blue: var(--magenta-2) !important;
  --hj-ice-cyan: #a5f3fc !important;
}

html[data-hj-theme="ice"] body,
html[data-hj-theme="ice"] .header,
html[data-hj-theme="ice"] .bottom-nav,
html[data-hj-theme="ice"] .bnav,
html[data-hj-theme="ice"] .sidebar {
  background-color: #050208 !important;
}

html[data-hj-theme="ice"] .hero::after {
  background:
    radial-gradient(620px 420px at 66% 42%, rgba(56,189,248,.12), transparent 70%),
    radial-gradient(460px 280px at 82% 22%, rgba(165,243,252,.08), transparent 72%) !important;
  opacity: .4 !important;
}

html[data-hj-theme="ice"] .hero-vignette {
  background:
    linear-gradient(90deg, rgba(5,2,8,.55) 0%, rgba(5,2,8,.28) 30%, rgba(5,2,8,.04) 56%, rgba(5,2,8,0) 100%),
    linear-gradient(180deg, rgba(5,2,8,.05) 0%, transparent 50%, rgba(5,2,8,.35) 100%) !important;
}

html[data-hj-theme="ice"] .btn-magenta,
html[data-hj-theme="ice"] .header-cta,
html[data-hj-theme="ice"] .slide-cta,
html[data-hj-theme="ice"] .card-cta,
html[data-hj-theme="ice"] .bnav-item--center .bnav-icon-wrap {
  background: linear-gradient(135deg, #e0faff 0%, #a5f3fc 46%, var(--magenta-2) 100%) !important;
  box-shadow: 0 14px 34px rgba(56,189,248,.32), 0 0 26px rgba(165,243,252,.18) !important;
}

html[data-hj-theme="ice"] .nav a.active,
html[data-hj-theme="ice"] .nav a:hover,
html[data-hj-theme="ice"] .header-live-feed strong,
html[data-hj-theme="ice"] .header-stat strong,
html[data-hj-theme="ice"] .hero-eyebrow,
html[data-hj-theme="ice"] .section-eyebrow,
html[data-hj-theme="ice"] .footer h5,
html[data-hj-theme="ice"] .chip.active,
html[data-hj-theme="ice"] .hero-title em,
html[data-hj-theme="ice"] .section-title em,
html[data-hj-theme="ice"] .banner-title em,
html[data-hj-theme="ice"] .card-name em {
  color: #a5f3fc !important;
  text-shadow: 0 0 18px rgba(165,243,252,.58), 0 0 34px rgba(56,189,248,.28) !important;
}

html[data-hj-theme="ice"] .nav a.active::after,
html[data-hj-theme="ice"] .progress-bar::after,
html[data-hj-theme="ice"] .chip.active::after,
html[data-hj-theme="ice"] .online-status::before {
  background: #a5f3fc !important;
  box-shadow: 0 0 12px rgba(165,243,252,.78) !important;
}

html[data-hj-theme="ice"] .card,
html[data-hj-theme="ice"] .hj-copy-strip,
html[data-hj-theme="ice"] .hj-jk-rail-item,
html[data-hj-theme="ice"] .banner,
html[data-hj-theme="ice"] .hero-carousel,
html[data-hj-theme="ice"] .chip,
html[data-hj-theme="ice"] .btn-line {
  border-color: rgba(165,243,252,.22) !important;
}

html[data-hj-theme="ice"] .card:hover,
html[data-hj-theme="ice"] .hj-jk-rail-item:hover,
html[data-hj-theme="ice"] .chip:hover,
html[data-hj-theme="ice"] .btn-line:hover {
  border-color: rgba(165,243,252,.48) !important;
  box-shadow: 0 18px 48px rgba(56,189,248,.18), 0 0 0 1px rgba(165,243,252,.18) !important;
}

html[data-hj-theme="ice"] .tag-hot,
html[data-hj-theme="ice"] .tag-prem,
html[data-hj-theme="ice"] .perk-promo,
html[data-hj-theme="ice"] .fav-heart.on,
html[data-hj-theme="ice"] .chat-fab {
  background: linear-gradient(135deg, #a5f3fc, var(--magenta-2)) !important;
  box-shadow: 0 12px 28px rgba(56,189,248,.34) !important;
}

html[data-hj-theme="ice"] .hero-grain::before,
html[data-hj-theme="ice"] .hero-grain::after {
  background-image:
    radial-gradient(circle, rgba(255,236,178,.86) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(165,243,252,.5) 0 1px, transparent 2px) !important;
}

/* ─── Ice mode catch-all — flip remaining hardcoded pink rgba in chips/buttons/borders ─── */
html[data-hj-theme="ice"] .header-quick-chip,
html[data-hj-theme="ice"] .header-quick-hot,
html[data-hj-theme="ice"] .header-quick-dot,
html[data-hj-theme="ice"] .btn-line:hover,
html[data-hj-theme="ice"] .arrow,
html[data-hj-theme="ice"] .arrow:hover,
html[data-hj-theme="ice"] .section-live,
html[data-hj-theme="ice"] .chip.active,
html[data-hj-theme="ice"] .chip:hover,
html[data-hj-theme="ice"] .tag-pill,
html[data-hj-theme="ice"] .tag-line,
html[data-hj-theme="ice"] .tag-line:hover,
html[data-hj-theme="ice"] .countdown-cell,
html[data-hj-theme="ice"] .banner-countdown,
html[data-hj-theme="ice"] .banner-cta-line:hover,
html[data-hj-theme="ice"] .price-original::after,
html[data-hj-theme="ice"] .perk-promo,
html[data-hj-theme="ice"] .card:hover .card-cta {
  border-color: rgba(56, 189, 248, .42) !important;
}
html[data-hj-theme="ice"] .header-quick-chip:hover,
html[data-hj-theme="ice"] .chip:hover,
html[data-hj-theme="ice"] .tag-line:hover {
  background: rgba(56, 189, 248, .12) !important;
  color: #a5f3fc !important;
}
html[data-hj-theme="ice"] .btn-line:hover {
  border-color: var(--magenta-2) !important;
  color: #a5f3fc !important;
}
html[data-hj-theme="ice"] .header-quick-dot,
html[data-hj-theme="ice"] .header-quick-pulse {
  background: var(--magenta-2) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, .6) !important;
}

/* ─── Mobile hj-jk-rail: fit 6 items with EN subtitle ─── */
@media (max-width: 767px) {
  .hj-jk-rail {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding: 10px 4px !important;
    gap: 2px !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  .hj-jk-rail-item {
    flex: unset !important;
    padding: 6px 2px !important;
    min-width: 0 !important;
    gap: 3px !important;
    overflow: hidden !important;
  }
  .hj-jk-rail-icon {
    display: none !important;
  }
  .hj-jk-rail-item small {
    display: block !important;
    font-size: 7.5px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.15 !important;
    text-align: center !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    color: var(--paper-mute, rgba(247,241,246,.5)) !important;
    margin: 0 !important;
  }
  .hj-jk-rail-item strong {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}


/* ─── Card tag row INLINE (under image, above name) ─── */
.card .card-tag-row--inline {
  position: static !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 12px 22px 0 !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .card .card-tag-row--inline { padding: 10px 12px 0 !important; gap: 4px !important; }
}

/* ─── Refined editorial tag pills — flat, minimal, typographic ─── */
.card .tag-pill {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  position: relative !important;
  height: 20px !important;
}
.card .tag-pill::before { content: none !important; }

/* VIP — solid gold fill, black text, no icon */
.card .tag-vip {
  background: #d4af37 !important;
  color: #1a0e02 !important;
  border: 1px solid rgba(212,175,55,0.6) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  padding-left: 11px !important;
  padding-right: 11px !important;
}

/* 好評 — outlined green, transparent fill */
.card .tag-praise {
  background: transparent !important;
  color: #34d399 !important;
  border: 1px solid rgba(52,211,153,0.55) !important;
  font-family: var(--display, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

/* 標準 — invisible neutral */
.card .tag-std {
  background: transparent !important;
  color: rgba(245,239,229,0.6) !important;
  border: 1px solid rgba(245,239,229,0.18) !important;
}

/* HOT — flat magenta fill */
.card .tag-hot {
  background: var(--magenta, #ec4899) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

/* 剩 X 位 — outlined warning, no flashy gradient */
.card .tag-stock {
  background: transparent !important;
  color: var(--magenta-2, #f472b6) !important;
  border: 1px solid var(--magenta, #ec4899) !important;
  font-family: var(--display, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  animation: none !important;
}

.card .online-status {
  background: linear-gradient(135deg, rgba(8,16,12,0.85), rgba(4,12,8,0.92)) !important;
  border: 1px solid rgba(52,211,153,0.42) !important;
  color: #aaffce !important;
  box-shadow:
    0 2px 10px rgba(52,211,153,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  text-shadow: 0 0 6px rgba(52,211,153,0.45) !important;
  font-weight: 700 !important;
}

/* ─── Card foot: align CTA with main price baseline (was floating in middle) ─── */
.card .card-foot {
  align-items: flex-end !important;
  gap: 14px !important;
}
.card .card-price-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  flex: 1 1 auto;
}
.card .card-cta {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1px; /* fine-tune to sit on price baseline */
}

/* ─── Luxury polish pass: quieter black-gold mood + couture tag language ─── */
:root {
  --hj-luxe-bg: #060608;
  --hj-luxe-panel: rgba(14, 13, 16, .92);
  --hj-luxe-panel-2: rgba(21, 19, 24, .94);
  --hj-luxe-line: rgba(236, 221, 188, .16);
  --hj-luxe-line-strong: rgba(236, 221, 188, .28);
  --hj-luxe-gold: #d8bd79;
  --hj-luxe-gold-soft: #f2dfad;
  --hj-luxe-rose: #d96b9f;
  --hj-luxe-ink: #090807;
}

body {
  background:
    radial-gradient(900px 520px at 80% 5%, rgba(216,189,121,.11), transparent 62%),
    radial-gradient(760px 460px at 12% 16%, rgb(var(--magenta-rgb) / .08), transparent 58%),
    linear-gradient(180deg, #070708 0%, #111014 46%, #050506 100%) !important;
}

body::after {
  opacity: .42 !important;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(216,189,121,.09) 46.04% 46.12%, transparent 46.2%),
    radial-gradient(480px 300px at 76% 24%, rgba(216,189,121,.1), transparent 70%) !important;
}

.header,
.navbar,
.topbar {
  background: rgba(7, 7, 8, .9) !important;
  border-bottom-color: rgba(236,221,188,.13) !important;
  box-shadow: 0 14px 52px rgba(0,0,0,.38) !important;
}

.brand-name-zh em,
.footer-brand-zh em {
  color: var(--hj-luxe-gold-soft) !important;
  text-shadow: 0 0 22px rgba(216,189,121,.34) !important;
}

.hero,
.heroA-stage {
  min-height: 68vh !important;
}

.hero::before {
  filter: saturate(.9) contrast(1.08) brightness(.78) !important;
}

.hero-vignette {
  background:
    linear-gradient(90deg, rgba(4,4,5,.96) 0%, rgba(4,4,5,.72) 36%, rgba(4,4,5,.18) 74%, rgba(4,4,5,.08) 100%),
    linear-gradient(180deg, rgba(4,4,5,.46) 0%, transparent 42%, rgba(4,4,5,.95) 100%) !important;
}

.heroA-stage .hero-title {
  letter-spacing: -.025em !important;
  text-shadow: 0 24px 64px rgba(0,0,0,.74) !important;
}

.heroA-stage .hero-title em,
.slide-title em,
.section-title em,
.banner-title em {
  background: linear-gradient(135deg, #fff7d8 0%, var(--hj-luxe-gold) 48%, #d991a9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

.hero-eyebrow,
.slide-tag,
.banner-eyebrow,
.hero-slide__tag {
  color: var(--hj-luxe-gold-soft) !important;
}

.hero-sub,
.section-sub,
.slide-sub,
.banner-sub {
  color: rgba(247,241,246,.68) !important;
}

.section {
  background:
    linear-gradient(180deg, rgba(8,8,10,.96), rgba(13,12,15,.98)) !important;
}

.section-eyebrow {
  color: var(--hj-luxe-gold-soft) !important;
  font-family: var(--hj-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.section-eyebrow::before {
  content: "SELECTED" !important;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 8px;
  border: 1px solid rgba(216,189,121,.34);
  border-radius: 999px;
  color: rgba(242,223,173,.82);
  background: rgba(216,189,121,.08);
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: .2em !important;
}

.chip {
  border: 1px solid rgba(236,221,188,.14) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(247,241,246,.72) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.chip.active,
.chip:hover {
  border-color: rgba(216,189,121,.48) !important;
  background: rgba(216,189,121,.12) !important;
  color: var(--hj-luxe-gold-soft) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#featuredGrid {
  gap: 28px !important;
}

#featuredGrid .card {
  border: 1px solid var(--hj-luxe-line) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(28,25,29,.96), rgba(9,9,11,.98)) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

#featuredGrid .card:hover {
  border-color: rgba(216,189,121,.36) !important;
  box-shadow:
    0 30px 84px rgba(0,0,0,.54),
    0 0 0 1px rgba(216,189,121,.08),
    0 0 38px rgb(var(--magenta-rgb) / .08) !important;
}

#featuredGrid .card-img {
  border-radius: 14px 14px 0 0 !important;
}

#featuredGrid .card-img img {
  filter: saturate(.96) contrast(1.04) brightness(.94) !important;
}

#featuredGrid .card-img::after {
  background:
    linear-gradient(180deg, rgba(4,4,6,0) 58%, rgba(4,4,6,.28) 100%),
    linear-gradient(90deg, rgba(216,189,121,.08), transparent 36%) !important;
}

#featuredGrid .card::before {
  content: "本週精選" !important;
  top: 16px !important;
  right: 16px !important;
  bottom: auto !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(216,189,121,.44) !important;
  border-radius: 999px !important;
  background: rgba(7,7,8,.62) !important;
  color: var(--hj-luxe-gold-soft) !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
}

#featuredGrid .card-body {
  padding: 18px 20px 20px !important;
}

.card .card-tag-row--inline {
  gap: 7px !important;
  padding: 14px 20px 0 !important;
}

.card .tag-pill,
.card .tag-line,
.card .perk,
.tag-pill,
.tag-line,
.perk {
  border-radius: 999px !important;
  font-family: var(--hj-sans) !important;
  text-transform: none !important;
  letter-spacing: .05em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.card .tag-pill {
  min-height: 22px !important;
  height: auto !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(236,221,188,.2) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(247,241,246,.76) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.card .tag-vip {
  border-color: rgba(216,189,121,.58) !important;
  background: linear-gradient(135deg, #f5df9a 0%, #c99e47 100%) !important;
  color: var(--hj-luxe-ink) !important;
  letter-spacing: .16em !important;
}

.card .tag-praise {
  border-color: rgba(79, 214, 151, .38) !important;
  background: rgba(25, 126, 82, .12) !important;
  color: #b7f4d2 !important;
}

.card .tag-hot {
  border-color: rgba(217,107,159,.42) !important;
  background: rgba(217,107,159,.16) !important;
  color: #ffd7e8 !important;
}

.card .tag-stock {
  border-color: rgba(216,189,121,.48) !important;
  background: rgba(216,189,121,.1) !important;
  color: var(--hj-luxe-gold-soft) !important;
}

.card .tag-std {
  border-color: rgba(236,221,188,.18) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(247,241,246,.62) !important;
}

.card .card-tags-line {
  gap: 6px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.card .tag-line {
  min-height: 24px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(236,221,188,.14) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(247,241,246,.68) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.card .tag-line:hover {
  border-color: rgba(216,189,121,.42) !important;
  background: rgba(216,189,121,.09) !important;
  color: var(--hj-luxe-gold-soft) !important;
}

.card .online-status {
  border-color: rgba(80, 220, 152, .34) !important;
  border-radius: 999px !important;
  background: rgba(5, 22, 14, .62) !important;
  color: #c4f8db !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px);
}

.card-name {
  letter-spacing: -.01em !important;
}

.card-rating .star,
.card-price,
.card-name em {
  color: var(--hj-luxe-gold-soft) !important;
}

.card-cta,
.header-cta,
.btn-magenta,
.section-link,
.banner-cta,
.footer-cta-btn {
  border: 1px solid rgba(216,189,121,.34) !important;
  background:
    linear-gradient(135deg, rgba(216,189,121,.98) 0%, rgba(186,133,65,.98) 100%) !important;
  color: #100b05 !important;
  box-shadow: 0 14px 34px rgba(216,189,121,.16), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.card-cta:hover,
.header-cta:hover,
.btn-magenta:hover,
.section-link:hover,
.banner-cta:hover,
.footer-cta-btn:hover {
  box-shadow: 0 18px 46px rgba(216,189,121,.24), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

html[data-hj-theme="ice"] .card .tag-hot,
[data-theme="ice"] .card .tag-hot {
  border-color: rgba(125,211,252,.42) !important;
  background: rgba(56,189,248,.14) !important;
  color: #d8f4ff !important;
}

@media (max-width: 700px) {
  #featuredGrid { gap: 14px !important; }
  .card .card-tag-row--inline { padding: 11px 12px 0 !important; gap: 5px !important; }
  .card .tag-pill { font-size: 9px !important; padding: 4px 7px !important; }
  .card .tag-line { font-size: 10px !important; min-height: 22px !important; padding: 4px 7px !important; }
  #featuredGrid .card-body { padding: 12px !important; }
}

.age-gate-overlay {
  background:
    radial-gradient(760px 520px at 70% 28%, rgba(216,189,121,.16), transparent 70%),
    radial-gradient(540px 360px at 18% 78%, rgb(var(--magenta-rgb) / .1), transparent 72%),
    linear-gradient(180deg, rgba(3,3,5,.99), rgba(10,10,13,.98) 52%, rgba(3,3,5,.99)) !important;
}

.age-gate-card {
  border-color: rgba(216,189,121,.28) !important;
  background: linear-gradient(180deg, rgba(16,15,18,.9), rgba(7,7,9,.96)) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.72), 0 0 42px rgba(216,189,121,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.age-gate-icon,
.age-gate-btn.primary {
  background: linear-gradient(135deg, #fff7d8 0%, #d8bd79 48%, #b7863d 100%) !important;
  color: #0f0a05 !important;
  box-shadow: 0 16px 38px rgba(216,189,121,.24), inset 0 1px 0 rgba(255,255,255,.36) !important;
}

.age-gate-body {
  border-left-color: rgba(216,189,121,.54) !important;
  background: rgba(216,189,121,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(216,189,121,.12) !important;
}

.age-gate-btn.secondary {
  border-color: rgba(216,189,121,.2) !important;
}

/* ─── Theme-aware finish: ice and pink own the primary UI, gold stays VIP-only. ─── */
:root,
html[data-hj-theme="pink"] {
  --hj-theme-primary: #ec4899;
  --hj-theme-primary-2: #f472b6;
  --hj-theme-primary-3: #be185d;
  --hj-theme-rgb: 236 72 153;
  --hj-theme-glow: rgb(236 72 153 / .28);
  --hj-theme-soft: rgb(236 72 153 / .1);
  --hj-theme-line: rgb(244 114 182 / .32);
  --hj-theme-text: #fff2fa;
  --hj-theme-button-text: #fff;
}

html[data-hj-theme="ice"],
[data-theme="ice"] {
  --hj-theme-primary: var(--magenta-2);
  --hj-theme-primary-2: #8be7ff;
  --hj-theme-primary-3: #0ea5e9;
  --hj-theme-rgb: 56 189 248;
  --hj-theme-glow: rgb(56 189 248 / .3);
  --hj-theme-soft: rgb(56 189 248 / .105);
  --hj-theme-line: rgb(125 211 252 / .34);
  --hj-theme-text: #e5fbff;
  --hj-theme-button-text: #04121d;
}

html[data-hj-theme="ice"] body,
html[data-hj-theme="pink"] body {
  background:
    radial-gradient(860px 520px at 78% 5%, var(--hj-theme-soft), transparent 62%),
    radial-gradient(760px 460px at 12% 16%, rgb(var(--hj-theme-rgb) / .075), transparent 58%),
    linear-gradient(180deg, #06070a 0%, #101014 48%, #050506 100%) !important;
}

html[data-hj-theme="ice"] .header,
html[data-hj-theme="pink"] .header,
html[data-hj-theme="ice"] .navbar,
html[data-hj-theme="pink"] .navbar,
html[data-hj-theme="ice"] .topbar,
html[data-hj-theme="pink"] .topbar {
  border-bottom-color: rgb(var(--hj-theme-rgb) / .18) !important;
}

html[data-hj-theme="ice"] .brand-name-zh em,
html[data-hj-theme="ice"] .footer-brand-zh em,
html[data-hj-theme="pink"] .brand-name-zh em,
html[data-hj-theme="pink"] .footer-brand-zh em,
html[data-hj-theme="ice"] .hero-eyebrow,
html[data-hj-theme="pink"] .hero-eyebrow,
html[data-hj-theme="ice"] .slide-tag,
html[data-hj-theme="pink"] .slide-tag,
html[data-hj-theme="ice"] .banner-eyebrow,
html[data-hj-theme="pink"] .banner-eyebrow,
html[data-hj-theme="ice"] .section-eyebrow,
html[data-hj-theme="pink"] .section-eyebrow,
html[data-hj-theme="ice"] .card-price,
html[data-hj-theme="pink"] .card-price,
html[data-hj-theme="ice"] .card-name em,
html[data-hj-theme="pink"] .card-name em,
html[data-hj-theme="ice"] .card-rating .star,
html[data-hj-theme="pink"] .card-rating .star {
  color: var(--hj-theme-primary-2) !important;
  text-shadow: 0 0 18px var(--hj-theme-glow) !important;
}

html[data-hj-theme="ice"] .heroA-stage .hero-title em,
html[data-hj-theme="pink"] .heroA-stage .hero-title em,
html[data-hj-theme="ice"] .slide-title em,
html[data-hj-theme="pink"] .slide-title em,
html[data-hj-theme="ice"] .section-title em,
html[data-hj-theme="pink"] .section-title em,
html[data-hj-theme="ice"] .banner-title em,
html[data-hj-theme="pink"] .banner-title em {
  background: linear-gradient(135deg, #fff 0%, var(--hj-theme-primary-2) 42%, var(--hj-theme-primary) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

html[data-hj-theme="ice"] .card-cta,
html[data-hj-theme="pink"] .card-cta,
html[data-hj-theme="ice"] .header-cta,
html[data-hj-theme="pink"] .header-cta,
html[data-hj-theme="ice"] .btn-magenta,
html[data-hj-theme="pink"] .btn-magenta,
html[data-hj-theme="ice"] .section-link,
html[data-hj-theme="pink"] .section-link,
html[data-hj-theme="ice"] .banner-cta,
html[data-hj-theme="pink"] .banner-cta,
html[data-hj-theme="ice"] .footer-cta-btn,
html[data-hj-theme="pink"] .footer-cta-btn,
html[data-hj-theme="ice"] .slide-cta,
html[data-hj-theme="pink"] .slide-cta,
html[data-hj-theme="ice"] .bnav-item--center .bnav-icon-wrap,
html[data-hj-theme="pink"] .bnav-item--center .bnav-icon-wrap {
  border: 1px solid var(--hj-theme-line) !important;
  background:
    radial-gradient(circle at 28% 0%, rgba(255,255,255,.58), transparent 36%),
    linear-gradient(135deg, var(--hj-theme-primary-2) 0%, var(--hj-theme-primary) 54%, var(--hj-theme-primary-3) 100%) !important;
  color: var(--hj-theme-button-text) !important;
  box-shadow:
    0 14px 36px var(--hj-theme-glow),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.16) !important;
}

html[data-hj-theme="ice"] .card-cta:hover,
html[data-hj-theme="pink"] .card-cta:hover,
html[data-hj-theme="ice"] .header-cta:hover,
html[data-hj-theme="pink"] .header-cta:hover,
html[data-hj-theme="ice"] .btn-magenta:hover,
html[data-hj-theme="pink"] .btn-magenta:hover,
html[data-hj-theme="ice"] .section-link:hover,
html[data-hj-theme="pink"] .section-link:hover,
html[data-hj-theme="ice"] .banner-cta:hover,
html[data-hj-theme="pink"] .banner-cta:hover,
html[data-hj-theme="ice"] .footer-cta-btn:hover,
html[data-hj-theme="pink"] .footer-cta-btn:hover,
html[data-hj-theme="ice"] .slide-cta:hover,
html[data-hj-theme="pink"] .slide-cta:hover {
  box-shadow:
    0 18px 48px rgb(var(--hj-theme-rgb) / .42),
    0 0 0 1px rgb(var(--hj-theme-rgb) / .18),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

html[data-hj-theme="ice"] .chip.active,
html[data-hj-theme="pink"] .chip.active,
html[data-hj-theme="ice"] .chip:hover,
html[data-hj-theme="pink"] .chip:hover,
html[data-hj-theme="ice"] .tag-line:hover,
html[data-hj-theme="pink"] .tag-line:hover {
  border-color: var(--hj-theme-line) !important;
  background: var(--hj-theme-soft) !important;
  color: var(--hj-theme-text) !important;
}

html[data-hj-theme="ice"] .chip.active::after,
html[data-hj-theme="pink"] .chip.active::after,
html[data-hj-theme="ice"] .nav a.active::after,
html[data-hj-theme="pink"] .nav a.active::after,
html[data-hj-theme="ice"] .progress-bar::after,
html[data-hj-theme="pink"] .progress-bar::after {
  background: var(--hj-theme-primary) !important;
  box-shadow: 0 0 12px var(--hj-theme-glow) !important;
}

html[data-hj-theme="ice"] #featuredGrid .card,
html[data-hj-theme="pink"] #featuredGrid .card {
  border-color: rgb(var(--hj-theme-rgb) / .2) !important;
  background:
    linear-gradient(180deg, rgba(18,18,23,.96), rgba(7,8,11,.98)) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html[data-hj-theme="ice"] #featuredGrid .card:hover,
html[data-hj-theme="pink"] #featuredGrid .card:hover {
  border-color: rgb(var(--hj-theme-rgb) / .4) !important;
  box-shadow:
    0 30px 84px rgba(0,0,0,.54),
    0 0 40px rgb(var(--hj-theme-rgb) / .12) !important;
}

html[data-hj-theme="ice"] #featuredGrid .card-img::after,
html[data-hj-theme="pink"] #featuredGrid .card-img::after {
  background:
    linear-gradient(180deg, rgba(4,4,6,0) 58%, rgba(4,4,6,.28) 100%),
    linear-gradient(90deg, rgb(var(--hj-theme-rgb) / .08), transparent 36%) !important;
}

html[data-hj-theme="ice"] #featuredGrid .card::before,
html[data-hj-theme="pink"] #featuredGrid .card::before {
  border-color: var(--hj-theme-line) !important;
  color: var(--hj-theme-text) !important;
  background: rgba(7,8,12,.68) !important;
}

html[data-hj-theme="ice"] .card .tag-pill,
html[data-hj-theme="pink"] .card .tag-pill,
html[data-hj-theme="ice"] .card .tag-line,
html[data-hj-theme="pink"] .card .tag-line,
html[data-hj-theme="ice"] .card .perk,
html[data-hj-theme="pink"] .card .perk {
  border-color: rgb(var(--hj-theme-rgb) / .16) !important;
  background: rgba(255,255,255,.035) !important;
}

html[data-hj-theme="ice"] .card .tag-hot,
html[data-hj-theme="pink"] .card .tag-hot,
html[data-hj-theme="ice"] .card .tag-stock,
html[data-hj-theme="pink"] .card .tag-stock,
html[data-hj-theme="ice"] .card .tag-std,
html[data-hj-theme="pink"] .card .tag-std {
  border-color: var(--hj-theme-line) !important;
  background: var(--hj-theme-soft) !important;
  color: var(--hj-theme-text) !important;
}

html[data-hj-theme="ice"] .card .tag-vip,
html[data-hj-theme="pink"] .card .tag-vip {
  border-color: rgba(216,189,121,.58) !important;
  background:
    radial-gradient(circle at 28% 0%, rgba(255,255,255,.46), transparent 38%),
    linear-gradient(135deg, #f5df9a 0%, #d2ae5d 52%, #a97831 100%) !important;
  color: #120d05 !important;
  box-shadow: 0 8px 18px rgba(216,189,121,.14), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-hj-theme="ice"] .age-gate-icon,
html[data-hj-theme="pink"] .age-gate-icon,
html[data-hj-theme="ice"] .age-gate-btn.primary,
html[data-hj-theme="pink"] .age-gate-btn.primary {
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.6), transparent 38%),
    linear-gradient(135deg, var(--hj-theme-primary-2) 0%, var(--hj-theme-primary) 54%, var(--hj-theme-primary-3) 100%) !important;
  color: var(--hj-theme-button-text) !important;
  box-shadow: 0 16px 38px var(--hj-theme-glow), inset 0 1px 0 rgba(255,255,255,.36) !important;
}

html[data-hj-theme="ice"] .age-gate-card,
html[data-hj-theme="pink"] .age-gate-card {
  border-color: var(--hj-theme-line) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.72), 0 0 42px rgb(var(--hj-theme-rgb) / .12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-hj-theme="ice"] .age-gate-body,
html[data-hj-theme="pink"] .age-gate-body {
  border-left-color: var(--hj-theme-primary) !important;
  background: var(--hj-theme-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--hj-theme-rgb) / .12) !important;
}

html[data-hj-theme="ice"] .hero-live-badge,
html[data-hj-theme="pink"] .hero-live-badge {
  border-color: rgb(var(--hj-theme-rgb) / .2) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.45),
    0 0 28px rgb(var(--hj-theme-rgb) / .13),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html[data-hj-theme="ice"] .hero-live-badge__dot,
html[data-hj-theme="pink"] .hero-live-badge__dot {
  background: linear-gradient(135deg, var(--hj-theme-primary-2) 0%, var(--hj-theme-primary) 58%, var(--hj-theme-primary-3) 100%) !important;
  color: var(--hj-theme-button-text) !important;
  text-shadow: none !important;
}

html[data-hj-theme="ice"] .hero-live-badge__dot::before {
  background: #042033 !important;
  box-shadow: 0 0 0 0 rgb(139 231 255 / .7) !important;
}

html[data-hj-theme="pink"] .hero-live-badge__dot::before {
  background: #fff !important;
}

html[data-hj-theme="ice"] .section-eyebrow::before,
html[data-hj-theme="pink"] .section-eyebrow::before {
  border-color: var(--hj-theme-line) !important;
  background: var(--hj-theme-soft) !important;
  color: var(--hj-theme-text) !important;
}

html[data-hj-theme="ice"] .bottom-nav,
html[data-hj-theme="pink"] .bottom-nav {
  border-color: rgb(var(--hj-theme-rgb) / .24) !important;
  box-shadow:
    0 -10px 36px rgba(0,0,0,.52),
    0 0 30px rgb(var(--hj-theme-rgb) / .12),
    inset 0 1px 0 rgba(247,241,246,.08) !important;
}

html[data-hj-theme="ice"] .bottom-nav::before,
html[data-hj-theme="pink"] .bottom-nav::before {
  background: linear-gradient(90deg, transparent, rgb(var(--hj-theme-rgb) / .86), transparent) !important;
}

html[data-hj-theme="ice"] .bnav-item.active,
html[data-hj-theme="pink"] .bnav-item.active,
html[data-hj-theme="ice"] .bnav-item--center .bnav-label,
html[data-hj-theme="pink"] .bnav-item--center .bnav-label {
  color: var(--hj-theme-primary-2) !important;
}

html[data-hj-theme="ice"] .bnav-item.active .bnav-icon-wrap svg,
html[data-hj-theme="pink"] .bnav-item.active .bnav-icon-wrap svg {
  stroke: var(--hj-theme-primary-2) !important;
  filter: drop-shadow(0 0 8px var(--hj-theme-glow)) !important;
}

html[data-hj-theme="ice"] .bnav-item--center .bnav-icon-wrap svg {
  stroke: #04121d !important;
}

html[data-hj-theme="pink"] .bnav-item--center .bnav-icon-wrap svg {
  stroke: #fff !important;
}

/* ─── Bottom nav: flush to viewport, no floating gap ─── */
@media (max-width: 1024px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.bottom-nav {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 0 10px env(safe-area-inset-bottom, 0px) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
}

.bottom-nav::before {
  left: 0 !important;
  right: 0 !important;
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 10px env(safe-area-inset-bottom, 0px) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* ─── Final shell polish: bottom nav stays available on mobile and tablet layouts. ─── */
@media (min-width: 1025px) {
  body {
    padding-bottom: 0 !important;
  }

  .bottom-nav {
    display: none !important;
  }

  .ai-fab {
    right: 28px !important;
    bottom: 28px !important;
  }

  .ai-panel {
    right: 28px !important;
    bottom: 104px !important;
  }
}

@media (max-width: 1024px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    display: flex !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 10px env(safe-area-inset-bottom, 0px) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .ai-fab {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .ai-panel {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

html[data-hj-theme="ice"] .ai-fab,
html[data-hj-theme="pink"] .ai-fab {
  background: linear-gradient(135deg, var(--hj-theme-primary), var(--hj-theme-primary-2)) !important;
  box-shadow:
    0 10px 34px rgb(var(--hj-theme-rgb) / .34),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

html[data-hj-theme="ice"] .ai-fab:hover,
html[data-hj-theme="pink"] .ai-fab:hover {
  box-shadow:
    0 14px 48px rgb(var(--hj-theme-rgb) / .44),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}

html[data-hj-theme="ice"] .ai-pulse,
html[data-hj-theme="pink"] .ai-pulse {
  border-color: var(--hj-theme-primary) !important;
}

html[data-hj-theme="ice"] .ai-fab-badge,
html[data-hj-theme="pink"] .ai-fab-badge {
  background: rgba(2, 4, 11, .92) !important;
  color: var(--hj-theme-primary-2) !important;
  border: 1px solid rgb(var(--hj-theme-rgb) / .58) !important;
  box-shadow: 0 0 14px rgb(var(--hj-theme-rgb) / .24) !important;
}

html[data-hj-theme="ice"] .ai-panel,
html[data-hj-theme="pink"] .ai-panel {
  border-color: rgb(var(--hj-theme-rgb) / .24) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,.62),
    0 0 54px rgb(var(--hj-theme-rgb) / .16) !important;
}

html[data-hj-theme="ice"] .ai-head,
html[data-hj-theme="pink"] .ai-head {
  background:
    radial-gradient(ellipse 90% 120% at 0% 0%, rgb(var(--hj-theme-rgb) / .28) 0%, transparent 62%),
    linear-gradient(180deg, rgba(18,20,28,.98) 0%, rgba(12,12,18,.98) 100%) !important;
}

html[data-hj-theme="ice"] .ai-head::after,
html[data-hj-theme="pink"] .ai-head::after {
  background: linear-gradient(90deg, transparent, rgb(var(--hj-theme-rgb) / .42), transparent) !important;
}

html[data-hj-theme="ice"] .ai-input input:focus,
html[data-hj-theme="pink"] .ai-input input:focus {
  border-color: var(--hj-theme-primary) !important;
  box-shadow: 0 0 0 3px rgb(var(--hj-theme-rgb) / .16) !important;
}

html[data-hj-theme="ice"] .ai-input button,
html[data-hj-theme="pink"] .ai-input button {
  background: linear-gradient(135deg, var(--hj-theme-primary), var(--hj-theme-primary-2)) !important;
  box-shadow: 0 8px 24px rgb(var(--hj-theme-rgb) / .26) !important;
}

/* Card rating: make score/review count readable on compact cards. */
.card-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(248,216,138,.26) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--paper) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
}

.card-rating .star {
  font-size: 12px !important;
  margin-right: 1px !important;
  filter: drop-shadow(0 0 5px var(--hj-star-glow, rgba(248,216,138,.38))) !important;
}

@media (max-width: 700px) {
  .card-name-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  .card-name {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .card-name em {
    display: block !important;
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: .02em !important;
    word-break: normal !important;
  }

  .card-rating {
    min-height: 24px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .card-rating .star {
    font-size: 11px !important;
  }
}

/* HD card imagery: keep technician photos crisp and less veiled. */
.card-img {
  background: #05070b !important;
  isolation: isolate !important;
}

.card-img img,
#featuredGrid .card-img img,
#techGrid .card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: contrast(1.035) saturate(1.045) brightness(1.02) !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  image-rendering: auto !important;
}

.card:hover .card-img img,
#featuredGrid .card:hover .card-img img,
#techGrid .card:hover .card-img img {
  transform: translateZ(0) scale(1.012) !important;
  filter: contrast(1.045) saturate(1.055) brightness(1.035) !important;
}

.card-img::after,
#featuredGrid .card-img::after,
#techGrid .card-img::after {
  background:
    linear-gradient(180deg, rgba(2,4,11,0) 72%, rgba(2,4,11,.1) 100%) !important;
  opacity: .72 !important;
}

@media (max-width: 700px) {
  .card-img img,
  #featuredGrid .card-img img,
  #techGrid .card-img img {
    filter: contrast(1.05) saturate(1.06) brightness(1.025) !important;
  }
}

/* Site luminance pass mirrors v6-system for index.html */
:root {
  --paper: #fffaf2;
  --paper-dim: rgba(255,250,242,.9);
  --paper-mute: rgba(255,250,242,.72);
  --text-strong: rgba(255,255,255,.96);
  --text-main: rgba(255,255,255,.88);
  --text-soft: rgba(255,255,255,.72);
}
html, body { color: var(--text-main) !important; font-weight: 500; }
p, li, small, .section-sub, .page-hero p, .hero-sub, .footer-mission, .panel p, .profile-info-meta, .detail-copy, .review-body, .history-row, .menu-item, .live-ticker, .section-live, .card-meta, .card-stats, .card-perks, .footer li a, .sidebar-item, .bnav-item, .filter-label, .chip, .input, .search-input { color: var(--text-main) !important; }
.brand-name-en, .brand-meta, .header-stat-label, .header-live-feed, .page-hero-eyebrow, .section-kicker, .card-num, .online-status, .price-original, .footer-meta, .footer h5, .footer-bot, .detail-num, .detail-meta-cell-label, .profile-stat-extra, .panel-kicker, .sidebar-section-label { color: var(--text-soft) !important; opacity: 1 !important; }
h1, h2, h3, h4, .section-title, .page-hero h1, .card-name, .detail-name, .profile-info-name, .panel-title, .reviews-title, .footer-brand-zh { color: var(--text-strong) !important; text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.card, .panel, .filter-group, .section-head, .profile-card, .detail-meta-cell, .review-card, .footer, .sidebar-panel, .today-online { border-color: rgba(255,255,255,.16) !important; box-shadow: 0 16px 46px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.03) inset !important; }
.tag-pill, .tag-line, .chip, .filter-toggle, .status-pill, .area-shortcuts button { color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.2) !important; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important; font-weight: 900 !important; opacity: 1 !important; }
.chip.active, .filter-toggle.is-open, .area-shortcuts button.active { color: #fff !important; border-color: rgb(var(--magenta-rgb) / .62) !important; background: linear-gradient(135deg, rgb(var(--magenta-rgb) / .32), rgb(var(--magenta-2-rgb) / .16)) !important; box-shadow: 0 0 20px rgb(var(--magenta-rgb) / .18), inset 0 1px 0 rgba(255,255,255,.18) !important; }
input::placeholder, textarea::placeholder, .search-input::placeholder, .input::placeholder { color: rgba(255,255,255,.58) !important; }
@media (max-width: 700px) {
  html, body { font-size: 16.5px !important; }
  p, li, .page-hero p, .hero-sub, .section-sub, .footer-mission, .panel p, .review-body, .detail-copy { font-size: 14.5px !important; line-height: 1.72 !important; }
  .brand-name-en { font-size: 8px !important; letter-spacing: .2em !important; }
  .nav a, .header-live-feed, .live-ticker, .section-live, .footer li, .menu-item, .history-row { font-size: 12.5px !important; }
  .page-hero-eyebrow, .section-kicker, .footer h5, .sidebar-section-label { font-size: 10.5px !important; }
  .card-name { font-size: 18.5px !important; }
  .card-name em { font-size: 11.5px !important; }
  .card-meta { font-size: 12px !important; color: rgba(255,255,255,.82) !important; }
  .card-rating { font-size: 10.5px !important; color: #fff !important; }
  .card-price { font-size: 24px !important; }
  .tag-pill, .tag-line, .chip { font-size: 10.5px !important; min-height: 23px !important; padding: 5px 8px !important; }
  .filter-toggle { min-height: 40px !important; font-size: 13.5px !important; }
  .bnav-item { color: rgba(255,255,255,.78) !important; font-size: 10.8px !important; font-weight: 850 !important; }
  .bnav-item.active { color: var(--magenta-2) !important; }
  .footer li { color: rgba(255,255,255,.8) !important; }
}

@media (max-width: 700px) {
  .card-name-row { position: relative !important; display: block !important; min-height: 42px !important; padding-right: 74px !important; }
  .card-name { display: block !important; max-width: 100% !important; overflow: visible !important; white-space: normal !important; }
  .card-name em { max-width: calc(100% + 74px) !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
  .card-rating { position: absolute !important; top: 0 !important; right: 0 !important; white-space: nowrap !important; }
}

@media (max-width: 700px) {
  .card-price { display: inline-flex !important; align-items: baseline !important; gap: 5px !important; white-space: nowrap !important; font-size: 22.5px !important; }
  .card-price span, .card-price small { white-space: nowrap !important; font-size: 9.5px !important; letter-spacing: .12em !important; }
}

/* Hot tag stays red across both ice and pink themes. */
.tag-pill.tag-hot,
.card .tag-pill.tag-hot,
#featuredGrid .tag-pill.tag-hot,
body[data-page="search"] .card .tag-pill.tag-hot {
  background: linear-gradient(135deg, #ff4d4d 0%, #e11d48 55%, #991b1b 100%) !important;
  border-color: rgba(255,77,77,.58) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(239,68,68,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

/* Header contact buttons keep brand colors on mobile. */
.header-contact-btn.header-contact-line,
.header-contact-line {
  background: linear-gradient(135deg, #06c755, #00a844) !important;
  border-color: rgba(6,199,85,.55) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 22px rgba(6,199,85,.38), 0 0 22px rgba(6,199,85,.24) !important;
}
.header-contact-btn.header-contact-tg,
.header-contact-tg {
  background: linear-gradient(135deg, #2aabee, #168acd) !important;
  border-color: rgba(42,171,238,.55) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 22px rgba(42,171,238,.38), 0 0 22px rgba(42,171,238,.24) !important;
}
.header-contact-btn svg { color: #fff !important; fill: currentColor !important; opacity: 1 !important; }

/* Local-only brand typography: no external font blocking. */
.brand-name-zh,
.footer-brand-zh {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  color: #fff !important;
  text-shadow: 0 0 14px rgb(var(--magenta-rgb) / .38), 0 1px 0 rgba(255,255,255,.12) !important;
}
.brand-name-zh em,
.footer-brand-zh em {
  color: var(--magenta) !important;
  font-style: normal !important;
  text-shadow: 0 0 16px rgb(var(--magenta-rgb) / .62) !important;
}
.brand-name-en,
.footer-brand-en {
  color: rgba(255,255,255,.66) !important;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
}

/* Brand wordmark: external Songti-style font. Do not override with sans. */
.brand-name-zh,
.footer-brand-zh,
.sidebar-head .brand-name-zh {
  font-family: "Noto Serif TC Local", "Noto Serif TC", "PMingLiU", "Songti TC", "STSong", serif !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: #fffaf2 !important;
  text-shadow: 0 0 14px rgb(var(--magenta-rgb) / .42) !important;
}
.brand-name-zh em,
.footer-brand-zh em,
.sidebar-head .brand-name-zh em {
  color: var(--magenta) !important;
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  text-shadow: 0 0 16px rgb(var(--magenta-rgb) / .62) !important;
}

/* Price is only shown on detail pages; list cards stay cleaner. */
body:not([data-page="product-detail"]):not([data-page="product"]) .card-price-row,
body:not([data-page="product-detail"]):not([data-page="product"]) .card-price,
body:not([data-page="product-detail"]):not([data-page="product"]) .price-original,
#featuredGrid .card-price-row,
#techGrid .card-price-row {
  display: none !important;
}
body:not([data-page="product-detail"]):not([data-page="product"]) .card-foot {
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Final card identity polish: name/rating hierarchy + favorite in black info area */
.card .card-body { position: relative !important; }
.card.has-fav-heart .card-name-row { position: relative !important; display: block !important; min-height: 44px !important; padding-right: 116px !important; margin-bottom: 8px !important; }
.card.has-fav-heart .card-name { display: block !important; margin: 0 !important; color: #fffaf6 !important; font-size: clamp(18px, 2vw, 22px) !important; line-height: 1.05 !important; font-weight: 950 !important; letter-spacing: .02em !important; text-shadow: 0 1px 14px rgba(0,0,0,.58) !important; }
.card.has-fav-heart .card-name em { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: 4px !important; color: var(--aqua) !important; font-size: 11px !important; line-height: 1.1 !important; font-style: normal !important; font-weight: 950 !important; letter-spacing: .045em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 0 12px rgb(var(--cyan-rgb) / .34) !important; }
.card.has-fav-heart .card-rating { position: absolute !important; top: 1px !important; right: 42px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; min-height: 25px !important; padding: 5px 8px !important; border-radius: 999px !important; white-space: nowrap !important; color: rgba(255,255,255,.96) !important; border: 1px solid rgba(255,216,112,.36) !important; background: linear-gradient(180deg, rgba(255,216,112,.14), rgba(255,255,255,.045)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px rgba(248,213,107,.10) !important; font-size: 10px !important; font-weight: 950 !important; letter-spacing: .055em !important; }
.card.has-fav-heart .fav-heart { top: auto !important; bottom: 18px !important; left: 14px !important; right: auto !important; width: 32px !important; height: 32px !important; z-index: 9 !important; background: rgba(12,14,20,.82) !important; border-color: rgba(255,255,255,.22) !important; box-shadow: 0 8px 22px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12) !important; }
.card.has-fav-heart .fav-heart.on { background: linear-gradient(135deg, #ff5f7d, #e11d48) !important; border-color: rgba(255,210,220,.8) !important; }
@media (max-width: 700px) {
  .card.has-fav-heart .card-name-row { min-height: 42px !important; padding-right: 108px !important; }
  .card.has-fav-heart .card-name { font-size: 18px !important; }
  .card.has-fav-heart .card-name em { font-size: 10.8px !important; letter-spacing: .035em !important; }
  .card.has-fav-heart .card-rating { right: 39px !important; padding: 5px 7px !important; font-size: 9.4px !important; }
  .card.has-fav-heart .fav-heart { top: 7px !important; right: 7px !important; width: 29px !important; height: 29px !important; }
}

/* Final favorite placement: card top-right */
.card.has-fav-heart { position: relative !important; }
.card.has-fav-heart > .fav-heart { top: 10px !important; right: 10px !important; bottom: auto !important; width: 34px !important; height: 34px !important; z-index: 20 !important; background: rgba(8,10,14,.74) !important; border-color: rgba(255,255,255,.34) !important; box-shadow: 0 8px 22px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14) !important; }
.card.has-fav-heart .card-rating { right: 0 !important; }
@media (max-width: 700px) {
  .card.has-fav-heart > .fav-heart { top: auto !important; bottom: 14px !important; left: 10px !important; right: auto !important; width: 31px !important; height: 31px !important; }
  .card.has-fav-heart .card-name-row { padding-right: 74px !important; }
}

/* List cards: hide technician number; detail page keeps its own number display */
body:not([data-page="product-detail"]):not([data-page="product"]) .card .card-num,
#indexPage .card .card-num,
#featuredGrid .card-num,
#techGrid .card-num {
  display: none !important;
}


/* Final HD image pass: no veil, no dim filter, no scaling blur on list cards */
.card .card-img,
#featuredGrid .card-img,
#techGrid .card-img { background: #02040a !important; overflow: hidden !important; }
.card .card-img img,
#featuredGrid .card-img img,
#techGrid .card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; opacity: 1 !important; filter: brightness(1.08) contrast(1.08) saturate(1.08) !important; transform: none !important; transition: filter .25s ease !important; backface-visibility: hidden !important; image-rendering: auto !important; }
.card:hover .card-img img,
#featuredGrid .card:hover .card-img img,
#techGrid .card:hover .card-img img { transform: none !important; filter: brightness(1.1) contrast(1.09) saturate(1.1) !important; }
.card .card-img::before,
.card .card-img::after,
#featuredGrid .card-img::before,
#featuredGrid .card-img::after,
#techGrid .card-img::before,
#techGrid .card-img::after { content: none !important; display: none !important; opacity: 0 !important; background: none !important; }

/* List cards: remove decorative featured corner badge */
#featuredGrid .card::before,
#techGrid .card::before,
.card::before {
  content: none !important;
  display: none !important;
}

/* List cards: remove photo-side area pill; area remains in card metadata */
body:not([data-page="product-detail"]):not([data-page="product"]) .card .card-area-pill,
#featuredGrid .card-area-pill,
#techGrid .card-area-pill {
  display: none !important;
}

/* Final card tag repair: keep badges tidy, horizontal, and out of the right edge */
.card > .card-tag-row--inline,
.card .card-body > .card-tag-row--inline,
#featuredGrid > .card > .card-tag-row--inline,
#techGrid .card .card-tag-row--inline { position: static !important; inset: auto !important; transform: none !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 8px 10px 0 !important; gap: 5px !important; }
.card > .card-tag-row--inline .tag-pill,
.card .card-body > .card-tag-row--inline .tag-pill,
#featuredGrid > .card > .card-tag-row--inline .tag-pill,
#techGrid .card .card-tag-row--inline .tag-pill { flex: 0 0 auto !important; min-height: 20px !important; padding: 4px 7px !important; border-radius: 999px !important; font-size: 9px !important; line-height: 1 !important; letter-spacing: .02em !important; white-space: nowrap !important; }
@media (max-width: 700px) {
  .card > .card-tag-row--inline,
  .card .card-body > .card-tag-row--inline,
  #featuredGrid > .card > .card-tag-row--inline,
  #techGrid .card .card-tag-row--inline { padding: 7px 9px 0 !important; gap: 4px !important; }
  .card > .card-tag-row--inline .tag-pill,
  .card .card-body > .card-tag-row--inline .tag-pill,
  #featuredGrid > .card > .card-tag-row--inline .tag-pill,
  #techGrid .card .card-tag-row--inline .tag-pill { font-size: 8.5px !important; padding: 4px 6px !important; }
}

/* Final card English name color lock */
.card .card-name em,
#featuredGrid .card-name em,
#techGrid .card-name em {
  color: var(--magenta-2) !important;
  -webkit-text-fill-color: var(--magenta-2) !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px rgb(var(--magenta-2-rgb) / .38) !important;
}


/* ─── Card height uniform across grid row ─── */
#featuredGrid {
  align-items: stretch !important;
}
#featuredGrid .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
#featuredGrid .card .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
#featuredGrid .card .card-foot {
  margin-top: auto !important;
}

/* ─── Mobile banner: compact "128+" stat ─── */
@media (max-width: 767px) {
  .banner {
    display: flex !important;
    flex-direction: column !important;
    padding: 36px 22px !important;
    gap: 18px !important;
  }
  .banner-stat {
    order: 2;
    align-self: flex-end;
  }
  .banner-stat-num {
    font-size: 56px !important;
    line-height: 1 !important;
  }
  .banner-stat-label {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }
  .banner-text { order: 1; padding: 0 !important; }
}

/* ─── Card name "coin" — circular badge overlapping image bottom & body top ─── */
.card { position: relative !important; }
.card .card-name-coin {
  position: relative !important;
  z-index: 5 !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1a0a14 0%, #0a0508 100%) !important;
  border: 2px solid var(--magenta, #ec4899) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 0 4px rgba(8,8,12,0.95),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
.card .card-name-coin {
  flex-direction: column !important;
  gap: 2px !important;
}
.card .card-name-coin .card-name-coin__zh {
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Noto Serif TC', serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 8px rgba(236,72,153,0.55), 0 0 12px rgba(0,0,0,0.6) !important;
  line-height: 1 !important;
  text-align: center !important;
}
.card .card-name-coin .card-name-coin__en {
  font-family: var(--display, sans-serif) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--magenta-2, #f472b6) !important;
  text-shadow: 0 0 6px rgba(236,72,153,0.5) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  max-width: 92% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
[data-theme="ice"] .card .card-name-coin .card-name-coin__en,
html[data-hj-theme="ice"] .card .card-name-coin .card-name-coin__en {
  color: #7dd3fc !important;
  text-shadow: 0 0 6px rgba(56,189,248,0.5) !important;
}
/* English name moved below coin — small gap above body */
.card .card-body { padding-top: 8px !important; }
.card .card-body .card-name-row { justify-content: flex-start !important; gap: 12px !important; min-height: 0 !important; }
.card .card-name em {
  font-family: var(--display, sans-serif) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--paper, #f5efe5) !important;
  opacity: 0.85 !important;
}

@media (max-width: 600px) {
  .card .card-name-coin { width: 58px !important; height: 58px !important; }
  .card .card-name-coin .card-name-coin__zh { font-size: 17px !important; }
  .card .card-name-coin .card-name-coin__en { font-size: 6.5px !important; letter-spacing: 0.1em !important; }
  .card .card-body { padding-top: 6px !important; }
}

/* ─── Coin: left, overlaps image bottom (-36px) ─── */
.card .card-name-coin {
  margin: -36px 0 0 16px !important;
}
@media (max-width: 600px) {
  .card .card-name-coin { margin: -29px 0 0 12px !important; }
}

/* ─── Status bar: placed under meta line inside card body ─── */
.card-status-bar {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 2px 0 8px !important;
}
.card-status-bar > .online-status {
  position: static !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .card-status-bar { margin: 2px 0 7px !important; }
}

/* ─── Card meta: brighter, bolder area label ─── */
.card .card-meta {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.04em !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
.card .card-meta-area {
  font-family: var(--display, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 14px rgba(236,72,153,0.4) !important;
  margin-right: 2px !important;
}
[data-theme="ice"] .card .card-meta-area,
html[data-hj-theme="ice"] .card .card-meta-area {
  text-shadow: 0 0 14px rgba(56,189,248,0.4) !important;
}
@media (max-width: 600px) {
  .card .card-meta { font-size: 12px !important; }
  .card .card-meta-area { font-size: 15px !important; }
}

/* ─── Rating badge: pinned to card top-RIGHT (swapped with heart) ─── */
.card { position: relative !important; }
.card .card-rating {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(10, 10, 14, 0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.48) !important;
  font-family: var(--mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.card .card-rating .star {
  color: var(--gold, #d4af37) !important;
  font-size: 12px !important;
}
@media (max-width: 600px) {
  .card .card-rating { top: 6px !important; right: 6px !important; left: auto !important; padding: 3px 8px !important; font-size: 10px !important; }
  .card .card-rating .star { font-size: 11px !important; }
}
/* Hide other card-rating layouts that conflict */
.card .card-name-row .card-rating { position: absolute !important; }

/* card-name-row only contains rating; collapse to zero height but keep visible for absolute child */
.card .card-name-row {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: block !important;
  position: relative !important;
}

/* ─── Heart at TOP-LEFT (swapped with rating) ─── */
.card .fav-heart,
.card.has-fav-heart .fav-heart,
.card.has-fav-heart > .fav-heart,
#featuredGrid .card .fav-heart,
#techGrid .card .fav-heart {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 9 !important;
}
@media (max-width: 600px) {
  .card .fav-heart { top: 6px !important; left: 6px !important; right: auto !important; }
}

/* Strong rating override: force content visible at top-right corner */
.card > .card-body > .card-name-row > .card-rating,
.card .card-rating {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 26px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  z-index: 9 !important;
}

/* Override has-fav-heart specific rules — rating to top-right, heart to top-left */
.card.has-fav-heart .card-name-row,
.card.has-fav-heart > .card-body > .card-name-row {
  position: static !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.card.has-fav-heart .card-rating,
.card.has-fav-heart > .card-body > .card-name-row > .card-rating {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
}
.card.has-fav-heart .fav-heart,
.card.has-fav-heart > .fav-heart {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
}

/* Reset card-body to static so .card-rating positions relative to .card */
.card .card-body,
.card.has-fav-heart .card-body {
  position: static !important;
}

/* Rating flush to card top-right corner (no offset) */
.card .card-rating,
.card.has-fav-heart .card-rating,
.card.has-fav-heart > .card-body > .card-name-row > .card-rating {
  top: 0 !important;
  right: 0 !important;
  border-radius: 0 0 0 14px !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.36) !important;
  border-left: 1px solid rgba(212, 175, 55, 0.36) !important;
}

/* Heart moved to card BODY dark area — bottom-left, on the dark card-body bg */
.card .fav-heart,
.card.has-fav-heart .fav-heart,
.card.has-fav-heart > .fav-heart {
  position: absolute !important;
  top: auto !important;
  bottom: 18px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 9 !important;
}
@media (max-width: 600px) {
  .card .fav-heart { bottom: 14px !important; left: 10px !important; width: 28px !important; height: 28px !important; }
}

/* ULTIMATE override: heart at bottom-left of card on dark body area */
html body article.card .fav-heart,
html body article.card.has-fav-heart .fav-heart,
html body article.card.has-fav-heart > .fav-heart,
html body #featuredGrid article.card .fav-heart,
html body #techGrid article.card .fav-heart,
html body .grid article.card .fav-heart {
  top: auto !important;
  bottom: 18px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 22 !important;
}
@media (max-width: 700px) {
  html body article.card .fav-heart,
  html body article.card.has-fav-heart .fav-heart,
  html body article.card.has-fav-heart > .fav-heart {
    top: auto !important;
    bottom: 14px !important;
    left: 10px !important;
    right: auto !important;
  }
}

/* Favorite is now the name badge; old heart control is retired on cards */
.card > .fav-heart,
.card .card-body > .fav-heart,
.card .card-img > .fav-heart {
  display: none !important;
}
.card.has-fav-name-badge .card-img {
  position: relative !important;
}

/* Card-level favorite controls are hidden by current UI decision */
.card .fav-name-badge,
.card .fav-heart {
  display: none !important;
}