/* ===== Namespaced wu-* ===== */
:root{
  --stroke: var(--stroke, rgba(155,140,243,.23));
  --text: var(--text, #e9e6ff);
  --muted: var(--muted, #b8b2d6);
  --shadow: var(--shadow, 0 22px 60px rgba(0,0,0,.45));
  --accent: var(--accent, #a176ff);
  --accent-2: var(--accent-2, #6c3cff);
  --pink-1:#ff7fb0; --pink-2:#ff3b8d;
}

/* Utility glass wrapper (matches site style) */
.glass{
  background: linear-gradient(180deg,#ffffff20,#ffffff0c);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px) saturate(120%);
}

/* ===== Hero ===== */
.wu-hero{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px 14px; margin-bottom:12px }
.wu-hero h1{ margin:0 0 .2rem }
.wu-hero .muted{ color:var(--muted) }
.wu-hero-stats{ display:flex; gap:.6rem; flex-wrap:wrap }
.wu-stat{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:12px;
  background:linear-gradient(180deg,#ffffff22,#ffffff12); border:1px solid var(--stroke); font-weight:700;
}

/* ===== Search ===== */
.wu-search{ padding:10px 12px; margin-bottom:12px }
.wu-search-bar{
  display:flex; align-items:center; gap:.6rem; padding:.35rem .5rem; border-radius:12px;
  border:1px solid var(--stroke); background:linear-gradient(180deg,#03001466,#03001444);
}
.wu-search-bar input{
  flex:1 1 260px; min-width:200px; border:0; background:transparent; color:var(--text);
  font: 600 1rem/1.2 Inter, system-ui; padding:.5rem .25rem;
}
.wu-search-bar input::placeholder{ color:#c9c3ec }
.wu-search-bar input:focus{ outline:none }
.wu-search-meta{ margin-top:.5rem; color:var(--muted); font-size:.95rem }

/* ===== Ad ===== */
.wu-ad{ margin:12px 0 14px; padding:8px 10px; overflow:hidden }
.wu-ad-inner{ display:block; width:100%; text-align:center }
.wu-ad-inner img, .wu-ad-inner ins, .wu-ad-inner iframe{ display:block; margin:0 auto; max-width:100%; height:auto }

/* ===== List container ===== */
.wu-list{ overflow:hidden }
.wu-items{
  display:grid; gap:10px; padding:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){ .wu-items{ grid-template-columns: 1fr } }

/* ===== Card ===== */
.wu-card{
  --edge: rgba(161,118,255,.66); /* per-card edge glow (set inline) */
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem;
  padding:.9rem 1rem; border-radius:16px; color:var(--text); text-decoration:none; overflow:hidden;
  border:1px solid var(--stroke);
  background:
    radial-gradient(120% 180% at 0% 0%, #ffffff14 0%, transparent 62%),
    linear-gradient(180deg, rgba(40,20,70,.55), rgba(20,10,35,.38));
  box-shadow: inset 0 0 8px rgba(162,118,255,.06), 0 2px 10px rgba(0,0,0,.35);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wu-card::before{
  /* neon edge aura */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 230deg at 8% -4%, var(--edge), transparent 18%, transparent 82%, var(--edge));
  filter: blur(16px); opacity:.35; mix-blend-mode: screen;
}
.wu-card::after{
  /* soft sheen sweep */
  content:""; position:absolute; inset:-40%; transform:translateX(-60%) rotate(18deg);
  background:linear-gradient(90deg, transparent 45%, #ffffff18 50%, transparent 55%);
  transition: transform .6s ease;
}
.wu-card:hover{
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.05);
  border-color: rgba(162,118,255,.6);
  box-shadow: 0 0 22px rgba(162,118,255,.28), inset 0 0 12px rgba(162,118,255,.07);
}
.wu-card:hover::after{ transform:translateX(40%) rotate(18deg) }
.wu-card:active{ transform: translateY(-1px) }

/* avatar with ring */
.wu-ava-wrap{ position:relative; width:46px; height:46px; border-radius:12px; padding:1px; background:linear-gradient(135deg, var(--edge), #6c3cff55) }
.wu-ava-wrap::before{
  content:""; position:absolute; inset:0; border-radius:12px; background:linear-gradient(180deg,#ffffff1e,#ffffff0a);
  filter: blur(3px);
}
.wu-ava{
  position:relative; z-index:1; width:100%; height:100%; border-radius:10px; object-fit:cover;
  border:1px solid rgba(162,118,255,.35); background:#160b31; box-shadow: 0 0 12px rgba(108,60,255,.18);
}

/* meta */
.wu-meta{ min-width:0 }
.wu-top{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-bottom:.15rem }

/* chips */
.wu-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px;
  border:1px solid rgba(162,118,255,.38); font-weight:800; font-size:.85rem;
  background:linear-gradient(180deg,#ffffff22,#ffffff10); color:#eae6ff;
}
.wu-chip .wu-ev-thumb{
  width:18px; height:18px; border-radius:6px; object-fit:cover; border:1px solid var(--stroke); background:#12092a;
}

.wu-title{
  margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800;
  color:#efeaff; letter-spacing:.2px;
}
.wu-sub{ display:flex; gap:.45rem; align-items:center; color:rgba(184,178,214,.9); margin-top:.08rem; font-size:.95rem }
.wu-user{ color:#d7caff }
.wu-sub .dot{ opacity:.5 }

/* Love */
.wu-love{
  display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .6rem; border-radius:999px; font-weight:800;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(162,118,255,.4); color:#ff7fb0; position:relative;
  box-shadow: inset 0 0 10px rgba(162,118,255,.08), 0 0 12px rgba(255,127,176,.18);
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wu-love:hover{ filter:brightness(1.08); transform: translateY(-1px) }
.wu-love .heart-filled{ display:none }
.wu-love.on .heart-outline{ display:none }
.wu-love.on .heart-filled{ display:inline }
.wu-love .count{ min-width:1.6ch; text-align:right }

/* Tooltip on love */
.wu-love::after{
  content:attr(data-tip); position:absolute; right:0; top:calc(100% + 8px);
  transform: translateY(-4px) scale(.96); transform-origin:100% 0%;
  background: linear-gradient(180deg, #ffffffee, #ffffffde); color:#0a051a;
  border:1px solid rgba(162,118,255,.25);
  padding:.18rem .45rem; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.22);
  font:700 .78rem/1.1 Inter, ui-sans-serif; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
}
.wu-love:hover::after{ opacity:1; transform: translateY(0) scale(1) }

/* Empty */
.wu-empty{ padding:14px; text-align:center }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wu-card, .wu-love{ transition:none }
  .wu-card:hover{ transform:none }
}