:root{
  --bg-1:#0b0614;
  --bg-2:#12092a;
  --glass:#ffffff1a;
  --glass-2:#ffffff14;
  --stroke:#9b8cf33a;
  --text:#e9e6ff;
  --muted:#b8b2d6;
  --accent:#a176ff;
  --accent-2:#6c3cff;
  --cyan:#6be2ff;
  --radius:18px;
  --shadow:0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Base glass + small helpers */
.glass{
  background: linear-gradient(180deg, #ffffff20, #ffffff0c);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px) saturate(120%);
}
.muted{ color:var(--muted) }
.btn{ display:inline-flex; align-items:center; gap:.45rem; font-weight:800; border-radius:12px; }
.btn.ghost{ border:1px solid var(--stroke); background:linear-gradient(180deg,#ffffff22,#ffffff10); padding:.5rem .7rem }
.btn.ghost:hover{ filter:brightness(1.05) }

/* --- Cover (3:1 aspect) --- */
.uhx-cover{ position: relative; overflow: hidden; margin-bottom: 18px; }
.uhx-cover-img{
  width: 100%; aspect-ratio: 3 / 1; height: auto; object-fit: cover; display: block;
  filter: saturate(110%) brightness(.95);
}
.uhx-cover-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(108,60,255,.30), transparent 60%),
    radial-gradient(900px 480px at 120% 120%, rgba(255,59,141,.22), transparent 65%),
    linear-gradient(180deg, rgba(11,6,20,0) 20%, rgba(11,6,20,.55) 70%, rgba(11,6,20,.88) 100%);
}

/* Profile strip (overlapping the cover) */
.uhx-profile{
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: end; gap: 1rem; padding: 16px 18px;
  margin-top: -72px;
}
.uhx-ava-wrap{ position:relative; width:96px; height:96px; border-radius:22px; }
.uhx-ava{
  width:100%; height:100%; border-radius:22px; object-fit: cover;
  border:1px solid #a176ff44; background:#160b31;
  box-shadow: 0 10px 28px rgba(108,60,255,.28), inset 0 0 8px rgba(255,255,255,.06);
}
/* soft animated aura */
.uhx-ava-wrap::before{
  content:""; position:absolute; inset:-3px; border-radius:26px; z-index:-1;
  background: conic-gradient(from 0deg, #6be2ff, #a176ff, #ff7fb0, #6be2ff);
  filter: blur(10px); opacity:.35; animation: uhx-spin 9s linear infinite;
}
@keyframes uhx-spin { to { transform: rotate(360deg) } }

.uhx-meta{ min-width:0 }
.uhx-user{
  font-weight:900; letter-spacing:.2px; font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  margin:0; line-height:1.1;
}
.uhx-name{ color:#dcd7ff; opacity:.9; margin-top:2px }

/* badges / pills */
.uhx-badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:8px }
.uhx-pill, .uhx-rankpill, .uhx-titlepill, .uhx-rolepill{
  display:inline-flex; align-items:center; gap:.4rem; line-height:1;
  padding:.32rem .58rem; border-radius:999px; border:1px solid var(--stroke);
  background: var(--glass-2); color:#eae6ff; font-size:.86rem;
}
/* Bare-bone rank badge, no fancy class attached (you’ll skin later) */
.rank-badge{ background:linear-gradient(180deg,#ffffff22,#ffffff10) }

.uhx-rolepill{ background:linear-gradient(180deg,#6be2ff22,#6be2ff10); border-color:#6be2ff55 }
.uhx-pts{ background:linear-gradient(180deg,#8a64ff22,#6c3cff12); border-color:#a176ff66 }

.uhx-actions{ display:flex; gap:.5rem; align-items:center }

/* --- Feed --- */
.uhx-feed{ display:grid; gap:.6rem; margin-bottom:18px }
.uhx-row{
  position: relative; display:flex; align-items:center; gap:1rem; padding:.9rem 1rem;
  text-decoration:none; color:inherit; transition:.15s transform, .15s filter, .15s border-color;
  border:1px solid var(--stroke); border-radius:14px; background:linear-gradient(180deg,#ffffff22,#ffffff10);
}
.uhx-row:hover{ transform: translateY(-1px); filter: brightness(1.05); border-color: rgba(162,118,255,.42) }
.uhx-row:focus-visible{ outline:2px solid #b39bff; outline-offset:3px }

.uhx-accent{
  width:4px; height:100%; border-radius:6px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px #6c3cff33 inset;
}
.uhx-main{ flex:1 1 auto; min-width:0 }
.uhx-line{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem }
.uhx-chal{
  font-weight:800; letter-spacing:.2px; max-width: 60ch;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.uhx-event{ color:#dcd7ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 40ch; }
.uhx-dot{ opacity:.6 }
.uhx-sub{
  color:var(--muted); font-size:.95rem; display:flex; align-items:center; gap:.5rem; margin-top:.15rem;
}
.uhx-cat{
  padding:.15rem .4rem; border-radius:8px; background: var(--glass-2); border:1px solid var(--stroke);
  color:#eae6ff; font-size:.82rem;
}
.uhx-bullet{ opacity:.5 }
.uhx-arrow{ opacity:.6; transition: .15s transform, .15s opacity }
.uhx-row:hover .uhx-arrow{ transform: translateX(2px); opacity:.95 }

/* --- Pager --- */
.uhx-pager{ padding:.6rem .7rem }
.pager{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:center
}
.pager .page, .pager .gap{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  padding:0 .65rem; border-radius:10px; border:1px solid var(--stroke);
  background: var(--glass-2); color:#eae6ff; text-decoration:none; font-weight:700;
}
.pager .page:hover{ filter:brightness(1.06) }
.pager .page.is-active{ background: linear-gradient(180deg,#ffffff25,#ffffff10); border-color:#7d69e955 }
.pager .page.is-disabled{ opacity:.5; pointer-events:none }
.pager .gap{ padding:0 .4rem; min-width:auto }

/* --- Empty state --- */
.uhx-empty{ display:grid; place-items:center; text-align:center; padding:30px }
.uhx-empty-art{ font-size:48px; line-height:1 }
.uhx-empty .muted{ color:var(--muted) }

/* --- Responsive --- */
@media (max-width: 720px){
  .uhx-profile{ grid-template-columns:auto 1fr; align-items:end; margin-top: -62px }
  .uhx-actions{ grid-column: 1 / -1; justify-content:flex-end }
  .uhx-ava-wrap{ width:84px; height:84px }
}