/* CSI Events — /events/ and /events/{slug}/ (app-like, dark, liquid glass) */
:root {
  --bg: #030303;
  --card: rgba(255, 255, 255, .045);
  --card-2: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .09);
  --text: #fff;
  --muted: rgba(255, 255, 255, .62);
  --faint: rgba(255, 255, 255, .4);
  --accent: #728ef7;
  --accent-ink: #fff;
  --blue: #728ef7;
  --green: #30d158;
  --radius: 26px;
  --dock-space: calc(96px + env(safe-area-inset-bottom, 0px));
  --font: 'Inter Tight', 'Inter Tight Placeholder', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body.csi-ev {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.csi-ev a { color: inherit; text-decoration: none; }
body.csi-ev img { max-width: 100%; display: block; }
body.csi-ev img.emoji, body.csi-ev img.wp-smiley { display: inline !important; width: 1em !important; height: 1em !important; margin: 0 .07em !important; vertical-align: -.12em !important; box-shadow: none !important; background: none !important; padding: 0 !important; border: 0 !important; }
body.csi-ev button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* glass primitive */
.g {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 60%, rgba(255,255,255,.07));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.5), inset 0 -1px .5px rgba(255,255,255,.1), inset 0 0 0 .5px rgba(255,255,255,.2), 0 10px 30px -8px rgba(0,0,0,.5);
}

/* ambient poster glow behind everything */
.ev-ambient {
  position: fixed; inset: -20vh -20vw; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(90px) saturate(160%); opacity: .38; transform: translateZ(0);
}
.ev-ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, transparent, var(--bg) 85%); }
.ev-wrap { position: relative; z-index: 1; }

/* top bar */
.ev-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  transition: background .3s, box-shadow .3s;
}
.ev-top.is-solid { background: rgba(8, 8, 10, .62); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 .5px 0 rgba(255,255,255,.1); }
.ev-top-title { flex: 1; text-align: center; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s; }
.ev-top.is-solid .ev-top-title { opacity: 1; transform: none; }
.ev-iconbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.ev-iconbtn:active { transform: scale(.88); }
.ev-iconbtn svg { width: 21px; height: 21px; }

/* layout */
.ev-main { max-width: 1160px; margin: 0 auto; padding: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(var(--dock-space) + 96px); }
.ev-hero { display: grid; gap: 22px; }
@media (min-width: 980px) {
  .ev-main { padding-left: 28px; padding-right: 28px; }
  .ev-hero { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 44px; align-items: start; }
  .ev-poster-col { position: sticky; top: 84px; }
  .ev-body { grid-column: 2; }
  .ev-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 44px; }
}

