
    body { font-family: Inter, sans-serif; }
    .tool-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 3px 12px rgba(0,0,0,.04);
    }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(6px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .fade-up { animation: fadeUp 0.3s ease-out; }

    @keyframes spin {
      0%  { transform: scale(1) rotate(0deg); }
      25% { transform: scale(1.05) rotate(-2deg); }
      50% { transform: scale(1.08) rotate(2deg); }
      75% { transform: scale(1.05) rotate(-1deg); }
      100%{ transform: scale(1) rotate(0deg); }
    }
    .spinning { animation: spin 0.15s ease-in-out; }

    @keyframes winnerPop {
      0%   { transform: scale(0.8); opacity: 0; }
      60%  { transform: scale(1.06); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .winner-pop { animation: winnerPop 0.45s cubic-bezier(.175,.885,.32,1.275) forwards; }

    /* Winner card */
    .winner-card {
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      border: 2px solid #059669;
      border-radius: 1rem;
      padding: 2rem;
      text-align: center;
    }
    .winner-avatar {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, #059669, #047857);
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; font-weight: 700; color: #fff;
      margin: 0 auto 1rem;
      box-shadow: 0 4px 14px rgba(5,150,105,0.3);
    }

    /* Slot-machine display */
    .slot-display {
      font-size: 1.5rem; font-weight: 700; color: #059669;
      min-height: 2.5rem;
      display: flex; align-items: center; justify-content: center;
    }

    /* Comment list */
    .comment-item {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.5rem;
      border: 1px solid #f3f4f6;
      font-size: 0.82rem;
      transition: background 0.1s;
    }
    .comment-item:hover { background: #f9fafb; }
    .comment-item.winner-row { background: #ecfdf5; border-color: #059669; }
    .comment-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: #e5e7eb; display: flex; align-items: center;
      justify-content: center; font-size: 12px; font-weight: 700;
      color: #6b7280; flex-shrink: 0;
    }
    .comment-user { font-weight: 600; color: #111827; }
    .comment-text { color: #6b7280; flex: 1; }

    /* Buttons */
    .pick-btn {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.65rem 1.5rem; border-radius: 0.6rem;
      background: #059669; color: #fff;
      font-size: 0.95rem; font-weight: 700;
      cursor: pointer; border: none; width: 100%;
      transition: opacity 0.15s, transform 0.1s;
      letter-spacing: 0.01em;
    }
    .pick-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
    .pick-btn:active { transform: translateY(0); }
    .pick-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .sec-btn {
      display: flex; align-items: center; justify-content: center; gap: 0.4rem;
      padding: 0.5rem 1rem; border-radius: 0.6rem;
      background: #f3f4f6; color: #374151;
      font-size: 0.82rem; font-weight: 600;
      cursor: pointer; border: 1px solid #e5e7eb;
      transition: background 0.15s;
    }
    .sec-btn:hover { background: #e5e7eb; }

    .filter-toggle {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: 0.82rem; font-weight: 500; cursor: pointer;
    }
    .filter-toggle input[type=checkbox] { accent-color: #059669; width: 15px; height: 15px; }

    #confettiCanvas {
      position: fixed; top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none; z-index: 999;
    }

    /* Progress bar */
    .progress-bar {
      height: 4px; border-radius: 2px;
      background: #e5e7eb; overflow: hidden;
    }
    .progress-fill {
      height: 100%; border-radius: 2px;
      background: #059669;
      transition: width 0.3s ease;
    }
