/* Phase 2: shared header plus the homepage ticker, category rail and Daily Shot. */
html.hj-phase2 body:not([data-admin-page]) .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  min-height: 80px !important;
  height: 80px !important;
  padding: 12px clamp(24px, 3vw, 48px) !important;
  gap: clamp(16px, 1.8vw, 28px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgb(var(--magenta-rgb) / .22) !important;
  background: rgb(11 8 12 / .92) !important;
  box-shadow: 0 14px 36px rgb(0 0 0 / .18) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
}

html.hj-phase2[data-theme="ice"] body:not([data-admin-page]) .header {
  background: rgb(7 16 20 / .92) !important;
}

html.hj-phase2 .header .brand-row { flex: 0 0 auto !important; }
html.hj-phase2 .header .brand-name-zh {
  color: var(--paper) !important;
  font-family: var(--display-zh) !important;
  font-size: 31px !important;
  font-weight: 700 !important;
  line-height: .96 !important;
  letter-spacing: .10em !important;
  text-shadow: 0 0 22px rgb(var(--magenta-rgb) / .16) !important;
}
html.hj-phase2 .header .brand-name-zh em {
  color: var(--magenta) !important;
  text-shadow: 0 0 18px rgb(var(--magenta-rgb) / .28) !important;
}
html.hj-phase2 .header .brand-name-en {
  margin-top: 3px !important;
  color: var(--paper-mute) !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}
html.hj-phase2 .header .brand-meta,
html.hj-phase2 .header .header-live,
html.hj-phase2 .header .header-stats,
html.hj-phase2 .header .header-quick { display: none !important; }
html.hj-phase2 .header .nav { margin-right: auto !important; gap: clamp(18px, 1.7vw, 30px) !important; }
html.hj-phase2 .header .nav a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--paper-mute) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
html.hj-phase2 .header .nav a:is(:hover, .active) { color: var(--paper) !important; }
html.hj-phase2 .header .nav a.active::after { background: var(--magenta) !important; }
html.hj-phase2 .header .header-contacts { margin-left: auto !important; gap: 10px !important; }
html.hj-phase2 .header .header-contact-btn {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgb(var(--magenta-rgb) / .28) !important;
  background: rgb(var(--magenta-rgb) / .08) !important;
  color: var(--paper) !important;
  box-shadow: 0 8px 24px rgb(var(--magenta-rgb) / .10) !important;
}
html.hj-phase2 .header :where(.theme-toggle, .nav-menu-btn) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 1px solid rgb(var(--magenta-rgb) / .26) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / .035) !important;
  color: var(--paper) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07) !important;
}

html.hj-phase2 body[data-page="index"] .hero-live-badge {
  min-height: 38px !important;
  height: 38px !important;
  border-bottom-color: rgb(var(--magenta-rgb) / .18) !important;
}
html.hj-phase2 body[data-page="index"] .hero-live-badge__text {
  width: 100% !important;
  transform: none !important;
  animation: none !important;
}
html.hj-phase2 body[data-page="index"] .hero-live-badge__group {
  width: 100% !important;
  padding-inline: 14px !important;
}
html.hj-phase2 body[data-page="index"] .hero-live-badge__item:not(:first-child),
html.hj-phase2 body[data-page="index"] .hero-live-badge__group:not(:first-child) {
  display: none !important;
}

html.hj-phase2 body[data-page="index"] .hero-service-strip-wrap,
html.hj-phase2 body[data-page="index"] .hero-service-strip {
  border-color: rgb(var(--magenta-rgb) / .20) !important;
  background: rgb(11 8 12 / .96) !important;
  box-shadow: none !important;
}
html.hj-phase2[data-theme="ice"] body[data-page="index"] .hero-service-strip-wrap,
html.hj-phase2[data-theme="ice"] body[data-page="index"] .hero-service-strip {
  background: rgb(7 16 20 / .96) !important;
}
html.hj-phase2 body[data-page="index"] .hero-service-link small { color: var(--magenta) !important; }
html.hj-phase2 body[data-page="index"] .hero-service-link strong { color: var(--paper) !important; }
html.hj-phase2 body[data-page="index"] .hero-service-link.is-active {
  background: rgb(var(--magenta-rgb) / .07) !important;
  box-shadow: inset 0 -2px 0 var(--magenta) !important;
}

html.hj-phase2 body[data-page="index"] .daily-shot-card__photo {
  opacity: 1 !important;
  filter: brightness(1.06) contrast(1.05) saturate(1.04) !important;
}

html.hj-phase2 :where(a, button):focus-visible {
  outline: 2px solid var(--magenta-2) !important;
  outline-offset: 3px !important;
}

