/* Frontend card + ring + share + feed */
.nvnq-centered{ display:flex; justify-content:center; }
.nvnq-card{ width:100%; max-width:720px; }
.nvnq-root{ position:relative; padding:16px; }
.nvnq-head{ text-align:center; margin-bottom:12px } .nvnq-title{ margin:0; font-size:28px; line-height:1.2 } .nvnq-sub{ margin:6px 0 0; color:#667085 }
.nvnq-box{ background:#fff; border:1px solid #eaeaea; border-radius:16px; padding:18px; box-shadow:0 10px 25px rgba(0,0,0,.06) }
.nvnq-opts{ display:flex; flex-direction:column; gap:10px } .nvnq-chip{ text-align:left; padding:12px 14px; border-radius:12px; border:1px solid #E4E7EC; background:#F8FAFC; cursor:pointer }
.nvnq-chip:hover{ background:#EEF2FF } .nvnq-chip.nvnq-correct{ background:#ECFDF3; border-color:#ABEFC6 } .nvnq-chip.nvnq-wrong{ background:#FEF3F2; border-color:#FEC6C6 }
.nvnq-feedback{ margin-top:10px; min-height:24px } .nvnq-right{ color:#067647; font-weight:700 } .nvnq-wrong-txt{ color:#B42318; font-weight:700 }
.nvnq-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; border:0; cursor:pointer; font-weight:600 }
.nvnq-primary{ background:#1d4ed8; color:#fff; box-shadow:0 6px 16px rgba(29,78,216,.25) } .nvnq-secondary{ background:#EEF2FF; color:#3730a3 }
.nvnq-input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #E4E7EC; margin-top:6px; }
.nvnq-row{ margin:8px 0 }
.nvnq-result-image img{ max-width:100%; border-radius:14px; border:1px solid #eee; margin:10px 0 }
.nvnq-final-head h2{ margin:0 0 8px 0 }
.nvnq-share-row{ display:flex; align-items:center; gap:10px; margin:14px 0 4px } .nvnq-share{ width:36px; height:36px; display:inline-flex; justify-content:center; align-items:center; border:1px solid #e5e7eb; border-radius:999px; background:#fff }
.nvnq-results-feed{ display:flex; flex-direction:column; gap:10px } .nvnq-feed-item{ border:1px solid #eee; border-radius:12px; padding:10px; background:#fff }
.nvnq-feed-row{ display:flex; justify-content:space-between; align-items:center; font-weight:600 } .nvnq-feed-score{ color:#0b7 }
.nvnq-pagination{ display:flex; gap:6px; margin-top:10px; justify-content:center } .nvnq-page{ padding:6px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer } .nvnq-page.is-active{ background:#EEF2FF; border-color:#c7d2fe } .nvnq-ellipsis{ padding:6px 4px; color:#94A3B8 }
/* Circular ring */
.nvnq-marks{ display:flex; align-items:center; gap:16px; margin:8px 0 12px }
.nvnq-ring-bg{ fill:none; stroke:#E5E7EB; stroke-width:12 }
.nvnq-ring-fg{ fill:none; stroke:#7C3AED; stroke-width:12; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; stroke-dasharray: var(--nvnq-circ, 326.7); stroke-dashoffset: var(--nvnq-offset, 326.7); transition: stroke-dashoffset .9s ease }
.nvnq-ring-big{ font-size:22px; font-weight:800; fill:#1F2937 } .nvnq-ring-s{ fill:#94A3B8; font-size:16px; font-weight:700 } .nvnq-ring-sub{ font-size:12px; fill:#94A3B8 }
/* Confetti canvas */
.nvnq-confetti{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:9998 }