/* hx-* namespace (inherits main layout vars) */
:root {
  --stroke: var(--stroke, rgba(155, 140, 243, .23));
  --text: var(--text, #e9e6ff);
  --muted: var(--muted, #b8b2d6);
  --accent: var(--accent, #a176ff);
  --accent-2: var(--accent-2, #6c3cff);
  --cyan: var(--cyan, #6be2ff);
  --shadow: 0 22px 60px rgba(0, 0, 0, .45);
  --glass: linear-gradient(180deg, #ffffff22, #ffffff10);
  --glass-2: linear-gradient(180deg, #ffffff18, #ffffff0a);
}

/* Utilities */
.glass {
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* ================= Hero ================= */
.hx-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 14px;
  margin: 6px 0 12px;
  overflow: hidden;
}

.hx-hero .hx-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  filter: saturate(120%)
}

.hx-glyph {
  position: absolute;
  font-size: 26px;
  line-height: 1;
  color: #c7b9ff;
  animation: hx-drift 14s ease-in-out infinite
}

.hx-glyph.term {
  left: 8%;
  top: 18%;
  animation-delay: .2s
}

.hx-glyph.key {
  right: 10%;
  top: 15%;
  animation-delay: 1.2s
}

.hx-glyph.shield {
  left: 20%;
  bottom: 12%;
  animation-delay: 2.1s
}

.hx-glyph.bug {
  right: 22%;
  bottom: 14%;
  animation-delay: 2.8s
}

.hx-glyph.wifi {
  left: 46%;
  top: 8%;
  animation-delay: 3.6s
}

@keyframes hx-drift {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg)
  }

  50% {
    transform: translate(6px, -6px) rotate(-8deg)
  }
}

.hx-hero-head {
  display: flex;
  align-items: center;
  gap: .55rem
}

.hx-hero h1 {
  margin: .1rem 0 .1rem;
  font-size: 1.65rem
}

.hx-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4cffb1;
  box-shadow: 0 0 0 0 rgba(76, 255, 177, .6);
  animation: hx-ping 1.8s infinite;
  display: inline-block
}

@keyframes hx-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 255, 177, .6)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(76, 255, 177, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(76, 255, 177, 0)
  }
}

.hx-hero-sub {
  margin: .2rem 0 0;
  color: var(--muted)
}

.hx-hero-statsbox {
  align-self: center;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(162, 118, 255, .22), rgba(108, 60, 255, .15));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(108, 60, 255, .18);
}

.hx-iconwrap {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--stroke)
}

.hx-count b {
  font-size: 1.25rem
}

.hx-count .muted {
  display: block;
  font-weight: 700;
  font-size: .86rem
}

/* Ad */
.hx-ad {
  margin: 10px 0 12px;
  padding: 8px 10px
}

.hx-ad-inner img,
.hx-ad-inner iframe,
.hx-ad-inner ins {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto
}

/* ================= Stream ================= */
.hx-feed {
  display: grid;
  gap: .9rem
}

/* Card */
.hx-item {
  --edge: rgba(161, 118, 255, .66);
  /* default edge glow (overridden inline) */
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(90% 140% at 0% 0%, #ffffff08 0%, transparent 60%),
    linear-gradient(180deg, #ffffff22, #ffffff0d);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.hx-item:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 40px rgba(108, 60, 255, .24)
}

/* neon edge aura */
.hx-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 230deg at 10% 0%, var(--edge), transparent 20%, transparent 80%, var(--edge));
  filter: blur(16px);
  opacity: .35;
  mix-blend-mode: screen;
}

/* sheen sweep */
.hx-item::after {
  content: "";
  position: absolute;
  inset: -40%;
  transform: translateX(-60%) rotate(20deg);
  background: linear-gradient(90deg, transparent 45%, #ffffff1f 50%, transparent 55%);
  transition: transform .6s ease;
}

.hx-item:hover::after {
  transform: translateX(40%) rotate(20deg)
}

/* left column avatar with soft ring */
.hx-ava-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, var(--edge), #6c3cff55);
}

.hx-ava-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff1e, #ffffff0a);
  filter: blur(4px);
}

.hx-ava {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  border: 1px solid var(--stroke);
  background: #160b31;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .05)
}

/* main body */
.hx-main {
  min-width: 0;
  display: grid;
  gap: 6px
}

.hx-topline {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.hx-user {
  font-weight: 900;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.hx-dot {
  opacity: .5
}

/* Bare-bone rank badge: no visuals at all; dynamic class from DB will skin it */
.rank-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: .88rem;
  line-height: 1;
}

/* Event chip w/ tiny cover */
.hx-event {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .18rem .5rem;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  font-weight: 800;
  font-size: .86rem;
  color: #eae7ff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-ev-thumb {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--stroke);
  background: #12092a
}

/* second line */
.hx-desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  color: var(--text);
  font-weight: 600;
}

.hx-chal {
  font-weight: 900;
  max-width: clamp(120px, 40vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.hx-chal-link {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: inherit;
  text-decoration: none;
  padding: .12rem .32rem;
  border-radius: 8px;
  border: 1px solid transparent
}

.hx-chal-link:hover {
  border-color: var(--stroke);
  background: linear-gradient(180deg, #ffffff1a, #ffffff0b)
}

.hx-out {
  transform: translateY(-1px);
  opacity: .9
}

/* category pill & per-item aura color set with --edge var */
.hx-cat {
  display: inline-flex;
  align-items: center;
  padding: .16rem .52rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  font-weight: 900;
  font-size: .78rem;
}

.hx-cat--web {
  color: #d7f5ff
}

.hx-cat--pwn {
  color: #ffd4f7
}

.hx-cat--crypto {
  color: #f1ffb6
}

.hx-cat--reverse,
.hx-cat--rev,
.hx-cat--re {
  color: #ffd9ae
}

.hx-cat--forensics {
  color: #d5b8ff
}

.hx-cat--osint {
  color: #b6ffe2
}

/* right column: time + arrow */
.hx-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.hx-when {
  white-space: nowrap;
  font-weight: 700;
  font-size: .94rem
}

.hx-arrow {
  color: #eae6ff88;
  font-size: 1.25rem;
  font-weight: 900;
  transition: .18s transform, .18s color
}

.hx-item:hover .hx-arrow {
  transform: translateX(2px);
  color: #fff
}

/* Empty */
#hx-empty.hx-empty {
  text-align: center;
  padding: 22px;
  margin-top: 12px
}

.hx-empty-art {
  font-size: 2.1rem;
  margin-bottom: .35rem
}

/* Responsive */
@media (max-width: 860px) {
  .hx-hero {
    grid-template-columns: 1fr
  }

  .hx-hero-statsbox {
    justify-self: start;
    margin-top: .4rem
  }
}

@media (max-width: 720px) {
  .hx-item {
    grid-template-columns: 52px 1fr 16px
  }

  .hx-right {
    display: none
  }

  .hx-ava-wrap {
    width: 50px;
    height: 50px
  }

  .hx-chal {
    max-width: clamp(100px, 60vw, 420px)
  }
}