@media (min-width: 901px) {
  html.hj-phase2 body[data-page="index"] .section {
    width: min(100%, 1440px) !important;
    margin-inline: auto !important;
    padding: 54px clamp(28px, 3.4vw, 52px) 76px !important;
  }
  html.hj-phase2 body[data-page="index"] .today-online.daily-shot {
    padding: 26px !important;
    border: 1px solid rgb(var(--magenta-rgb) / .18) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgb(255 255 255 / .045), transparent 46%), var(--ink-2) !important;
    box-shadow: 0 24px 60px rgb(0 0 0 / .26), inset 0 1px 0 rgb(255 255 255 / .05) !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot .today-online__head { margin-bottom: 20px !important; }
  html.hj-phase2 body[data-page="index"] .daily-shot .today-online__head h3 {
    font-family: var(--display-zh) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot-card {
    flex: 0 0 calc((100% - 70px) / 6) !important;
    min-width: 178px !important;
    max-width: none !important;
    border: 1px solid rgb(var(--magenta-rgb) / .16) !important;
    border-radius: 20px !important;
    background: var(--ink-2) !important;
    box-shadow: 0 18px 42px rgb(0 0 0 / .24) !important;
  }
}

@media (max-width: 900px) {
  html.hj-phase2 body:not([data-admin-page]) .header {
    min-height: 64px !important;
    height: 64px !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    box-shadow: none !important;
  }
  html.hj-phase2 .header .brand-row { margin-right: auto !important; }
  html.hj-phase2 .header .brand-name { min-width: 134px !important; }
  html.hj-phase2 .header .brand-name-zh {
    font-size: 24px !important;
    letter-spacing: .12em !important;
  }
  html.hj-phase2 .header .brand-name-en {
    font-size: 9px !important;
    letter-spacing: .22em !important;
  }
  html.hj-phase2 .header .nav,
  html.hj-phase2 .header .header-contacts { display: none !important; }

  html.hj-phase2 body[data-page="index"] .hero-live-badge {
    min-height: 34px !important;
    height: 34px !important;
  }
  html.hj-phase2 body[data-page="index"] .hero-live-badge__group {
    justify-content: flex-start !important;
    padding-inline: 12px !important;
  }
  html.hj-phase2 body[data-page="index"] .hero-live-badge__item { height: 34px !important; }
  html.hj-phase2 body[data-page="index"] .hero-live-badge__part--name { font-size: 14px !important; }

  html.hj-phase2 body[data-page="index"] .hero-service-strip-wrap,
  html.hj-phase2 body[data-page="index"] .hero-service-strip { height: 62px !important; }
  html.hj-phase2 body[data-page="index"] .hero-service-strip {
    gap: 0 !important;
    padding: 0 38px !important;
    scroll-padding-inline: 38px !important;
  }
  html.hj-phase2 body[data-page="index"] .hero-service-strip-wrap::before,
  html.hj-phase2 body[data-page="index"] .hero-service-strip-wrap::after { display: none !important; }
  html.hj-phase2 body[data-page="index"] .hero-service-link {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    height: 62px !important;
    padding: 9px 8px 7px !important;
    gap: 3px !important;
    border: 0 !important;
    border-right: 1px solid rgb(var(--magenta-rgb) / .16) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html.hj-phase2 body[data-page="index"] .hero-service-link small {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    letter-spacing: .10em !important;
  }
  html.hj-phase2 body[data-page="index"] .hero-service-link strong {
    font-family: var(--display-zh) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  html.hj-phase2 body[data-page="index"] .section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    background: transparent !important;
  }
  html.hj-phase2 body[data-page="index"] .home-discovery {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  html.hj-phase2 body[data-page="index"] .today-online.daily-shot {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot .today-online__head {
    min-height: 0 !important;
    margin: 0 0 6px !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot .today-online__head > :first-child { min-width: 0 !important; }
  html.hj-phase2 body[data-page="index"] .today-online__eyebrow {
    margin-bottom: 4px !important;
    color: var(--magenta) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot .today-online__head h3 {
    max-width: none !important;
    margin: 0 !important;
    color: var(--paper) !important;
    font-family: var(--display-zh) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }
  html.hj-phase2 body[data-page="index"] .today-online__actions {
    width: auto !important;
    margin-left: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
  }
  html.hj-phase2 body[data-page="index"] .today-online__actions > a {
    color: var(--magenta) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot__nav {
    order: -1 !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot__nav .rail-nav__btn {
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgb(var(--magenta-rgb) / .28) !important;
    background: rgb(11 8 12 / .84) !important;
    color: var(--paper) !important;
    box-shadow: 0 8px 20px rgb(0 0 0 / .24) !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot__nav .rail-nav__btn:disabled { opacity: .34 !important; }
  html.hj-phase2 body[data-page="index"] .daily-shot__rail {
    min-height: 254px !important;
    width: auto !important;
    margin: 0 -16px !important;
    padding: 0 16px 8px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot-card {
    flex: 0 0 clamp(142px, 39vw, 164px) !important;
    min-width: 142px !important;
    max-width: 164px !important;
    height: 246px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--ink-2) !important;
    box-shadow: 0 14px 34px rgb(var(--magenta-rgb) / .08) !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot-card__avatar,
  html.hj-phase2 body[data-page="index"] .daily-shot-card__body small { display: none !important; }
  html.hj-phase2 body[data-page="index"] .daily-shot-card__shade {
    background: linear-gradient(180deg, transparent 48%, rgb(11 8 12 / .68) 100%) !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot-card__body {
    left: 10px !important;
    right: 8px !important;
    bottom: 12px !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot-card__body strong {
    color: #fffafc !important;
    font-family: var(--display-zh) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: .03em !important;
    text-shadow: 0 2px 12px rgb(0 0 0 / .8) !important;
  }
  html.hj-phase2 body[data-page="index"] .daily-shot-card__body::after {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 1px !important;
    margin-top: 8px !important;
    background: var(--magenta) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.hj-phase2 body[data-page="index"] .hero-live-badge::before { animation: none !important; }
}