/* HVS Frontend */
:root{ --c:#2563EB }
.hvs-wrap{ max-width:680px;margin:0 auto;padding:24px 16px 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif }
.hvs-head{ text-align:center;margin-bottom:36px }
.hvs-head h1{ font-size:clamp(22px,5vw,32px);font-weight:800;color:#1e293b;letter-spacing:-.03em;margin:0 0 6px }
.hvs-head p{ color:#64748b;font-size:14px;margin:0 }
.hvs-section{ margin-bottom:32px }
.hvs-role-title{ font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--c);display:inline-block }
.hvs-group{ margin-bottom:16px }
.hvs-glabel{ font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:block }
.hvs-cards{ display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px }

.hvs-card{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px;background:#fff;border:2px solid #e2e8f0;border-radius:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;position:relative;user-select:none;-webkit-tap-highlight-color:transparent }
.hvs-card:hover{ border-color:var(--c);transform:translateY(-2px);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 12%,transparent) }
.hvs-card.sel{ border-color:var(--c);background:color-mix(in srgb,var(--c) 6%,white);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 14%,transparent) }
.hvs-radio{ position:absolute;opacity:0;width:0;height:0;pointer-events:none }

.hvs-av{ width:64px;height:64px;border-radius:50%;background:#f1f5f9;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#94a3b8;transition:background .15s,color .15s,border-color .15s;overflow:hidden }
.hvs-card.sel .hvs-av{ background:var(--c);color:#fff;border-color:var(--c) }
.hvs-av-img{ padding:0;background:none }
.hvs-av-img img{ width:100%;height:100%;object-fit:cover;display:block }
.hvs-card.sel .hvs-av-img{ border-color:var(--c) }

.hvs-name{ font-size:13px;font-weight:600;color:#1e293b;text-align:center;line-height:1.3 }
.hvs-tick{ position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s cubic-bezier(.34,1.56,.64,1) }
.hvs-tick svg{ width:12px;height:12px;stroke:#fff }
.hvs-card.sel .hvs-tick{ opacity:1;transform:scale(1) }

.hvs-foot{ margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:12px }
.hvs-err{ color:#dc2626;font-size:13px;background:#fef2f2;border:1px solid #fca5a5;padding:10px 16px;border-radius:8px;width:100%;text-align:center;box-sizing:border-box }
.hvs-btn{ width:100%;max-width:320px;padding:15px 24px;background:var(--c);color:#fff;border:none;border-radius:99px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px color-mix(in srgb,var(--c) 38%,transparent) }
.hvs-btn:hover{ opacity:.9;transform:translateY(-1px) }
.hvs-btn:disabled{ opacity:.5;cursor:not-allowed;transform:none }

.hvs-done{ text-align:center;padding:48px 20px;max-width:360px;margin:0 auto }
.hvs-done-icon{ width:68px;height:68px;background:var(--c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px;box-shadow:0 8px 24px color-mix(in srgb,var(--c) 35%,transparent) }
.hvs-done h2{ font-size:22px;margin:0 0 8px;color:#1e293b }
.hvs-done p{ color:#64748b;margin:0 0 4px;font-size:14px }

.hvs-done .hvs-btn{ width:auto;max-width:280px;margin-top:20px }
.hvs-next-voter{ background:linear-gradient(135deg,#16a34a,#15803d) !important;box-shadow:0 4px 14px rgba(22,163,74,.35) !important;animation:hvs-pulse-in .4s cubic-bezier(.34,1.56,.64,1) }
@keyframes hvs-pulse-in{ from{opacity:0;transform:scale(.7) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }

@media(max-width:400px){ .hvs-cards{grid-template-columns:1fr 1fr;gap:8px} .hvs-av{width:52px;height:52px;font-size:20px} .hvs-name{font-size:12px} }