/* ── GLOBAL FONT OVERRIDE ───────────────────────────────────────────────── */
    /* Geist/DM Sans replaces Nunito; DM Serif Display replaces Fredoka        */
    body {
      font-family: 'Geist', 'DM Sans', sans-serif;
    }

    /* ── PAGE HERO ──────────────────────────────────────────────────────────── */
    /* ── DARK MODE ─────────────────────────────────────────────────────────── */
    body.dark .vote-card {
      background: #16161A;
      border-color: rgba(255,255,255,0.06);
    }

    body.dark .vote-card.vote-card-open {
      background: transparent;
      border: none;
      box-shadow: none;
    }

    body.dark .v-input {
      background: transparent;
      border-color: #26262B;
      color: #e8f4ee;
    }

    body.dark .v-input:focus {
      background: transparent;
      border-color: #555560;
    }

    body.dark .reaction-option {
      background: #121214;
      border-color: #26262B;
    }

    body.dark .reaction-option:hover,
    body.dark .reaction-option.selected {
      background: #1E1E22;
      border-color: #555560;
    }

    body.dark .price-tier-row {
      background: #121214;
      border-color: #26262B;
    }

    body.dark .price-tier-row.highlight {
      background: #1E1E22;
      border-color: #555560;
    }

    body.dark .pay-tab {
      background: #1A1A1E;
      color: rgba(255,255,255,0.5);
      border-color: #26262B;
    }

    body.dark .pay-tab.active {
      background: #1E1E22;
      color: #e8f4ee;
      border-color: #555560;
    }

    body.dark .qs-btn {
      background: #16161A;
    }

    body.dark .price-tier-header {
      background: #121214;
    }

    body.dark .success-modal {
      background: #16161A;
    }

    body.dark .test-result-box {
      background: #121214;
      border-color: #26262B;
    }

    /* ── DARK MODE: neutralise all green CSS variables ─────────────────────── */
    body.dark {
      --sun-deep:  #16A34A;
      --sun-light: #2A0A09;
      --mint-deep: #15803D;
      --mint:      #1E100F;
    }
    body.dark .price-display {
      background: transparent;
      box-shadow: none;
      border-bottom-color: rgba(22,163,74,0.35);
      color: #16A34A;
    }
    body.dark .savings-badge {
      background: #2A0A09;
      border-color: rgba(22,163,74,0.35);
      color: #22C55E;
      box-shadow: none;
    }

    /* ── Vote summary divider ─────────────────────────────────────────────── */
    .vote-summary-divider {
      border: none;
      border-top: 2px solid var(--border);
      margin: 12px auto 0;
      max-width: 60%;
    }
    body.dark .vote-slider {
      background: rgba(255,255,255,0.08);
    }
    body.dark .vote-slider::-webkit-slider-thumb {
      background: #16A34A;
      box-shadow: 0 2px 8px rgba(22,163,74,0.4);
    }
    body.dark .vote-slider::-moz-range-thumb {
      background: #16A34A;
      box-shadow: 0 2px 8px rgba(22,163,74,0.4);
    }
    body.dark .test-result-box.ok {
      border-color: rgba(22,163,74,0.3);
      color: #22C55E;
      background: rgba(22,163,74,0.08);
    }

    body.dark .form-success-banner {
      background: rgba(22,163,74,0.08);
      border-color: rgba(22,163,74,0.3);
      color: #22C55E;
    }

    body.dark .form-success-banner .sb-title {
      color: #4ADE80;
    }

    body.dark .form-success-banner .sb-sub {
      color: #22C55E;
    }
    body.dark .pay-btn-main {
      background: #16A34A;
    }

    body.dark .pay-btn-main:hover:not(:disabled) {
      background: #15803D;
      box-shadow: 0 4px 20px rgba(61,139,106,0.35);
    }

    /* ── DARK MODE: vote digit color ─────────────────────────────────────── */
    body.dark .vote-digit {
      color: #e8f4ee;
    }

    body.dark .vote-digit.comma {
      color: #e8f4ee;
    }

    /* ── PAGE ──────────────────────────────────────────────────────────────── */
    .page-wrap {
      margin-left: var(--sidebar-w, 320px);
      flex: 1 0 auto;
      min-height: 0;
      padding-top: 0 !important;
      transition: margin-left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Toasts ── */
    /* Card look and container position are shared from styles.css (bottom-right,
       consistent with every other page); this file only keeps its own entrance
       animation. */
    .toast { animation: toastSlideUp 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); }
    @keyframes toastSlideUp {
      from { transform: translateY(20px) scale(0.9); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }
    .page {
      padding: 24px 20px 24px;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 1024px) {
      .page-wrap { margin-left: 0 !important; }
    }

    .votes-panel {
      background: var(--card-bg);
      border: 2px solid var(--border);
      border-radius: 16px;
      padding: 28px 32px;
      box-shadow: var(--shadow);
      width: 85%;
      max-width: 1400px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    /* ── AGENT BADGE ───────────────────────────────────────────────────────── */
    .agent-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 16px; border-radius: 50px; font-size: 16px;
      font-weight: 800; letter-spacing: 0;
      transition: all 0.3s;
    }
    .agent-badge.online { background: rgba(61,139,106,0.12); color: #16A34A; border: none; }
    .agent-badge.offline { background: rgba(192,97,74,0.12); color: var(--error); border: none; }
    /* --sun-deep is the site's GREEN accent (#16A34A) despite the name — using it
       here left this pill with an amber-tinted background but green text/dot,
       same mismatch as the "Home Tours refresh in progress" banner it sits next
       to. Same amber palette as that banner (#D97706 / #FBBF24 dark) instead. */
    .agent-badge.updating { background: rgba(233,168,37,0.12); color: #D97706; border: none; }
    .agent-badge-dot { width: 7px; height: 7px; border-radius: 50%; transition: background 0.4s; }
    .agent-badge.online .agent-badge-dot { background: #16A34A; box-shadow: none; }
    .agent-badge.offline .agent-badge-dot { background: var(--error); }
    .agent-badge.updating .agent-badge-dot { background: #D97706; animation: pulse 1.5s infinite; }

    body.dark .agent-badge.online { background: rgba(61,139,106,0.12); color: #16A34A; }
    body.dark .agent-badge.offline { background: rgba(192,97,74,0.12); color: var(--error); }
    body.dark .agent-badge.updating { background: rgba(233,168,37,0.15); color: #FBBF24; }
    body.dark .agent-badge.updating .agent-badge-dot { background: #FBBF24; }
    
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }


    /* ── CARDS ──────────────────────────────────────────────────────────────── */
    .vote-card {
      background: transparent;
      border: none;
      border-radius: 16px;
      padding: 0;
      margin-bottom: 32px;
      box-shadow: none;
    }

    /* First card — open/borderless style */
    .vote-card.vote-card-open {
      background: transparent;
      border: none;
      box-shadow: none;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 24px;
    }

    @media(max-width:600px) {
      .page {
        padding: 20px 16px;
        /* Was width:95%. A block element takes its width from the left, so the
           missing 5% became a 19px gap on the RIGHT only — every card, heading
           and input on the page sat 19px closer to the left edge than the
           right. The inset it was reaching for is the 16px padding above; the
           width just has to stop fighting it. */
        width: 100%;
      }
      .vote-card {
        padding: 0;
        margin-bottom: 24px;
      }
      .vote-card.vote-card-open {
        padding-left: 0;
        padding-right: 0;
      }
    }

    .card-title {
      font-family: 'DM Serif Display',serif;
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    .v-input {
      width: 100%;
      padding: 13px 16px;
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 15px;
      color: var(--text);
      background: var(--cream);
      transition: all 0.2s;
      outline: none;
    }

    .v-input:focus {
      border-color: var(--sun-deep);
      background: var(--white);
      box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
    }

    /* ── Vote error/warning — full width below the find character card ───── */
    .vote-error-reveal {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1),
                  opacity 0.35s ease,
                  margin-top 0.35s ease;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      border-radius: var(--radius-sm);
      width: 100%;
    }

    .vote-error-reveal.show {
      max-height: 160px;
      opacity: 1;
      margin-top: 10px;
      background: #FFF0EE;
      border: 2px solid var(--coral);
      color: #B03020;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    body.dark .vote-error-reveal.show {
      background: #2A0A09;
      border-color: rgba(239,68,68,0.35);
      color: #F87171;
    }

    /* keep locked-notice flex layout */
    .vote-error-reveal.locked-notice {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      animation: lockedPulse 2.5s ease-in-out infinite;
    }

    /* This is a routine heads-up ("we're refreshing, hang on"), not an error —
       the shared .show rule above is red because most callers ARE errors, but
       a scheduled refresh in progress isn't one. Overriding to the site's
       standard amber/warning palette (same family as .status-pending
       elsewhere) instead of stacking it on top of .vote-error-reveal.show's
       red, which is what made this read as alarming as an actual failure. */
    .vote-error-reveal.show.locked-notice {
      background: #FEF3C7;
      border-color: #F59E0B;
      color: #92400E;
    }
    body.dark .vote-error-reveal.show.locked-notice {
      background: rgba(245,158,11,.15);
      border-color: rgba(251,191,36,.35);
      color: #FBBF24;
    }

    @keyframes lockedPulse {

      0%,
      100% {
        border-color: #F59E0B;
      }

      50% {
        border-color: #FBBF24;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
      }
    }

    .v-input:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .ign-wrap.store-locked {
      pointer-events: none;
    }

    .form-success-banner {
      background: #E8F7F0;
      border: 2px solid #16A34A;
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #15803D;
      margin-bottom: 14px;
      display: none;
      align-items: center;
      gap: 10px;
    }

    .form-success-banner.show {
      display: flex;
      animation: fadeInUp 0.4s ease;
    }

    .form-success-banner .sb-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    .form-success-banner .sb-text {
      flex: 1;
      line-height: 1.5;
    }

    .form-success-banner .sb-title {
      font-size: 14px;
      font-weight: 800;
      color: #1E5C40;
      margin-bottom: 2px;
    }

    .form-success-banner .sb-sub {
      font-size: 12px;
      font-weight: 600;
      color: #16A34A;
    }

    /* ── IGN LOOKUP STATUS ──────────────────────────────────────────────────── */
    .ign-wrap {
      position: relative;
    }

    .ign-status {
      position: absolute;
      right: 42px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      transition: all 0.2s;
    }

    .ign-clear {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border-radius: 0;
      background: transparent;
      color: #c97a7a;
      border: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      display: none;
      align-items: center;
      justify-content: center;
      transition: color 0.15s, transform 0.15s;
      flex-shrink: 0;
      padding: 0;
    }

    .ign-clear:hover {
      background: transparent;
      color: var(--coral);
      transform: translateY(-50%) scale(1.15);
    }

    .ign-clear.visible {
      display: flex;
    }

    .ign-refresh {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: transparent;
      color: var(--text-muted);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s, background 0.15s;
      flex-shrink: 0;
      padding: 0;
    }

    .ign-refresh:hover {
      color: var(--sun-deep);
      background: transparent;
    }

    .ign-refresh svg {
      transition: transform 0.4s ease;
    }

    .ign-hint {
      font-size: 12px;
      margin-top: 5px;
      font-weight: 700;
      min-height: 18px;
      transition: all 0.2s;
    }

    .ign-hint.found {
      color: var(--mint-deep);
    }

    .ign-hint.error {
      color: var(--coral);
    }

    .ign-hint.searching {
      color: var(--text-muted);
    }

    /* ── REACTIONS ─────────────────────────────────────────────────────────── */
    /* 5 reaction slots — images go at /images/reactions/cute.webp, amaze.png, etc. */
    .reaction-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 16px;
      margin-top: 8px;
      padding: 6px;
      overflow: visible;
      width: 100%;
      box-sizing: border-box;
    }

    .reaction-option {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      max-width: none;
      background: var(--white);
      border: 2.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 10px 0;
      cursor: pointer;
      transition: all 0.18s;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }

    .reaction-option:hover {
      border-color: var(--sun-deep);
      transform: scale(1.06);
      box-shadow: var(--shadow);
    }

    .reaction-option.selected {
      border-color: var(--sun-deep);
      background: var(--sun-light);
      box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
    }

    .reaction-option.selected::after {
      content: '✓';
      position: absolute;
      top: 4px;
      right: 7px;
      font-size: 11px;
      font-weight: 800;
      color: var(--sun-deep);
    }

    .reaction-img {
      width: 100%;
      max-width: 96px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    .reaction-label {
      font-family: 'Geist', 'DM Sans', sans-serif;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-align: center;
      margin-top: 5px;
      line-height: 1.2;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .reaction-option.selected .reaction-label {
      color: var(--sun-deep);
    }

    @media(max-width:600px) {
      .reaction-grid {
        gap: 5px;
      }

      .reaction-option {
        padding: 6px 4px 0;
      }

      .reaction-option.selected::after {
        font-size: 9px;
        top: 3px;
        right: 4px;
      }

      .reaction-img {
        max-width: 52px;
      }

      .reaction-label {
        font-size: 9px;
        margin-top: 3px;
        white-space: normal;
      }

      .reaction-count {
        font-size: 16px;
      }

      .rxn-avail {
        font-size: 8px !important;
        width: calc(100% + 8px) !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
      }
    }

    @media(max-width:360px) {
      .reaction-grid {
        gap: 4px;
      }

      .reaction-option {
        padding: 4px 2px 0;
      }

      .reaction-img {
        max-width: 38px;
      }

      .reaction-label {
        font-size: 8px;
        margin-top: 2px;
      }

      .reaction-count {
        font-size: 13px;
      }

      .rxn-avail {
        font-size: 7px !important;
        width: calc(100% + 4px) !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
      }
    }

    .reaction-count {
      display: block;
      width: 100%;
      text-align: center;
      font-family: 'Inter', 'Geist', sans-serif;
      font-size: 17px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-top: 6px;
      line-height: 1;
      transition: color 0.2s;
      min-height: 22px;
    }

    .reaction-option.selected .reaction-count {
      color: var(--sun-deep);
    }

    .reaction-option {
      flex-direction: column;
      padding-bottom: 0;
    }

    /* ── SLOT MACHINE ANIMATION ─────────────────────────────────────────────── */
    .reaction-count-wrap {
      display: block;
      width: 100%;
      text-align: center;
      height: 22px;
      overflow: hidden;
      position: relative;
      margin-top: 6px;
    }

    .reaction-count {
      display: block;
      width: 100%;
      text-align: center;
      font-family: 'Inter', 'Geist', sans-serif;
      font-size: 17px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-top: 6px;
      line-height: 1;
      transition: color 0.2s;
      min-height: 22px;
    }

    .reaction-option.selected .reaction-count {
      color: var(--sun-deep);
    }

    @keyframes slotSpin {
      0% {
        transform: translateY(-120%);
        opacity: 0;
      }

      60% {
        transform: translateY(12%);
        opacity: 1;
      }

      75% {
        transform: translateY(-5%);
      }

      88% {
        transform: translateY(3%);
      }

      100% {
        transform: translateY(0%);
      }
    }

    .reaction-count.slot-animate {
      animation: slotSpin 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    /* ── VOTE AMOUNT (editorial) ────────────────────────────────────────────── */
    .vote-display {
      text-align: center;
      margin-bottom: 4px;
      padding: 16px 20px 12px;
      background: transparent;
      border: none;
      box-shadow: none;
      position: relative;
    }

    .vote-display::before { display: none; }

    body.dark .vote-display {
      background: transparent;
      border-color: transparent;
    }

    /* jackpot counter */
    .vote-counter-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 0;
    }

    .vote-digit-track {
      display: inline-flex;
      flex-direction: column;
      height: 96px;
      overflow: hidden;
      position: relative;
    }

    .vote-digit-inner {
      display: flex;
      flex-direction: column;
      transition: transform 0s;
      will-change: transform;
    }

    .vote-digit-inner.animating {
      transition: transform 0.55s cubic-bezier(0.22, 0.0, 0.1, 1.0);
    }

    .vote-digit {
      font-family: 'Inter', 'Geist', sans-serif;
      font-size: 84px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      line-height: 96px;
      height: 96px;
      text-align: center;
      min-width: 52px;
      letter-spacing: -4px;
    }

    .vote-digit.comma {
      min-width: 18px;
      color: var(--text);
      opacity: 0.25;
      letter-spacing: 0;
    }

    .vote-count-label {
      font-family: 'Inter', 'Geist', sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-top: 2px;
      margin-bottom: 16px;
    }

    @keyframes digitDragPop {
      0%   { transform: scale(1); }
      35%  { transform: scale(1.04); }
      100% { transform: scale(1); }
    }

    .vote-counter-wrap.drag-pop {
      animation: digitDragPop 0.13s ease-out;
    }

    .vote-price-row {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .price-display {
      font-family: 'Inter', 'Geist', sans-serif;
      font-size: 24px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--sun-deep);
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      transition: opacity 0.15s;
      display: inline-block;
      border-bottom: 2px solid rgba(22,163,74,0.25);
      letter-spacing: -0.03em;
    }

    .price-display.bump {
      animation: priceBump 0.22s ease;
    }

    @keyframes priceBump {
      0%, 100% { transform: scale(1); }
      50%       { transform: scale(1.06); }
    }

    /* savings badge */
    .savings-badge {
      display: none;
      position: static;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: var(--mint);
      border: 1.5px solid var(--mint-deep);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 700;
      color: var(--mint-deep);
      white-space: nowrap;
      margin: 10px auto 0;
      width: fit-content;
    }

    .savings-badge.show {
      display: inline-flex;
      animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes badgePop {
      from { transform: scale(0.6) translateY(4px); opacity: 0; }
      to   { transform: scale(1) translateY(0);     opacity: 1; }
    }

    /* sleek slider */
    .slider-wrap {
      margin: 22px 0 18px;
    }

    .vote-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 50px;
      background: rgba(0,0,0,0.10);
      outline: none;
      cursor: pointer;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .vote-slider::-webkit-slider-container {
      overflow: visible;
    }

    .vote-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--sun-deep);
      border: 3px solid var(--white);
      box-shadow: 0 2px 12px rgba(22,163,74,0.35);
      cursor: grab;
      touch-action: none;
    }

    .vote-slider:active::-webkit-slider-thumb {
      cursor: grabbing;
    }

    .vote-slider::-moz-range-thumb {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--sun-deep);
      border: 3px solid var(--white);
      box-shadow: 0 2px 12px rgba(22,163,74,0.35);
      cursor: grab;
      touch-action: none;
    }

    .slider-labels {
      position: relative;
      height: 18px;
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
    }

    .slider-labels span {
      position: absolute;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .slider-labels span:first-child {
      transform: none;
      left: 0 !important;
    }

    .slider-labels span:last-child {
      transform: none;
      left: auto !important;
      right: 0 !important;
    }

    /* modern quick-select pills */
    .quick-select {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 4px;
    }

    .quick-select.five-col {
      grid-template-columns: repeat(5, 1fr);
    }

    @media(max-width:500px) {
      .quick-select {
        gap: 5px;
      }
    }

    .qs-btn {
      padding: 10px 6px;
      border-radius: 12px;
      border: 1.5px solid var(--border);
      background: transparent;
      font-family: 'Geist', 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      letter-spacing: -0.01em;
    }

    .qs-btn .qs-votes {
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }

    .qs-btn .qs-price {
      display: none;
    }

    .qs-btn:hover:not(:disabled) {
      border-color: var(--sun-deep);
      color: var(--sun-deep);
      background: var(--sun-light);
    }

    .qs-btn.active {
      background: var(--text);
      border-color: var(--text);
      color: var(--white);
    }

    .qs-btn.active .qs-price {
      display: none;
    }

    .qs-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      transform: none !important;
    }

    body.dark .qs-btn {
      background: transparent;
    }

    body.dark .qs-btn.active {
      background: var(--sun-deep);
      border-color: var(--sun-deep);
      color: #fff;
    }

    body.dark .qs-btn:hover:not(:disabled) {
      background: rgba(22,163,74,0.1);
      color: var(--sun-deep);
    }

    /* hidden — table removed */
    .price-tiers {
      display: none;
    }

    .tier-price,
    .tier-pv,
    .tier-save {
      display: none;
    }

    /* ── TEST / EXPERIMENTAL MODEL ──────────────────────────────────────────── */
    .test-card {
      background: linear-gradient(135deg, #f3effe 0%, #ede4fc 100%);
      border: 2px solid #c4a8f0;
      border-radius: var(--radius);
      padding: 20px 22px;
      box-shadow: 0 4px 24px rgba(123, 89, 192, 0.12);
    }

    body.dark .test-card {
      background: linear-gradient(135deg, #1e1530 0%, #180f2a 100%);
      border-color: #6040a0;
    }

    .test-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .test-title {
      font-family: 'DM Serif Display',serif;
      font-size: 20px;
      font-weight: 700;
      color: #6040a0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    body.dark .test-title {
      color: #b090f0;
    }

    .test-badge {
      font-size: 11px;
      font-weight: 800;
      background: #6040a0;
      color: #fff;
      border-radius: 50px;
      padding: 3px 10px;
      letter-spacing: 0.4px;
    }

    .test-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px;
      text-align: center;
    }

    .test-stat {
      background: rgba(255, 255, 255, 0.65);
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      border: 1px solid rgba(123, 89, 192, 0.15);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    body.dark .cooldown-corner {
      background: linear-gradient(135deg, #2a1010, #1a0808);
    }

    body.dark .test-stat {
      background: rgba(255, 255, 255, 0.07);
    }

    .test-stat-val {
      font-family: 'DM Serif Display',serif;
      font-size: 22px;
      font-weight: 700;
      color: #6040a0;
      line-height: 1;
    }

    body.dark .test-stat-val {
      color: #b090f0;
    }

    .test-stat-val.empty {
      color: var(--text-muted);
    }

    .test-stat-val.good {
      color: #7040c0;
    }

    .test-stat-val.warn {
      color: var(--coral);
    }

    .test-stat-val.small {
      font-size: 13px;
      line-height: 1.2;
      padding-top: 4px;
    }

    .test-stat-label {
      font-size: 10px;
      font-weight: 800;
      color: #9070c0;
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    body.dark .test-stat-label {
      color: #8060b0;
    }

    img.reaction-img[alt="whimsical"] {
      object-position: center top;
      transform: scale(0.88) translateY(-4px);
    }

    /* ── PER-REACTION AVAILABILITY BADGE ───────────────────────────────────── */
    .rxn-avail {
      display: block;
      width: calc(100% + 20px);
      margin-left: -10px;
      margin-right: -10px;
      text-align: center;
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.2px;
      line-height: 1;
      margin-top: 8px;
      padding: 5px 4px;
      background: rgba(0,0,0,0.04);
      border-top: 1px solid var(--border);
      transition: color 0.2s, background 0.2s;
      border-radius: 0 0 calc(var(--radius-sm) - 2.5px) calc(var(--radius-sm) - 2.5px);
    }

    body.dark .rxn-avail {
      background: rgba(255,255,255,0.04);
    }

    .reaction-option.selected .rxn-avail {
      background: rgba(22,163,74,0.08);
      border-top-color: rgba(22,163,74,0.2);
      color: var(--sun-deep);
    }

    .rxn-avail.full {
      color: var(--coral) !important;
      background: rgba(22,163,74,0.08) !important;
      border-top-color: rgba(22,163,74,0.15) !important;
    }

    .rxn-avail.low {
      color: #D48806 !important;
      background: rgba(212,136,6,0.08) !important;
      border-top-color: rgba(212,136,6,0.15) !important;
    }

    .rxn-avail.good {
      color: var(--mint-deep) !important;
    }

    body.dark .rxn-avail.good {
      color:var(--text-muted);
    }

    body.dark .rxn-avail.low {
      color: #f0a040;
    }

    .rxn-avail.unavail-week {
      color: var(--text-muted) !important;
      font-style: italic;
      font-size: 9px !important;
    }

    .reaction-option.unavailable-week {
      display: none !important;
    }

    .test-cooldown-bar-wrap {
      height: 9px;
      background: rgba(123, 89, 192, 0.15);
      border-radius: 50px;
      overflow: hidden;
      margin: 4px 0 8px;
    }

    .test-cooldown-bar {
      height: 100%;
      border-radius: 50px;
      background: linear-gradient(90deg, #7040c0, #c084fc);
      transition: width 1s linear;
    }

    .test-reset-label {
      font-size: 11px;
      color: #9070c0;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .test-slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .test-slider-row label {
      font-size: 12px;
      font-weight: 800;
      color: #6040a0;
      white-space: nowrap;
    }

    body.dark .test-slider-row label {
      color: #b090f0;
    }

    .test-count-badge {
      font-family: 'DM Serif Display',serif;
      font-size: 20px;
      font-weight: 700;
      color: #6040a0;
      min-width: 32px;
      text-align: right;
    }

    body.dark .test-count-badge {
      color: #b090f0;
    }

    .test-slider {
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      height: 9px;
      border-radius: 50px;
      background: rgba(123, 89, 192, 0.2);
      outline: none;
      cursor: pointer;
      touch-action: pan-x;
    }

    .test-slider::-webkit-slider-container {
      overflow: visible;
    }

    .test-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #6040a0;
      border: 2px solid var(--white);
      cursor: grab;
      box-shadow: 0 2px 6px rgba(123, 89, 192, 0.4);
      touch-action: pan-x;
    }

    .test-slider:active::-webkit-slider-thumb {
      cursor: grabbing;
    }

    .test-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #6040a0;
      border: 2px solid var(--white);
      cursor: grab;
      touch-action: pan-x;
    }

    .test-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .test-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: 12px;
      background: linear-gradient(135deg, #7040c0, #9060e0);
      color: var(--white);
      border: none;
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 14px rgba(112, 64, 192, 0.35);
    }

    .test-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(112, 64, 192, 0.45);
    }

    .test-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .test-btn-secondary {
      background: transparent;
      color: #6040a0;
      border: 2px solid #c4a8f0;
      box-shadow: none;
    }

    body.dark .test-btn-secondary {
      color: #b090f0;
      border-color: #6040a0;
    }

    /* ── AUTH MODAL ─────────────────────────────────────────────────────────── */
    .modal-overlay.open .auth-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: var(--sun-light);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      color: var(--text);
    }

    .auth-modal-close:hover {
      background: var(--sun);
      transform: rotate(90deg);
    }

    .auth-form-group {
      margin-bottom: 16px;
    }

    .auth-form-label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-soft);
      margin-bottom: 6px;
    }

    .auth-form-input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 15px;
      color: var(--text);
      background: var(--cream);
      transition: all 0.2s;
      outline: none;
    }

    .auth-form-input:focus {
      border-color: var(--sun-deep);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(22,163,74,0.12);
    }

    .auth-form-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .auth-form-divider::before,
    .auth-form-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .auth-form-error {
      background: #FFE4DA;
      border: 2px solid var(--coral);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #C0391B;
      margin-bottom: 14px;
      display: none;
    }

    .auth-form-error.show {
      display: block;
    }

    .auth-guest-notice {
      background: var(--sky);
      border: 2px dashed var(--sky-deep);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--sky-deep);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .auth-google-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 11px 16px;
      border: 2px solid var(--border);
      border-radius: 12px;
      background: var(--white);
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
      justify-content: center;
      margin-bottom: 12px;
      transition: all 0.2s;
    }

    .auth-google-btn:hover {
      border-color: #4285F4;
      background: #f0f6ff;
      transform: translateY(-1px);
    }

    body.dark .auth-form-input {
      background: #121214;
      border-color: #26262B;
      color: #e8f4ee;
    }

    body.dark .auth-form-input:focus {
      background: #1E1E22;
    }

    #testCountInput::-webkit-outer-spin-button,
    #testCountInput::-webkit-inner-spin-button,
    #voteCountDisplay::-webkit-outer-spin-button,
    #voteCountDisplay::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    body.dark #testCountInput {
      color: #b090f0;
      border-color: #6040a0;
    }

    .test-result-box {
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      margin-top: 12px;
      font-size: 13px;
      font-weight: 700;
      display: none;
    }

    .test-result-box.show {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    .test-result-box.ok {
      border: 2px solid var(--mint-deep);
      color: var(--mint-deep);
      background: var(--mint);
    }

    .test-result-box.fail {
      border: 2px solid var(--coral);
      color: var(--coral);
      background: var(--coral-light);
    }

    /* ── PAYMENT ─────────────────────────────────────────────────────────────── */
    .pay-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 18px;
    }

    .pay-tab {
      flex: 1;
      padding: 11px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      background: var(--white);
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .pay-tab:hover {
      border-color: var(--sun-deep);
      color: var(--sun-deep);
    }

    .pay-tab.active {
      border-color: var(--sun-deep);
      background: var(--sun-light);
      color: var(--sun-deep);
    }

    .pay-section {
      display: none;
    }

    .pay-section.active {
      display: block;
      animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .co-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media(max-width:480px) {
      .co-row-2 {
        grid-template-columns: 1fr;
      }
    }

    .pay-btn-main {
      width: 100%;
      padding: 16px;
      font-size: 16px;
      font-weight: 800;
      border-radius: 12px;
      background: #16A34A;
      color: var(--white);
      border: none;
      cursor: pointer;
      font-family: 'Geist','DM Sans',sans-serif;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 8px;
    }

    .pay-btn-main:hover:not(:disabled) {
      background: #15803D;
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(61,139,106,0.3);
    }

    .pay-btn-main:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* ── SUCCESS ─────────────────────────────────────────────────────────────── */
    .success-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .success-overlay.show {
      display: flex;
      animation: fadeIn 0.3s ease;
    }

    .success-modal {
      background: var(--white);
      border-radius: 16px;
      padding: 36px;
      max-width: 440px;
      width: 100%;
      text-align: center;
      border: 3px solid var(--sun);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    }

    .success-icon {
      font-size: 64px;
      margin-bottom: 14px;
    }

    .success-title {
      font-family: 'DM Serif Display',serif;
      font-size: 26px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

    .success-sub {
      font-size: 14px;
      color: var(--text-soft);
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .success-detail {
      background: var(--sun-light);
      border: 2px solid var(--sun);
      border-radius: var(--radius-sm);
      padding: 14px;
      margin-bottom: 20px;
      text-align: left;
    }

    .success-detail-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: var(--text-soft);
      padding: 3px 0;
    }

    .success-detail-row strong {
      color: var(--text);
    }

    /* ── TOAST ───────────────────────────────────────────────────────────────── */
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(100%);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .free-slider::-webkit-slider-thumb {
      background: #7040c0 !important;
      box-shadow: 0 2px 12px rgba(112, 64, 192, 0.45) !important;
    }

    .free-slider::-moz-range-thumb {
      background: #7040c0 !important;
    }

    .qs-btn.free-qs:hover:not(:disabled) {
      border-color: #7040c0;
      background: #f3effe;
      color: var(--text);
    }

    .qs-btn.free-qs.active {
      background: #7040c0;
      border-color: #7040c0;
      color: var(--white);
      box-shadow: 0 4px 16px rgba(112, 64, 192, 0.35);
    }

    /* ── TAB: no-jump fade for Experimental tab ───────────────────────────── */
    @keyframes fadeInTab {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    #voteTabCard {
      min-height: 420px;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* ── UNDERLINE IGN INPUT ───────────────────────────────────────────────── */
    .ign-underline-wrap {
      padding: 8px 0 0;
      text-align: center;
    }

    .ign-underline-label {
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
      transition: color 0.3s;
      text-align: center;
    }

    .ign-underline-label.found {
      color: #16A34A;
    }

    body.dark .ign-underline-label.found {
      color: #22C55E;
    }

    .ign-underline-input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-family: 'Inter', 'Geist', sans-serif;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--text);
      padding: 0 0 10px 0;
      text-align: center;
      box-shadow: none !important;
      caret-color: var(--sun-deep);
      transition: color 0.3s;
    }

    .ign-underline-input.found {
      color: #15803D;
    }

    body.dark .ign-underline-input.found {
      color: #22C55E;
    }

    .ign-underline-input::placeholder {
      color: var(--border);
      font-weight: 400;
    }
    @media (max-width: 500px) {
      .ign-underline-input { font-size: 22px; }
    }

    .ign-underline-bar {
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      position: relative;
      overflow: visible;
    }

    .ign-underline-bar::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 2px;
      width: 0%;
      border-radius: 2px;
      background: var(--sun-deep);
      transition: width 0.35s cubic-bezier(0.4,0,0.2,1), background 0.3s;
    }

    .ign-underline-bar.active::after {
      width: 100%;
    }

    .ign-underline-bar.found::after {
      background: #16A34A;
      width: 100%;
    }

    .ign-underline-bar.error::after {
      background: var(--coral);
      width: 100%;
    }

    body.dark .ign-underline-bar::after { background: var(--sun-deep); }
    body.dark .ign-underline-bar.found::after { background: #22C55E; }
    body.dark .ign-underline-bar.error::after { background: var(--coral); }

    /* ── Custom amount underline: matches input text color, not coral ────── */
    #voteCountBar::after,
    #voteCountBar.active::after {
      background: var(--text) !important;
    }
    body.dark #voteCountBar::after,
    body.dark #voteCountBar.active::after {
      background: #e8f4ee !important;
    }
    body.dark .ign-underline-input {
      background: transparent;
      color: #e8f4ee;
      -webkit-text-fill-color: #e8f4ee;
    }
    body.dark .ign-underline-input::placeholder {
      color: rgba(255,255,255,0.2);
      -webkit-text-fill-color: rgba(255,255,255,0.2);
    }
    body.dark .ign-underline-wrap,
    body.dark .ign-underline-wrap > div {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    body.dark input[type="text"].ign-underline-input,
    body.dark input[type="number"].ign-underline-input {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    body.dark .ign-underline-input:-webkit-autofill,
    body.dark .ign-underline-input:-webkit-autofill:hover,
    body.dark .ign-underline-input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      transition: background-color 5000s ease-in-out 0s;
    }

    .ign-underline-icon {
      display: none; /* icon replaced by dot in found row */
    }

    /* Found / hint row */
    .ign-found-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 22px;
      margin-top: 8px;
    }

    .ign-found-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      background: transparent;
      transition: background 0.3s, transform 0.3s;
    }

    .ign-found-dot.found {
      background: #16A34A;
      transform: scale(1.15);
    }

    .ign-found-dot.error {
      background: var(--coral);
    }

    .ign-found-dot.searching {
      background: var(--text-muted);
      animation: dotPulse 1s ease-in-out infinite;
    }

    @keyframes dotPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* override old hint styles so they sit inside the new row */
    #ignHint.ign-hint {
      font-size: 13px;
      font-weight: 700;
      min-height: unset;
      margin-top: 0;
    }

    #ignHint.ign-hint.found { color: #15803D; }
    body.dark #ignHint.ign-hint.found { color: #22C55E; }

    /* ── BOTTOM REVEAL — token banner + vote card + cart ──────────────────── */
    /* max-height is NOT animated here — it used to grow 0 -> 2000px, and since
       the sidebar column is stretch-aligned to match this column's live
       height (see .votes-container), the sidebar actions visually slid down
       along with
       it. Snapping the height instantly and only fading opacity keeps those
       buttons anchored at the bottom from the first frame. */
    .bottom-reveal-hidden {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: opacity 0.5s ease 0.15s;
      pointer-events: none;
    }

    .bottom-reveal-hidden.revealed {
      max-height: none;
      opacity: 1;
      pointer-events: auto;
      overflow: visible;
      transition: opacity 0.5s ease 0.1s;
    }

    /* ── REACTION SECTION — animated reveal ────────────────────────────────── */
    /* Same reasoning as .bottom-reveal-hidden above — no animated max-height. */
    .reaction-section-hidden {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      transition: opacity 0.4s ease;
    }

    .reaction-section-hidden.revealed {
      max-height: none;
      opacity: 1;
      margin-top: 16px;
      overflow: visible;
    }

    .reaction-section-label {
      font-family: 'Geist','DM Sans',sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 14px;
      text-align: center;
    }

    /* Staggered pop-in for each reaction card */
    .reaction-option {
      opacity: 0;
      transform: translateY(14px) scale(0.94);
      transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                  border-color 0.18s, background 0.18s, box-shadow 0.18s;
    }

    .reaction-option.pop-in {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* keep hover/selected states working after pop-in */
    .reaction-option.pop-in:hover {
      transform: translateY(-2px) scale(1.06);
    }

    .reaction-option.pop-in.selected {
      transform: translateY(-2px) scale(1.06);
    }

    /* Footer styles are in footer.js */

    @media(max-width:500px) {
      .vote-tab-bar {
        margin-left: -16px !important;
        margin-right: -16px !important;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
      }

      #tabBtnPurchase {
        font-size: 12px !important;
        gap: 4px !important;
        padding: 11px 6px !important;
      }

      #tabBtnExperiment {
        font-size: 12px !important;
        gap: 4px !important;
        padding: 11px 6px !important;
      }

      .free-badge {
        display: none !important;
      }
    }

    /* ── IGN-gated: gray out vote panel until IGN resolved ──────────────── */
    .vote-panel-locked {
      position: relative;
      pointer-events: none;
    }

    .vote-panel-locked::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(247, 243, 238, 0.72);
      border-radius: var(--radius);
      z-index: 10;
      backdrop-filter: grayscale(0.4);
    }

    body.dark .vote-panel-locked::after {
      background: rgba(14, 14, 16, 0.72);
    }

    /* Clip the overlay to the card's own rounded corners */
    #voteTabCard.vote-panel-locked {
      overflow: hidden;
    }

    /* Visibility itself is handled by .bottom-reveal-hidden/.revealed (same
       classes as Choose Amount / Vote Options / Current Ticket Usage) — see
       revealReactions() in votes.js. .sidebar-locked no longer controls
       show/hide, kept only in case other locked-state styling is added. */

    .reaction-grid.reactions-locked .reaction-option {
      opacity: 0.45;
      cursor: not-allowed !important;
      pointer-events: none;
    }

    /* ── IGN empty pulse ─────────────────────────────────────────────────────── */
    @keyframes ignPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0px rgba(22,163,74,0);
        border-color: var(--sun-deep);
      }

      50% {
        box-shadow: 0 0 0 6px rgba(22,163,74,0.18);
        border-color: #22C55E;
      }
    }

    #voteIGN.ign-pulse {
      border-color: var(--sun-deep);
      animation: ignPulse 2s ease-in-out infinite;
    }

    /* ── Breadcrumbs ── */
    .breadcrumb {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px 16px 24px;
      font-size: 14px;
      font-weight: 600;
      color: #888;
    }

    .breadcrumb a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s;
    }

    .breadcrumb a:hover {
      color: #1a1a1a;
    }

    .breadcrumb .active {
      color: #1a1a1a;
    }

    /* ── REDESIGN WORKSPACE OVERRIDES ───────────────────────────────────────── */
    body {
      background: var(--bg) !important;
      font-family: 'Inter', 'Geist', sans-serif !important;
    }

    /* Column layout */
    .votes-panel {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      width: 85% !important;
      max-width: 1400px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .votes-container {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 24px;
      /* stretch (not start) so the sidebar column matches the left column's
         height — the summary card then runs down to the ticket usage panel */
      align-items: stretch;
      margin-top: 10px;
    }

    /* sidebar column stretches full height so summary card can fill down */
    .votes-sidebar-column {
      display: flex;
      flex-direction: column;
    }

    /* ── Ticket Usage hero card ─────────────────────────────────────────── */
    .ticket-hero-card {
      position: relative;
      overflow: hidden;
      padding: 22px 28px 18px;
      color: #fff;
      isolation: isolate;
    }
    .ticket-hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center 35%;
      transform: scale(1.02);
      z-index: 0;
    }
    .ticket-hero-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(20, 6, 20, 0.78) 0%, rgba(28, 8, 28, 0.72) 45%, rgba(15, 4, 18, 0.92) 100%);
      z-index: 1;
    }
    .ticket-hero-top {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 4px;
    }
    .ticket-hero-bottom {
      position: relative;
      z-index: 2;
    }
    .ticket-hero-title {
      font-family: 'Inter','Geist',sans-serif;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 5px;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.35);
    }
    .ticket-hero-sub {
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.5;
      color: rgba(255,255,255,0.82);
      margin: 0 0 8px;
      max-width: 460px;
    }
    .ticket-hero-features {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 36px;
    }
    .ticket-hero-feature {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 240px;
    }
    .ticket-hero-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(251, 113, 133, 0.18);
      color: #FB7185;
      border: 1px solid rgba(251, 113, 133, 0.35);
    }
    .ticket-hero-icon svg { width: 15px; height: 15px; }
    .ticket-hero-feature-title {
      font-size: 13px;
      font-weight: 800;
      color: #FB7185;
      margin-bottom: 2px;
    }
    .ticket-hero-feature-sub {
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
      color: rgba(255,255,255,0.78);
    }
    .ticket-hero-usage-label {
      color: #fff;
    }
    .ticket-hero-bottom .progress-card-header {
      margin-bottom: 18px;
    }
    /* Scoped to the badge itself (not .ticket-hero-bottom) — the button
       actually lives in .ticket-hero-top's badge pill, up in the header. */
    .ticket-hero-badge .capacity-help-btn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(251, 113, 133, 0.16);
      border: 1.5px solid rgba(251, 113, 133, 0.4);
      color: #FB7185;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
      padding: 0;
      transition: all 0.18s ease;
    }
    .ticket-hero-badge .capacity-help-btn:hover {
      background: rgba(251, 113, 133, 0.3);
      border-color: #FB7185;
      color: #fff;
      transform: scale(1.1);
    }
    .ticket-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(251, 113, 133, 0.16);
      border: 1px solid rgba(251, 113, 133, 0.35);
      border-radius: 50px;
      padding: 5px 10px 5px 8px;
      position: relative;
    }
    .ticket-hero-badge-icon {
      display: block;
      height: 18px;
      width: auto;
      object-fit: contain;
    }
    .ticket-hero-bottom .progress-bar-container {
      /* Weighted toward the top so the track+ticks sit low in the panel,
         anchored near the bottom edge instead of floating mid-height. */
      padding: 34px 0 2px 0;
    }
    .ticket-hero-bottom .progress-tooltip-tag {
      /* Shifted down to match the track's new lower position (padding-top
         above went from 20px to 34px) — keeps the pill's arrow sitting
         just above the bar instead of drifting away from it. */
      top: -2px;
    }
    .ticket-hero-bottom .progress-bar-track {
      background: rgba(255,255,255,0.16);
    }
    .ticket-hero-bottom .progress-bar-fill.used {
      background: repeating-linear-gradient(
        -45deg,
        rgba(170, 45, 65, 0.88),
        rgba(170, 45, 65, 0.88) 8px,
        rgba(217, 70, 90, 0.88) 8px,
        rgba(217, 70, 90, 0.88) 16px
      );
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }
    .ticket-hero-bottom .progress-bar-fill.selected {
      background: #FB7185;
    }
    .ticket-hero-bottom .progress-ticks span {
      color: rgba(255,255,255,0.55);
    }
    @media (max-width: 640px) {
      .ticket-hero-card { padding: 20px 20px 16px; }
      .ticket-hero-title { font-size: 21px; }
      .ticket-hero-features { gap: 12px 20px; }
    }

    /* Ticket usage sits on its own row spanning both columns. */
    .ticket-usage-row {
      grid-column: 1 / -1;
      /* .votes-container's grid `gap` adds its own 24px row-gap above this
         row on top of the last card's own margin-bottom:24px (.votes-card),
         doubling the visual gap to 48px versus the plain 24px between cards
         stacked in normal flow further up the column. Pull it back up by
         exactly the row-gap so the spacing matches everywhere else. */
      margin-top: -24px;
    }

    @media (max-width: 1024px) {
      .votes-container {
        grid-template-columns: 1fr;
      }
      .votes-panel {
        width: 100% !important;
        padding: 0 16px !important;
      }
    }


    /* Elegant Card design */
    .votes-card {
      background: var(--card-bg, #ffffff);
      border: 1.5px solid var(--border, #E2E8F0);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
      margin-bottom: 24px;
      position: relative;
      transition: all 0.25s ease;
    }
    body.dark .votes-card {
      background: #16161A;
      border-color: rgba(255, 255, 255, 0.06);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    }

    /* Custom plot banner image — admin-set, covers the resolvedCharacterCard
       itself as a full-bleed background (never adds height — the card's size
       stays driven entirely by its content, same as when there's no image). */
    #resolvedCharacterCard,
    #characterSearchCard {
      min-height: 200px;
      box-sizing: border-box;
      padding: 24px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    #characterSearchCard {
      justify-content: center;
    }
    #resolvedCharacterCard { isolation: isolate; }
    .vote-banner-wrap {
      position: absolute; inset: 0; z-index: 0;
      /* The wrap covers the padding box, which is inset by the card's 1.5px
         border — matching the card's 16px radius would leave the image poking
         out past the corner arc, so subtract the border width. */
      border-radius: calc(16px - 1.5px);
      overflow: hidden;
      /* Own compositing layer: without it the transformed <img> child can paint
         over the rounded corners in Chrome/Safari. */
      transform: translateZ(0);
      opacity: 0;
      transition: opacity .45s ease;
    }
    .vote-banner-wrap.show { opacity: 1; }
    .vote-banner-img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      /* Y is overwritten inline from the saved framing slider. */
      object-position: 50% 50%;
      transform: scale(1.0);
      transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Framing slider in the admin banner editor */
    .vote-banner-pos-row {
      margin: 14px 0 4px;
      text-align: left;
    }
    .vote-banner-pos-row label {
      display: block;
      font-size: 12px; font-weight: 800;
      color: var(--text-soft);
      letter-spacing: .05em; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .vote-banner-pos-control {
      display: flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 700; color: var(--text-muted);
    }
    .vote-banner-pos-control input[type="range"] {
      flex: 1; min-width: 0; accent-color: #E11D48; cursor: pointer;
    }
    .vote-banner-wrap.show .vote-banner-img {
      transform: scale(1.0) translate3d(var(--bgx, 0px), var(--bgy, 0px), 0);
    }
    /* Track the cursor live while the pointer is inside; ease back out on leave. */
    .vote-banner-img.parallax-active { transition: transform .12s linear; }
    @media (prefers-reduced-motion: reduce) {
      .vote-banner-wrap.show .vote-banner-img,
      .vote-banner-img.parallax-active { transform: none; }
    }
    /* Scrim so the text stays legible over any photo — fades in with the same
       opacity transition as the image itself. Dark on both sides (where the
       character name / vote count sit), clear through the middle so the photo
       itself actually reads. Same treatment in light and dark mode — a light
       scrim here was washing the photo out to near-invisibility instead of
       just dimming it, which is the opposite of legible. */
    .vote-banner-scrim {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.68) 100%);
    }
    body.dark .vote-banner-scrim {
      background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.32) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.74) 100%);
    }
    .vote-banner-edit-btn {
      position: absolute; top: 14px; right: 14px; z-index: 6;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 13px; border-radius: 12px; border: none;
      background: rgba(0,0,0,.55); color: #fff;
      font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
      backdrop-filter: blur(4px); transition: background .15s, transform .1s;
    }
    .vote-banner-edit-btn:hover { background: rgba(0,0,0,.75); }
    .vote-banner-edit-btn:active { transform: scale(.95); }
    /* Everything else in the card must sit above the background/scrim layers. */
    .plot-header-row, .resolved-card-content { position: relative; z-index: 1; }
    /* Hides the resolved card's text until the banner decision AND the vote
       numbers (price/savings) are both ready, so it never paints a $0.00 or
       no-banner placeholder frame first. No transition on purpose: nothing
       here moves position or size (everything is pinned via absolute/
       min-height already) — only visibility toggles, so there is nothing to
       animate and nothing that can visibly jump. */
    #resolvedCharacterCard.card-settling .plot-header-row,
    #resolvedCharacterCard.card-settling .resolved-card-content {
      opacity: 0;
    }

    /* Text sitting on top of a banner photo can't use the theme's normal
       var(--text)/var(--text-muted) colors — in light mode those are dark
       and read as nearly invisible against the scrim. Force everything to
       white here, in both light and dark mode, once a banner is showing
       (toggled by _revealVoteBanner/_clearVoteBanner in votes.js). */
    #resolvedCharacterCard.has-banner .plot-name-header,
    #resolvedCharacterCard.has-banner .char-name,
    #resolvedCharacterCard.has-banner .char-status-id-row,
    #resolvedCharacterCard.has-banner .char-id-text,
    #resolvedCharacterCard.has-banner .refresh-char-btn,
    #resolvedCharacterCard.has-banner .selected-votes-label,
    #resolvedCharacterCard.has-banner .total-cost-label,
    #resolvedCharacterCard.has-banner .vote-count-top-right .vote-counter-wrap::after {
      color: #fff !important;
    }
    #resolvedCharacterCard.has-banner .refresh-char-btn:hover {
      color: #fff !important;
    }

    /* Banner edit modal */
    .vote-banner-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 20px;
    }
    .vote-banner-modal-overlay.open { display: flex; }
    .vote-banner-modal {
      background: var(--card-bg, #fff); border-radius: 16px; padding: 22px;
      width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
    }
    .vote-banner-modal-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
    .vote-banner-modal-preview {
      width: 100%; height: 130px; border-radius: 16px; margin-bottom: 16px;
      background-color: var(--bg, #F7F5F0); background-size: cover; background-position: center;
      border: 1.5px dashed var(--border, #E2E8F0);
    }
    .vote-banner-modal-btns { display: flex; flex-direction: column; gap: 8px; }
    .vote-banner-modal-btn {
      padding: 11px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 700;
      cursor: pointer; font-family: inherit; text-align: center; border: none;
    }
    .vote-banner-modal-btn.primary { background: var(--purple, #7C3AED); color: #fff; }
    .vote-banner-modal-btn.danger { background: rgba(239,68,68,.1); color: #ef4444; }
    .vote-banner-modal-btn.ghost { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border, #E2E8F0); }

    /* Peeking Fox Decor */
    .peeking-fox-decor {
      position: absolute;
      top: -51px;
      right: 50px;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    .peeking-fox-decor img {
      width: 84px;
      height: auto;
    }

    /* Resolved character card layout */
    .resolved-card-content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      position: relative;
      z-index: 2;
      margin-top: 16px;
    }

    .char-profile-section {
      position: relative;
      flex: 1 1 0%;
      min-width: 0;
      display: flex;
      align-items: flex-end;
      gap: 14px;
    }
    .char-details {
      display: flex;
      flex-direction: column;
      gap: 9px;
      min-width: 0;
      flex: 1 1 auto;
    }
    /* Top row: plot name (left) + vote count (right) share one baseline. */
    .plot-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }
    .plot-name-header {
      font-family: 'Geist', 'DM Sans', sans-serif;
      font-size: 30px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-top: 6px;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      min-width: 0;
      flex: 1 1 auto;
      display: none;
    }
    .vote-count-top-right {
      flex-shrink: 0;
      text-align: right;
      margin-top: 6px;
    }
    body.dark .plot-name-header {
      color: #e8f4ee;
    }
    .char-name {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .char-status-id-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      min-width: 0;
    }
    .char-id-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    .char-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #16A34A;
    }
    .change-char-btn, .refresh-char-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 13px;
      border-radius: 12px;
      border: 1.5px solid var(--border);
      background: var(--cream);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
    }
    .change-char-btn {
      color: var(--text-soft);
    }
    .change-char-btn:hover {
      border-color: var(--text);
      color: var(--text);
    }
    .refresh-char-btn {
      color: var(--text-soft);
    }
    .refresh-char-btn:hover {
      border-color: var(--text);
      color: var(--text);
    }
    /* Buttons sitting on a banner photo get a translucent dark chip instead
       of the plain-card cream fill so they stay legible over any image. */
    #resolvedCharacterCard.has-banner .change-char-btn,
    #resolvedCharacterCard.has-banner .refresh-char-btn {
      background: rgba(0,0,0,.35);
      border-color: rgba(255,255,255,.3);
      color: #fff;
    }
    #resolvedCharacterCard.has-banner .change-char-btn:hover,
    #resolvedCharacterCard.has-banner .refresh-char-btn:hover {
      background: rgba(0,0,0,.5);
      border-color: #fff;
    }

    .char-cost-section {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      text-align: right;
      flex-shrink: 0;
      align-self: flex-end;
      margin-left: auto;
    }
    /* Clean number display — replaces broken jackpot scroll in card */
    .vote-count-top-right .vote-counter-wrap {
      display: block !important;
      height: auto !important;
      overflow: visible !important;
    }
    .vote-count-top-right .vote-digit-track { display: none !important; }
    .vote-count-top-right .vote-digit.comma { display: none !important; }
    .vote-count-top-right .vote-counter-wrap::after {
      content: attr(data-value);
      font-family: 'Geist', 'Inter', sans-serif;
      font-size: 40px;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1;
      display: block;
      text-align: right;
    }
    .selected-votes-label {
      font-size: 12.5px;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
    }
    .divider-horiz {
      width: 100%;
      height: 1.5px;
      background: transparent;
      margin: 12px 0;
    }
    .total-cost-label {
      font-size: 12.5px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
      margin-top: 2px;
    }
    .total-cost-val {
      font-size: 27px;
      font-weight: 800;
      color: #16A34A;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .save-badge-pill {
      display: none;
      align-items: center;
      background: rgba(52, 211, 153, 0.12);
      border: 1.5px solid rgba(52, 211, 153, 0.3);
      color: #4ADE80;
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 800;
      margin-top: 14px;
    }
    .save-badge-pill.show {
      display: inline-flex;
    }

    /* Mobile reads as one centred vertical sequence: identity, actions, votes
       and total. The savings badge alone sits against the lower-right edge. */
    @media (max-width: 640px) {
      /* The plot name, character name/status/actions, vote count and total
         price live in separate wrapper divs on desktop (plot-header-row vs
         resolved-card-content vs char-profile-section vs char-cost-section)
         so they can sit side by side. On mobile the ask is a different
         grouping, which crosses those wrapper boundaries. Flatten them so one
         grid on #resolvedCharacterCard can place every mobile item directly. */
      #resolvedCharacterCard {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "plotname"
          "charname"
          "found"
          "actions"
          "votes"
          "price"
          "total"
          "save";
        grid-template-rows: repeat(8, auto);
        gap: 4px;
        min-height: 300px;
      }
      .plot-header-row,
      .resolved-card-content,
      .char-profile-section,
      .char-details,
      .char-cost-section {
        display: contents;
      }
      /* display: contents removes the wrappers' positioned stacking boxes.
         Recreate that foreground layer on the actual mobile grid items so the
         absolutely-positioned banner (z-index: 0) cannot paint over them. */
      .plot-name-header,
      .vote-count-top-right,
      .char-name,
      .char-status-id-row,
      .char-actions-row,
      .total-cost-label,
      .total-cost-val,
      .save-badge-pill {
        position: relative;
        z-index: 1;
      }
      .plot-name-header {
        grid-area: plotname;
        text-align: center;
        white-space: normal;
        font-size: 22px;
      }
      .char-name {
        grid-area: charname;
        text-align: center;
        white-space: normal;
        margin-top: 15px;
      }
      .char-status-id-row {
        grid-area: found;
        justify-content: center;
      }
      .char-actions-row {
        grid-area: actions;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 9px;
      }
      .vote-count-top-right {
        grid-area: votes;
        align-self: center;
        justify-self: center;
        text-align: center;
        margin-top: 22px;
        padding: 0;
      }
      .vote-count-top-right .vote-counter-wrap::after {
        text-align: center;
        font-size: 36px;
      }
      .total-cost-label {
        grid-area: total;
        justify-self: center;
        text-align: center;
        margin-top: 0;
        padding: 0;
      }
      .total-cost-val {
        grid-area: price;
        justify-self: center;
        text-align: center;
        font-size: 22px;
        margin-top: 5px;
      }
      .save-badge-pill {
        grid-area: save;
        justify-self: end;
        margin: 10px 0 0;
      }
      /* The scrim gradient runs left-to-right, which is right for the wide
         two-column layout: the dark ends sit under the text and the clear middle
         band shows the banner off. Stacked into one narrow column the content
         crosses that transparent band instead, which is why the vote count and
         the total sat on unmuted sky and washed out. Mobile gets an even
         top-to-bottom wash, dark enough for white text anywhere on the card. */
      #resolvedCharacterCard.has-banner .vote-banner-scrim,
      body.dark #resolvedCharacterCard.has-banner .vote-banner-scrim {
        background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.64) 55%, rgba(0,0,0,.76) 100%);
      }
    }

    /* Choose amount grid */
    .card-title-small {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.01em;
      margin-bottom: 16px;
    }
    .amount-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }
    @media (max-width: 600px) {
      .amount-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .amt-btn {
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 14px 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    /* Branded vote ticket sitting above the amount — decorative, the number
       below stays the scannable label. */
    .amt-ticket {
      width: 100%;
      max-width: 68px;
      height: auto;
      display: block;
      margin-bottom: 11px;
      pointer-events: none;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .amt-btn:hover:not(:disabled) .amt-ticket {
      transform: rotate(-3deg) scale(1.03);
    }
    .amt-btn.active .amt-ticket {
      transform: rotate(-3deg) scale(1.06);
    }
    .amt-most-popular {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #F2726F;
      color: #fff;
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 3px 9px;
      border-radius: 50px;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
      pointer-events: none;
    }
    .amt-btn:disabled .amt-ticket {
      filter: grayscale(0.9);
      transform: none;
    }
    /* Selected / hover states use the ticket coral so the chip matches the art.
       Scoped by #qsButtons to outrank the older .qs-btn pill rules above, which
       still tint these same buttons green on hover. */
    #qsButtons .amt-btn:hover:not(:disabled) {
      border-color: #F2726F;
      background: rgba(242, 114, 111, 0.07);
      color: inherit;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    #qsButtons .amt-btn.active {
      border-color: #F2726F;
      background: #FFF1F0;
      box-shadow: 0 0 0 1px #F2726F;
    }
    body.dark #qsButtons .amt-btn:hover:not(:disabled) {
      background: rgba(242, 114, 111, 0.12);
      border-color: #F2726F;
      color: inherit;
    }
    body.dark #qsButtons .amt-btn.active {
      background: #2A1210;
      border-color: #F2726F;
      box-shadow: 0 0 0 1px #F2726F;
    }
    .amt-num {
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    .amt-price {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
    }
    #qsButtons .amt-btn.active .amt-price {
      color: #C0392B;
    }
    body.dark #qsButtons .amt-btn.active .amt-price {
      color: #FCA5A1;
    }
    .amt-check-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #F2726F;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* SVG rather than a "✓" glyph — the glyph's baseline metrics push it low
       in the circle no matter how the box is centred. */
    .amt-check-badge svg { display: block; }

    /* Progress bar card */
    .progress-card-header {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 29px;
    }
    .progress-capacity-info {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .capacity-val {
      font-size: 13px;
      font-weight: 800;
      color: #DC2626;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    body.dark .capacity-val {
      color: #EF4444;
    }
    .capacity-help-btn, .token-help-btn {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--cream);
      font-family: inherit;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      padding: 0;
      position: relative;
    }
    /* A 16px circle is a fine visual affordance next to a line of text and an
       impossible one to hit with a thumb. The hit area is grown with a
       pseudo-element rather than by growing the button, so the badge row it
       sits in keeps its current layout exactly. */
    .capacity-help-btn::after, .token-help-btn::after {
      content: '';
      position: absolute;
      inset: -12px;
    }
    .capacity-help-btn:hover, .token-help-btn:hover {
      border-color: #16A34A;
      color: #16A34A;
    }

    .progress-bar-container {
      position: relative;
      padding: 24px 0 20px 0;
    }
    .progress-bar-track {
      height: 12px;
      background: var(--border, #E2E8F0);
      border-radius: 6px;
      position: relative;
      overflow: hidden; /* clips fills into a pill shape regardless of their own width */
    }
    body.dark .progress-bar-track {
      background: #26262B;
    }
    .progress-bar-fill {
      height: 100%;
      border-radius: 6px;
      position: absolute;
      top: 0;
      left: 0;
      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .progress-bar-fill.used {
      background: repeating-linear-gradient(
        -45deg,
        rgba(170, 45, 65, 0.88),
        rgba(170, 45, 65, 0.88) 8px,
        rgba(217, 70, 90, 0.88) 8px,
        rgba(217, 70, 90, 0.88) 16px
      );
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      z-index: 1;
      border-radius: 6px 0 0 6px;
    }
    .progress-bar-fill.selected {
      background: #FB7185;
      z-index: 2;
      border-radius: 0 6px 6px 0;
    }
    body.dark .progress-bar-fill.selected {
      background: #FB7185;
    }

    /* ── Ticket pill bubble — solid color, no icon ─────────────────────────── */
    .progress-tooltip-tag {
      position: absolute;
      top: -16px;
      transform: translateX(-50%);
      background: #FB7185;
      color: white;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
      box-shadow: 0 2px 6px rgba(251, 113, 133, 0.3);
    }
    body.dark .progress-tooltip-tag {
      color: #000;
    }
    .progress-tooltip-tag::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #FB7185 transparent;
      display: block;
      width: 0;
    }

    .progress-ticks {
      position: relative;
      width: 100%;
      height: 20px;
      margin-top: 12px;
    }
    .progress-ticks span {
      position: absolute;
      transform: translateX(-50%);
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* Vote Options Grid */
    .reaction-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
      gap: 16px !important;
    }
    .reaction-option {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      background: var(--card-bg) !important;
      border: 1.5px solid var(--border) !important;
      border-radius: 12px !important;
      padding: 20px 12px 14px 12px !important;
      cursor: pointer !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative !important;
      text-align: center !important;
      box-shadow: none !important;
      transform: none !important;
    }
    .reaction-option:hover {
      border-color: #16A34A !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }
    .reaction-option.selected {
      border-color: #16A34A !important;
      background: #E6F4EA !important;
      box-shadow: 0 0 0 1px #16A34A !important;
    }
    body.dark .reaction-option.selected {
      background: #112A1F !important;
      box-shadow: 0 0 0 1px #16A34A !important;
    }
    .reaction-img {
      width: 68px !important;
      height: 68px !important;
      object-fit: contain !important;
      margin-bottom: 10px !important;
      max-width: unset !important;
    }
    .reaction-label {
      font-size: 13px !important;
      font-weight: 700 !important;
      color: var(--text-soft) !important;
      margin-top: 0 !important;
      margin-bottom: 2px !important;
      white-space: normal !important;
    }
    .reaction-option.selected .reaction-label {
      color: #15803D !important;
    }
    body.dark .reaction-option.selected .reaction-label {
      color: #4ADE80 !important;
    }
    .reaction-count {
      font-size: 14px !important;
      font-weight: 800 !important;
      color: var(--text) !important;
      display: block !important;
      margin-top: 0 !important;
      margin-bottom: 8px !important;
      min-height: unset !important;
    }
    .reaction-option.selected .reaction-count {
      color: var(--text) !important;
    }
    .rxn-avail {
      font-size: 11px !important;
      font-weight: 800 !important;
      color: #15803D !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 3px !important;
      padding: 3px 8px !important;
      border-radius: 6px !important;
      background: #E6F4EA !important;
      width: auto !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      transition: all 0.2s !important;
    }
    body.dark .rxn-avail {
      background: #112A1F !important;
      color: #4ADE80 !important;
    }
    .rxn-avail.full {
      background: #FEE2E2 !important;
      color: #DC2626 !important;
    }
    body.dark .rxn-avail.full {
      background: #2A1A1A !important;
      color: #EF4444 !important;
    }
    .rxn-avail.low {
      background: #FFF7ED !important;
      color: #EA580C !important;
    }
    body.dark .rxn-avail.low {
      background: #2C1F10 !important;
      color: #F97316 !important;
    }
    
    .reaction-option.selected::after {
      content: 'Selected' !important;
      position: absolute !important;
      top: 6px !important;
      right: 6px !important;
      background: #16A34A !important;
      color: white !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      padding: 2px 6px !important;
      border-radius: 4px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    /* ── Admin "Move Votes" toggle + click-to-pick from/to on the reaction tiles ── */
    .move-mode-toggle-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 50px; border: 1.5px solid var(--border);
      background: transparent; color: var(--text-soft);
      font-size: 12.5px; font-weight: 800; cursor: pointer;
      transition: all 0.15s;
    }
    .move-mode-toggle-btn:hover { border-color: var(--sun-deep); color: var(--sun-deep); }
    .move-mode-toggle-btn.active {
      background: #7C3AED; border-color: #7C3AED; color: #fff;
    }
    .reaction-grid.move-mode .reaction-option { cursor: pointer; }
    /* From = blue, To = purple — distinct from the green "selected" (casting a
       vote) state so the two interactions never look like the same thing. */
    .reaction-option.move-from {
      border-color: #3B82F6 !important;
      background: #EFF6FF !important;
      box-shadow: 0 0 0 1px #3B82F6 !important;
    }
    body.dark .reaction-option.move-from {
      background: #12203D !important;
      box-shadow: 0 0 0 1px #3B82F6 !important;
    }
    .reaction-option.move-from::after {
      content: 'From' !important;
      position: absolute !important; top: 6px !important; right: 6px !important;
      background: #3B82F6 !important; color: #fff !important;
      font-size: 9px !important; font-weight: 900 !important;
      padding: 2px 6px !important; border-radius: 4px !important;
    }
    .reaction-option.move-to {
      border-color: #7C3AED !important;
      background: #F5F3FF !important;
      box-shadow: 0 0 0 1px #7C3AED !important;
    }
    body.dark .reaction-option.move-to {
      background: #241A3D !important;
      box-shadow: 0 0 0 1px #7C3AED !important;
    }
    .reaction-option.move-to::after {
      content: 'To' !important;
      position: absolute !important; top: 6px !important; right: 6px !important;
      background: #7C3AED !important; color: #fff !important;
      font-size: 9px !important; font-weight: 900 !important;
      padding: 2px 6px !important; border-radius: 4px !important;
    }

    /* Main bottom CTA Button */
    .pay-btn-main {
      background: #16A34A !important;
      color: white !important;
      border: none !important;
      border-radius: 12px;
      padding: 15px 24px !important;
      font-weight: 800 !important;
      font-size: 15px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      width: 100% !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
    }
    .pay-btn-main:hover:not(:disabled) {
      background: #15803D !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25) !important;
      transform: translateY(-1px) !important;
    }
    .pay-btn-main:disabled {
      opacity: 0.55 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }
    .secure-checkout-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 600;
      margin-top: 10px;
    }

    /* Sidebar summary styles */
    .votes-sidebar-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .sidebar-card {
      padding: 24px;
    }
    /* Summary card fills the sidebar column so its bottom edge lines up with the
       last panel on the left. Content stays top-aligned; the action buttons are
       pushed to the bottom by .sidebar-actions' auto top margin. */
    #summarySidebarCard {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    /* Pinned to the card's floor via auto top margin — #summarySidebarCard
       stretches to match the left column's height, and this consumes all of
       that slack so the CTAs sit flush at the bottom instead of floating
       right under the content with dead space below them. */
    .sidebar-actions {
      margin-top: auto;
    }
    .summary-rows {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 18px 0 22px 0;
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: var(--text-soft);
      font-weight: 500;
    }
    .summary-row .row-val {
      font-weight: 700;
      color: var(--text);
    }
    /* Reaction row: the tile's own icon next to its label. min-width:0 + the
       ellipsis keep a long label ("That's amazing!") from pushing the row
       wider than the sidebar card on a narrow phone. */
    .summary-row .row-val.summary-reaction {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
    }
    .summary-row .row-val.summary-reaction img {
      width: 18px;
      height: 18px;
      flex: none;
      object-fit: contain;
    }
    .summary-row .row-val.summary-reaction span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .summary-row.total-row {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      border-top: 1.5px solid var(--border);
      padding-top: 14px;
      margin-top: 4px;
    }
    .summary-row.total-row .row-val {
      color: #16A34A;
      font-size: 20px;
    }
    body.dark .summary-row.total-row .row-val {
      color: #16A34A;
    }
    
    .sidebar-action-btn {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar-action-btn.secondary-btn {
      background: var(--card-bg);
      color: var(--text-soft);
      border: 1.5px solid var(--border);
    }
    .sidebar-action-btn.secondary-btn:hover {
      border-color: #16A34A;
      color: #16A34A;
      transform: translateY(-1px);
    }
    .sidebar-action-btn.outline-btn {
      background: transparent;
      color: #16A34A;
      border: 2px solid #16A34A;
      margin-bottom: 12px;
    }
    .sidebar-action-btn.outline-btn:hover:not(:disabled) {
      background: rgba(16, 185, 129, 0.08);
      transform: translateY(-1px);
    }
    .sidebar-action-btn.outline-btn.is-checkout:not(:disabled) {
      background: #15803D;
      color: #fff;
      border-color: #15803D;
      box-shadow: 0 4px 12px rgba(16,185,129,.16);
    }
    .sidebar-action-btn.outline-btn.is-checkout:hover:not(:disabled) {
      background: #126B33;
      border-color: #126B33;
      box-shadow: 0 6px 18px rgba(16,185,129,.24);
    }
    /* In step with the canonical primary in styles.css: white on #15803D in both themes.
       Matches builder's .bb-atc-outlined.is-checkout, the same control on the
       pack builder — this one had drifted to the old dark-ink inversion. */
    body.dark .sidebar-action-btn.outline-btn.is-checkout:not(:disabled) {
      background: #15803D;
      color: #fff;
      border-color: #15803D;
    }
    body.dark .sidebar-action-btn.outline-btn.is-checkout:hover:not(:disabled) {
      background: #166534;
      border-color: #166534;
    }
    .sidebar-action-btn.outline-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }
    #amt-custom .amt-num {
      font-size: 15px;
      font-family: 'Geist', 'Inter', sans-serif;
    }
    #sidebarAdminProcessBtn {
      background: #6366F1;
      color: white;
      border: none;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
      margin-bottom: 12px;
    }
    #sidebarAdminProcessBtn:hover:not(:disabled) {
      background: #4f46e5;
      box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
      transform: translateY(-1px);
    }
    #sidebarAdminProcessBtn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    
    /* Rewards Callout Card */
    .rewards-card {
      background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
      border: 1.5px solid #DDD6FE;
    }
    body.dark .rewards-card {
      background: linear-gradient(135deg, #1A1230 0%, #0E0720 100%);
      border-color: #3B0764;
    }
    .rewards-card-content {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .rewards-gem-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
    }
    .rewards-gem-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .rewards-text-col {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .rewards-card-title {
      font-size: 15px;
      font-weight: 800;
      color: #6D28D9;
    }
    body.dark .rewards-card-title {
      color: #C084FC;
    }
    .rewards-card-desc {
      font-size: 12px;
      color: #7C3AED;
      line-height: 1.4;
      font-weight: 500;
    }
    body.dark .rewards-card-desc {
      color: #A78BFA;
    }
    

    /* ── Use Reward Votes widget (inside the summary card) ───────────────────
       Mirrors checkout.html's gems widget: balance + Use Max on one row, then
       the input, then the applied state with a Remove link. */
    .rv-widget {
      margin-top: 14px;
      margin-bottom: 16px;
      padding-top: 14px;
      border-top: 1.5px solid var(--border);
    }
    .rv-widget-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .rv-widget-bal {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      min-width: 0;
    }
    .rv-widget-bal img {
      width: 22px;
      height: 14px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .rv-widget .capacity-help-btn {
      border-color: #F5A9A6;
      background: transparent;
      color: #C25650;
      flex-shrink: 0;
    }
    .rv-widget .capacity-help-btn:hover { border-color: #E85D5A; color: #E85D5A; }
    body.dark .rv-widget .capacity-help-btn { border-color: #7F2724; color: #F2726F; }
    .rv-max-btn {
      background: none;
      border: none;
      color: #E85D5A;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }
    .rv-max-btn:hover { color: #C0392B; }

    .rv-widget-input { display: flex; gap: 8px; }
    .rv-widget-input input {
      flex: 1;
      min-width: 0;
      padding: 8px 12px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      outline: none;
      transition: border-color 0.15s;
    }
    .rv-widget-input input:focus { border-color: #E85D5A; }
    .rv-widget-input button {
      padding: 8px 16px;
      background: #E85D5A;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    .rv-widget-input button:hover { background: #D2504D; }

    .rv-widget-applied {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .rv-widget-applied span {
      font-size: 12px;
      font-weight: 700;
      color: #C0392B;
    }
    body.dark .rv-widget-applied span { color: #FCA5A1; }
    .rv-widget-applied button {
      background: none;
      border: none;
      color: var(--text-muted);
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      flex-shrink: 0;
    }
    .rv-widget-err {
      color: #ef4444;
      font-size: 12px;
      font-weight: 700;
      margin-top: 6px;
    }
    .rv-note {
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.4;
      margin-top: 10px;
      color: #C25650;
    }
    body.dark .rv-note { color: #F2726F; }
    .rv-note:empty { display: none; }

    /* Total reads as free once Reward Votes cover the whole purchase */
    .summary-row.total-row .row-val.is-free { color: #E85D5A; }

    /* Custom Input overrides for custom amount */
    .token-tooltip-box {
      display: none;
      position: fixed;
      background: var(--text);
      color: var(--white);
      border-radius: 8px;
      padding: 12px 16px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.6;
      width: 260px;
      box-shadow: var(--shadow-hover);
      z-index: 9999;
      text-align: left;
      white-space: normal;
      letter-spacing: -0.005em;
    }

    /* locked state overlays */
    .vote-panel-locked .votes-card {
      pointer-events: none !important;
      opacity: 0.55 !important;
      filter: grayscale(0.2);
    }