/* ===== Namespaced ew-* for safety ===== */
: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;
}

/* Event wrapper */
.ew-event{
  overflow:hidden; border-radius:16px; border:1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff20, #ffffff0c);
  box-shadow: var(--shadow); backdrop-filter: blur(12px) saturate(120%);
  padding:0; margin-bottom:14px;
}

/* Banner */
.ew-banner{ position:relative; background:#12092a; }
.ew-ratio-3x1{ aspect-ratio:3 / 1 }
.ew-banner::before{
  content:""; position:absolute; inset:0; background:center/cover no-repeat var(--img);
  filter:saturate(1.02) contrast(1.02);
}
.ew-mask{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,5,26,.38), rgba(10,5,26,.55) 45%, rgba(10,5,26,.82) 70%, rgba(10,5,26,.92)),
    linear-gradient(90deg, rgba(10,5,26,.45), rgba(10,5,26,.15) 30%, rgba(10,5,26,.45));
  pointer-events:none;
}

/* Partner ribbon */
.ew-ribbon{
  position:absolute; top:12px; left:-12px; z-index:5;
  padding:.35rem .75rem .35rem 1.2rem; color:#0a051a; font-weight:800; font-size:.72rem; letter-spacing:.02em;
  background: linear-gradient(135deg, #6be2ff, #a176ff);
  border-top-right-radius:10px; border-bottom-right-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.ew-ribbon::before, .ew-ribbon::after{
  content:""; position:absolute; top:100%; left:14px; width:0; height:0; border-style:solid;
}
.ew-ribbon::before{ border-width:6px 6px 0 0; border-color:#4aaed4 transparent transparent transparent; opacity:.7 }
.ew-ribbon::after{ left:26px; border-width:6px 6px 0 0; border-color:#6e56d6 transparent transparent transparent; opacity:.7 }

/* Love toggle pill */
.ew-love-toggle{
  position:absolute; right:12px; top:12px; z-index:6;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .65rem; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#fffffff0,#ffffffcf); color:var(--pink-2);
  text-shadow: none; cursor:pointer;
}
.ew-love-toggle .heart-filled{ display:none }
.ew-love-toggle[aria-pressed="true"]{
  color:#fff; background:linear-gradient(135deg,#ff7fb0,#ff3b8d); border-color:transparent; box-shadow:0 8px 18px rgba(255,59,141,.26)
}
.ew-love-toggle[aria-pressed="true"] .heart-outline{ display:none }
.ew-love-toggle[aria-pressed="true"] .heart-filled{ display:block }
/* micro tooltip */
.ew-love-toggle::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:.25rem .5rem; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.22);
  font:600 .82rem/1.2 Inter, ui-sans-serif; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease;
}
.ew-love-toggle:hover::after, .ew-love-toggle:focus-visible::after{ opacity:1; transform: translateY(0) scale(1) }

/* Bottom row (logo inline + text) */
.ew-bottom{
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  padding:12px 14px;
}
.ew-left{ display:flex; align-items:center; gap:.8rem; min-width:0 }
.ew-logo-inline{
  width:64px; height:64px; object-fit:cover; border-radius:12px; border:1px solid var(--stroke);
  background:#160b31; box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.ew-titlewrap{ min-width:0 }
.ew-left h1{ margin:.15rem 0 .15rem }
.ew-sub{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }
.ew-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .55rem; border-radius:999px;
  background:linear-gradient(180deg,#ffffff20,#ffffff0e); border:1px solid var(--stroke); color:#fff;
}
.ew-cta{ display:flex; gap:.6rem }
.ew-soft{ background:linear-gradient(180deg,#ffffff22,#ffffff12) !important; border-color:var(--stroke) !important }

/* Ad slot */
.ew-ad{
  border:1px solid var(--stroke); border-radius:16px; margin:12px 0 14px; padding:8px 10px;
  background:linear-gradient(180deg,#ffffff1a,#ffffff0a); overflow:hidden; box-shadow:var(--shadow);
}
.ew-ad-inner{ display:block; width:100%; text-align:center }
.ew-ad-inner img, .ew-ad-inner ins, .ew-ad-inner iframe{ display:block; margin:0 auto; max-width:100%; height:auto }

/* Writeup list box */
.ew-list{
  border:1px solid var(--stroke); border-radius:16px; overflow:hidden;
  background: linear-gradient(180deg,#ffffff1f,#ffffff0a); box-shadow: var(--shadow);
}
.ew-list-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:10px 12px; border-bottom:1px solid var(--stroke);
}

/* Cards */
.ew-items{ display:grid; gap:10px; padding:12px }
.ew-card{
  display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center;
  padding:.7rem .8rem; border-radius:14px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,#ffffff22,#ffffff10); text-decoration:none; color:inherit;
  transition:.2s transform, .2s filter;
}
.ew-card:hover{ transform: translateY(-2px); filter:brightness(1.03) }
.ew-ava{ width:55px; height:55px; border-radius:12px; object-fit:cover; border:1px solid var(--stroke); background:#160b31 }
.ew-meta{ min-width:0 }
.ew-row1{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-width:0 }
.ew-title{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800 }
.ew-row2{ display:flex; gap:.4rem; align-items:center; color:var(--muted); font-size:.93rem; margin-top:.1rem }
.ew-user{ color:#d7caff }
.ew-cat{ background:linear-gradient(180deg,#ffffff24,#ffffff12); border:1px solid var(--stroke) }

/* inline love (filled or outline) */
.ew-love{
  display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .5rem; border-radius:999px; font-weight:800;
  background:linear-gradient(180deg,#ffffff22,#ffffff10); border:1px solid var(--stroke); color:#ff7fb0; position:relative;
}
.ew-love .heart-filled{ display:none }
.ew-love.on .heart-outline{ display:none }
.ew-love.on .heart-filled{ display:inline }
.ew-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;
}
.ew-love:hover::after{ opacity:1; transform: translateY(0) scale(1) }

/* Responsive */
@media (max-width: 720px){
  .ew-row1{ align-items:flex-start; flex-direction:column; gap:.35rem }
}