:root {
  --navy: #17185b;
  --navy-soft: #ececfa;
  --ink: #20223a;
  --muted: #656b7b;
  --line: #dfe2ea;
  --soft: #f1f3f7;
  --white: #ffffff;
  --pink: #f25f87;
  --orange: #f39a38;
  --blue: #4ba8e8;
  --green: #45b990;
  --purple: #9a70df;
  --teal: #3bbfc3;
  --shadow: 0 12px 30px rgba(23, 24, 91, 0.09);
}

.scheduled-preview-banner { display:flex; justify-content:space-between; gap:.75rem; margin:0 0 1rem; padding:.85rem 1rem; border:1px solid #d8dce7; border-radius:16px; background:#f7f8fb; color:#17233f; }
.scheduled-preview-banner span { color:#667085; }
.scheduled-poll strong a, .admin-poll h2 a, .admin-public-summary li a { color:inherit; text-decoration-color:#9aa4b8; text-underline-offset:3px; }
@media (max-width:640px) { .scheduled-preview-banner { flex-direction:column; } }

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: var(--navy);
}

:focus-visible {
  outline: 3px solid rgba(75, 168, 232, 0.55);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.site-header {
  width: min(100% - 1.5rem, 1180px);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 0.75rem 0;
}

.site-switcher {
  display: flex;
  gap: 0.5rem;
}

.site-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
}

.site-pill.active {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.site-pill img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.menu-button,
.menu-close,
.ad-close {
  border: 0;
  background: transparent;
  color: var(--navy);
}

.menu-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.25rem;
}

.brand-lockup {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0 1rem 1rem;
  text-align: center;
}

.brand-lockup a {
  display: block;
}

.brand-lockup img {
  width: clamp(150px, 25vw, 215px);
  height: 92px;
  display: block;
  object-fit: contain;
}

.brand-lockup p {
  margin: -0.35rem 0 0;
  color: var(--muted);
  font-size: clamp(0.86rem, 2vw, 1rem);
}

.page-grid {
  width: min(100% - 1.5rem, 1420px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
}

.page-main {
  min-width: 0;
  width: min(100%, 620px);
  margin: 0 auto;
}

.ad-slot {
  display: grid;
  place-items: center;
  border: 1px dashed #aeb4c2;
  border-radius: 18px;
  background: #fafbfc;
  color: var(--muted);
  text-align: center;
}

.ad-slot > span {
  padding: 0.75rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad-left,
.ad-right-top,
.ad-right-bottom {
  display: none;
}

.ad-mobile {
  width: min(100% - 1.5rem, 620px);
  min-height: 210px;
  margin: 1.2rem auto 0;
}

.ad-close {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  width: 28px;
  height: 28px;
  font-size: 1.25rem;
}

.page-title {
  margin: 0 0 1rem;
  color: var(--navy);
  font-size: clamp(1.65rem, 5vw, 2.2rem);
  line-height: 1.15;
}

.page-intro {
  margin: -0.35rem 0 1.2rem;
  color: var(--muted);
}

.card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.poll-card {
  padding: clamp(1rem, 4vw, 1.45rem);
  border-color: #e3e0ec;
  background: #f8f7fc;
  box-shadow: 0 10px 24px rgba(28, 29, 74, 0.07);
}

.poll-card h1,
.poll-card h2 {
  margin: 0 0 1.15rem;
  color: var(--ink);
  font-size: clamp(1.45rem, 5vw, 2rem);
  line-height: 1.18;
}

.context-line {
  margin: -0.65rem 0 1.1rem;
  color: var(--muted);
}

.category-picker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto 0.85rem;
  padding: 0.75rem;
  border: 1px solid #dcebf6;
  border-radius: 20px;
  background: #f3f8fc;
}

.category-picker .select { width: min(100%, 290px); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.category-picker label,
.field label,
.field-label {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
}

.select,
.input,
.textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
}

.select,
.input {
  min-height: 50px;
  padding: 0.7rem 0.9rem;
}

.select {
  appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2317185b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 16px;
}

.textarea {
  min-height: 108px;
  padding: 0.85rem 0.9rem;
  resize: vertical;
}

.answer-list {
  display: grid;
  gap: 0.72rem;
}

.answer {
  --answer-colour: var(--pink);
  position: relative;
  min-height: 58px;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  text-align: left;
  isolation: isolate;
}

.answer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--result-width, 0%);
  border-radius: inherit;
  background: color-mix(in srgb, var(--answer-colour) 70%, white);
  transition: width 240ms ease;
}

.answer:hover {
  border-color: color-mix(in srgb, var(--answer-colour) 58%, white);
}

.answer.selected {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--white);
}

