body { background-color: #f8fafc; font-family: 'Inter', sans-serif; }
        .tag { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; }
        .stats-card { background-color: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07); text-align: center; }
        .stat-value { font-size: 2.25rem; font-weight: 800; line-height: 1; }
        .stat-label { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; }
        .period-btn { padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #4b5563; transition: all 0.2s ease-in-out; }
        .period-btn:hover { background-color: #e5e7eb; color: #1f2937; }
        .period-btn.active { background-color: #3b82f6; color: white; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
        .no-data-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 20rem; background-color: #f9fafb; border: 2px dashed #e5e7eb; border-radius: 0.75rem; }
        .social-link { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #f3f4f6; color: #374151; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500; transition: all 0.2s; }
        .social-link:hover { background-color: #e5e7eb; color: #111827; }
        .vote-main-btn { width: 100%; sm:width: auto; background: linear-gradient(to right, #22c55e, #16a34a); color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); transition: all 0.3s ease; }
        .vote-main-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(34, 197, 94, 0.4); }
        .ip-copy-btn { width: 100%; background-color: #111827; color: white; font-family: 'JetBrains Mono', monospace; padding: 0.6rem 1rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
        .ip-copy-btn:hover { background-color: #1f2937; }
        .ip-copy-btn.copied { background-color: #16a34a; border-color: #22c55e; }
        .ip-notification { position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 200%); background-color: #1f2937; color: white; padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 500; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1000; }
        .ip-notification.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
        .vote-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); animation: fadeIn 0.3s; }
        .vote-modal-content { background-color: #fefefe; margin: 15% auto; padding: 25px; border: 1px solid #888; width: 90%; max-width: 400px; border-radius: 12px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: slideIn 0.4s; }
        .vote-modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; line-height: 1; cursor: pointer; transition: color 0.2s; }
        .vote-modal-close:hover { color: #333; }
        .vote-input { width: 100%; padding: 12px; border: 2px solid #d1d5db; border-radius: 8px; font-size: 16px; margin-top: 10px; margin-bottom: 20px; transition: border-color 0.2s; }
        .vote-input:focus { border-color: #3b82f6; outline: none; }
        .vote-button { width: 100%; background: #22c55e; color: white; padding: 12px; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
        .vote-button:hover { background-color: #16a34a; }
        #vote-feedback { text-align: center; margin-top: 15px; font-weight: 500; min-height: 24px;}
        .feedback-error { color: #ef4444; } .feedback-success { color: #22c55e; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .ai-analysis-container { background: linear-gradient(135deg, #f3e8ff 0%, #dbeafe 100%); border: 1px solid #d1d5db; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07); }
        .ai-analysis-content { color: #374151; line-height: 1.7; white-space: pre-wrap; }
        .ai-analysis-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; background: linear-gradient(to right, #4f46e5, #7c3aed); color: white; font-weight: 700; padding: 0.75rem 1.5rem; border-radius: 0.75rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
        .ai-analysis-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(99, 102, 241, 0.4); }
        .ai-analysis-button:disabled { opacity: 0.7; cursor: not-allowed; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .spinner { animation: spin 1s linear infinite; }