@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#nsg-app {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #b6ccde 0%, #cddce9 45%, #ddeaf3 100%);
}

/* ── Screens ────────────────────────────────────────────── */
.nsg-screen {
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; width: 100%;
  opacity: 0; transition: opacity .3s ease;
}
.nsg-screen.active { display: flex; opacity: 1; }

/* ── Logo ───────────────────────────────────────────────── */
.nsg-logo-img    { height: 80px; width: auto; }
.nsg-logo-img-sm { height: 52px; width: auto; margin: 0 auto; display: block; }

/* ═══════════════════════════════════════════════════════ */
/* LOGIN                                                   */
/* ═══════════════════════════════════════════════════════ */
.nsg-login-card {
  background: rgba(255,255,255,.97);
  border-radius: 28px; padding: 52px 48px;
  max-width: 460px; width: 92%;
  box-shadow: 0 32px 80px rgba(26,46,68,.14), 0 2px 0 rgba(255,255,255,.8) inset;
  text-align: center;
}
.nsg-logo-wrap    { display: flex; justify-content: center; margin-bottom: 28px; }
.nsg-login-title  { font-size: 22px; font-weight: 700; color: #1a2e44; letter-spacing: -.5px; margin-bottom: 6px; }
.nsg-login-sub    { font-size: 14px; color: #94a3b8; margin-bottom: 36px; }

.nsg-field        { text-align: left; margin-bottom: 24px; }
.nsg-label        { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 8px; }
.nsg-input-field  {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid #dde3ec; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 15px; color: #1a2e44;
  background: #f8fafc; outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.nsg-input-field:focus { border-color: #1a2e44; background: #fff; box-shadow: 0 0 0 4px rgba(26,46,68,.07); }
.nsg-hint         { font-size: 12px; color: #94a3b8; margin-top: 6px; }
.nsg-err-box      { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 500; margin-bottom: 16px; text-align: left; }

.nsg-login-btn {
  width: 100%; padding: 15px; border: none; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: all .2s;
  background: #cbd5e1; color: #fff;
}
.nsg-login-btn.ready {
  background: linear-gradient(135deg, #1a2e44, #2d4a6e);
  box-shadow: 0 6px 20px rgba(26,46,68,.28);
}
.nsg-login-btn.ready:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,46,68,.35); }
.nsg-login-btn.ready:active { transform: scale(.98); }
.nsg-login-btn:disabled { opacity: .5; cursor: not-allowed; }
.nsg-login-footer { font-size: 12px; color: #94a3b8; margin-top: 28px; padding-top: 24px; border-top: 1px solid #f1f5f9; }

/* ═══════════════════════════════════════════════════════ */
/* PAUSE + FINISHED                                        */
/* ═══════════════════════════════════════════════════════ */
.nsg-pause-wrap   { text-align: center; padding: 24px 20px; width: 100%; max-width: 640px; }
.nsg-pause-logo   { margin-bottom: 18px; }
.nsg-pause-brand  { font-size: 18px; font-weight: 600; color: #1a2e44; margin-bottom: 40px; letter-spacing: -.3px; }

.nsg-pause-card {
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 28px; padding: 56px 72px;
  box-shadow: 0 8px 40px rgba(26,46,68,.09);
}
.nsg-pause-msg    { font-size: 24px; font-weight: 700; color: #1a2e44; letter-spacing: -.4px; margin-bottom: 8px; }
.nsg-pause-hint   { font-size: 14px; color: #64748b; }
.nsg-voter-label  { font-size: 12px; color: rgba(26,46,68,.4); margin-top: 20px; }

/* Pulse animation */
.nsg-pulse-ring {
  position: relative; width: 72px; height: 72px; margin: 0 auto 28px;
}
.nsg-pulse-ring::before, .nsg-pulse-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(26,46,68,.1);
  animation: nsg-pulse 2.8s cubic-bezier(.4,0,.6,1) infinite;
}
.nsg-pulse-ring::after { animation-delay: 1.4s; }
.nsg-pulse-dot { position: absolute; inset: 22px; border-radius: 50%; background: rgba(26,46,68,.28); }
@keyframes nsg-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Finished screen */
.nsg-finished-card { background: rgba(240,253,244,.85); border-color: rgba(134,239,172,.5); }
.nsg-checkmark {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; font-size: 36px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(22,163,74,.3);
}

/* ═══════════════════════════════════════════════════════ */
/* VOTE SCREEN — redesigned, less stacked                 */
/* ═══════════════════════════════════════════════════════ */
#screen-vote { justify-content: flex-start; padding: 0 0 40px; }

.nsg-vote-outer {
  display: flex; flex-direction: column;
  width: 100%; max-width: 600px;
  margin: 0 auto; padding: 32px 24px 0;
  gap: 0;
}

/* Top bar: sak badge left, compact timer right */
.nsg-vote-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.nsg-sak-badge {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  color: #475569; font-size: 12px; font-weight: 700;
  padding: 6px 18px; border-radius: 99px;
  letter-spacing: .3px; text-transform: uppercase;
}

/* ── Compact circular timer ─────────────────────────────── */
/* r=30 → circumference = 2π×30 ≈ 188.5 */
.nsg-timer-compact {
  position: relative; width: 72px; height: 72px; flex-shrink: 0;
}
.nsg-circle-svg {
  width: 72px; height: 72px;
  transform: rotate(-90deg);
}
.nsg-ring-bg {
  fill: none; stroke: rgba(255,255,255,.35); stroke-width: 6;
}
.nsg-ring-fg {
  fill: none; stroke: #1a2e44; stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .4s ease;
}
.nsg-ring-fg.warning { stroke: #f59e0b; }
.nsg-ring-fg.urgent  { stroke: #dc2626; }

.nsg-timer-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
}
.nsg-timer-num  { font-size: 20px; font-weight: 700; color: #1a2e44; font-variant-numeric: tabular-nums; }
.nsg-timer-unit { font-size: 9px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }

/* ── Question title ─────────────────────────────────────── */
.nsg-sak-title {
  font-size: 28px; font-weight: 700; color: #1a2e44;
  line-height: 1.3; letter-spacing: -.5px;
  margin-bottom: 32px;
}

/* ── Action zone (buttons or voted state) ───────────────── */
.nsg-action-zone { margin-bottom: 28px; }

.nsg-vote-btns   { display: flex; gap: 14px; }
.nsg-btn-for, .nsg-btn-imot {
  flex: 1; padding: 18px 0; border: none; border-radius: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -.3px;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.nsg-btn-for {
  background: linear-gradient(145deg, #22c55e, #16a34a); color: #fff;
  box-shadow: 0 6px 20px rgba(22,163,74,.3);
}
.nsg-btn-for:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(22,163,74,.4); }
.nsg-btn-imot {
  background: linear-gradient(145deg, #f87171, #dc2626); color: #fff;
  box-shadow: 0 6px 20px rgba(220,38,38,.3);
}
.nsg-btn-imot:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(220,38,38,.4); }
.nsg-btn-for:active, .nsg-btn-imot:active { transform: scale(.97); }
.nsg-btn-for:disabled, .nsg-btn-imot:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; }

/* Voted feedback chip */
.nsg-voted-box   { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nsg-voted-chip  {
  display: inline-flex; align-items: center;
  padding: 12px 28px; border-radius: 99px;
  font-size: 18px; font-weight: 700; letter-spacing: -.2px;
  animation: chip-pop .3s cubic-bezier(.34,1.56,.64,1);
}
.nsg-voted-chip.for-chip  { background: #dcfce7; color: #16a34a; }
.nsg-voted-chip.imot-chip { background: #fee2e2; color: #dc2626; }
@keyframes chip-pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.nsg-voted-sub   { font-size: 13px; color: #64748b; padding-left: 4px; }

/* ── Results card ───────────────────────────────────────── */
.nsg-results-card {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 20px; padding: 20px 24px;
  box-shadow: 0 4px 24px rgba(26,46,68,.07);
}
.nsg-results-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.nsg-results-label { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.nsg-results-count { font-size: 12px; font-weight: 500; color: #94a3b8; }
.nsg-res-row       { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.nsg-res-lbl       { width: 36px; font-size: 13px; font-weight: 700; }
.nsg-for-lbl       { color: #16a34a; }
.nsg-imot-lbl      { color: #dc2626; }
.nsg-res-track     { flex: 1; background: rgba(0,0,0,.07); border-radius: 99px; height: 10px; overflow: hidden; }
.nsg-res-bar       { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); width: 0; }
.nsg-bar-for       { background: linear-gradient(90deg, #22c55e, #16a34a); }
.nsg-bar-imot      { background: linear-gradient(90deg, #f87171, #dc2626); }
.nsg-res-num       { width: 30px; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #1a2e44; }

.nsg-results-foot  { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.06); }
.nsg-results-weighted { font-size: 12px; color: #94a3b8; font-weight: 500; }
.nsg-not-voted     { font-size: 12px; color: #f59e0b; font-weight: 600; }

/* ═══════════════════════════════════════════════════════ */
/* Shortcode / theme chrome removal                       */
/* ═══════════════════════════════════════════════════════ */
body:has(#nsg-app) {
  background: linear-gradient(145deg, #b6ccde 0%, #cddce9 45%, #ddeaf3 100%) !important;
  min-height: 100vh;
}
body:has(#nsg-app) #masthead,
body:has(#nsg-app) .site-header,
body:has(#nsg-app) header.site-header,
body:has(#nsg-app) .site-footer,
body:has(#nsg-app) footer.site-footer,
body:has(#nsg-app) #colophon { display: none !important; }
body:has(#nsg-app) .site-main,
body:has(#nsg-app) main#main,
body:has(#nsg-app) #primary,
body:has(#nsg-app) .entry-content,
body:has(#nsg-app) .post-content,
body:has(#nsg-app) article.page { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 520px) {
  .nsg-login-card { padding: 36px 24px; }
  .nsg-pause-card { padding: 44px 28px; }
  .nsg-sak-title  { font-size: 22px; }
  .nsg-btn-for, .nsg-btn-imot { font-size: 18px; }
}