.answer-text {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 720;
}

.answer-check {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.78rem;
}

.answer-percent {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tone-1 { --answer-colour: var(--pink); }
.tone-2 { --answer-colour: var(--orange); }
.tone-3 { --answer-colour: var(--blue); }
.tone-4 { --answer-colour: var(--green); }
.tone-5 { --answer-colour: var(--purple); }
.tone-6 { --answer-colour: var(--teal); }

.poll-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 780;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  border-color: var(--navy);
}

.button.primary {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.button.secondary {
  background: var(--navy-soft);
}

.button.block {
  width: 100%;
}

.create-below {
  margin-top: 0.7rem;
}

.subtle-link {
  display: block;
  width: fit-content;
  margin: 0.8rem auto 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.shared-poll-label,
.status-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.68rem;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 800;
}

.shared-poll-label {
  margin: 0 auto 0.75rem;
}

.shared-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.form-card,
.content-card,
.success-card {
  padding: clamp(1rem, 4vw, 1.5rem);
}

.form-card h1,
.form-card h2,
.success-card h1,
.success-card h2,
.content-card h1,
.content-card h2 {
  margin-top: 0;
  color: var(--navy);
}

.form-stack,
.answer-fields {
  display: grid;
  gap: 0.9rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.form-actions {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.unlisted-note,
.notice {
  padding: 0.8rem 0.95rem;
  border-radius: 18px;
  background: var(--navy-soft);
  color: var(--navy);
}

.unlisted-note {
  margin: 1rem 0;
}

.success-card {
  display: grid;
  gap: 0.85rem;
}

.success-card > * {
  margin-block: 0;
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
}

.preview-heading {
  margin: 1.5rem 0 0.75rem;
  color: var(--navy);
  text-align: center;
}

.edit-link-row {
  display: flex;
  justify-content: center;
}

.content-card {
  color: var(--ink);
}

.content-card h2 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}

.content-card p,
.content-card li {
  color: #44495b;
}

.content-card ul {
  padding-left: 1.25rem;
}

.content-card a {
  overflow-wrap: anywhere;
}

.terms-check { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.9rem; border: 1px solid #dfe2ea; border-radius: 16px; background: #f7f8fb; font-size: 0.9rem; line-height: 1.45; }
.terms-check input { margin-top: 0.2rem; flex: 0 0 auto; }
.terms-check a { color: #17185b; font-weight: 700; }
.archive-card { padding: clamp(1rem, 4vw, 1.5rem); }
.archive-search { margin: 1rem 0; }
.archive-search > label { display: block; margin-bottom: 0.4rem; font-weight: 700; }
.archive-search-row { display: flex; gap: 0.5rem; }
.archive-search-row .input { flex: 1 1 auto; min-width: 0; }
.archive-result-count { margin: 0.4rem 0 0; color: #717687; font-size: 0.8rem; }
.archive-empty { margin-top: 1rem; text-align: center; }
.archive-categories { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid #e4e6ed; }
.archive-list li:last-child { border-bottom: 0; }
.archive-list a { color: #17185b; font-weight: 700; text-decoration: none; }
.archive-list span { color: #717687; font-size: 0.78rem; }
.admin-login-card, .admin-card { padding: clamp(1rem, 4vw, 1.5rem); }
.admin-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin: 1rem 0; }
.admin-stats span { padding: 0.8rem; border-radius: 16px; background: #eef0f5; color: #17185b; font-size: 0.78rem; }
.admin-stats strong { display: block; font-size: 1.35rem; }
.admin-public-summary { margin: 1rem 0; padding: 1rem; border-radius: 18px; background: #f7f8fb; }
.admin-public-summary h2 { margin-top: 0; font-size: 1rem; }
.admin-public-summary ol { margin: 0; padding-left: 1.3rem; }
.admin-public-summary li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; }
.admin-public-summary a { color: #17185b; }
.admin-schedule { margin: 1rem 0 1.5rem; padding: 1rem; border-radius: 18px; background: #f7f8fb; }
.admin-schedule h2 { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; }
.admin-schedule-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.scheduled-poll { display: grid; grid-template-columns: minmax(0,1fr) 145px 125px auto; align-items: end; gap: 0.65rem; padding: 0.85rem 0; border-top: 1px solid #dfe2ea; }
.scheduled-poll strong, .scheduled-poll small { display: block; margin-top: 0.3rem; }
.scheduled-poll label { font-size: 0.78rem; color: #646a7b; }
.admin-poll { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 1rem; padding: 1rem 0; border-top: 1px solid #dfe2ea; }
.admin-poll.removed { opacity: 0.68; }
.admin-poll h2 { margin: 0.45rem 0; font-size: 1rem; }
.admin-poll p, .admin-poll ul { margin: 0.35rem 0; color: #646a7b; font-size: 0.82rem; }
.admin-actions { display: grid; gap: 0.45rem; align-content: start; }
.button.danger { border-color: #b53145; color: #8f1f32; }
@media (max-width: 620px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-poll { grid-template-columns: 1fr; }
  .admin-actions { grid-template-columns: 1fr; }
  .admin-schedule-row, .scheduled-poll { grid-template-columns: 1fr; }
  .archive-list li { grid-template-columns: 1fr; gap: 0.2rem; }
}

.contact-grid {
  display: grid;
  gap: 1rem;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-message {
  min-height: 1.4rem;
  margin: 0.75rem 0 0;
  color: var(--navy);
  font-weight: 700;
}

.site-footer {
  width: min(100% - 1.5rem, 1180px);
  margin: 2rem auto 0;
  padding: 1.25rem 0 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1rem;
}

.site-footer a,
.link-button {
  border: 0;
  background: transparent;
  color: var(--navy);
  text-decoration: underline;
}

.menu-dialog,
.cookie-dialog {
  width: min(100% - 2rem, 430px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(23, 24, 91, 0.24);
}

.menu-dialog::backdrop,
.cookie-dialog::backdrop {
  background: rgba(18, 20, 43, 0.42);
}

.menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-heading h2,
.cookie-dialog h2 {
  margin-top: 0;
  color: var(--navy);
}

.menu-close {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
}

.menu-dialog nav {
  display: grid;
  gap: 0.45rem;
}

.menu-dialog nav a {
  padding: 0.85rem;
  border-radius: 14px;
  color: var(--navy);
  font-weight: 760;
  text-decoration: none;
}

.menu-dialog nav a:hover {
  background: var(--navy-soft);
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.8rem 0;
}

.switch-row input {
  width: 1.15rem;
  height: 1.15rem;
}

.switch-row span {
  display: grid;
}

.switch-row small {
  color: var(--muted);
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 30;
  width: min(calc(100% - 2rem), 480px);
  transform: translateX(-50%);
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 14px 36px rgba(23, 24, 91, 0.22);
  text-align: center;
  font-weight: 700;
}

.empty-state,
.error-state {
  padding: 1.5rem;
  text-align: center;
}

.share-label-short {
  display: none;
}

@media (max-width: 520px) {
  .site-header {
    width: min(100% - 1rem, 1180px);
  }

  .site-pill {
    padding-inline: 0.55rem;
  }

  .site-pill img {
    width: 26px;
    height: 26px;
  }

  .page-grid,
  .ad-mobile,
  .site-footer {
    width: min(100% - 1rem, 620px);
  }

  .poll-controls .button,
  .shared-controls .button {
    min-width: 0;
    padding-inline: 0.35rem;
    font-size: 0.83rem;
  }

  .poll-controls .share-label-long {
    display: none;
  }

  .poll-controls .share-label-short {
    display: inline;
  }

  .copy-row,
  .dialog-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 760px) {
  .contact-grid {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .form-actions.two-up {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .page-grid {
    grid-template-columns: minmax(150px, 1fr) minmax(560px, 620px) minmax(150px, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: start;
  }

  .page-main {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .ad-left,
  .ad-right-top,
  .ad-right-bottom {
    display: grid;
    min-height: 420px;
  }

  .ad-left {
    grid-column: 1;
    grid-row: 1;
  }

  .ad-right-top {
    grid-column: 3;
    grid-row: 1;
  }

  .ad-right-bottom {
    position: sticky;
    bottom: 1rem;
    grid-column: 3;
    grid-row: 2;
    min-height: 220px;
  }

  .ad-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .answer::before {
    transition: none;
  }
}

/* Progress, awards and leaderboard */
.progress-summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid #f0d996;
  border-radius: 16px;
  background: #fff9e8;
  color: #4b5060;
  text-decoration: none;
  font-size: 0.9rem;
}

.progress-summary:hover { border-color: #17185b; }
.progress-messages { display: grid; gap: 0.18rem; }
.progress-messages small { color: #74705f; font-size: 0.76rem; }
.progress-messages strong { color: #17185b; font-weight: 850; }
.progress-count { color: #17185b; white-space: nowrap; }
.progress-count strong { font-size: 1.2rem; }
.filter-toggle { display: flex; align-items: center; gap: 0.45rem; color: #505566; font-size: 0.84rem; white-space: nowrap; }
.filter-toggle input { width: 1.05rem; height: 1.05rem; accent-color: #17185b; }
.next-badge-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #17185b; background: #e8f4ff; }
.next-badge-icon.tone-green { background: #def5ea; }
.next-badge-icon.tone-pink { background: #fde3ec; }
.next-badge-icon.tone-gold { background: #fff1c9; }
.next-badge-icon.tone-purple { background: #eee6fb; }
.next-badge-icon .award-icon { width: 22px; height: 22px; }
.back-to-polls { display: inline-flex; margin: 0 0 0.75rem; color: #17185b; font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.back-to-polls:hover { text-decoration: underline; }
.poll-category-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: -0.1rem 0 0.8rem; color: #686d7e; }
.poll-category-line span { padding: 0.2rem 0.55rem; border-radius: 999px; background: #eef0f5; color: #17185b; font-size: 0.75rem; font-weight: 750; }
.poll-category-line small { font-size: 0.72rem; text-align: right; }
.eyebrow { margin: 0 0 0.3rem; color: #717687; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.progress-card, .profile-card, .leaderboard-card, .list-card { margin-bottom: 1rem; }
.progress-card, .profile-card, .leaderboard-card { padding: clamp(1rem, 4vw, 1.5rem); }
.current-streak-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 0.8rem; margin-bottom: 1rem; padding: clamp(1rem, 4vw, 1.35rem); border-color: #f0d996; background: #fff9e8; }
.current-streak-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #fff0bd; color: #e87817; }
.current-streak-icon .award-icon { width: 34px; height: 34px; }
.current-streak-copy h2, .current-streak-copy p { margin: 0; }
.current-streak-copy h2 { color: #17185b; font-size: 1.3rem; font-weight: 900; }
.current-streak-copy p { margin-top: 0.18rem; color: #555b6d; font-size: 0.86rem; }
.current-streak-progress { height: 10px; overflow: hidden; grid-column: 1 / 3; border-radius: 999px; background: #f4e9c4; }
.current-streak-progress span { display: block; height: 100%; border-radius: inherit; background: #f39a38; }
.current-streak-fraction { align-self: end; color: #17185b; font-variant-numeric: tabular-nums; }
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.progress-heading h1 { margin-bottom: 0; }
.progress-ring { display: grid; flex: 0 0 82px; width: 82px; height: 82px; place-items: center; border-radius: 50%; background: conic-gradient(#45b990 var(--progress), #e8eaf0 0); position: relative; }
.progress-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.progress-ring span { position: relative; color: #17185b; font-weight: 800; }
.progress-track { height: 12px; margin: 1rem 0; overflow: hidden; border-radius: 999px; background: #e8eaf0; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4ba8e8, #45b990); }
.username-form { margin-top: 1rem; }
.section-heading { margin: 1.2rem 0 0.65rem; font-size: 1.15rem; }
.badge-summary { margin: 0 0 1rem; padding: clamp(1rem, 4vw, 1.5rem); border: 1px solid #dfe2ea; border-radius: 18px; background: #fff; }
.badge-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.badge-summary-heading h2 { margin: 0; font-size: 1rem; }
.badge-summary-heading span { color: #717687; font-size: 0.78rem; }
.badge-summary-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.75rem; }
.mini-award { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #e8f4ff; color: #17185b; cursor: help; }
.mini-award.tone-green { background: #def5ea; }
.mini-award.tone-pink { background: #fde3ec; }
.mini-award.tone-gold { background: #fff1c9; }
.mini-award.tone-purple { background: #eee6fb; }
.mini-award.locked { opacity: 0.38; filter: grayscale(1); }
.mini-award:focus-visible { outline: 3px solid #17185b; outline-offset: 2px; }
.mini-award .award-icon { width: 25px; height: 25px; }
.badge-summary-hint { margin: 0.65rem 0 0; color: #717687; font-size: 0.75rem; }
.streak-explainer { margin: -0.2rem 0 0.75rem; color: #626778; font-size: 0.88rem; }
.awards-grid { display: grid; gap: 0.65rem; }
.award-card { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 0.8rem; padding: 0.8rem; border: 1px solid #dfe2ea; border-radius: 18px; background: #fff; }
.award-card h3, .award-card p { margin: 0; }
.award-card h3 { font-size: 0.98rem; }
.award-card p { margin-top: 0.15rem; color: #717687; font-size: 0.82rem; }
.award-card.locked { opacity: 0.58; filter: grayscale(0.3); }
.award-medallion { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #17185b; background: #e8f4ff; }
.tone-green .award-medallion { background: #def5ea; }
.tone-pink .award-medallion { background: #fde3ec; }
.tone-gold .award-medallion { background: #fff1c9; }
.tone-purple .award-medallion { background: #eee6fb; }
.award-icon { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.award-status { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #17185b; color: #fff; font-size: 0.78rem; font-weight: 800; }
.poll-list-group { margin-top: 1.25rem; }
.poll-list-group h2 { display: flex; justify-content: space-between; margin-bottom: 0.45rem; font-size: 1rem; }
.poll-list-group h2 span { color: #74798a; font-size: 0.85rem; }
.poll-list-group > div { overflow: hidden; border: 1px solid #e2e4ea; border-radius: 14px; }
.poll-list-group a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem; color: #20223a; text-decoration: none; border-bottom: 1px solid #e7e9ee; }
.poll-list-group a:last-child { border-bottom: 0; }
.poll-list-group a:hover { background: #f6f7fa; }
.prototype-note { padding: 0.7rem; border-radius: 12px; background: #f2f3f7; color: #626778; font-size: 0.86rem; }
.leaderboard-list { margin: 1rem 0; padding: 0; list-style: none; }
.leaderboard-list li { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 0.55rem; padding: 0.72rem 0.4rem; border-bottom: 1px solid #e7e9ee; }
.leaderboard-list .current-user { margin-inline: -0.4rem; padding-inline: 0.8rem; border-radius: 12px; background: #eef5ff; }
.rank { color: #737889; font-weight: 800; text-align: center; }
.leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-name small { padding: 0.1rem 0.35rem; border-radius: 999px; background: #17185b; color: #fff; }

@media (max-width: 520px) {
  .category-picker { align-items: stretch; flex-direction: column; gap: 0.45rem; }
  .category-picker .select { width: 100%; }
  .filter-toggle { justify-content: center; }
  .progress-summary { grid-template-columns: auto 1fr auto; }
  .progress-summary > [aria-hidden="true"] { display: none; }
  .progress-heading { align-items: flex-start; }
  .progress-ring { flex-basis: 70px; width: 70px; height: 70px; }
  .award-card { grid-template-columns: 48px 1fr auto; }
  .award-medallion { width: 48px; height: 48px; }
  .current-streak-card { grid-template-columns: auto minmax(0,1fr) auto; gap: 0.65rem; }
  .current-streak-icon { width: 50px; height: 50px; }
}

.ads-disabled .ad-slot { display: none !important; }

/* Badge celebration */
.badge-celebration {
  width: min(92vw, 440px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(1.25rem, 5vw, 2rem);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(23, 24, 91, 0.28);
  text-align: center;
}

.badge-celebration::backdrop {
  background: rgba(23, 24, 55, 0.52);
  backdrop-filter: blur(3px);
}

.celebration-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #eef0f5;
  color: var(--navy);
  font-size: 1.35rem;
  cursor: pointer;
}

.celebration-badge {
  position: relative;
  z-index: 2;
  display: grid;
  width: 88px;
  height: 88px;
  margin: 0 auto 0.8rem;
  place-items: center;
  border-radius: 26px;
  background: #e8f4ff;
  color: var(--navy);
  box-shadow: 0 10px 28px rgba(23, 24, 91, 0.16);
}

.celebration-badge.tone-green { background: #def5ea; }
.celebration-badge.tone-pink { background: #fde3ec; }
.celebration-badge.tone-gold { background: #fff1c9; }
.celebration-badge.tone-purple { background: #eee6fb; }
.celebration-badge .award-icon { width: 52px; height: 52px; }
.celebration-kicker { margin: 0; color: #717687; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-celebration h2 { margin: 0.25rem 0 0.45rem; color: var(--navy); font-size: clamp(1.65rem, 6vw, 2.2rem); }
.badge-celebration > div > p:not(.celebration-kicker) { margin: 0 auto 1rem; color: #555b6d; }
.celebration-next { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; padding: 0.8rem; border-radius: 18px; background: #f3f4f7; text-align: left; }
.celebration-next small { display: block; margin-top: 0.16rem; color: #696f80; }
.celebration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.celebration-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebration-confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 18px; border-radius: 3px; background: var(--confetti); animation: confetti-fall 2.3s cubic-bezier(.2,.65,.45,1) var(--delay) both; }
.celebration-confetti i:nth-child(3n) { width: 20px; height: 5px; border-radius: 999px; }
.celebration-confetti i:nth-child(4n) { width: 9px; height: 9px; border-radius: 50%; }

@keyframes confetti-fall {
  0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(var(--drift), 500px, 0) rotate(var(--spin)); opacity: 0; }
}

@media (max-width: 430px) {
  .celebration-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-confetti { display: none; }
}

.admin-heading-actions, .admin-jump-links, .analytics-toolbar > div { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.admin-jump-links { margin: 1rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.admin-jump-links a { color: var(--navy); font-weight: 700; }
.admin-analytics { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.admin-section-heading, .analytics-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-section-heading h2, .admin-scope-block h3, .admin-analytics > h3, .analytics-toolbar h3 { margin-bottom: 0.35rem; }
.admin-section-heading p, .admin-insight p { margin-top: 0.25rem; color: #656b7b; }
.analytics-cards, .analytics-conversions { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.analytics-cards span, .analytics-conversions span { align-items: flex-start; text-align: left; }
.analytics-cards small, .analytics-conversions small { color: #656b7b; }
.analytics-cards em { display: block; font-size: 0.76rem; font-style: normal; }
.trend-up { color: #167247 !important; }
.trend-down { color: #b5323d !important; }
.trend-even { color: #656b7b !important; }
.analytics-chart { min-width: 0; }
.analytics-chart > div { display: flex; justify-content: space-between; gap: 1rem; }
.analytics-chart > div span { color: #656b7b; }
.analytics-chart svg { display: block; width: 100%; height: auto; max-height: 280px; margin-top: 0.5rem; }
.analytics-chart line { stroke: #d9dbe3; stroke-width: 1; }
.analytics-chart polyline { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.analytics-chart circle { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.analytics-chart text { fill: #656b7b; font-size: 12px; }
.admin-table-wrap { width: 100%; overflow-x: visible; }
.analytics-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.analytics-table th, .analytics-table td { padding: 0.7rem 0.55rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.analytics-table th:first-child { text-align: left; }
.analytics-table thead th { color: #656b7b; font-size: 0.78rem; }
.admin-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.admin-insight { min-width: 0; }
.admin-insight ol { margin: 0; padding: 0; list-style: none; }
.admin-insight li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.48rem 0; border-bottom: 1px solid var(--border); }
.admin-insight li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-insight > strong { display: block; font-size: 1.8rem; color: var(--navy); }

@media (max-width: 620px) {
  .admin-insights { grid-template-columns: 1fr; }
  .analytics-chart text { font-size: 10px; }
}

/* Compact mobile poll header and sound control */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.sound-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--navy); font-size: 1.05rem; }
.sound-button[aria-pressed="true"] { background: #eef0ff; border-color: #b8bce0; }
.admin-card { box-sizing: border-box; width: min(calc(100vw - 2rem), 1000px); max-width: none; margin-left: 50%; transform: translateX(-50%); }

/* Scheduled poll health and folded list */
.schedule-health { margin: 0.65rem 0; padding: 0.8rem 0.9rem; border-radius: 16px; }
.schedule-health.healthy { border: 1px solid #9bd8ba; background: #e8f7ef; color: #17643d; }
.schedule-health.low { border: 1px solid #efaaaa; background: #fff0f0; color: #9b2525; }
.scheduled-polls-fold > summary { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0; color: var(--navy); font-weight: 750; cursor: pointer; list-style: none; }
.scheduled-polls-fold > summary::-webkit-details-marker { display: none; }
.scheduled-polls-fold .fold-icon::before { content: "+"; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.scheduled-polls-fold[open] .fold-icon::before { content: "−"; }

/* Responsive analytics: no horizontal slider */
.admin-table-wrap { overflow-x: visible; }
@media (max-width: 780px) {
  .analytics-table { min-width: 0; display: block; }
  .analytics-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .analytics-table tbody, .analytics-table tr { display: block; }
  .analytics-table tr { margin: 0 0 0.8rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 16px; }
  .analytics-table th, .analytics-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; border: 0; text-align: right; white-space: normal; }
  .analytics-table th:first-child { margin-bottom: 0.25rem; color: var(--navy); }
  .analytics-table td::before { color: #656b7b; font-weight: 650; }
  .analytics-table td:nth-child(2)::before { content: "Page views"; }
  .analytics-table td:nth-child(3)::before { content: "Unique"; }
  .analytics-table td:nth-child(4)::before { content: "Votes"; }
  .analytics-table td:nth-child(5)::before { content: "Shares"; }
  .analytics-table td:nth-child(6)::before { content: "View → vote"; }
  .analytics-table td:nth-child(7)::before { content: "Vote → share"; }
  .analytics-table td:nth-child(8)::before { content: "View → share"; }
}

@media (max-width: 520px) {
  .site-header { min-height: 60px; padding: 0.45rem 0; gap: 0.35rem; }
  .site-switcher { gap: 0.3rem; }
  .site-pill { min-height: 40px; padding: 0.25rem 0.48rem; font-size: 0.78rem; }
  .site-pill img { width: 23px; height: 23px; }
  .header-actions { gap: 0.3rem; }
  .sound-button, .menu-button { width: 40px; height: 40px; }
  .brand-lockup { display: none; }
  .progress-summary { grid-template-columns: auto minmax(0,1fr) auto; gap: 0.45rem; margin-bottom: 0.55rem; padding: 0.48rem 0.65rem; font-size: 0.76rem; line-height: 1.25; }
  .progress-summary > [aria-hidden="true"] { display: none; }
  .progress-count strong { font-size: 1rem; }
  .next-badge-icon { width: 30px; height: 30px; }
  .next-badge-icon .award-icon { width: 18px; height: 18px; }
  .category-picker { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 0.45rem; margin-bottom: 0.55rem; padding: 0.55rem; }
  .category-picker .select { width: 100%; min-height: 44px; padding-block: 0.55rem; }
  .filter-toggle { justify-content: flex-start; white-space: normal; font-size: 0.73rem; line-height: 1.2; }
  .poll-card { padding: 0.8rem; border-radius: 22px; }
  .poll-card h1, .poll-card h2 { margin-bottom: 0.75rem; font-size: 1.35rem; }
  .poll-category-line { margin-bottom: 0.55rem; font-size: 0.72rem; }
  .poll-category-line small { text-align: right; }
  .answer-list { gap: 0.46rem; }
  .answer { min-height: 48px; padding: 0.62rem 0.8rem; }
  .poll-controls { margin-top: 0.55rem; gap: 0.4rem; }
  .poll-controls .button { min-height: 44px; }
  .create-below { min-height: 44px; margin-top: 0.5rem; }
}