.ev-poster {
  position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 5;
  background: #111; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 .5px rgba(255,255,255,.14);
  transform-origin: center top; animation: evPop .8s cubic-bezier(.2,1,.3,1) both;
}
.ev-poster img { width: 100%; height: 100%; object-fit: cover; }
.ev-poster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); pointer-events: none; }
.ev-poster .ev-expand { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; }
@keyframes evPop { from { opacity: 0; transform: scale(.94) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes evUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ev-anim > * { animation: evUp .7s cubic-bezier(.2,1,.3,1) both; }
.ev-anim > *:nth-child(2) { animation-delay: .05s; } .ev-anim > *:nth-child(3) { animation-delay: .1s; }
.ev-anim > *:nth-child(4) { animation-delay: .15s; } .ev-anim > *:nth-child(5) { animation-delay: .2s; }
.ev-anim > *:nth-child(6) { animation-delay: .25s; } .ev-anim > *:nth-child(n+7) { animation-delay: .3s; }

.ev-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ev-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; background: var(--card-2); border: .5px solid var(--line); color: rgba(255,255,255,.9); }
.ev-chip.is-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.ev-chip.is-green { background: rgba(48,209,88,.16); color: #63e68a; border-color: rgba(48,209,88,.3); }
.ev-chip.is-muted { color: var(--muted); }
.ev-chip svg { width: 14px; height: 14px; }

.ev-title { font-size: clamp(34px, 8.6vw, 60px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin: 0 0 10px; text-wrap: balance; }
.ev-tagline { font-size: 18px; color: var(--muted); margin: 0 0 20px; }
.ev-tagline b { color: #fff; font-weight: 600; }

/* countdown */
.ev-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 18px; max-width: 420px; }
.ev-count div { border-radius: 18px; padding: 10px 4px 9px; text-align: center; background: var(--card); border: .5px solid var(--line); }
.ev-count b { display: block; font-size: 26px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ev-count span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.ev-soon { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); margin-bottom: 18px; }
.ev-soon i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: evLive 1.6s infinite; }
@keyframes evLive { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

/* grouped list (iOS settings style) */
.ev-list { border-radius: var(--radius); background: var(--card); border: .5px solid var(--line); overflow: hidden; margin-bottom: 14px; }
.ev-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; position: relative; }
.ev-row + .ev-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: .5px; background: var(--line); }
.ev-row .ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.ev-row .ic svg { width: 19px; height: 19px; }
.ev-row .tx { flex: 1; min-width: 0; }
.ev-row .k { font-size: 12.5px; color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ev-row .v { font-size: 16px; font-weight: 600; color: #fff; }
.ev-row .chev { color: var(--faint); width: 18px; height: 18px; }
a.ev-row:active { background: rgba(255,255,255,.05); }

/* cards */
.ev-card { border-radius: var(--radius); background: var(--card); border: .5px solid var(--line); padding: 20px 18px; margin-bottom: 14px; }
.ev-card h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ev-card h2 small { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.ev-prose { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }
.ev-prose p { margin: 0 0 12px; } .ev-prose p:last-child { margin-bottom: 0; }
.ev-prose ul, .ev-prose ol { padding-left: 20px; margin: 0 0 12px; }
.ev-prose h3, .ev-prose h4 { color: #fff; margin: 18px 0 8px; }
.ev-prose a { color: var(--accent) !important; }
.ev-prose strong { color: #fff; }
.ev-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ev-checks li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.86); }
.ev-checks li svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
@media (min-width: 640px) { .ev-checks.two { grid-template-columns: 1fr 1fr; } }

.ev-speaker { display: flex; align-items: center; gap: 14px; }
.ev-avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; color: #fff; background: hsl(var(--h, 230) 55% 45%); background-size: cover; background-position: center; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); overflow: hidden; }
.ev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ev-speaker .n { font-size: 18px; font-weight: 700; }
.ev-speaker .r { color: var(--muted); font-size: 14.5px; }

/* participants */
.ev-going { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ev-stack { display: flex; }
.ev-stack .ev-avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 13px; margin-left: -10px; box-shadow: 0 0 0 2.5px #0d0d10; }
.ev-stack .ev-avatar:first-child { margin-left: 0; }
.ev-going .num { font-size: 15px; color: var(--muted); }
.ev-going .num b { color: #fff; font-size: 17px; }
.ev-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ev-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; background: rgba(255,255,255,.035); border: .5px solid rgba(255,255,255,.06); min-width: 0; transition: background .2s, transform .2s; }
a.ev-person:active { transform: scale(.97); }
a.ev-person:hover { background: rgba(255,255,255,.07); }
.ev-person .ev-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
.ev-person .pn { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-person .pm { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-person > div { min-width: 0; }
.ev-person.is-me { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ev-person.is-new { animation: evPop .6s cubic-bezier(.2,1.4,.3,1) both; }
.ev-empty { text-align: center; color: var(--muted); padding: 10px 0 4px; }
.ev-more { margin-top: 12px; width: 100%; height: 46px; border-radius: 999px; border: .5px solid var(--line); background: var(--card-2); font-weight: 700; cursor: pointer; }

/* action tiles */
.ev-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ev-act { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 4px 12px; border-radius: 20px; background: rgba(255,255,255,.04); border: .5px solid rgba(255,255,255,.07); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); cursor: pointer; text-align: center; transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .2s; }
.ev-act:active { transform: scale(.93); }
.ev-act:hover { background: rgba(255,255,255,.07); }
.ev-act span.i { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--card-2); }
.ev-act svg { width: 21px; height: 21px; }

/* sticky CTA above the dock */
.ev-cta {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-space) - 4px); width: min(calc(100% - 24px), 560px);
  border-radius: 999px; padding: 8px 8px 8px 22px; display: flex; align-items: center; gap: 12px;
  height: 68px; overflow: hidden;
  transition: transform .5s cubic-bezier(.2,1,.3,1), opacity .3s;
  animation: evCtaIn .8s .25s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes evCtaIn { from { transform: translate(-50%, 140%); } to { transform: translate(-50%, 0); } }
.ev-cta .g-bg { position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(180deg, rgba(36,36,44,.72), rgba(16,16,20,.8)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px .5px rgba(255,255,255,.4), inset 0 0 0 .5px rgba(255,255,255,.16), 0 18px 40px -10px rgba(0,0,0,.7); }
.ev-cta .meta { flex: 1 1 auto; min-width: 0; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.ev-cta .ev-btn { flex: 0 0 auto; height: 52px; }
.ev-cta .meta b { display: block; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-cta .meta span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ev-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink) !important; font-weight: 800; font-size: 16px; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), filter .2s;
}
.ev-btn:active { transform: scale(.95); }
.ev-btn svg { width: 19px; height: 19px; }
.ev-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: evShine 3.2s 1.2s infinite; }
@keyframes evShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.ev-btn.is-going { background: rgba(48,209,88,.18); color: #63e68a !important; box-shadow: inset 0 0 0 1px rgba(48,209,88,.4); }
.ev-btn.is-going::after, .ev-btn[disabled]::after { display: none; }
.ev-btn[disabled] { background: rgba(255,255,255,.1); color: var(--faint) !important; box-shadow: none; cursor: default; }
.ev-btn.is-loading { pointer-events: none; }
.ev-btn.is-loading > * { opacity: 0; }
.ev-btn.is-loading::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: evSpin .7s linear infinite; }
@keyframes evSpin { to { transform: rotate(360deg); } }

/* ticket (inside a CSIApp sheet) */
.ev-ticket { color: #fff; }
.ev-ticket-card { border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 34%, #15151b), #111116 60%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); margin-bottom: 14px; }
.ev-ticket-top { display: flex; gap: 14px; padding: 16px; align-items: center; }
.ev-ticket-top img { width: 64px; height: 80px; object-fit: cover; border-radius: 12px; }
.ev-ticket-top b { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.ev-ticket-top span { color: rgba(255,255,255,.65); font-size: 13.5px; }
.ev-ticket-cut { position: relative; height: 22px; }
.ev-ticket-cut::before, .ev-ticket-cut::after { content: ""; position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #1c1c21; }
.ev-ticket-cut::before { left: -11px; } .ev-ticket-cut::after { right: -11px; }
.ev-ticket-cut i { position: absolute; left: 18px; right: 18px; top: 10px; border-top: 2px dashed rgba(255,255,255,.18); }
.ev-ticket-bot { display: flex; gap: 14px; align-items: center; padding: 6px 16px 18px; }
.ev-ticket-bot img { width: 112px; height: 112px; border-radius: 14px; background: #fff; padding: 7px; flex: 0 0 112px; }
.ev-ticket-bot .k { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; }
.ev-ticket-bot .v { font-weight: 700; font-size: 15px; margin-bottom: 6px; word-break: break-all; }
.ev-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.ev-sheet-actions a, .ev-sheet-actions button { height: 48px; border-radius: 999px; border: .5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff !important; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; text-decoration: none !important; }
.ev-sheet-actions svg { width: 18px; height: 18px; }
.ev-sheet-list { max-height: 55vh; overflow: auto; margin: 0 -6px 10px; padding: 0 6px; display: grid; gap: 6px; }
.ev-sheet-list .ev-person { background: rgba(255,255,255,.05); }
.ev-success-badge { width: 72px; height: 72px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 0 14px; box-shadow: 0 12px 30px rgba(48,209,88,.45); animation: evPop .6s cubic-bezier(.2,1.6,.3,1) both; }
.ev-success-badge svg { width: 38px; height: 38px; color: #fff; stroke-dasharray: 30; stroke-dashoffset: 30; animation: evDraw .5s .3s ease-out forwards; }
@keyframes evDraw { to { stroke-dashoffset: 0; } }
#ev-confetti { position: fixed; inset: 0; z-index: 2147483400; pointer-events: none; }

/* check-in overlay for staff */
.ev-checkin { position: fixed; inset: 0; z-index: 2147483500; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; }
.ev-checkin.ok { background: radial-gradient(circle at 50% 35%, #1fae4b, #0b4a20); }
.ev-checkin.again { background: radial-gradient(circle at 50% 35%, #c88a12, #4a3205); }
.ev-checkin.bad { background: radial-gradient(circle at 50% 35%, #d23b30, #4a0b0b); }
.ev-checkin h1 { font-size: 40px; margin: 12px 0 4px; letter-spacing: -.03em; }
.ev-checkin p { margin: 0 0 6px; font-size: 17px; opacity: .85; }
.ev-checkin .ev-avatar { width: 110px; height: 110px; flex-basis: 110px; font-size: 36px; box-shadow: 0 0 0 4px rgba(255,255,255,.4); }
.ev-checkin button { margin-top: 26px; height: 52px; padding: 0 30px; border-radius: 999px; border: 0; background: #fff; color: #000; font-weight: 800; font-size: 16px; }

/* ---------------- archive ---------------- */
.evx-head { padding-top: 8px; margin-bottom: 18px; }
.evx-head .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.evx-head h1 { font-size: clamp(42px, 11vw, 76px); letter-spacing: -.045em; line-height: .98; margin: 6px 0 8px; font-weight: 700; }
.evx-head p { color: var(--muted); margin: 0; max-width: 560px; }
.evx-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; margin: 18px 0 20px; min-width: 260px; }
.evx-seg button { position: relative; z-index: 1; height: 40px; padding: 0 22px; border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--muted); transition: color .25s; }
.evx-seg button.is-on { color: #000; }
.evx-seg .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.3,1.35,.45,1); }
.evx-seg[data-on="past"] .knob { transform: translateX(100%); }
.evx-pane[hidden] { display: none; }

.evx-feature { position: relative; display: block; border-radius: 32px; overflow: hidden; min-height: 460px; margin-bottom: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8), 0 0 0 .5px rgba(255,255,255,.12); transition: transform .4s cubic-bezier(.2,1,.3,1); animation: evPop .8s cubic-bezier(.2,1,.3,1) both; }
.evx-feature:active { transform: scale(.98); }
.evx-feature .bg { position: absolute; inset: 0; background-size: cover; background-position: center top; transition: transform 1.2s cubic-bezier(.2,1,.3,1); }
.evx-feature:hover .bg { transform: scale(1.04); }
.evx-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.92)); }
.evx-feature .in { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 22px 20px 20px; }
.evx-feature .when { display: inline-flex; gap: 6px; align-items: center; }
.evx-feature h2 { font-size: clamp(28px, 7vw, 44px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0 6px; }
.evx-feature p { color: rgba(255,255,255,.75); margin: 0 0 16px; font-size: 15px; }
.evx-feature .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.evx-feature .label { position: absolute; z-index: 1; top: 16px; left: 16px; }
@media (min-width: 860px) {
  .evx-feature { min-height: 0; display: grid; grid-template-columns: 380px 1fr; background: #0c0c10; }
  .evx-feature .bg { position: relative; aspect-ratio: 4/5; }
  .evx-feature::after { display: none; }
  .evx-feature .in { position: relative; padding: 40px; align-self: center; }
  .evx-feature .label { left: 16px; }
}
.evx-list { display: grid; gap: 12px; }
@media (min-width: 760px) { .evx-list { grid-template-columns: 1fr 1fr; } }
.evx-item { display: flex; gap: 14px; padding: 10px; border-radius: 24px; background: var(--card); border: .5px solid var(--line); align-items: center; transition: transform .3s cubic-bezier(.2,1,.3,1), background .2s; animation: evUp .6s cubic-bezier(.2,1,.3,1) both; }
.evx-item:active { transform: scale(.98); }
.evx-item:hover { background: rgba(255,255,255,.07); }
.evx-item .th { width: 88px; height: 110px; border-radius: 16px; flex: 0 0 88px; background: #16161b center/cover; position: relative; overflow: hidden; }
.evx-item .date { position: absolute; left: 6px; top: 6px; border-radius: 10px; padding: 3px 7px; text-align: center; line-height: 1.05; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.evx-item .date b { display: block; font-size: 17px; }
.evx-item .date span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.75); }
.evx-item .tx { min-width: 0; flex: 1; }
.evx-item h3 { margin: 4px 0 4px; font-size: 18px; line-height: 1.15; letter-spacing: -.015em; }
.evx-item .sub { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evx-item .foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.evx-item.is-past .th { filter: grayscale(.7); }
.evx-empty { text-align: center; padding: 48px 20px; border-radius: 28px; background: var(--card); border: .5px dashed rgba(255,255,255,.14); color: var(--muted); }
.evx-empty b { display: block; color: #fff; font-size: 19px; margin-bottom: 6px; }
.evx-notify { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; margin-top: 18px; background: linear-gradient(120deg, rgba(114,142,247,.18), rgba(114,142,247,.05)); border: .5px solid rgba(114,142,247,.3); }
.evx-notify .bell { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: linear-gradient(160deg, #ff6a5c, #ff375f); display: flex; align-items: center; justify-content: center; }
.evx-notify .bell svg { width: 22px; height: 22px; }
.evx-notify .tx { flex: 1; font-size: 14px; color: var(--muted); }
.evx-notify .tx b { display: block; color: #fff; font-size: 15.5px; }
.evx-notify button { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: #000; font-weight: 800; cursor: pointer; }
.ev-admin-edit { position: fixed; right: 16px; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 49; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ticket sheet layout */
.ev-sheet-head { text-align: center; margin-bottom: 16px; }
.ev-sheet-head h3 { margin-bottom: 4px !important; }
.ev-sheet-head p { margin: 0 auto !important; max-width: 320px; }
.ev-success-badge { margin: 4px auto 14px !important; }
.ev-ticket-top { align-items: center; }
.ev-ticket-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-ticket-top .ev-ticket-info span { display: block; line-height: 1.35; }
.ev-ticket-bot { align-items: center; }
.ev-ticket-bot .v { margin-bottom: 8px; line-height: 1.25; }
.ev-ticket-bot .v:last-child { margin-bottom: 0; }
.ev-ticket-bot .v.mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; }
.ev-sheet-actions { margin: 10px 0 0; }
.ev-sheet-actions a, .ev-sheet-actions button { font-size: 14px; padding: 0 10px; white-space: nowrap; }
.ev-sheet-actions:has(> :only-child) { grid-template-columns: 1fr; }
.ev-cancel { display: block; margin: 14px auto 2px; background: none; border: 0; padding: 6px 10px; color: rgba(255,120,120,.85) !important; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 360px) { .ev-ticket-bot img { width: 96px; height: 96px; flex-basis: 96px; } .ev-cta { padding-left: 16px; } .ev-btn { padding: 0 18px; } }

/* ---- Posters always shown in full, whatever their shape (square, 4:5, 16:9...) ---- */
.ev-poster { aspect-ratio: var(--ar, 4 / 5); max-height: none; }
.ev-poster img { object-fit: contain; }
@media (min-width: 980px) { .ev-poster { max-height: calc(100vh - 110px); width: auto; max-width: 100%; margin: 0 auto; } }

/* Featured card: poster on top at its real ratio, details underneath (no overlay crop). */
.evx-feature { min-height: 0; display: flex; flex-direction: column; background: #0c0c10; }
.evx-feature .bg { position: relative; inset: auto; width: 100%; aspect-ratio: var(--ar, 4 / 5); background-size: contain; background-repeat: no-repeat; background-position: center; }
.evx-feature::after { display: none; }
.evx-feature .in { position: relative; padding: 18px 18px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #111116), #0c0c10); }
.evx-feature h2 { margin-top: 10px; }
@media (min-width: 860px) {
  .evx-feature { display: grid; grid-template-columns: minmax(0, 420px) 1fr; align-items: center; }
  .evx-feature .bg { aspect-ratio: var(--ar, 4 / 5); }
  .evx-feature .in { padding: 36px 40px; background: none; }
}

/* List thumbnails follow the poster ratio too. */
.evx-item .th { width: 96px; height: auto; flex: 0 0 96px; aspect-ratio: var(--ar, 4 / 5); max-height: 140px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #101014; }