/* EventMe Voting Plus: clean, pixel aligned visuals with motion (all motion off for reduced-motion users) */
#voteOverlay { --vp-ok: #22c55e; --vp-gold: #f4b000; --vp-line: var(--border, rgba(127,127,127,.28)); --vp-soft: rgba(127,127,127,.08); }

/* ── room strip ── */
.vp-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vp-tile { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 14px 13px; border-radius: 16px; border: 1px solid var(--vp-line); background: var(--vp-soft); overflow: hidden; }
.vp-strip.vp-in .vp-tile { animation: vpUp .5s cubic-bezier(.2,.8,.2,1) both; }
.vp-strip.vp-in .vp-tile:nth-child(2) { animation-delay: .06s; } .vp-strip.vp-in .vp-tile:nth-child(3) { animation-delay: .12s; } .vp-strip.vp-in .vp-tile:nth-child(4) { animation-delay: .18s; }
.vp-k { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #8a8a93); }
.vp-k svg { color: var(--red); }
.vp-big { font-family: var(--font-display, inherit); font-size: 1.7rem; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vp-big small { font-size: .72rem; font-weight: 700; margin-left: 3px; color: var(--muted, #8a8a93); letter-spacing: 0; }
.vp-big.sm { font-size: 1.02rem; line-height: 1.25; letter-spacing: 0; }
.vp-tile > small { font-size: .74rem; color: var(--muted, #8a8a93); line-height: 1.35; }
.vp-meter { position: relative; height: 6px; border-radius: 99px; background: rgba(127,127,127,.2); margin: 2px 0; overflow: visible; }
.vp-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f0b22, var(--red)); transform-origin: left; position: relative; overflow: hidden; }
.vp-strip.vp-in .vp-meter i { animation: vpGrow 1s .25s cubic-bezier(.2,.8,.2,1) both; }
.vp-meter i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: vpShine 2.6s 1.2s infinite; }
.vp-meter u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--vp-gold); border-radius: 2px; }
.vp-when.hot { border-color: rgba(200,16,46,.55); background: rgba(200,16,46,.1); }
.vp-when.hot .vp-big { color: var(--red); animation: vpPulse 1.6s ease-in-out infinite; }

/* ── stepper ── */
.vp-stepper { display: flex; align-items: center; list-style: none; margin: 0 0 2px; padding: 0; gap: 0; }
.vp-stepper li { display: flex; align-items: center; gap: 8px; flex: 1; font-size: .8rem; color: var(--muted, #8a8a93); }
.vp-stepper li:not(:last-child)::after { content: ''; flex: 1; height: 2px; margin: 0 10px; border-radius: 2px; background: rgba(127,127,127,.25); }
.vp-stepper li:last-child { flex: 0; }
.vp-stepper li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(127,127,127,.18); font-weight: 800; font-size: .76rem; flex: none; transition: background .3s, color .3s, transform .3s; }
.vp-stepper li b { font-weight: 700; white-space: nowrap; }
.vp-stepper li.on { color: var(--text-1, inherit); }
.vp-stepper li.on span { background: var(--red); color: #fff; box-shadow: 0 0 0 5px rgba(200,16,46,.18); animation: vpBeat 1.8s ease-in-out infinite; }
.vp-stepper li.done span { background: var(--vp-ok); color: #fff; }
.vp-stepper li.done:not(:last-child)::after { background: linear-gradient(90deg, var(--vp-ok), var(--vp-ok)); }

/* ── candidate cards ── */
.vt-cands { align-items: start; }
.vt-cw { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vt-cw .vt-cand { width: 100%; padding: 14px; border-radius: 16px; }
.vt-cw .vt-cand img, .vt-cw .vt-av { width: 58px; height: 58px; font-size: 1.1rem; font-weight: 800; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(127,127,127,.16); transition: box-shadow .25s, transform .25s; }
.vt-cw .vt-cand:hover img, .vt-cw .vt-cand:hover .vt-av { transform: scale(1.05); }
.vt-cw .vt-cand.on img, .vt-cw .vt-cand.on .vt-av { box-shadow: 0 0 0 3px var(--red), 0 0 18px rgba(200,16,46,.45); }
.vt-cw .vt-cand.on { background: linear-gradient(135deg, rgba(200,16,46,.16), rgba(200,16,46,.04)); }
.vt-cw .vt-cand-txt b { font-size: 1rem; }
.vt-cw.open .vt-cand-txt small { display: none; }
.vp-pitch-btn { align-self: flex-start; margin-left: 6px; padding: 2px 6px; background: none; border: 0; color: var(--red); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; border-radius: 6px; }
.vp-pitch-btn:hover { text-decoration: underline; }
.vp-pitch { margin: 0 4px; padding: 10px 14px; border-left: 3px solid var(--red); border-radius: 4px 12px 12px 4px; background: var(--vp-soft); font-size: .84rem; line-height: 1.55; }
.vp-pitch[hidden] { display: none; }

/* ── reminder card ── */
.vp-remind { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; background: linear-gradient(135deg, rgba(200,16,46,.12), rgba(200,16,46,.02)); border-color: rgba(200,16,46,.3); }
.vp-remind-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--red); color: #fff; animation: vpRing 3s ease-in-out infinite; transform-origin: 50% 10%; }
.vp-remind h3 { margin: 0 0 2px; } .vp-remind p { margin: 0; font-size: .84rem; color: var(--muted, #8a8a93); }
.vp-remind-acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── receipt ticket ── */
.vt-receipt { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(34,197,94,.1), transparent 55%); border-color: rgba(34,197,94,.35); -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 62%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 62%, transparent 98%, #000) right / 51% 100% no-repeat; }
.vt-receipt-ic { animation: vpStamp .7s cubic-bezier(.2,1.5,.4,1) both; position: relative; }
.vt-receipt-ic::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--vp-ok); opacity: 0; animation: vpPing 1.8s .6s ease-out 2; }
.vt-receipt-box { position: relative; padding-top: 14px; margin-top: 14px !important; border-top: 2px dashed rgba(127,127,127,.35); width: 100%; }
.vt-receipt-box b[data-receipt] { font-size: 1.15rem; color: var(--vp-ok); }
.vp-rcp-acts { justify-content: center; margin-top: 6px; }

/* ── results ── */
.vp-sum { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 4px 0 8px; }
.vp-ring { position: relative; width: 112px; height: 112px; flex: none; }
.vp-ring svg { transform: rotate(-90deg); display: block; }
.vp-ring .bg { fill: none; stroke: rgba(127,127,127,.2); stroke-width: 9; }
.vp-ring .fg { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; stroke-dasharray: var(--C); stroke-dashoffset: var(--off); animation: vpDash 1.4s .2s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 0 6px rgba(200,16,46,.55)); }
.vp-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vp-ring b { font-family: var(--font-display, inherit); font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
.vp-ring small { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8a8a93); margin-top: 3px; }
.vp-facts { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.vp-fact { flex: 1 1 100px; min-width: 96px; padding: 12px 14px; border-radius: 14px; background: var(--vp-soft); border: 1px solid var(--vp-line); display: flex; flex-direction: column; gap: 3px; animation: vpUp .5s both; }
.vp-fact b { font-family: var(--font-display, inherit); font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.vp-fact b em { font-style: normal; font-size: .9rem; color: var(--muted, #8a8a93); }
.vp-fact small { font-size: .72rem; color: var(--muted, #8a8a93); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.vp-fact.ok { border-color: rgba(34,197,94,.4); } .vp-fact.ok b { color: var(--vp-ok); }
.vp-fact.bad { border-color: rgba(200,16,46,.45); } .vp-fact.bad b { color: var(--red); }

.vp-take { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.vp-take li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--vp-soft); font-size: .86rem; line-height: 1.45; animation: vpUp .5s both; }
.vp-take li:nth-child(2) { animation-delay: .08s; } .vp-take li:nth-child(3) { animation-delay: .16s; } .vp-take li:nth-child(4) { animation-delay: .24s; }
.vp-take li i { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.18); }
.vp-take li.good i { background: var(--vp-ok); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.vp-take li.warn i { background: var(--vp-gold); box-shadow: 0 0 0 4px rgba(244,176,0,.2); }

.vp-podium { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 16px; margin: 2px 0 14px; border-radius: 18px; cursor: pointer; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(127,127,127,.05) 70%); animation: vpRise .7s cubic-bezier(.2,1.1,.3,1) both; }
.vp-podium::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-120%); animation: vpShine 3.2s 1s infinite; pointer-events: none; }
.vp-crown { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--vp-gold); color: #3a2a00; animation: vpBob 2.4s ease-in-out infinite; }
.vp-wav { position: relative; width: 74px; height: 74px; flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--c), var(--vp-gold), var(--c)); animation: vpSpin 7s linear infinite; }
.vp-wav > * { animation: vpSpinBack 7s linear infinite; }
.vp-av { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.3rem; border: 3px solid var(--card, #1b1b21); box-sizing: border-box; }
.vp-wtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-kick { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vp-gold); }
.vp-wtxt b { font-family: var(--font-display, inherit); font-size: 1.35rem; line-height: 1.15; }
.vp-wtxt small { font-size: .8rem; color: var(--muted, #8a8a93); font-variant-numeric: tabular-nums; }
.vp-tag { margin-left: auto; align-self: flex-start; margin-top: 26px; padding: 3px 10px; border-radius: 99px; background: rgba(244,176,0,.16); border: 1px solid rgba(244,176,0,.45); color: var(--vp-gold); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.vp-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 2px 0 14px; }
.vp-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(244,176,0,.4); background: rgba(244,176,0,.07); animation: vpUp .5s both; }
.vp-chip .vp-av { width: 40px; height: 40px; flex: none; font-size: .9rem; border-width: 2px; }
.vp-chip span { display: flex; flex-direction: column; min-width: 0; } .vp-chip small { font-size: .74rem; color: var(--muted, #8a8a93); }

.vp-yn-card { margin: 2px 0 6px; }
.vp-split { display: flex; height: 46px; border-radius: 14px; overflow: hidden; gap: 3px; }
.vp-split i { flex: 0 0 var(--w); display: flex; flex-direction: column; justify-content: center; padding: 0 14px; min-width: 0; font-style: normal; color: #fff; transform-origin: left; animation: vpGrowX 1s .2s cubic-bezier(.2,.8,.2,1) both; }
.vp-split i.y { background: linear-gradient(90deg, #136b49, var(--vp-ok)); border-radius: 14px 4px 4px 14px; }
.vp-split i.n { background: linear-gradient(90deg, #a40d26, #e5385a); border-radius: 4px 14px 14px 4px; }
.vp-split b { font-size: .82rem; line-height: 1.1; } .vp-split em { font-style: normal; font-size: .72rem; opacity: .9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-verdict { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: 99px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; animation: vpPop .5s .9s cubic-bezier(.2,1.6,.4,1) both; }
.vp-verdict.ok { background: rgba(34,197,94,.15); color: var(--vp-ok); } .vp-verdict.no { background: rgba(200,16,46,.15); color: var(--red); }
.vp-verdict span { margin-left: 4px; padding-left: 8px; border-left: 1px solid currentColor; opacity: .8; }
.vt-res.vp-yn .vt-bar { display: none; }

.vp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.vp-audit { margin-top: 10px; border: 1px solid var(--vp-line); border-radius: 14px; background: var(--vp-soft); }
.vp-audit summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: .88rem; }
.vp-audit summary::-webkit-details-marker { display: none; }
.vp-audit summary svg { color: var(--vp-ok); } .vp-audit summary span { margin-left: auto; font-size: .76rem; color: var(--muted, #8a8a93); }
.vp-audit summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 4px; transition: transform .25s; }
.vp-audit[open] summary::after { transform: rotate(-135deg); }
.vp-audit dl { margin: 0; padding: 0 14px 6px; display: grid; }
.vp-audit dl > div { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--vp-line); font-size: .84rem; }
.vp-audit dt { display: flex; align-items: center; gap: 7px; color: var(--muted, #8a8a93); } .vp-audit dd { margin: 0; font-weight: 600; }

.vp-smart .vp-take { margin-bottom: 0; }

/* ── confetti ── */
.vp-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100000; }

/* ── motion ── */
@keyframes vpUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vpRise { 0% { opacity: 0; transform: translateY(26px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes vpGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vpGrowX { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
@keyframes vpShine { to { transform: translateX(120%); } }
@keyframes vpPulse { 50% { opacity: .6; } }
@keyframes vpBeat { 50% { box-shadow: 0 0 0 9px rgba(200,16,46,.06); } }
@keyframes vpRing { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 86% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
@keyframes vpStamp { 0% { transform: scale(2.4) rotate(-18deg); opacity: 0; } 70% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes vpPing { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes vpDash { from { stroke-dashoffset: var(--C); } }
@keyframes vpBob { 50% { transform: translateY(-4px) rotate(8deg); } }
@keyframes vpSpin { to { transform: rotate(360deg); } }
@keyframes vpSpinBack { to { transform: rotate(-360deg); } }
@keyframes vpPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vp-tile, .vp-meter i, .vp-meter i::after, .vp-stepper li.on span, .vp-remind-ic, .vt-receipt-ic, .vt-receipt-ic::after, .vp-ring .fg, .vp-podium, .vp-podium::after, .vp-crown, .vp-wav, .vp-wav > *, .vp-fact, .vp-take li, .vp-chip, .vp-split i, .vp-verdict, .vp-pitch, .vp-when.hot .vp-big { animation: none !important; }
}

/* ── small screens ── */
@media (max-width: 700px) {
  .vp-strip { grid-template-columns: repeat(2, 1fr); }
  .vp-big { font-size: 1.45rem; }
  .vp-podium { flex-wrap: wrap; padding-right: 14px; } .vp-tag { margin: 0; order: 3; }
  .vp-wtxt b { font-size: 1.15rem; }
  .vp-audit dl > div { grid-template-columns: 1fr; gap: 2px; }
  .vp-stepper li b { font-size: .72rem; } .vp-stepper li:not(:last-child)::after { margin: 0 6px; }
  .vp-sum { justify-content: center; }
}

/* ── share dialog ── */
.vp-modal { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 16px; background: rgba(5,5,8,.72); backdrop-filter: blur(6px); animation: vpFadeIn .2s ease both; }
.vp-sheet { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 22px 20px; border-radius: 22px; background: var(--card, #1b1b21); color: var(--text-1, #fff); border: 1px solid var(--border, rgba(127,127,127,.3)); box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: vpSheet .35s cubic-bezier(.2,1.1,.3,1) both; }
.vp-sheet h3 { margin: 0 34px 2px 0; font-family: var(--font-display, inherit); font-size: 1.3rem; }
.vp-modal .vp-x.vp-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; background: rgba(127,127,127,.18) !important; border: 0 !important; color: inherit !important; font-size: 1.3rem !important; line-height: 1; cursor: pointer; min-height: 0 !important; }
.vp-prev { aspect-ratio: 1200 / 630; border-radius: 14px; overflow: hidden; background: rgba(127,127,127,.12); border: 1px solid var(--border, rgba(127,127,127,.3)); display: grid; place-items: center; }
.vp-prev img { width: 100%; height: 100%; object-fit: cover; display: block; animation: vpFadeIn .4s both; }
.vp-prev-load { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(127,127,127,.3); border-top-color: var(--red); animation: vpSpin .8s linear infinite; }
.vp-opts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 14px; }
.vp-modal .vp-opt.vp-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px !important; border-radius: 14px !important; background: rgba(127,127,127,.08) !important; border: 1px solid transparent !important; color: inherit !important; text-decoration: none; font: inherit; font-size: .76rem !important; font-weight: 700; cursor: pointer; min-height: 0 !important; height: auto !important; transition: transform .15s, border-color .15s, background .15s; }
.vp-modal .vp-opt.vp-opt:hover { transform: translateY(-2px); border-color: rgba(200,16,46,.55) !important; background: rgba(200,16,46,.08) !important; }
.vp-opt img { border-radius: 50%; display: block; }
.vp-linkrow { display: flex; gap: 8px; }
.vp-linkrow input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border, rgba(127,127,127,.3)); background: rgba(127,127,127,.08); color: inherit; font: inherit; font-size: .82rem; }

.vp-fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 12px 0; border-radius: 14px; background: rgba(127,127,127,.12); }
.vp-modal .vp-fmt button.vp-fmt-b, .vp-modal .vp-fmt button { padding: 8px 10px !important; border-radius: 10px !important; background: transparent !important; border: 0 !important; color: inherit !important; font: inherit; font-size: .86rem !important; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 0 !important; height: auto !important; opacity: .7; transition: background .2s, opacity .2s; }
.vp-modal .vp-fmt button small { font-size: .66rem; font-weight: 600; opacity: .8; }
.vp-modal .vp-fmt button.on { background: var(--red) !important; color: #fff !important; opacity: 1; box-shadow: 0 4px 14px rgba(200,16,46,.35); }
.vp-prev.sq { aspect-ratio: 1 / 1; width: min(100%, 300px); margin: 0 auto; }
.vp-prev.story { aspect-ratio: 9 / 16; width: min(100%, 210px); margin: 0 auto; }
.vp-primary { display: flex; gap: 8px; margin: 14px 0 4px; }
.vp-primary .vt-btn { flex: 1; text-decoration: none; justify-content: center; }
.vp-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #8a8a93); }
.vp-or::before, .vp-or::after { content: ''; flex: 1; height: 1px; background: var(--border, rgba(127,127,127,.3)); }
.vp-tip { margin: 10px 2px 0; font-size: .76rem; color: var(--muted, #8a8a93); line-height: 1.45; }
@keyframes vpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vpSheet { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vp-modal, .vp-sheet, .vp-prev img, .vp-prev-load { animation: none !important; } }
@media (max-width: 480px) { .vp-opts { grid-template-columns: repeat(3, 1fr); gap: 6px; } .vp-sheet { padding: 18px 16px; } .vp-modal { align-items: end; padding: 8px; } }

.vp-themes { display: flex; gap: 8px; margin: 0 0 12px; }
.vp-modal .vp-themes button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px !important; border-radius: 12px !important; background: rgba(127,127,127,.1) !important; border: 1.5px solid transparent !important; color: inherit !important; font: inherit; font-size: .82rem !important; font-weight: 800; cursor: pointer; min-height: 0 !important; height: auto !important; }
.vp-themes button i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(127,127,127,.45); flex: none; }
.vp-modal .vp-themes button.on { border-color: var(--red) !important; background: rgba(200,16,46,.1) !important; }

/* ── main voting page ── */
.vp-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 8px 24px; text-align: left; padding: 28px 30px; border-radius: 24px; border: 1px solid rgba(200,16,46,.3); background: radial-gradient(120% 140% at 100% 0, rgba(255,58,92,.22), transparent 55%), radial-gradient(90% 120% at 0 100%, rgba(244,176,0,.1), transparent 60%), rgba(127,127,127,.06); overflow: hidden; animation: vpUp .6s cubic-bezier(.2,.8,.2,1) both; }
.vp-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; background: rgba(200,16,46,.16); color: var(--red-bright, #ff3a5c); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vp-hero h2 { margin: 12px 0 10px !important; font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important; line-height: 1.1; letter-spacing: -.01em; }
.vp-hero p { margin: 0 !important; max-width: 470px !important; }
.vp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vp-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--vp-line); background: var(--vp-soft); font-size: .78rem; font-weight: 700; }
.vp-pills svg { color: var(--vp-ok); }
.vp-hero-art { width: 100%; max-width: 330px; height: auto; justify-self: center; animation: vpFloat 5s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
@keyframes vpFloat { 50% { transform: translateY(-8px); } }
.vp-facts-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vp-facts-strip > div { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--vp-line); background: var(--vp-soft); display: flex; flex-direction: column; gap: 2px; animation: vpUp .5s both; }
.vp-facts-strip > div:nth-child(2) { animation-delay: .07s; } .vp-facts-strip > div:nth-child(3) { animation-delay: .14s; } .vp-facts-strip > div:nth-child(4) { animation-delay: .21s; }
.vp-facts-strip b { font-family: var(--font-display, inherit); font-size: 1.9rem; line-height: 1; color: var(--red-bright, #ff3a5c); }
.vp-facts-strip small { font-size: .76rem; color: var(--muted, #8a8a93); line-height: 1.35; }

.vt-join .vt-code-input { font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; }

.vp-types h3, .vp-flow h3 { margin-bottom: 14px; }
.vp-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vp-type { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 16px; border: 1px solid var(--vp-line); background: var(--vp-soft); transition: transform .2s, border-color .2s; }
.vp-type:hover { transform: translateY(-3px); border-color: rgba(200,16,46,.5); }
.vp-type b { font-size: .92rem; margin-top: 8px; } .vp-type small { font-size: .76rem; color: var(--muted, #8a8a93); }
.vp-mini { display: flex; flex-direction: column; gap: 6px; height: 74px; justify-content: center; }
.vp-mini i { display: flex; align-items: center; justify-content: center; height: 18px; border-radius: 9px; background: rgba(127,127,127,.2); font-style: normal; font-size: .66rem; font-weight: 800; position: relative; }
.vp-mini.radio i, .vp-mini.check i { justify-content: flex-start; padding-left: 26px; }
.vp-mini.radio i::before, .vp-mini.check i::before { content: ''; position: absolute; left: 7px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(127,127,127,.6); box-sizing: border-box; }
.vp-mini.check i::before { border-radius: 3px; }
.vp-mini i.on { background: rgba(200,16,46,.22); } .vp-mini i.on::before { background: var(--red); border-color: var(--red); }
.vp-mini.rank { flex-direction: row; gap: 8px; align-items: center; } .vp-mini.rank i { width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-size: .8rem; }
.vp-mini.rank i:nth-child(2) { background: #d9536c; } .vp-mini.rank i:nth-child(3) { background: #b98a93; }
.vp-mini.yn { flex-direction: row; gap: 3px; align-items: center; } .vp-mini.yn u { height: 34px; border-radius: 8px; display: block; } .vp-mini.yn .y { flex: 7; background: linear-gradient(90deg, #136b49, #22c55e); } .vp-mini.yn .n { flex: 3; background: linear-gradient(90deg, #a40d26, #e5385a); }

.vp-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; counter-reset: none; }
.vp-flow ol::before { content: ''; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, rgba(127,127,127,.45) 0 6px, transparent 6px 12px); }
.vp-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; animation: vpUp .5s calc(var(--i) * .09s) both; }
.vp-flow li::before { display: none !important; }
.vp-flow-ic { position: relative; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #e5183a, #8f0b22); color: #fff; box-shadow: 0 8px 22px rgba(200,16,46,.35); margin-bottom: 8px; }
.vp-flow-ic em { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card, #1b1b21); border: 2px solid var(--red); color: var(--text-1, #fff); font-style: normal; font-size: .68rem; font-weight: 800; }
.vp-flow li b { font-size: .95rem; } .vp-flow li small { font-size: .76rem; color: var(--muted, #8a8a93); line-height: 1.45; }

.vp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vp-trust > div { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 16px; border: 1px solid var(--vp-line); background: var(--vp-soft); }
.vp-trust span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(34,197,94,.15); color: var(--vp-ok); margin-bottom: 6px; }
.vp-trust b { font-size: .86rem; } .vp-trust small { font-size: .74rem; color: var(--muted, #8a8a93); line-height: 1.4; }

@media (max-width: 760px) {
  .vp-hero { grid-template-columns: 1fr; padding: 22px 20px; } .vp-hero-art { max-width: 240px; order: -1; }
  .vp-facts-strip, .vp-types-grid, .vp-trust { grid-template-columns: repeat(2, 1fr); }
  .vp-flow ol { grid-template-columns: 1fr; gap: 18px; } .vp-flow ol::before { display: none; }
  .vp-flow li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 1px; text-align: left; align-items: center; justify-items: start; padding: 0; }
  .vp-flow-ic { grid-row: 1 / span 2; margin: 0; } .vp-flow li b, .vp-flow li small { grid-column: 2; } .vp-flow li b { align-self: end; } .vp-flow li small { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .vp-hero, .vp-hero-art, .vp-facts-strip > div, .vp-flow li { animation: none !important; } }
/* ── wide screens: the Votes window fills the screen and the hub fits without scrolling ── */
@media (min-width: 1100px) {
  .vt-overlay { padding: 14px 22px; }
  .vt-sheet { max-width: 1440px; }
  #voteOverlay .vt-wrap:has(> .vp-hero) { max-width: 1360px; padding: 16px 24px 20px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > * { grid-column: 1 / -1; min-width: 0; margin: 0 !important; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-hero { grid-column: 1 / 8; grid-row: 1; padding: 20px 28px; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vt-hub-grid { grid-column: 8 / -1; grid-row: 1; grid-template-columns: 1fr; gap: 14px; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vt-hub-grid > .vt-card { display: flex; flex-direction: column; justify-content: center; padding-top: 16px; padding-bottom: 16px; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-types { grid-column: 1 / 7; grid-row: 2; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-flow { grid-column: 7 / -1; grid-row: 2; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-facts-strip { grid-column: 1 / 6; grid-row: 3; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-trust { grid-column: 6 / -1; grid-row: 3; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > #vtHubMine { grid-row: 4; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > #vtHubMine:empty { display: none; }
  #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-facts-strip > div, #voteOverlay .vt-wrap:has(> .vp-hero) > .vp-trust > div { padding-top: 12px; padding-bottom: 12px; }
  #voteOverlay .vt-wrap:has(> .vp-hero) .vp-types h3, #voteOverlay .vt-wrap:has(> .vp-hero) .vp-flow h3 { margin-bottom: 12px; }
  #voteOverlay .vt-wrap:has(> .vp-hero) .vp-hero h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem) !important; }
  #voteOverlay .vt-wrap:has(> .vp-hero) .vp-hero-art { max-width: 230px; }
}

/* hub: the window fits its content and sits in the middle of the screen */
.vt-overlay.vt-fit { align-items: center; }
.vt-overlay.vt-fit .vt-sheet { height: auto; max-height: 100%; }
.vt-overlay.vt-fit .vt-body { flex: 0 1 auto; }
.vt-overlay.vt-fit .vt-wrap { padding-bottom: 22px; }
@media (max-width: 720px) {
  .vt-overlay.vt-fit { align-items: stretch; }
  .vt-overlay.vt-fit .vt-sheet { height: 100%; }
}