/* /vote (templates/vote.html, static/vote.js). Shared look (tokens, panels, buttons, fields): wax-site.css. */
.vote-main { width: min(var(--wx-max), calc(100% - 48px)); margin: 0 auto; padding: 46px 0 80px; }
.vote-main h2 { margin: 0 0 18px; font-size: 21px; }
.vote-main h3 { margin: 0; font-size: 15.5px; }
.vote-main .shop-muted { color: var(--wx-muted); font-size: 13.5px; line-height: 1.7; }
.vote-intro { max-width: 760px; margin-bottom: 0; }
.vote-eyebrow { display: block; }

/* double-ogrine week banner (vote_event.go) and the struck-through base reward */
.vote-event { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 24px 0 0; padding: 14px 18px; border: 1px solid var(--wx-teal-line); border-radius: var(--wx-radius-md); background: linear-gradient(110deg, rgba(128, 212, 210, 0.14), rgba(154, 95, 224, 0.12)); box-shadow: 0 0 26px rgba(128, 212, 210, 0.1); }
.vote-event-badge { flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; background: linear-gradient(180deg, #9ae2dd, #74cbc8); color: #0a2224; font-size: 18px; font-weight: 800; line-height: 1.2; }
.vote-event strong { display: block; font-size: 16px; line-height: 1.35; }
.vote-event p { margin: 4px 0 0; color: var(--wx-text-2); font-size: 13.5px; line-height: 1.5; }
.vote-rewards .vote-base { margin-right: 6px; color: var(--wx-muted); font-size: 18px; font-weight: 600; text-decoration: line-through; }

/* rewards strip */
.vote-rewards { display: grid; grid-template-columns: 1.15fr 1fr 1fr; margin: 30px 0 28px; padding: 22px 0; }
.vote-rewards > div { display: flex; flex-direction: column; justify-content: center; padding: 0 28px; border-left: 1px solid var(--wx-line-2); }
.vote-rewards > div:first-child { border: 0; }
.vote-rewards .vote-ogrines { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.vote-rewards img { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4)); }
.vote-rewards dt { color: var(--wx-muted); font-size: 12.5px; }
.vote-rewards dd { margin: 2px 0 0; color: var(--wx-text); font-size: 28px; font-weight: 800; line-height: 1.35; font-variant-numeric: tabular-nums; }
.vote-rewards dd span { color: var(--wx-text-2); font-size: 16px; font-weight: 500; }

/* sign in */
.vote-main .shop-login { max-width: 440px; padding: 26px; }
.vote-main .shop-login h2 { margin-bottom: 2px; }
.vote-main .shop-login > a { font-size: 13.5px; }
#vote-message, #vote-login-message { margin: 18px 0 0; color: var(--wx-teal-hi); font-size: 14px; }
#vote-message[data-error="true"], #vote-login-message[data-error="true"] { color: var(--wx-bad); }
#vote-message:empty, #vote-login-message:empty { display: none; }

/* signed in */
.vote-account-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 18px; }
.vote-account-line .wx-kicker { margin-bottom: 2px; }
#vote-username { display: block; font: 700 21px/1.3 var(--wx-display); overflow-wrap: anywhere; }
.vote-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.vote-progress, .vote-action { min-width: 0; padding: 28px 30px; }
.vote-box-reward { display: flex; align-items: center; gap: 16px; margin: 24px 0 20px; }
.vote-box-reward > img { flex-shrink: 0; filter: invert(88%) sepia(27%) saturate(681%) hue-rotate(341deg); }
.vote-box-reward > div { min-width: 0; }
.vote-box-reward .vote-eyebrow { font-size: 12.5px; }
.vote-box-reward strong { color: var(--wx-gold); font: 700 22px/1.25 var(--wx-display); }
#vote-count { flex: 0 0 72px; margin-left: auto; color: var(--wx-text); font-size: 22px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* the liquid meter: teal rising into violet (transform-only animations; still under reduced motion) */
.vote-liquid-meter { --vote-progress: 0%; position: relative; isolation: isolate; height: 74px; padding: 6px; overflow: hidden; border: 1px solid var(--wx-line-3); border-radius: 12px; background: linear-gradient(180deg, #1e1a34, #0b0a18 45%, #221d3c); box-shadow: inset 0 2px 3px rgba(228, 214, 255, 0.16), inset 0 -3px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.25); }
.vote-liquid-meter::after { content: ""; position: absolute; inset: 1px; pointer-events: none; border-top: 1px solid rgba(228, 214, 255, 0.24); border-radius: 11px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 36%, transparent 38%, transparent 75%, rgba(228, 214, 255, 0.06)); }
.vote-liquid-fill { position: relative; width: var(--vote-progress); height: 100%; overflow: hidden; border-radius: 7px; background: linear-gradient(110deg, #2d7d80, #6cc8c4 55%, #b293f0); box-shadow: inset 0 2px 8px rgba(230, 255, 255, 0.4), inset 0 -6px 8px rgba(40, 30, 90, 0.5); transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vote-liquid-wave { position: absolute; top: calc(50% - 200px); right: -382px; width: 400px; height: 400px; border-radius: 44%; background: rgba(240, 232, 255, 0.6); box-shadow: -5px 0 12px rgba(228, 214, 255, 0.4); animation: vote-wave 8s linear infinite; }
.vote-liquid-wave::after { content: ""; position: absolute; inset: 3px; border-radius: 43%; background: rgba(60, 40, 120, 0.5); transform: rotate(36deg); }
.vote-liquid-particles { position: absolute; inset: -60px 0; opacity: 0.7; background-image: radial-gradient(circle at 12px 18px, rgba(240, 232, 255, 0.66) 1px, transparent 3px), radial-gradient(circle at 38px 48px, rgba(228, 255, 250, 0.4) 2px, transparent 4px), radial-gradient(circle at 72px 30px, rgba(255, 255, 255, 0.33) 1px, transparent 2px); background-size: 96px 62px; animation: vote-particles 6s linear infinite; }
.vote-meter-marks { position: absolute; inset: 6px; pointer-events: none; border-radius: 7px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(240, 232, 255, 0.18) calc(10% - 1px), rgba(240, 232, 255, 0.18) 10%); }
@keyframes vote-wave { to { transform: rotate(360deg); } }
@keyframes vote-particles { to { transform: translateY(-62px); } }
.vote-remaining { margin: 14px 0 4px; color: var(--wx-teal-hi); font-size: 15px; font-weight: 650; }
.vote-repeat { margin: 6px 0 24px; color: var(--wx-muted); font-size: 13.5px; }
.vote-total-line { display: flex; justify-content: space-between; padding: 14px 0; border-block: 1px solid var(--wx-line-2); color: var(--wx-text-2); font-size: 14px; }
.vote-total-line strong { color: var(--wx-text); font-size: 18px; font-variant-numeric: tabular-nums; }

/* the vote steps */
.vote-action > .shop-muted { margin: -8px 0 20px; }
.vote-step { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.vote-step-number { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--wx-line-accent); border-radius: 50%; background: var(--wx-violet-bg); color: var(--wx-violet-hi); font-size: 12px; font-weight: 700; }
.vote-nickname-block { padding: 12px 14px 12px 18px; border: 1px solid rgba(232, 203, 142, 0.25); border-left: 3px solid var(--wx-gold); border-radius: 0 var(--wx-radius-sm) var(--wx-radius-sm) 0; background: var(--wx-gold-bg); }
.vote-nickname-label { color: #e9d6a8; font-size: 12.5px; }
.vote-nickname-value { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
#vote-nickname { display: block; min-width: 0; color: #fff0c4; font-size: 28px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; user-select: all; }
#vote-copy-nickname { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid rgba(232, 203, 142, 0.5); border-radius: 10px; background: rgba(232, 203, 142, 0.08); cursor: pointer; }
#vote-copy-nickname:hover { background: rgba(232, 203, 142, 0.18); }
#vote-copy-nickname img { filter: invert(90%) sepia(22%) saturate(568%) hue-rotate(347deg); }
.vote-nickname-block p { margin: 8px 0 0; color: var(--wx-text); font-size: 14px; line-height: 1.6; }
#vote-copy-status { display: block; min-height: 20px; margin-top: 5px; color: var(--wx-teal-hi); font-size: 12.5px; }
#vote-start-panel { display: grid; justify-items: start; gap: 18px; }
#vote-captcha { min-height: 144px; }
#vote-start { min-width: 200px; }
#vote-cooldown { padding: 16px 0; }
#vote-cooldown span { display: block; color: var(--wx-muted); font-size: 13.5px; }
#vote-next-in { display: block; margin-top: 6px; color: var(--wx-text); font-size: 30px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
#vote-next { display: block; margin-top: 4px; color: var(--wx-muted); font-size: 13.5px; }
#vote-expiry { color: var(--wx-muted); font-size: 12.5px; }
#vote-expires { margin-left: 4px; color: var(--wx-gold); font-variant-numeric: tabular-nums; }

/* where the vote stands while Serveur-Privé confirms it (vote.js updateTracker): data-stage = vote | confirm | credit */
.vote-tracker { display: grid; gap: 0; margin: 4px 0 20px; padding: 0; list-style: none; }
.vote-tracker li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; color: var(--wx-muted); }
.vote-tracker li:last-child { padding-bottom: 0; }
.vote-tracker li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--wx-line-2); }
.vote-tracker li > div { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.vote-tracker strong { color: inherit; font-size: 15px; }
.vote-tracker span:not(.vote-tracker-dot) { font-size: 13px; line-height: 1.5; }
.vote-tracker em { color: var(--wx-gold); font-size: 12.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.vote-tracker-dot { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid var(--wx-line-3); border-radius: 50%; background: #0d0b1c; }
.vote-tracker li.is-current { color: var(--wx-text); }
.vote-tracker li.is-current .vote-tracker-dot { border-color: transparent; border-top-color: var(--wx-teal); border-right-color: var(--wx-teal); animation: vote-spin 0.9s linear infinite; }
.vote-tracker li.is-current .vote-tracker-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--wx-teal); opacity: 0.35; animation: vote-pulse 1.4s ease-in-out infinite; }
.vote-tracker li.is-done { color: var(--wx-teal-hi); }
.vote-tracker li.is-done .vote-tracker-dot { border-color: var(--wx-teal); background: var(--wx-teal); }
.vote-tracker li.is-done .vote-tracker-dot::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #0b1a19; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vote-tracker li.is-done:not(:last-child)::before { background: var(--wx-teal); }
.vote-tracker[data-stage="vote"] li[data-step="vote"] .vote-tracker-dot { border-color: var(--wx-teal); animation: none; }
.vote-done { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; padding: 14px 16px; border: 1px solid var(--wx-teal-line); border-radius: var(--wx-radius-sm); background: var(--wx-teal-bg); animation: vote-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.vote-done strong { display: block; color: var(--wx-text); font-size: 16px; }
.vote-done p { margin: 3px 0 0; color: var(--wx-teal-hi); font-size: 13px; }
.vote-done-mark { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--wx-teal); }
.vote-done-mark::after { content: ""; position: absolute; left: 12px; top: 6px; width: 8px; height: 15px; border: solid #0b1a19; border-width: 0 3px 3px 0; transform: rotate(45deg); }
@keyframes vote-spin { to { transform: rotate(360deg); } }
@keyframes vote-pulse { 50% { opacity: 0.8; transform: scale(0.8); } }
@keyframes vote-pop { from { opacity: 0; transform: scale(0.94); } }

@media (max-width: 760px) {
  .vote-main { width: calc(100% - 32px); padding: 30px 0 56px; }
  .vote-rewards { grid-template-columns: 1fr 1fr; gap: 18px 0; margin-top: 24px; padding: 18px 0; }
  .vote-rewards > div { padding-inline: 18px; }
  .vote-rewards .vote-ogrines { grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--wx-line-2); }
  .vote-rewards > div:nth-child(2) { border-left: 0; }
  .vote-rewards dd { font-size: 25px; }
  .vote-rewards dd span { font-size: 14px; }
  .vote-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vote-progress, .vote-action { padding: 22px 18px; }
  .vote-action { order: -1; }
  .vote-account-line { flex-wrap: wrap; }
  .vote-box-reward { gap: 12px; }
  .vote-box-reward strong { font-size: 20px; }
  .vote-box-reward > img { width: 38px; height: 38px; }
  #vote-count { flex-basis: 65px; font-size: 20px; }
  .vote-main .shop-login { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vote-liquid-wave, .vote-liquid-particles, .vote-tracker li.is-current .vote-tracker-dot, .vote-tracker li.is-current .vote-tracker-dot::after, .vote-done { animation: none; }
  .vote-liquid-fill { transition: none; }
}