: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);
}
.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%);
}
.mono{ font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace }

/* ===== Cover + Profile ===== */
.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%);
}

.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);
}
/* animated soft 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: pw-spin 9s linear infinite;
}
@keyframes pw-spin { to { transform: rotate(360deg) } }

.uhx-meta{min-width:0}
.uhx-user{font-weight:900; letter-spacing:.2px; line-height:1.1}
.uhx-name{color:#dcd7ff; opacity:.9; margin-top:2px}

.uhx-badges{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:8px}
.uhx-pill,.uhx-titlepill,.uhx-rolepill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .58rem; border-radius:999px; border:1px solid var(--stroke);
  background: var(--glass-2); color:#eae6ff; font-size:.86rem; line-height:1;
}
/* bare-bone rank badge (intentionally simple for future theming) */
.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}
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem .9rem; border-radius:12px; border:1px solid var(--stroke);
  background:var(--glass-2); color:var(--text); text-decoration:none;
}
.btn.sm{padding:.5rem .75rem}
.btn.ghost{background:transparent}
.btn.primary{
  background: radial-gradient(260px 160px at 20% 0%, #8a64ff55, transparent 60%), linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent; box-shadow:0 8px 18px rgba(108,60,255,.35);
}

/* ===== Search ===== */
.uw-toolbar{margin:8px 0 10px}
.uw-search{
  display:flex; gap:.5rem; align-items:center; padding:.5rem .6rem; border-radius:14px;
  position:relative;
}
.uw-search-ico{position:absolute; left:14px; color:#bfb8e6; opacity:.9}
.uw-search input{
  flex:1 1 auto; min-width:160px; padding:.7rem .85rem .7rem 2.2rem; border-radius:12px;
  border:1px solid var(--stroke); background:var(--glass-2); color:var(--text); outline:none;
}
.uw-search input::placeholder{color:#bfb8e6}
.uw-search input:focus{border-color:#7d69e9; background:#ffffff1f}
.uw-clear{
  display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:10px; border:1px solid var(--stroke); background:var(--glass-2)
}

/* ===== Grid ===== */
.uw-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem}
@media (max-width: 980px){ .uw-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .uw-grid{grid-template-columns:1fr} }

.uw-card{display:grid; grid-template-rows:auto 1fr auto; overflow:hidden}
.uw-media{position:relative; display:block; border-bottom:1px solid var(--stroke); overflow:hidden}
.uw-thumb{
  width:100%; aspect-ratio:16 / 9; background: center/cover no-repeat var(--img);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.02) contrast(1.02);
}
.uw-media:hover .uw-thumb{ transform:scale(1.04) }

.uw-cat{
  position:absolute; left:10px; top:10px; padding:.22rem .55rem; border-radius:999px;
  border:1px solid var(--stroke); background:var(--glass-2); font-weight:900; font-size:.78rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.uw-cat .dot{ opacity:.6 }

.uw-body{padding:.7rem .8rem .4rem}
.uw-title{margin:0 0 .2rem; font-size:1.04rem}
.uw-title a{color:#fff; text-decoration:none}
.uw-title a:hover{text-decoration:underline}
.uw-sub{color:var(--muted); font-size:.92rem; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap}
.uw-sub .dot{opacity:.45}
.uw-event{opacity:.95}

.uw-foot{display:flex; align-items:center; justify-content:space-between; padding:.55rem .7rem .7rem; gap:.5rem}
.uw-love{display:inline-flex; align-items:center; gap:.35rem; font-weight:800}
.uw-love .ri-heart-3-line,
.uw-love .ri-heart-3-fill{font-size:1.15rem; line-height:1}
.uw-love .is-loved{color:#ff8fb3}

/* ===== 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 ===== */
.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 tweaks ===== */
@media (max-width: 720px){
  .uhx-profile{grid-template-columns:auto 1fr; margin-top:-62px}
  .uhx-actions{grid-column:1/-1; justify-content:flex-end}
  .uhx-ava-wrap{ width:84px; height:84px }
}