/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-primary:hover {
    background-color: #f0b90b;
    color: #000000;
    border-color: #f0b90b;
}

.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

.btn-full {
    width: 100%;
}

.btn-back {
    background-color: var(--accent-purple);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.btn-back:hover {
    background-color: #7c3aed;
    color: var(--text-primary);
}

/* Wallet Button */
.wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid #3b82f6;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-btn:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.wallet-btn.connected {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* Cards Grid Layout */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.cards-grid .content-card {
    max-width: 380px;
}

/* Content Card */
.content-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.content-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--border-light);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.category-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    color: var(--bg-primary);
}

.card-date {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.card-title a {
    color: var(--text-primary);
    transition: color 0.2s;
}

.card-title a:hover {
    color: var(--accent-yellow);
}

.card-source {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.card-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    gap: 0.5rem;
}

.card-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.source {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.card-footer .source {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* Bookmark Button */
.bookmark-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.bookmark-btn:hover {
    color: var(--accent-yellow);
    background-color: var(--bg-card-hover);
}

.bookmark-btn.bookmarked {
    color: var(--text-primary);
}

.bookmark-btn.bookmarked svg {
    fill: currentColor;
}

/* Card Actions */
.card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Share Buttons */
.share-btn-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.share-btn-card:hover {
    color: var(--accent-purple);
    background-color: var(--bg-card-hover);
}

/* Share Section on Detail Page */
.share-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    position: relative;
}

.share-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.share-btn:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.copy-feedback {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2rem;
    background-color: var(--accent-green);
    color: var(--bg-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.copy-feedback.show {
    opacity: 1;
}

/* Share Menu Dropdown */
.share-menu {
    position: fixed;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    min-width: 180px;
    display: none;
}

.share-menu.active {
    display: block;
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
    text-decoration: none;
}

.share-menu-item:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Copy Toast */
.copy-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--accent-green);
    color: var(--bg-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1001;
}

.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.tab-btn {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.tab-btn:hover {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.tab-btn.active {
    background-color: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
    font-weight: 600;
}

/* Classic theme tab fix */
[data-theme="classic"] .tab-btn {
    background-color: #2a2a2a;
    color: #d1d5db;
    border-color: #404040;
}

[data-theme="classic"] .tab-btn:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

[data-theme="classic"] .tab-btn.active {
    background-color: #8b5cf6;
    color: #ffffff !important;
    border-color: #8b5cf6;
}

/* Galaxy theme tab fix */
[data-theme="galaxy"] .tab-btn {
    background-color: #1a1a2e;
    color: #d1d5db;
    border-color: #2d2d4a;
}

[data-theme="galaxy"] .tab-btn:hover {
    background-color: #252540;
    color: #ffffff;
}

[data-theme="galaxy"] .tab-btn.active {
    background-color: #8b5cf6;
    color: #ffffff !important;
    border-color: #8b5cf6;
}

/* Light theme tab fix */
[data-theme="light"] .tab-btn {
    background-color: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}

[data-theme="light"] .tab-btn:hover {
    background-color: #d1d5db;
    color: #1f2937;
}

[data-theme="light"] .tab-btn.active {
    background-color: #6d28d9;
    color: #ffffff !important;
    border-color: #6d28d9;
}

/* Neon Matrix theme tab fix */
[data-theme="neon"] .tab-btn {
    background-color: #111f28;
    color: #7fb3a8;
    border-color: #1a3540;
}

[data-theme="neon"] .tab-btn:hover {
    background-color: #162a36;
    color: #e0f7f4;
}

[data-theme="neon"] .tab-btn.active {
    background-color: #00ff88;
    color: #0a1419 !important;
    border-color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.tab-content {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Rankings Widget */
.rankings-widget {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 0.5rem;
    overflow: hidden;
    max-width: 100%;
}

.rankings-list {
    list-style: none;
    overflow: hidden;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    max-width: 100%;
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-item .token-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ranking-item .add-token-btn,
.ranking-item .remove-token-btn {
    flex-shrink: 0;
    margin-left: auto;
}

/* Token Search */
.token-search-container {
    position: relative;
    margin-bottom: 0.5rem;
}

.token-search-input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s;
}

.token-search-input:focus {
    border-color: var(--accent-yellow);
}

.token-search-input::placeholder {
    color: var(--text-muted);
}

.token-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.token-search-results.active {
    display: block;
}

.token-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.token-search-item:last-child {
    border-bottom: none;
}

.token-search-item:hover {
    background-color: var(--bg-card-hover);
}

.token-search-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.token-search-item .token-info {
    flex: 1;
    min-width: 0;
}

.token-search-item .token-symbol {
    font-weight: 600;
    color: var(--text-primary);
}

.token-search-item .token-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.token-search-item .token-add {
    color: var(--accent-green);
    font-size: 0.75rem;
    font-weight: 500;
}

.token-search-loading,
.token-search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.ranking-item .rank {
    width: 24px;
    text-align: center;
    font-weight: 600;
    color: var(--accent-yellow);
}

.ranking-info {
    flex: 1;
    min-width: 0;
}

.ranking-info .name {
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-info .price {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.ranking-info .article-title {
    color: var(--text-primary);
    font-size: 0.875rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-info .article-title:hover {
    color: var(--accent-yellow);
}

.ranking-item .change {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Token Icons */
.token-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.token-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.token-name-cell div {
    display: flex;
    flex-direction: column;
}

/* Clickable Token Links in Sidebar */
.token-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    color: inherit;
    text-decoration: none;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.token-link:hover {
    background-color: var(--bg-card-hover);
    color: inherit;
}

.token-link .rank {
    width: 22px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-yellow);
    flex-shrink: 0;
}

.token-link .ranking-info {
    flex: 1;
    min-width: 0;
}

.token-link .change {
    font-size: 0.875rem;
    font-weight: 500;
}

/* My Tokens List - Two Row Layout */
.my-token-item .token-link {
    align-items: center;
}

.my-token-item .token-link .rank {
    align-self: center;
}

.my-token-item .token-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.my-token-item .token-details {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
}

.my-token-item .token-name-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.my-token-item .token-symbol {
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
}

.my-token-item .token-fullname {
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-token-item .token-stats-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    padding-left: 0.5rem;
}

.my-token-item .token-stats-col .change {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.my-token-item .token-price {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Add/Remove Token Buttons */
.add-token-btn,
.remove-token-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.add-token-btn:hover {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--bg-primary);
}

.remove-token-btn:hover {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

.ranking-item .token-link {
    flex: 1;
}

.empty-message {
    color: var(--text-muted);
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
}

/* Drag and Drop */
.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    color: var(--text-muted);
    cursor: grab;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
}

.drag-handle:hover {
    opacity: 1;
    color: var(--text-secondary);
}

.drag-handle:active {
    cursor: grabbing;
}

.draggable-item {
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.draggable-item.dragging {
    opacity: 0.5;
    background: var(--bg-card-hover);
}

.draggable-item.drag-over {
    border-top: 2px solid var(--accent-primary);
    margin-top: -2px;
}

.sortable-list {
    min-height: 50px;
}

/* Calendar Widget */
.calendar-widget {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-month {
    font-weight: 600;
}

.calendar-nav {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    transition: color 0.2s;
}

.calendar-nav:hover {
    color: var(--accent-yellow);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.calendar-day-header {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.5rem 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-day:hover {
    background-color: var(--bg-card-hover);
}

.calendar-day.today {
    background-color: var(--accent-yellow);
    color: #8b5cf6;
    font-weight: 600;
}

.calendar-day.selected {
    background-color: var(--accent-purple);
    color: var(--text-primary);
    font-weight: 600;
}

.calendar-day.selected.today {
    background: linear-gradient(135deg, var(--accent-yellow) 50%, var(--accent-purple) 50%);
}

.calendar-day.other-month {
    color: var(--text-muted);
}

/* Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input,
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-yellow);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-errors {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--accent-red);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.form-errors p {
    color: var(--accent-red);
    font-size: 0.875rem;
    margin: 0;
}

.form-errors p + p {
    margin-top: 0.5rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wallet-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        gap: 0.25rem;
    }

    .wallet-btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    /* Hide wallet text on very small screens, show icon only */
    .wallet-btn {
        padding: 0.4rem;
    }

    .wallet-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ============ Sentiment Widget ============ */
.sentiment-widgets-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sentiment-widget {
    display: inline-flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    flex: 1 1 0;
    min-width: 0;
}

.sentiment-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.25rem 0.5rem;
}

.sentiment-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
}

.sentiment-timeframe {
    font-size: 0.75rem;
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sentiment-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.sentiment-donut {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent-green) 0% calc(var(--positive) * 1%),
        var(--accent-red) calc(var(--positive) * 1%) calc((var(--positive) + var(--negative)) * 1%),
        var(--text-muted) calc((var(--positive) + var(--negative)) * 1%) 100%
    );
    flex-shrink: 0;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background-color: var(--bg-card);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.donut-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sentiment-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sentiment-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sentiment-indicator {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.sentiment-item.positive .sentiment-indicator {
    background-color: var(--accent-green);
}

.sentiment-item.negative .sentiment-indicator {
    background-color: var(--accent-red);
}

.sentiment-item.neutral .sentiment-indicator {
    background-color: var(--text-muted);
}

.sentiment-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    min-width: 60px;
}

.sentiment-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}

.sentiment-empty {
    text-align: center;
}

.sentiment-no-data {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0.5rem 0 0;
}

/* User Sentiment Specific */
.user-donut {
    background: conic-gradient(
        var(--accent-green) 0% calc(var(--bullish) * 1%),
        var(--accent-red) calc(var(--bullish) * 1%) 100%
    );
}

.sentiment-item.bullish .sentiment-indicator {
    color: var(--accent-green);
    display: flex;
    align-items: center;
}

.sentiment-item.bearish .sentiment-indicator {
    color: var(--accent-red);
    display: flex;
    align-items: center;
}

.user-sentiment-vote {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.vote-prompt {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.vote-login-btn {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.vote-login-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--bg-card-hover);
}

.sentiment-vote-buttons {
    display: flex;
    gap: 0.5rem;
}

.sentiment-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.sentiment-vote-btn:hover {
    border-color: var(--border-light);
}

.sentiment-vote-btn.bullish:hover {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.sentiment-vote-btn.bearish:hover {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.vote-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.vote-status span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bullish-icon {
    color: var(--accent-green);
}

.bearish-icon {
    color: var(--accent-red);
}

.cooldown-timer {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Price Sentiment Widget */
.price-donut {
    background: conic-gradient(
        var(--accent-green) 0% calc(var(--bullish) * 1%),
        var(--accent-red) calc(var(--bullish) * 1%) 100%
    );
}

.price-breakdown {
    gap: 0.75rem;
}

.price-display,
.change-display {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.price-label,
.change-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.price-amount {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.change-amount {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.change-display.positive .change-amount {
    color: var(--accent-green);
}

.change-display.negative .change-amount {
    color: var(--accent-red);
}

/* ============ Vote Buttons ============ */
.vote-buttons {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.vote-btn {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.vote-btn:hover {
    background-color: var(--bg-card-hover);
}

.vote-btn.upvote:hover,
.vote-btn.upvote.active {
    color: var(--accent-green);
}

.vote-btn.downvote:hover,
.vote-btn.downvote.active {
    color: var(--accent-red);
}

.vote-btn.active {
    background-color: var(--bg-card-hover);
}

.vote-count {
    font-weight: 500;
    min-width: 0.875rem;
    text-align: center;
}

.content-actions-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ============ Comments Section ============ */
.comments-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.comments-header {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.comment-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.comment-form textarea {
    flex: 1;
    min-height: 60px;
    max-height: 150px;
    padding: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
}

.comment-form textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.comment-form textarea::placeholder {
    color: var(--text-muted);
}

.comment-form .btn {
    align-self: flex-end;
    white-space: nowrap;
}

.login-prompt {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.login-prompt a {
    color: var(--accent-purple);
}

.login-prompt a:hover {
    color: var(--accent-yellow);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-item {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.comment-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.comment-edited {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.comment-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.comment-actions button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.comment-actions button:hover {
    color: var(--accent-purple);
}

.delete-comment-btn:hover {
    color: var(--accent-red) !important;
}

.comment-edit-form {
    margin-top: 0.5rem;
}

.comment-edit-form .edit-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.5rem;
}

.comment-edit-form .edit-textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.comment-edit-form .edit-actions {
    display: flex;
    gap: 0.5rem;
}

.comment-edit-form .edit-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.no-comments,
.comments-error {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

/* Nested Comments */
.comment-replies {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border-color);
    margin-top: 0.75rem;
}

.comment-item.comment-depth-1,
.comment-item.comment-depth-2 {
    margin-top: 0.75rem;
}

.comment-item.comment-depth-2 {
    /* Max depth - slightly smaller */
    font-size: 0.95em;
}

/* Reply Button */
.reply-comment-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.reply-comment-btn:hover {
    color: var(--accent-purple);
}

/* Reply Form */
.reply-form {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.reply-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.5rem;
}

.reply-textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.reply-textarea::placeholder {
    color: var(--text-muted);
}

.reply-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.reply-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* Medium screens - compact content */
@media (max-width: 1200px) {
    .sentiment-widget {
        padding: 0.75rem;
    }

    .sentiment-header h3 {
        font-size: 0.9rem;
    }

    .sentiment-arc-gauge {
        width: 100px;
        height: 100px;
    }

    .arc-gauge-icon {
        width: 22px;
        height: 22px;
    }

    .arc-gauge-value {
        font-size: 1.1rem;
    }

    .arc-gauge-chart {
        width: 55px;
        height: 18px;
    }

    .sentiment-item {
        font-size: 0.75rem;
    }

    .price-breakdown {
        text-align: center;
    }
}

/* Smaller screens - more compact */
@media (max-width: 950px) {
    .sentiment-widgets-row {
        gap: 0.5rem;
    }

    .sentiment-widget {
        padding: 0.6rem;
    }

    .sentiment-header {
        margin-bottom: 0.5rem;
        gap: 0.25rem;
    }

    .sentiment-header h3 {
        font-size: 0.8rem;
    }

    .sentiment-timeframe {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
    }

    .sentiment-content {
        gap: 0.5rem;
    }

    .sentiment-arc-gauge {
        width: 80px;
        height: 80px;
    }

    .arc-gauge-icon {
        width: 18px;
        height: 18px;
    }

    .arc-gauge-value {
        font-size: 0.9rem;
    }

    .arc-gauge-label {
        font-size: 0.5rem;
    }

    .arc-gauge-chart {
        width: 45px;
        height: 14px;
        bottom: 0;
    }

    .sentiment-breakdown {
        gap: 0.25rem;
    }

    .sentiment-item {
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .sentiment-indicator {
        width: 8px;
        height: 8px;
    }

    .sentiment-indicator svg {
        width: 8px;
        height: 8px;
    }
}

/* Mobile responsive - 2x2 grid */
@media (max-width: 600px) {
    .sentiment-widgets-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .sentiment-widget {
        width: 100%;
        padding: 0.75rem;
        min-width: 0;
    }

    .sentiment-header h3 {
        font-size: 0.75rem;
    }

    .sentiment-header {
        margin-bottom: 0.5rem;
    }

    .sentiment-timeframe {
        font-size: 0.6rem;
    }

    .sentiment-content {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .sentiment-arc-gauge {
        width: 80px;
        height: 80px;
    }

    .arc-gauge-icon {
        width: 16px;
        height: 16px;
    }

    .arc-gauge-value {
        font-size: 1rem;
    }

    .arc-gauge-label {
        font-size: 0.55rem;
    }

    .sentiment-breakdown {
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .sentiment-item {
        gap: 0.25rem;
    }

    .sentiment-indicator {
        width: 6px;
        height: 6px;
    }

    .user-sentiment-vote {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .vote-prompt {
        font-size: 0.65rem;
    }

    .sentiment-vote-btn {
        padding: 0.3rem 0.5rem;
    }

    .sentiment-vote-btn svg {
        width: 12px;
        height: 12px;
    }

    .vote-login-btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }

    .arc-gauge-chart {
        width: 55px;
        height: 16px;
    }

    .sentiment-breakdown {
        gap: 0.35rem;
    }

    .sentiment-item {
        font-size: 0.8rem;
    }

    .comment-form {
        flex-direction: column;
    }

    .comment-form .btn {
        align-self: flex-end;
    }
}

@media (max-width: 400px) {
    .sentiment-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .sentiment-breakdown {
        gap: 0.3rem;
    }
}

/* ============ Points Badge (Header) ============ */
.points-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(240, 185, 11, 0.15));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.points-badge:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.35);
    color: var(--text-primary);
}

.points-badge svg {
    color: var(--accent-yellow);
}

.points-value {
    font-weight: 700;
    color: var(--accent-yellow);
}

.points-label {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Mobile: hide points label, show just number */
@media (max-width: 768px) {
    .points-badge {
        padding: 0.35rem 0.5rem;
    }

    .points-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .points-badge svg {
        width: 12px;
        height: 12px;
    }
}

/* ============ Sidebar Leaderboard Widget ============ */
.leaderboard-widget {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.leaderboard-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.leaderboard-header h3 svg {
    color: var(--accent-yellow);
}

.view-all-link {
    font-size: 0.75rem;
    color: var(--accent-purple);
    text-decoration: none;
}

.view-all-link:hover {
    color: var(--accent-yellow);
    text-decoration: underline;
}

.period-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item.top-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 4px;
}

.leaderboard-item.top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.08), transparent);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 4px;
}

.leaderboard-item.top-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.08), transparent);
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 4px;
}

.leaderboard-rank {
    width: 24px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
}

.rank-medal {
    font-size: 1rem;
}

.rank-medal.gold {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
}

.rank-medal.silver {
    filter: drop-shadow(0 0 2px rgba(192, 192, 192, 0.5));
}

.rank-medal.bronze {
    filter: drop-shadow(0 0 2px rgba(205, 127, 50, 0.5));
}

.leaderboard-user {
    flex: 1;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-points {
    font-weight: 600;
    color: var(--accent-yellow);
    white-space: nowrap;
}

.your-points {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.your-points strong {
    color: var(--accent-yellow);
}

/* ============ Rankings Page Leaderboards Row ============ */
.leaderboards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.leaderboard-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.leaderboard-tile h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.leaderboard-tile h3 svg {
    color: var(--accent-yellow);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.lb-rank {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
}

.lb-rank.top-rank {
    font-size: 1rem;
}

.lb-name {
    font-size: 0.875rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-value {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--accent-primary);
}

.lb-value.wagered {
    color: var(--accent-yellow);
}

.lb-value.won {
    color: var(--accent-green);
}

.leaderboard-empty {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

@media (max-width: 768px) {
    .leaderboards-row {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .leaderboards-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .leaderboard-tile {
        padding: 1rem;
    }

    .leaderboard-tile h3 {
        font-size: 0.875rem;
    }

    .lb-name, .lb-value {
        font-size: 0.8rem;
    }
}

/* ============ Rankings Page Contributors Section (legacy) ============ */
.contributors-section {
    margin-bottom: 2rem;
}

.contributors-section h2 {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.contributors-section h2 svg {
    color: var(--accent-yellow);
}

.contributors-subtitle {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.contributors-table {
    max-width: 500px;
}

.contributors-table .table-header,
.contributors-table .table-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px;
    padding: 0.875rem 1.25rem;
    align-items: center;
}

.contributors-table .table-header .col-points {
    text-align: right;
}

.contributor-row .col-rank {
    font-weight: 600;
}

.contributor-row .col-rank.top-rank {
    font-size: 1.1rem;
}

.contributor-row .col-rank.rank-1 {
    color: #ffd700;
}

.contributor-row .col-rank.rank-2 {
    color: #c0c0c0;
}

.contributor-row .col-rank.rank-3 {
    color: #cd7f32;
}

.contributor-name {
    color: var(--text-primary);
    font-weight: 500;
}

.contributor-row .col-points {
    font-weight: 600;
    color: var(--accent-yellow);
    text-align: right;
}

/* ============ Rewards Page ============ */
.rewards-page {
    max-width: 800px;
}

.rewards-section {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.rewards-section h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rewards-section h2 .period-label {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.rewards-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Points Grid */
.points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.points-card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.points-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
}

.points-icon.wallet-icon { color: #3b82f6; }
.points-icon.vote-icon { color: var(--accent-green); }
.points-icon.comment-icon { color: var(--accent-purple); }
.points-icon.sentiment-icon { color: #f59e0b; }
.points-icon.thread-icon { color: #8b5cf6; }
.points-icon.reply-icon { color: #06b6d4; }

.points-info {
    display: flex;
    flex-direction: column;
}

.points-action {
    font-weight: 500;
    color: var(--text-primary);
}

.points-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-yellow);
}

.points-note {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.stat-card.primary {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(240, 185, 11, 0.2));
    border: 1px solid #8b5cf6;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card.primary .stat-value {
    color: var(--accent-yellow);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Daily Progress */
.daily-progress {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.daily-progress h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.progress-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.progress-bar {
    height: 8px;
    background-color: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-yellow));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Bonus Alert */
.bonus-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--text-secondary);
}

.bonus-alert svg {
    color: #3b82f6;
    flex-shrink: 0;
}

.bonus-alert strong {
    color: var(--accent-yellow);
}

/* History Table - Card Style */
.history-table {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-header {
    display: none; /* Hide header, use card layout instead */
}

.history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

.history-row:hover {
    border-color: rgba(139, 92, 246, 0.4);
}

.history-row span:first-child {
    /* Period name */
    font-weight: 600;
    color: var(--text-primary);
    flex: 1 1 200px;
}

.history-row span:nth-child(2),
.history-row span:nth-child(3) {
    /* Points and Share % */
    font-size: 0.85rem;
    color: var(--text-muted);
}

.history-row span:nth-child(2)::before {
    content: "Points: ";
    color: var(--text-muted);
    font-weight: 400;
}

.history-row span:nth-child(3)::before {
    content: "Share: ";
    color: var(--text-muted);
    font-weight: 400;
}

.history-row span:nth-child(4) {
    /* Allocated amount */
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent-purple);
}

.history-row span:nth-child(5) {
    /* Status badge container */
    margin-left: auto;
}

.status-badge {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge.eligible {
    background-color: rgba(139, 92, 246, 0.15);
    color: var(--accent-purple);
}

.status-badge.ineligible {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.status-badge.claimed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-type {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.activity-type.wallet_connect { color: #3b82f6; }
.activity-type.vote { color: var(--accent-green); }
.activity-type.comment { color: var(--accent-purple); }
.activity-type.sentiment { color: #f59e0b; }
.activity-type.thread { color: #8b5cf6; }
.activity-type.reply { color: #06b6d4; }

.activity-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.activity-name {
    font-weight: 500;
    color: var(--text-primary);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-points {
    font-weight: 600;
    color: var(--accent-yellow);
}

.activity-points.negative {
    color: #ef4444;
}

.activity-type.prediction_win {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.activity-type.prediction_spend {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Login Prompt */
.login-prompt-section {
    text-align: center;
}

.login-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

/* Leaderboard Full */
.leaderboard-full {
    display: flex;
    flex-direction: column;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row.top-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
}

.leaderboard-row.top-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.08), transparent);
}

.leaderboard-row.top-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.08), transparent);
}

.lb-rank {
    width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
}

.lb-user {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.lb-points {
    font-weight: 600;
    color: var(--accent-yellow);
}

.view-rankings-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--accent-purple);
    font-size: 0.9rem;
}

.view-rankings-link:hover {
    color: var(--accent-yellow);
}

/* ============ Claim Section ============ */
.claim-section {
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.claim-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.claim-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-secondary);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.claim-notice {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.claim-notice svg {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.claim-notice p {
    margin-bottom: 1rem;
}

.claim-card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.claim-card:last-child {
    margin-bottom: 0;
}

.claim-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.claim-card-header h3 {
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary);
}

.claim-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 500;
}

.claim-status.available {
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

.claim-status.pending {
    background-color: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.claim-status.claimed {
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

/* Claimed complete card */
.claim-card.claimed-complete {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.claim-success-display {
    text-align: center;
    padding: 1rem 0;
}

.claimed-amount-large {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-green);
    line-height: 1.2;
}

.claimed-amount-large .token-symbol {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.8;
}

.claimed-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.claim-forfeit-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.claim-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.claim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.claim-row.highlight {
    background-color: rgba(16, 185, 129, 0.1);
    padding: 0.5rem;
    border-radius: 4px;
    margin: 0.25rem -0.5rem;
}

.claim-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.claim-value {
    font-weight: 600;
    color: var(--text-primary);
}

.claim-value.positive {
    color: var(--accent-green);
}

.claim-value.negative {
    color: var(--accent-red);
}

.vesting-progress {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.vesting-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.vesting-tip {
    font-size: 0.8rem;
    color: var(--accent-yellow);
    margin-top: 0.5rem;
    text-align: center;
}

.claim-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.forfeit-warning {
    text-align: center;
    font-size: 0.8rem;
    color: var(--accent-red);
    margin-top: 0.5rem;
}

.contract-info {
    margin-top: 0.75rem;
    text-align: center;
}

.contract-info small {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.claim-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.claim-info h4 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.claim-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.claim-info li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.claim-info li:last-child {
    border-bottom: none;
}

.claim-info li strong {
    color: var(--text-primary);
}

.claim-tip {
    background-color: rgba(240, 185, 11, 0.1);
    border: 1px solid rgba(240, 185, 11, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--accent-yellow);
    font-size: 0.85rem;
    text-align: center;
}

.claim-notice-small {
    background-color: var(--bg-card);
    border-radius: 4px;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.history-note {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Wallet Warning Banner */
.wallet-warning-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.wallet-warning-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wallet-warning-content svg {
    flex-shrink: 0;
    color: var(--accent-yellow);
}

.wallet-warning-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wallet-warning-text strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.wallet-warning-text span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.btn-warning {
    background-color: var(--accent-yellow);
    color: var(--bg-primary);
    font-weight: 600;
    white-space: nowrap;
}

.btn-warning:hover {
    background-color: #d97706;
}

/* Wrong network state - more urgent/red */
.wallet-warning-banner.wrong-network {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.4);
}

.wallet-warning-banner.wrong-network svg {
    color: var(--accent-red);
}

.wallet-warning-banner.wrong-network .btn-warning {
    background-color: var(--accent-red);
}

.wallet-warning-banner.wrong-network .btn-warning:hover {
    background-color: #dc2626;
}

/* Two Column Layout for Rewards Page */
.rewards-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.rewards-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.airdrops-column .rewards-section {
    border-color: rgba(139, 92, 246, 0.3);
}

.points-column .rewards-section {
    border-color: rgba(245, 158, 11, 0.3);
}

.daily-section {
    padding: 1.25rem;
}

.daily-section h2 {
    margin-bottom: 1rem;
}

/* About page rewards link */
.rewards-link {
    color: var(--accent-purple);
    font-weight: 500;
}

.rewards-link:hover {
    color: var(--accent-yellow);
}

/* Mobile - Two column stacks */
@media (max-width: 900px) {
    .rewards-columns {
        grid-template-columns: 1fr;
    }

    .wallet-warning-content {
        flex-direction: column;
        text-align: center;
    }

    .wallet-warning-text {
        align-items: center;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .points-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .history-header,
    .history-row {
        grid-template-columns: 1fr 1fr;
        font-size: 0.85rem;
    }

    .history-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .history-row span:first-child {
        flex: none;
        width: 100%;
    }

    .history-row span:nth-child(5) {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ============================================
   Community Content / Forum Styles
   ============================================ */

/* Forum Page Layout */
.forum-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.forum-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.forum-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.forum-section h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Forum Categories Grid */
.forum-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.forum-category-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
    border-left: 4px solid var(--cat-color, var(--accent-purple));
}

.forum-category-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.category-icon {
    font-size: 1.5rem;
}

.category-info {
    flex: 1;
    min-width: 0;
}

.category-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.category-info p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.category-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Threads List */
.threads-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Thread Card */
.thread-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s;
}

.thread-card {
    cursor: pointer;
}

.thread-card:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--accent-purple);
}

.thread-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 40px;
}

.thread-votes .vote-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    border-radius: 4px;
}

.thread-votes .vote-btn:hover:not(:disabled) {
    background: var(--bg-card);
}

.thread-votes .vote-btn.upvote:hover:not(:disabled),
.thread-votes .vote-btn.upvote.active {
    color: #22c55e;
}

.thread-votes .vote-btn.downvote:hover:not(:disabled),
.thread-votes .vote-btn.downvote.active {
    color: #ef4444;
}

.thread-votes .vote-count {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.thread-content {
    flex: 1;
    min-width: 0;
}

.thread-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.thread-category {
    padding: 0.125rem 0.5rem;
    background: rgba(139, 92, 246, 0.2);
    color: var(--cat-color, var(--accent-purple));
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
}

.thread-category:hover {
    background: rgba(139, 92, 246, 0.3);
}

.thread-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.thread-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.thread-title a:hover {
    color: var(--accent-purple);
}

.thread-preview {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.thread-stats {
    display: flex;
    gap: 1rem;
}

.thread-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Forum Controls */
.forum-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.sort-options {
    display: flex;
    gap: 0.5rem;
}

.sort-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.sort-btn:hover,
.sort-btn.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}

/* Thread Detail Page */
.thread-detail-page {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.thread-detail-header {
    margin-bottom: 1rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--accent-purple);
}

.thread-detail {
    display: flex;
    gap: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.thread-votes-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 50px;
}

.thread-votes-large .vote-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    border-radius: 6px;
}

.thread-votes-large .vote-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
}

.thread-votes-large .vote-btn.upvote:hover:not(:disabled),
.thread-votes-large .vote-btn.upvote.active {
    color: #22c55e;
}

.thread-votes-large .vote-btn.downvote:hover:not(:disabled),
.thread-votes-large .vote-btn.downvote.active {
    color: #ef4444;
}

.thread-votes-large .vote-count {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.thread-main {
    flex: 1;
    min-width: 0;
}

.thread-main .thread-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.thread-main .thread-meta {
    margin-bottom: 1rem;
}

.thread-views {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.thread-views svg {
    opacity: 0.7;
}

.thread-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Reply Form */
.reply-form-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.reply-form-container h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.reply-form textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    resize: vertical;
    margin-bottom: 1rem;
}

.reply-form textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.reply-form .form-actions {
    display: flex;
    justify-content: flex-end;
}

/* Replies Section */
.replies-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.replies-section h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.replies-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Reply Wrapper - contains reply + nested children */
.reply-wrapper {
    display: flex;
    flex-direction: column;
}

/* Reply Item */
.reply-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* Nested Replies */
.nested-replies {
    margin-top: 0.5rem;
    margin-left: 2.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent-purple);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nested-replies .reply-item {
    background: var(--bg-card);
}

.nested-replies .nested-replies {
    border-left-color: var(--border-light);
    margin-left: 1rem;
}

.reply-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 30px;
}

.reply-vote-btn {
    background: none;
    border: none;
    padding: 0.125rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}

.reply-vote-btn:hover:not(:disabled) {
    color: var(--text-primary);
}

.reply-vote-btn.upvote:hover:not(:disabled),
.reply-vote-btn.upvote.active {
    color: #22c55e;
}

.reply-vote-btn.downvote:hover:not(:disabled),
.reply-vote-btn.downvote.active {
    color: #ef4444;
}

.reply-vote-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.reply-content {
    flex: 1;
    min-width: 0;
}

.reply-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.reply-author {
    font-weight: 600;
    color: var(--text-primary);
}

.reply-time {
    color: var(--text-muted);
}

.reply-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.reply-to-btn {
    background: none;
    border: none;
    padding: 0.25rem 0;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.reply-to-btn:hover {
    color: var(--accent-purple);
}

/* Nested replies styles moved above */
.nested-replies-old {
    display: none; /* deprecated */
    gap: 0.5rem;
}

.nested-reply-form {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 8px;
}

.nested-reply-form textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    margin-bottom: 0.75rem;
}

.nested-reply-form .form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Create Thread Page */
.create-thread-page {
    max-width: 700px;
    margin: 0 auto;
}

.create-thread-page .page-header {
    margin-bottom: 1.5rem;
}

.create-thread-page h1 {
    font-size: 1.5rem;
    margin-top: 1rem;
}

.create-thread-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-group select,
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.form-group .char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.create-thread-form .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Category Header Info */
.category-header-info {
    flex: 1;
}

.category-header-info h1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.category-page-header {
    margin-bottom: 2rem;
}

.category-page-header .back-link {
    margin-bottom: 0.5rem;
}

.category-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.category-title-row h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.category-description {
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.page-link {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.page-link:hover {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}

.page-info {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Login Prompt */
.login-prompt {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-prompt a {
    color: var(--accent-purple);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* Bookmarks Page Sections */
.bookmarks-section {
    margin-bottom: 2rem;
}

.bookmarks-section h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Sidebar Community Section */
.sidebar-title-link {
    color: inherit;
    text-decoration: none;
}

.sidebar-title-link:hover {
    color: var(--accent-purple);
}

.category-icon-small {
    font-size: 0.875rem;
    margin-right: 0.25rem;
}

.empty-cats {
    font-size: 0.875rem;
}

/* Content type badge in sidebar */
.content-type-badge {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .forum-categories-grid {
        grid-template-columns: 1fr;
    }

    .forum-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .category-title-row {
        flex-wrap: wrap;
    }

    .thread-card {
        flex-direction: column;
        gap: 0.75rem;
    }

    .thread-votes {
        flex-direction: row;
        justify-content: flex-start;
        min-width: auto;
    }

    .thread-detail {
        flex-direction: column;
        gap: 1rem;
    }

    .thread-votes-large {
        flex-direction: row;
        min-width: auto;
    }

    .nested-replies {
        margin-left: 0.75rem;
        padding-left: 0.75rem;
    }

    .create-thread-form .form-actions {
        flex-direction: column;
    }

    .create-thread-form .form-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Token Search in Create Thread Form
   ============================================ */

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.token-search-wrapper {
    position: relative;
}

.token-search-wrapper input {
    width: 100%;
}

.token-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.token-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.token-option:hover {
    background: var(--bg-card-hover);
}

.token-icon-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.token-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.token-symbol-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 4px;
}

.no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
}

.selected-token {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--accent-purple);
    color: white;
    border-radius: 6px;
    margin-top: 0.5rem;
    width: fit-content;
}

.selected-token .token-icon-small {
    width: 20px;
    height: 20px;
}

.remove-token {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    margin-left: 0.5rem;
    line-height: 1;
    opacity: 0.8;
}

.remove-token:hover {
    opacity: 1;
}

/* ============================================
   Thread Sentiment Bar
   ============================================ */

.thread-sentiment-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.sentiment-token-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sentiment-badges {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sentiment-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.sentiment-badge .badge-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sentiment-badge .badge-value {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.sentiment-badge .badge-value.bullish {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.sentiment-badge .badge-value.bearish {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.sentiment-badge .badge-value.neutral {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-secondary);
}

.sentiment-token-info .token-symbol {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.sentiment-token-info .token-price {
    font-weight: 500;
    color: var(--text-secondary);
}

.sentiment-token-info .token-change {
    font-weight: 600;
    font-size: 0.875rem;
}

.sentiment-token-info .token-change.positive {
    color: #22c55e;
}

.sentiment-token-info .token-change.negative {
    color: #ef4444;
}


/* Community Category Tag */
.community-tag {
    background: #8b5cf6 !important;
}

/* Thread Feed Card in main feed */
.thread-card-feed .card-title a {
    color: var(--text-primary);
}

.thread-card-feed .card-title a:hover {
    color: var(--accent-purple);
}

@media (max-width: 600px) {
    .thread-sentiment-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .sentiment-badges {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================
   Reply Modal
   ============================================ */

.reply-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.reply-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reply-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.reply-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.reply-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.reply-modal-close:hover {
    color: var(--text-primary);
}

.reply-modal-body {
    padding: 1rem 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.reply-context {
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-purple);
}

.reply-modal-body textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 100px;
}

.reply-modal-body textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.reply-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   Wager Modal
   ============================================ */

.wager-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
}

.wager-modal-overlay.active {
    display: flex;
}

.wager-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    position: relative;
}

.wager-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.wager-modal-close:hover {
    color: var(--text-primary);
}

.wager-modal-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.wager-modal-question {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.wager-modal-side {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.wager-modal-side.yes {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 2px solid #22c55e;
}

.wager-modal-side.no {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 2px solid #ef4444;
}

.wager-modal-existing {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.wager-modal-existing .existing-label {
    color: var(--text-secondary);
}

.wager-modal-existing .existing-amount {
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.wager-modal-input {
    margin-bottom: 1.5rem;
}

.wager-modal-input label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.wager-modal-input input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.wager-modal-input input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.wager-balance {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.wager-modal-actions {
    display: flex;
    gap: 1rem;
}

.wager-modal-actions .btn {
    flex: 1;
    padding: 0.75rem;
    font-weight: 600;
}

/* Neon theme wager modal */
[data-theme="neon"] .wager-modal {
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1);
}

[data-theme="neon"] .wager-modal-side.yes {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

[data-theme="neon"] .wager-modal-side.no {
    background: rgba(255, 71, 87, 0.15);
    color: #ff4757;
    border-color: #ff4757;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.3);
}

/* ============================================
   Thread Editing
   ============================================ */

.edit-thread-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.edit-thread-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent-purple);
}

.thread-edited {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.thread-body-edit {
    margin-top: 1rem;
}

.thread-body-edit textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 150px;
}

.thread-body-edit textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
}

.edit-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ============================================
   Neon Matrix Theme Specific Styles
   ============================================ */

/* Neon glow effects */
[data-theme="neon"] .btn-primary:hover {
    background-color: #00ff88;
    color: #0a1419;
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

[data-theme="neon"] .content-card:hover {
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.15);
}

[data-theme="neon"] .nav-link:hover,
[data-theme="neon"] .nav-link.active {
    border-bottom-color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

[data-theme="neon"] .accent-glow {
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4), 0 0 20px rgba(0, 255, 136, 0.2);
}

/* Neon sentiment widget */
[data-theme="neon"] .sentiment-widget {
    border-color: #1a3540;
    background: linear-gradient(180deg, #111f28 0%, #0d1a21 100%);
}

[data-theme="neon"] .sentiment-donut {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

/* ============================================
   Arc Gauge Style (Neon Matrix Theme)
   270-degree arc gauges with mini charts
   ============================================ */

/* Arc gauge container */
.sentiment-arc-gauge {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

/* Arc gauge SVG styling */
.arc-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.arc-gauge-track {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
    stroke-linecap: round;
}

.arc-gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    /* Arc length is ~198 for 270 degrees at r=42 */
    stroke-dasharray: 198;
    /* Calculate offset: 198 - (198 * percentage / 100) */
    stroke-dashoffset: calc(198 - (198 * var(--gauge-percent, 0) / 100));
    transition: stroke-dashoffset 0.6s ease-out;
}

.arc-gauge-fill.bullish {
    stroke: var(--accent-green);
}

.arc-gauge-fill.bearish {
    stroke: var(--accent-red);
}

/* GG Score special styling */
.gg-score-widget {
    border-color: rgba(240, 185, 11, 0.3);
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(240, 185, 11, 0.05) 100%);
}

.gg-score-widget .sentiment-header h3 {
    color: #f0b90b;
}

.arc-gauge-fill.gg-score {
    stroke: #f0b90b;
}

.gg-score-value {
    color: #f0b90b !important;
}

.gg-indicator {
    background-color: #f0b90b !important;
}

.arc-gauge-chart path.gg {
    stroke: #f0b90b;
}

.arc-gauge-chart .chart-area.gg {
    fill: #f0b90b;
}

.gg-breakdown .sentiment-item {
    color: var(--text-secondary);
}

.gg-breakdown .sentiment-item.ai-coming-soon {
    opacity: 0.8;
    font-style: italic;
}

.gg-breakdown .sentiment-item.ai-active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.15));
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    margin-top: 0.25rem;
}

.gg-breakdown .sentiment-item.ai-active .sentiment-label {
    color: #a78bfa;
    font-weight: 500;
    font-size: 0.8rem;
}

.gg-breakdown .ai-indicator {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    animation: ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(139, 92, 246, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 8px rgba(139, 92, 246, 0.8); }
}

/* ============ Login Modal ============ */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.login-modal-overlay.active {
    display: flex;
}

.login-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    position: relative;
    animation: modalSlideIn 0.2s ease;
}

.login-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.login-modal-close:hover {
    color: var(--text-primary);
}

.login-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-modal-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.login-modal-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.login-form-modal .form-group {
    margin-bottom: 1rem;
}

.login-form-modal label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.login-form-modal input {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
}

.login-form-modal input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.btn-block {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
}

.login-modal-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

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

.login-modal-divider span {
    padding: 0 1rem;
}

.login-modal-footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.login-modal-footer a {
    color: var(--accent-primary);
}

.login-modal-footer a:hover {
    text-decoration: underline;
}

.gg-breakdown .sentiment-item.ai-coming-soon .sentiment-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

[data-theme="neon"] .gg-score-widget {
    border-color: rgba(240, 185, 11, 0.4);
    background: linear-gradient(180deg, #111f28 0%, rgba(240, 185, 11, 0.08) 100%);
    box-shadow: 0 0 15px rgba(240, 185, 11, 0.1);
}

[data-theme="neon"] .arc-gauge-fill.gg-score {
    stroke: #f0b90b;
    filter: drop-shadow(0 0 6px rgba(240, 185, 11, 0.6));
}

[data-theme="neon"] .gg-score-value {
    color: #f0b90b !important;
    text-shadow: 0 0 8px rgba(240, 185, 11, 0.5);
}

[data-theme="neon"] .arc-gauge-fill.bullish {
    stroke: #00ff88;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
}

[data-theme="neon"] .arc-gauge-fill.bearish {
    stroke: #ff4757;
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.6));
}

/* Arc gauge center content */
.arc-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.arc-gauge-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0.25rem;
}

.arc-gauge-icon.bullish {
    color: var(--accent-green);
}

.arc-gauge-icon.bearish {
    color: var(--accent-red);
}

[data-theme="neon"] .arc-gauge-icon.bullish {
    color: #00ff88;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.8));
}

[data-theme="neon"] .arc-gauge-icon.bearish {
    color: #ff4757;
    filter: drop-shadow(0 0 4px rgba(255, 71, 87, 0.8));
}

.arc-gauge-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.arc-gauge-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 0.125rem;
}

.arc-gauge-value.positive {
    color: var(--accent-green);
}

.arc-gauge-value.negative {
    color: var(--accent-red);
}

[data-theme="neon"] .arc-gauge-value.positive {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

[data-theme="neon"] .arc-gauge-value.negative {
    color: #ff4757;
    text-shadow: 0 0 8px rgba(255, 71, 87, 0.5);
}

/* Sentiment item total */
.sentiment-item.total .sentiment-indicator {
    background-color: var(--text-muted);
    border-radius: 50%;
}

/* Token display in price breakdown */
.token-display {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.token-display .token-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Mini chart underneath gauge */
.arc-gauge-chart {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 22px;
}

.arc-gauge-chart svg {
    width: 100%;
    height: 100%;
}

.arc-gauge-chart path {
    fill: none;
    stroke: var(--accent-green);
    stroke-width: 1.5;
    opacity: 0.6;
}

.arc-gauge-chart .chart-area {
    fill: var(--accent-green);
    opacity: 0.1;
}

.arc-gauge-chart path.bearish {
    stroke: var(--accent-red);
}

.arc-gauge-chart .chart-area.bearish {
    fill: var(--accent-red);
}

[data-theme="neon"] .arc-gauge-chart path {
    stroke: #00d4aa;
    opacity: 0.8;
}

[data-theme="neon"] .arc-gauge-chart .chart-area {
    fill: #00ff88;
    opacity: 0.15;
}

[data-theme="neon"] .arc-gauge-chart path.bearish {
    stroke: #ff4757;
}

[data-theme="neon"] .arc-gauge-chart .chart-area.bearish {
    fill: #ff4757;
}

/* Neon widget wrapper - side by side gauges */
[data-theme="neon"] .sentiment-widgets-row {
    gap: 0.75rem;
}

[data-theme="neon"] .sentiment-widget {
    padding: 1rem;
}

[data-theme="neon"] .sentiment-header h3 {
    color: #e0f7f4;
    font-size: 0.9rem;
}

/* Neon card hover glow */
[data-theme="neon"] .thread-card:hover {
    background: rgba(0, 255, 136, 0.05);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

[data-theme="neon"] .forum-category-card:hover {
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.15);
}

/* Neon accent colors for badges/tags */
[data-theme="neon"] .thread-category {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
}

[data-theme="neon"] .thread-category:hover {
    background: rgba(0, 255, 136, 0.25);
}

/* Neon scrollbar */
[data-theme="neon"] ::-webkit-scrollbar-thumb {
    background: #1a3540;
}

[data-theme="neon"] ::-webkit-scrollbar-thumb:hover {
    background: #00ff88;
}

/* Neon positive/negative colors */
[data-theme="neon"] .positive,
[data-theme="neon"] .change.positive {
    color: #00ff88;
}

[data-theme="neon"] .negative,
[data-theme="neon"] .change.negative {
    color: #ff4757;
}

/* Neon button glow on hover */
[data-theme="neon"] .sort-btn:hover,
[data-theme="neon"] .sort-btn.active {
    background: #00ff88;
    color: #0a1419;
    border-color: #00ff88;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* Neon form inputs */
[data-theme="neon"] .form-group input:focus,
[data-theme="neon"] .form-group select:focus,
[data-theme="neon"] .form-group textarea:focus {
    border-color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

/* Neon wallet button */
[data-theme="neon"] .wallet-btn {
    border-color: #00d4aa;
}

[data-theme="neon"] .wallet-btn:hover {
    background-color: #00d4aa;
    border-color: #00d4aa;
    color: #0a1419;
    box-shadow: 0 0 12px rgba(0, 212, 170, 0.5);
}

[data-theme="neon"] .wallet-btn.connected {
    background-color: #00ff88;
    border-color: #00ff88;
    color: #0a1419;
}

/* Neon points badge */
[data-theme="neon"] .points-badge {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 212, 170, 0.15));
    border-color: rgba(0, 255, 136, 0.3);
}

[data-theme="neon"] .points-badge:hover {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

[data-theme="neon"] .points-badge svg,
[data-theme="neon"] .points-value {
    color: #00ff88;
}

/* Neon leaderboard */
[data-theme="neon"] .leaderboard-points,
[data-theme="neon"] .lb-points,
[data-theme="neon"] .contributor-row .col-points,
[data-theme="neon"] .points-amount {
    color: #00ff88;
}

/* ============ Infinite Scroll ============ */
.feed-sentinel {
    height: 1px;
    width: 100%;
}

.feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.feed-loading.hidden {
    display: none;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.feed-end {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.feed-end.hidden {
    display: none;
}

/* Theme variants for loading spinner */
[data-theme="galaxy"] .loading-spinner {
    border-top-color: #a855f7;
}

[data-theme="neon"] .loading-spinner {
    border-top-color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

[data-theme="light"] .loading-spinner {
    border-color: #e5e7eb;
    border-top-color: #6366f1;
}

/* ============ Predictions ============ */
.predictions-section {
    margin-bottom: 2rem;
}

.predictions-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.predictions-section .section-header h2 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-primary);
}

.predictions-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.prediction-mini-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s;
    position: relative;
    border: none;
}

/* Gradient border effect using pseudo-element */
.prediction-mini-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: var(--card-gradient-border, var(--border-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.prediction-mini-card:hover::before {
    opacity: 1;
}

/* Theme-specific gradient borders */

/* Classic - Gold to Purple */
:root .prediction-mini-card::before,
[data-theme="classic"] .prediction-mini-card::before {
    background: linear-gradient(135deg, #f0b90b 0%, #8b5cf6 50%, #f0b90b 100%);
}

/* Galaxy - Purple to Violet */
[data-theme="galaxy"] .prediction-mini-card::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%);
}

/* Light - Purple to Blue */
[data-theme="light"] .prediction-mini-card::before {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #3b82f6 100%);
}

/* Neon - Green to Cyan */
[data-theme="neon"] .prediction-mini-card::before {
    background: linear-gradient(135deg, #00ff88 0%, #00d4aa 50%, #00ffff 100%);
}

/* Synthwave - Purple to Pink to Cyan */
[data-theme="synthwave"] .prediction-mini-card::before {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #0EA5E9 100%);
}

/* Midnight - Cyan to Blue to Teal */
[data-theme="midnight"] .prediction-mini-card::before {
    background: linear-gradient(135deg, #00d4ff 0%, #38bdf8 50%, #2dd4bf 100%);
}

/* For horizontal scroll layout (if still used elsewhere) */
.predictions-scroll .prediction-mini-card {
    flex: 0 0 200px;
}

.prediction-mini-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.prediction-mini-title {
    font-size: 0.875rem;
    margin: 0.5rem 0;
    line-height: 1.3;
}

.prediction-mini-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.prediction-mini-chart {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
    height: 80px;
}

.mini-arc-svg {
    width: 100%;
    max-width: 120px;
    height: auto;
}

.mini-arc-svg .arc-yes {
    transition: stroke-dasharray 0.3s ease;
}

.mini-arc-center {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mini-percent {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--success-color, #22c55e);
    line-height: 1;
}

.mini-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Neon theme glow for mini arc */
[data-theme="neon"] .mini-arc-svg .arc-yes {
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.6));
}

[data-theme="neon"] .mini-percent {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.prediction-mini-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 15px;
}

.mini-wager-btn {
    flex: 0 0 35%;
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mini-wager-btn.yes {
    background: #22c55e;
    color: #fff;
}

.mini-wager-btn.yes:hover:not(:disabled) {
    background: #16a34a;
    transform: translateY(-1px);
}

.mini-wager-btn.no {
    background: #ef4444;
    color: #fff;
}

.mini-wager-btn.no:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

.mini-wager-btn:disabled,
.mini-wager-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.mini-wager-btn.wagered {
    position: relative;
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.mini-wager-btn.yes.wagered {
    background: #16a34a;
}

.mini-wager-btn.no.wagered {
    background: #dc2626;
}

.user-wager-info {
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    padding: 0.25rem 0;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.user-wager-info strong {
    color: var(--accent-primary);
}

.prediction-resolved-badge {
    text-align: center;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.prediction-resolved-badge.resolved_yes {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.prediction-resolved-badge.resolved_no {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Neon theme wager buttons */
[data-theme="neon"] .mini-wager-btn.yes {
    background: #00ff88;
    color: #0a1419;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

[data-theme="neon"] .mini-wager-btn.yes:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    transform: translateY(-1px);
}

[data-theme="neon"] .mini-wager-btn.no {
    background: #ff4757;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.3);
}

[data-theme="neon"] .mini-wager-btn.no:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
    transform: translateY(-1px);
}

.prediction-mini-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.prediction-mini-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.75rem 0 0.5rem;
}

.prediction-mini-bottom {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.prediction-mini-bottom .share-btn-card,
.prediction-mini-bottom .bookmark-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prediction-mini-bottom .share-btn-card:hover,
.prediction-mini-bottom .bookmark-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.prediction-mini-bottom .bookmark-btn.bookmarked {
    color: var(--text-primary);
}

.prediction-mini-bottom .bookmark-btn.bookmarked svg {
    fill: currentColor;
}

/* 3x2 Grid for featured predictions on home page */
.predictions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.predictions-grid .prediction-mini-card {
    flex: none;
    width: 100%;
}

@media (max-width: 900px) {
    .predictions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .predictions-grid {
        grid-template-columns: 1fr;
    }
}

.prediction-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s;
    position: relative;
    border: none;
}

/* Gradient border effect using pseudo-element */
.prediction-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: var(--card-gradient-border, var(--border-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.prediction-card:hover::before {
    opacity: 1;
}

/* Theme-specific gradient borders for prediction-card */
:root .prediction-card::before,
[data-theme="classic"] .prediction-card::before {
    background: linear-gradient(135deg, #f0b90b 0%, #8b5cf6 50%, #f0b90b 100%);
}

[data-theme="galaxy"] .prediction-card::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%);
}

[data-theme="light"] .prediction-card::before {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #3b82f6 100%);
}

[data-theme="neon"] .prediction-card::before {
    background: linear-gradient(135deg, #00ff88 0%, #00d4aa 50%, #00ffff 100%);
}

[data-theme="synthwave"] .prediction-card::before {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #0EA5E9 100%);
}

[data-theme="midnight"] .prediction-card::before {
    background: linear-gradient(135deg, #00d4ff 0%, #38bdf8 50%, #2dd4bf 100%);
}

.prediction-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.prediction-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.token-badge {
    background: #a855f7;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.token-badge.small {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
}

.token-badge.large {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.prediction-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.category-badge {
    background: #3b82f6;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.category-badge.small {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
}

/* Neon theme - green token badge */
[data-theme="neon"] .token-badge {
    background: #00ff88;
    color: #0a1419;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Galaxy theme - purple token badge */
[data-theme="galaxy"] .token-badge {
    background: #a855f7;
    color: #fff;
}

/* Classic theme - purple token badge */
[data-theme="classic"] .token-badge {
    background: #a855f7;
    color: #fff;
}

/* Light theme - purple token badge */
[data-theme="light"] .token-badge {
    background: #9333ea;
    color: #fff;
}

.featured-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.bookmark-prediction-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.bookmark-prediction-btn:hover,
.bookmark-prediction-btn.active {
    color: var(--accent-primary);
}

.prediction-title {
    font-size: 1rem;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.prediction-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.prediction-arc-chart {
    position: relative;
    width: 120px;
    height: 70px;
    margin: 0 auto 1rem;
}

.arc-svg {
    width: 100%;
    height: 100%;
}

.arc-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.arc-center .yes-percent {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--success-color, #22c55e);
}

.arc-center .arc-label {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.prediction-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.wager-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.wager-btn:hover:not(:disabled) {
    border-color: var(--accent-primary);
}

.wager-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wager-btn.yes-btn:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    color: #22c55e;
}

.wager-btn.no-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.wager-amount {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.resolved-badge {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
}

.resolved-badge.resolved_yes {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.resolved-badge.resolved_no {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.prediction-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.total-pool {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Countdown Timer */
.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.countdown-timer svg {
    opacity: 0.7;
    flex-shrink: 0;
}

.countdown-timer.warning {
    color: var(--accent-primary);
}

.countdown-timer.warning svg {
    opacity: 1;
}

.countdown-timer.urgent {
    color: var(--accent-red, #ef4444);
    animation: pulse-urgent 1s ease-in-out infinite;
}

.countdown-timer.urgent svg {
    opacity: 1;
}

.countdown-timer.ended {
    color: var(--text-muted);
}

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.end-date {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.wager-result {
    margin-top: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.wager-result.won {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.wager-result.lost {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Wager Modal */
.wager-modal {
    max-width: 400px;
}

.wager-question {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.wager-odds {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.odds-side {
    flex: 1;
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-surface);
}

.odds-side.yes-side {
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.odds-side.no-side {
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.odds-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.odds-percent {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.yes-side .odds-percent { color: #22c55e; }
.no-side .odds-percent { color: #ef4444; }

.odds-pool {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wager-side-select {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.side-btn {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.side-btn:hover:not(:disabled) {
    border-color: var(--text-secondary);
}

.side-btn.active.yes-btn {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
}

.side-btn.active.no-btn {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

.side-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wager-amount-input {
    margin-bottom: 1rem;
}

.wager-amount-input label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.wager-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1rem;
}

.balance-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.wager-preview {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--bg-surface);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.existing-wager-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 1rem;
}

/* ============ Airdrops ============ */
.airdrops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.airdrop-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s;
}

.airdrop-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.airdrop-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.airdrop-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.airdrop-icon-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.airdrop-title-col {
    flex: 1;
    min-width: 0;
}

.airdrop-name {
    font-size: 1rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airdrop-name a {
    color: var(--text-primary);
    text-decoration: none;
}

.airdrop-project {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.airdrop-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.airdrop-status.status-upcoming {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.airdrop-status.status-active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.airdrop-status.status-ended {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.airdrop-token {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.estimated-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.airdrop-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.airdrop-chains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.chain-badge {
    padding: 0.25rem 0.5rem;
    background: var(--bg-surface);
    border-radius: 4px;
    font-size: 0.625rem;
    color: var(--text-secondary);
}

.airdrop-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.airdrop-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.interest-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.airdrop-actions {
    display: flex;
    gap: 0.5rem;
}

.track-airdrop-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.track-airdrop-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.track-airdrop-btn.active {
    color: var(--text-primary);
}

.track-airdrop-btn.active svg {
    fill: currentColor;
}

.complete-airdrop-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.complete-airdrop-btn.completed {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
}

.airdrop-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.airdrop-link:hover {
    text-decoration: underline;
}

/* Airdrops Widget in Sidebar */
.airdrops-widget .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.airdrops-widget h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin: 0;
}

.airdrops-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.airdrop-list-item {
    margin-bottom: 0.5rem;
}

.airdrop-list-item a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.airdrop-list-item a:hover {
    background: var(--bg-surface);
}

.airdrop-mini-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.airdrop-list-info {
    flex: 1;
    min-width: 0;
}

.airdrop-list-name {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airdrop-list-project {
    display: block;
    font-size: 0.625rem;
    color: var(--text-muted);
}

.airdrop-list-status {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* ============ Portfolio ============ */
.portfolio-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.portfolio-total {
    display: flex;
    flex-direction: column;
}

.total-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.total-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.total-change {
    font-size: 0.875rem;
}

.total-change.positive { color: #22c55e; }
.total-change.negative { color: #ef4444; }

.chain-breakdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.chain-breakdown h3 {
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

.chain-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chain-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chain-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.chain-name {
    color: var(--text-primary);
}

.chain-value {
    color: var(--text-secondary);
}

.chain-bar {
    height: 8px;
    background: var(--bg-surface);
    border-radius: 4px;
    overflow: hidden;
}

.chain-bar-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s;
}

.holdings-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.holdings-section h3 {
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

.holdings-table {
    width: 100%;
    border-collapse: collapse;
}

.holdings-table th,
.holdings-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.holdings-table th {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.asset-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.asset-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.asset-symbol {
    font-weight: 600;
}

.change-cell.positive { color: #22c55e; }
.change-cell.negative { color: #ef4444; }

.wallets-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.wallets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.wallets-header h3 {
    font-size: 1rem;
    margin: 0;
}

.wallets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wallet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-surface);
    border-radius: 8px;
}

.wallet-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wallet-chain {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
}

.wallet-chain.chain-ethereum { background: rgba(98, 126, 234, 0.2); color: #627eea; }
.wallet-chain.chain-polygon { background: rgba(130, 71, 229, 0.2); color: #8247e5; }
.wallet-chain.chain-arbitrum { background: rgba(40, 160, 240, 0.2); color: #28a0f0; }
.wallet-chain.chain-base { background: rgba(0, 82, 255, 0.2); color: #0052ff; }
.wallet-chain.chain-optimism { background: rgba(255, 4, 32, 0.2); color: #ff0420; }
.wallet-chain.chain-avalanche { background: rgba(232, 65, 66, 0.2); color: #e84142; }
.wallet-chain.chain-bsc { background: rgba(240, 185, 11, 0.2); color: #f0b90b; }
.wallet-chain.chain-fantom { background: rgba(25, 105, 255, 0.2); color: #1969ff; }
.wallet-chain.chain-cronos { background: rgba(0, 45, 116, 0.2); color: #4a8bff; }
.wallet-chain.chain-gnosis { background: rgba(4, 121, 91, 0.2); color: #04795b; }
.wallet-chain.chain-celo { background: rgba(252, 255, 82, 0.2); color: #a8ab00; }
.wallet-chain.chain-moonbeam { background: rgba(83, 203, 201, 0.2); color: #53cbc9; }
.wallet-chain.chain-zksync { background: rgba(140, 141, 252, 0.2); color: #8c8dfc; }
.wallet-chain.chain-linea { background: rgba(97, 223, 255, 0.2); color: #61dfff; }
.wallet-chain.chain-scroll { background: rgba(255, 238, 218, 0.3); color: #d4a574; }
.wallet-chain.chain-mantle { background: rgba(0, 0, 0, 0.2); color: #65b3ae; }
.wallet-chain.chain-blast { background: rgba(252, 252, 3, 0.2); color: #a8a800; }
.wallet-chain.chain-mode { background: rgba(223, 254, 0, 0.2); color: #9ab300; }
.wallet-chain.chain-zora { background: rgba(91, 91, 214, 0.2); color: #5b5bd6; }

.wallet-address {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.wallet-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.primary-badge {
    padding: 0.125rem 0.375rem;
    background: var(--accent-primary);
    color: #fff;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
}

.remove-wallet-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.remove-wallet-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.no-portfolio .empty-state {
    text-align: center;
    padding: 3rem;
}

.no-portfolio .empty-state svg {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Add Wallet Modal */
.add-wallet-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.form-select,
.form-input {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent-primary);
}

/* Chain Connect Modal */
.modal-lg {
    max-width: 600px;
}

.modal-subtitle {
    color: var(--text-secondary);
    margin: -0.5rem 0 1.5rem 0;
    font-size: 0.875rem;
}

.chain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
}

.chain-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.chain-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.chain-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chain-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
}

.chain-card-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

.modal-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

/* Scrollbar styling for chain grid */
.chain-grid::-webkit-scrollbar {
    width: 6px;
}

.chain-grid::-webkit-scrollbar-track {
    background: var(--bg-surface);
    border-radius: 3px;
}

.chain-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chain-grid::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============ Common Page Elements ============ */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.page-description {
    color: var(--text-secondary);
    margin: 0;
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.filter-tab:hover {
    border-color: var(--text-secondary);
}

.filter-tab.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #000;
}

.filter-tabs.secondary {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

.filter-tabs.secondary .filter-tab {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.filter-tabs.secondary .filter-tab:hover {
    border-bottom-color: var(--text-muted);
}

.filter-tabs.secondary .filter-tab.active {
    background: transparent;
    border-bottom-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Theme-specific filter tab active states */
[data-theme="neon"] .filter-tab.active {
    background: #00ff88;
    border-color: #00ff88;
    color: #0a1419;
}

[data-theme="galaxy"] .filter-tab.active {
    background: #a855f7;
    border-color: #a855f7;
    color: #ffffff;
}

/* ============================================
   Synthwave Theme Styles
   Retro neon purple/cyan/pink aesthetic
   ============================================ */

[data-theme="synthwave"] .tab-btn {
    background-color: #1a1a2e;
    color: #b0b0c0;
    border-color: #2a2a3e;
}

[data-theme="synthwave"] .tab-btn:hover {
    background-color: #252542;
    color: #ffffff;
}

[data-theme="synthwave"] .tab-btn.active {
    background-color: #7C3AED;
    color: #ffffff !important;
    border-color: #7C3AED;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5), 0 0 20px rgba(236, 72, 153, 0.2);
}

[data-theme="synthwave"] .btn-primary:hover {
    background-color: #7C3AED;
    color: #ffffff;
    border-color: #7C3AED;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.6), 0 0 25px rgba(236, 72, 153, 0.3);
}

[data-theme="synthwave"] .content-card:hover {
    border-color: #7C3AED;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2), 0 0 30px rgba(236, 72, 153, 0.1);
}

[data-theme="synthwave"] .nav-link:hover,
[data-theme="synthwave"] .nav-link.active {
    border-bottom-color: #7C3AED;
    text-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}

[data-theme="synthwave"] .accent-glow {
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5), 0 0 20px rgba(236, 72, 153, 0.3);
}

/* Synthwave sentiment widget */
[data-theme="synthwave"] .sentiment-widget {
    border-color: #2a2a3e;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f0f 100%);
}

[data-theme="synthwave"] .sentiment-donut {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

/* Synthwave arc gauges */
[data-theme="synthwave"] .arc-gauge-fill.bullish {
    stroke: #0EA5E9;
    filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.7));
}

[data-theme="synthwave"] .arc-gauge-fill.bearish {
    stroke: #EC4899;
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.7));
}

[data-theme="synthwave"] .arc-gauge-icon.bullish {
    color: #0EA5E9;
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.8));
}

[data-theme="synthwave"] .arc-gauge-icon.bearish {
    color: #EC4899;
    filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.8));
}

[data-theme="synthwave"] .arc-gauge-value.positive {
    color: #0EA5E9;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
}

[data-theme="synthwave"] .arc-gauge-value.negative {
    color: #EC4899;
    text-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

[data-theme="synthwave"] .arc-gauge-chart path {
    stroke: #0EA5E9;
    opacity: 0.8;
}

[data-theme="synthwave"] .arc-gauge-chart .chart-area {
    fill: #7C3AED;
    opacity: 0.2;
}

[data-theme="synthwave"] .arc-gauge-chart path.bearish {
    stroke: #EC4899;
}

[data-theme="synthwave"] .arc-gauge-chart .chart-area.bearish {
    fill: #EC4899;
}

/* Synthwave GG Score widget */
[data-theme="synthwave"] .gg-score-widget {
    border-color: rgba(124, 58, 237, 0.4);
    background: linear-gradient(180deg, #1a1a2e 0%, rgba(124, 58, 237, 0.1) 100%);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.15);
}

[data-theme="synthwave"] .arc-gauge-fill.gg-score {
    stroke: #7C3AED;
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.7));
}

[data-theme="synthwave"] .gg-score-value {
    color: #7C3AED !important;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
}

/* Synthwave card hover glow */
[data-theme="synthwave"] .thread-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: #7C3AED;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.15), 0 0 25px rgba(236, 72, 153, 0.1);
}

[data-theme="synthwave"] .forum-category-card:hover {
    border-color: #7C3AED;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

/* Synthwave accent colors for badges/tags */
[data-theme="synthwave"] .thread-category {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

[data-theme="synthwave"] .thread-category:hover {
    background: rgba(124, 58, 237, 0.35);
}

/* Synthwave scrollbar */
[data-theme="synthwave"] ::-webkit-scrollbar-thumb {
    background: #2a2a3e;
}

[data-theme="synthwave"] ::-webkit-scrollbar-thumb:hover {
    background: #7C3AED;
}

/* Synthwave positive/negative colors */
[data-theme="synthwave"] .positive,
[data-theme="synthwave"] .change.positive {
    color: #0EA5E9;
}

[data-theme="synthwave"] .negative,
[data-theme="synthwave"] .change.negative {
    color: #EC4899;
}

/* Synthwave button glow on hover */
[data-theme="synthwave"] .sort-btn:hover,
[data-theme="synthwave"] .sort-btn.active {
    background: #7C3AED;
    color: #ffffff;
    border-color: #7C3AED;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

/* Synthwave form inputs */
[data-theme="synthwave"] .form-group input:focus,
[data-theme="synthwave"] .form-group select:focus,
[data-theme="synthwave"] .form-group textarea:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
}

/* Synthwave wallet button */
[data-theme="synthwave"] .wallet-btn {
    border-color: #0EA5E9;
}

[data-theme="synthwave"] .wallet-btn:hover {
    background-color: #0EA5E9;
    border-color: #0EA5E9;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.6);
}

[data-theme="synthwave"] .wallet-btn.connected {
    background-color: #7C3AED;
    border-color: #7C3AED;
    color: #ffffff;
}

/* Synthwave points badge */
[data-theme="synthwave"] .points-badge {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.15));
    border-color: rgba(124, 58, 237, 0.4);
}

[data-theme="synthwave"] .points-badge:hover {
    border-color: #7C3AED;
    background: rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

[data-theme="synthwave"] .points-badge svg,
[data-theme="synthwave"] .points-value {
    color: #a78bfa;
}

/* Synthwave leaderboard */
[data-theme="synthwave"] .leaderboard-points,
[data-theme="synthwave"] .lb-points,
[data-theme="synthwave"] .contributor-row .col-points,
[data-theme="synthwave"] .points-amount {
    color: #a78bfa;
}

/* Synthwave loading spinner */
[data-theme="synthwave"] .loading-spinner {
    border-top-color: #7C3AED;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

/* Synthwave prediction cards */
[data-theme="synthwave"] .mini-arc-svg .arc-yes {
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.7));
}

[data-theme="synthwave"] .mini-percent {
    color: #0EA5E9;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
}

[data-theme="synthwave"] .mini-wager-btn.yes {
    background: #0EA5E9;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

[data-theme="synthwave"] .mini-wager-btn.yes:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6);
    transform: translateY(-1px);
}

[data-theme="synthwave"] .mini-wager-btn.no {
    background: #EC4899;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

[data-theme="synthwave"] .mini-wager-btn.no:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
    transform: translateY(-1px);
}

/* Synthwave token badge */
[data-theme="synthwave"] .token-badge {
    background: #7C3AED;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}

/* Synthwave filter tabs */
[data-theme="synthwave"] .filter-tab.active {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #ffffff;
}

/* Synthwave wager modal */
[data-theme="synthwave"] .wager-modal {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.15);
}

[data-theme="synthwave"] .wager-modal-side.yes {
    background: rgba(14, 165, 233, 0.15);
    color: #0EA5E9;
    border-color: #0EA5E9;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
}

[data-theme="synthwave"] .wager-modal-side.no {
    background: rgba(236, 72, 153, 0.15);
    color: #EC4899;
    border-color: #EC4899;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
}

/* Synthwave header and sidebar - match card color */
[data-theme="synthwave"] .header {
    background-color: #1a1a2e;
    border-bottom: 1px solid #2a2a3e;
}

[data-theme="synthwave"] .left-sidebar {
    background-color: #1a1a2e;
    border-right: 1px solid #2a2a3e;
}

/* ============================================
   Midnight Theme Styles
   Icy arctic blue with frost glow
   ============================================ */

[data-theme="midnight"] .tab-btn {
    background-color: #0f172a;
    color: #94a3b8;
    border-color: #1e3a5f;
}

[data-theme="midnight"] .tab-btn:hover {
    background-color: #1e293b;
    color: #e2e8f0;
}

[data-theme="midnight"] .tab-btn.active {
    background-color: #00d4ff;
    color: #040712 !important;
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6), 0 0 25px rgba(0, 212, 255, 0.3);
}

[data-theme="midnight"] .btn-primary:hover {
    background-color: #00d4ff;
    color: #040712;
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.7), 0 0 30px rgba(0, 212, 255, 0.4);
}

[data-theme="midnight"] .content-card:hover {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
}

[data-theme="midnight"] .nav-link:hover,
[data-theme="midnight"] .nav-link.active {
    border-bottom-color: #00d4ff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
}

[data-theme="midnight"] .accent-glow {
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6), 0 0 25px rgba(0, 212, 255, 0.3);
}

/* Midnight header and sidebar - match card color */
[data-theme="midnight"] .header {
    background-color: #0f172a;
    border-bottom: 1px solid #1e3a5f;
}

[data-theme="midnight"] .left-sidebar {
    background-color: #0f172a;
    border-right: 1px solid #1e3a5f;
}

/* Midnight sentiment widget */
[data-theme="midnight"] .sentiment-widget {
    border-color: #1e3a5f;
    background: linear-gradient(180deg, #0f172a 0%, #040712 100%);
}

[data-theme="midnight"] .sentiment-donut {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.35);
}

/* Midnight arc gauges */
[data-theme="midnight"] .arc-gauge-fill.bullish {
    stroke: #2dd4bf;
    filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.8));
}

[data-theme="midnight"] .arc-gauge-fill.bearish {
    stroke: #ff6b6b;
    filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.8));
}

[data-theme="midnight"] .arc-gauge-icon.bullish {
    color: #2dd4bf;
    filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.9));
}

[data-theme="midnight"] .arc-gauge-icon.bearish {
    color: #ff6b6b;
    filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.9));
}

[data-theme="midnight"] .arc-gauge-value.positive {
    color: #2dd4bf;
    text-shadow: 0 0 8px rgba(45, 212, 191, 0.7);
}

[data-theme="midnight"] .arc-gauge-value.negative {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.7);
}

[data-theme="midnight"] .arc-gauge-chart path {
    stroke: #38bdf8;
    opacity: 0.8;
}

[data-theme="midnight"] .arc-gauge-chart .chart-area {
    fill: #00d4ff;
    opacity: 0.2;
}

[data-theme="midnight"] .arc-gauge-chart path.bearish {
    stroke: #ff6b6b;
}

[data-theme="midnight"] .arc-gauge-chart .chart-area.bearish {
    fill: #ff6b6b;
}

/* Midnight GG Score widget */
[data-theme="midnight"] .gg-score-widget {
    border-color: rgba(0, 212, 255, 0.4);
    background: linear-gradient(180deg, #0f172a 0%, rgba(0, 212, 255, 0.1) 100%);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

[data-theme="midnight"] .arc-gauge-fill.gg-score {
    stroke: #00d4ff;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8));
}

[data-theme="midnight"] .gg-score-value {
    color: #00d4ff !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.7);
}

/* Midnight card hover glow */
[data-theme="midnight"] .thread-card:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

[data-theme="midnight"] .forum-category-card:hover {
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.25);
}

/* Midnight accent colors for badges/tags */
[data-theme="midnight"] .thread-category {
    background: rgba(0, 212, 255, 0.2);
    color: #38bdf8;
}

[data-theme="midnight"] .thread-category:hover {
    background: rgba(0, 212, 255, 0.35);
}

/* Midnight scrollbar */
[data-theme="midnight"] ::-webkit-scrollbar-thumb {
    background: #1e3a5f;
}

[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
    background: #00d4ff;
}

/* Midnight positive/negative colors */
[data-theme="midnight"] .positive,
[data-theme="midnight"] .change.positive {
    color: #2dd4bf;
}

[data-theme="midnight"] .negative,
[data-theme="midnight"] .change.negative {
    color: #ff6b6b;
}

/* Midnight button glow on hover */
[data-theme="midnight"] .sort-btn:hover,
[data-theme="midnight"] .sort-btn.active {
    background: #00d4ff;
    color: #040712;
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}

/* Midnight form inputs */
[data-theme="midnight"] .form-group input:focus,
[data-theme="midnight"] .form-group select:focus,
[data-theme="midnight"] .form-group textarea:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.35);
}

/* Midnight wallet button */
[data-theme="midnight"] .wallet-btn {
    border-color: #00d4ff;
}

[data-theme="midnight"] .wallet-btn:hover {
    background-color: #00d4ff;
    border-color: #00d4ff;
    color: #040712;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
}

[data-theme="midnight"] .wallet-btn.connected {
    background-color: #00d4ff;
    border-color: #00d4ff;
    color: #040712;
}

/* Midnight points badge */
[data-theme="midnight"] .points-badge {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(45, 212, 191, 0.15));
    border-color: rgba(0, 212, 255, 0.4);
}

[data-theme="midnight"] .points-badge:hover {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

[data-theme="midnight"] .points-badge svg,
[data-theme="midnight"] .points-value {
    color: #00d4ff;
}

/* Midnight leaderboard */
[data-theme="midnight"] .leaderboard-points,
[data-theme="midnight"] .lb-points,
[data-theme="midnight"] .contributor-row .col-points,
[data-theme="midnight"] .points-amount {
    color: #00d4ff;
}

/* Midnight loading spinner */
[data-theme="midnight"] .loading-spinner {
    border-top-color: #00d4ff;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* Midnight prediction cards */
[data-theme="midnight"] .mini-arc-svg .arc-yes {
    filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.7));
}

[data-theme="midnight"] .mini-percent {
    color: #2dd4bf;
    text-shadow: 0 0 8px rgba(45, 212, 191, 0.6);
}

[data-theme="midnight"] .mini-wager-btn.yes {
    background: #2dd4bf;
    color: #040712;
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
}

[data-theme="midnight"] .mini-wager-btn.yes:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.6);
    transform: translateY(-1px);
}

[data-theme="midnight"] .mini-wager-btn.no {
    background: #ff6b6b;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.4);
}

[data-theme="midnight"] .mini-wager-btn.no:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
    transform: translateY(-1px);
}

/* Midnight token badge */
[data-theme="midnight"] .token-badge {
    background: #00d4ff;
    color: #040712;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

/* Midnight filter tabs */
[data-theme="midnight"] .filter-tab.active {
    background: #00d4ff;
    border-color: #00d4ff;
    color: #040712;
}

/* Midnight wager modal */
[data-theme="midnight"] .wager-modal {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
}

[data-theme="midnight"] .wager-modal-side.yes {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
    border-color: #2dd4bf;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.3);
}

[data-theme="midnight"] .wager-modal-side.no {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border-color: #ff6b6b;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

[data-theme="classic"] .filter-tab.active {
    background: #f0b90b;
    border-color: #f0b90b;
    color: #000000;
}

[data-theme="light"] .filter-tab.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

.active-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border-radius: 6px;
    font-size: 0.875rem;
}

.clear-filter {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
}

.clear-filter:hover {
    color: #ef4444;
}

.view-all-link {
    font-size: 0.875rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.view-all-link:hover {
    text-decoration: underline;
}

.back-link {
    margin-bottom: 1rem;
}

.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-link a:hover {
    color: var(--text-primary);
}

/* Prediction Detail Page */
.prediction-detail-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.status-active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-badge.status-closed,
.status-badge.status-resolved_yes,
.status-badge.status-resolved_no {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.prediction-detail-title {
    font-size: 1.125rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.prediction-description {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: 0.85rem;
}

.prediction-image {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.prediction-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.odds-display {
    display: flex;
    gap: 0.5rem;
}

.yes-odds { color: #22c55e; font-weight: 600; }
.no-odds { color: #ef4444; font-weight: 600; }

.wager-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.wager-section h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.side-select-large {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.side-btn-large {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s;
}

.side-btn-large:hover {
    border-color: var(--text-secondary);
}

.side-btn-large.active.yes-btn {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.side-btn-large.active.no-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.side-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.yes-btn .side-name { color: #22c55e; }
.no-btn .side-name { color: #ef4444; }

.side-pool {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.amount-section {
    margin-bottom: 0.75rem;
}

.amount-section label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.wager-input-large {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1rem;
}

.balance-info {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.payout-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--bg-surface);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.payout-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.btn-large {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

.existing-wager {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.existing-wager h4 {
    margin: 0 0 0.375rem 0;
    font-size: 0.8rem;
}

.yes-text { color: #22c55e; }
.no-text { color: #ef4444; }

.wager-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.resolution-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.resolution-section h3 {
    margin: 0 0 1rem 0;
}

.resolution-result {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.resolution-result.yes {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.resolution-result.no {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.user-result {
    padding: 1rem;
    border-radius: 8px;
}

.user-result.won {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.user-result.lost {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Prediction Detail Card */
.prediction-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.category-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
}

.status-dot.active {
    background: #22c55e;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Detail Arc Graph */
.prediction-arc-detail {
    position: relative;
    width: 120px;
    height: 70px;
    margin: 1rem auto 0.5rem;
}

.arc-svg-detail {
    width: 100%;
    height: 100%;
}

.arc-center-detail {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.arc-percent-detail {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.arc-label-detail {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #22c55e;
    text-transform: uppercase;
}

/* Prediction Stats Row */
.prediction-stats-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-item .stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
}

.stat-item .stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Prediction End Date */
.prediction-end-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--bg-surface);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.prediction-end-date svg {
    width: 14px;
    height: 14px;
}

.countdown {
    color: var(--accent-primary);
    font-weight: 500;
}

/* Detail Action Buttons */
.prediction-detail-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.share-btn-detail,
.bookmark-btn-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn-detail svg,
.bookmark-btn-detail svg {
    width: 14px;
    height: 14px;
}

.share-btn-detail:hover,
.bookmark-btn-detail:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.bookmark-btn-detail.bookmarked {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Full Width Button */
.btn-full {
    width: 100%;
}

/* Existing Wager Updated */
.existing-wager-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #22c55e;
    margin-bottom: 0.5rem;
}

.existing-wager-header svg {
    width: 16px;
    height: 16px;
}

.existing-wager-header h4 {
    margin: 0;
    font-size: 0.85rem;
}

.existing-wager-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9rem;
}

.wager-amount {
    font-weight: 700;
    color: var(--text-primary);
}

.wager-side {
    font-weight: 600;
}

.wager-side.yes { color: #22c55e; }
.wager-side.no { color: #ef4444; }

/* Login Prompt Card */
.login-prompt-card {
    text-align: center;
    padding: 1.25rem;
}

.login-prompt-card svg {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    width: 20px;
    height: 20px;
}

.login-prompt-card p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.login-signup-link {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.login-signup-link a {
    color: var(--accent-primary);
}

/* Resolution Section Updated */
.resolution-header {
    margin-bottom: 0.75rem;
}

.resolution-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.resolution-result.yes {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.resolution-result.no {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.user-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 8px;
}

.user-result.won {
    background: rgba(34, 197, 94, 0.1);
}

.user-result.lost {
    background: rgba(239, 68, 68, 0.1);
}

.result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-icon svg {
    width: 18px;
    height: 18px;
}

.result-icon.won { color: #22c55e; }
.result-icon.lost { color: #ef4444; }

.result-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.result-amount {
    font-weight: 700;
    font-size: 0.95rem;
}

.user-result.won .result-amount { color: #22c55e; }
.user-result.lost .result-amount { color: #ef4444; }

/* Payout Preview Updated */
.payout-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-surface);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.payout-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.payout-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.payout-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.error-message {
    color: #ef4444;
    font-size: 0.8rem;
    text-align: center;
}

.login-prompt {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
}

.login-prompt a {
    color: var(--accent-primary);
}

/* Rewards Page - Prediction Stats */
.predictions-stats-section h2 {
    display: flex;
    align-items: center;
}

.points-breakdown {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breakdown-row:last-child {
    border-bottom: none;
}

.breakdown-row.total {
    border-top: 2px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    font-weight: 700;
}

.breakdown-label {
    color: var(--text-secondary);
}

.breakdown-value {
    font-weight: 600;
}

.breakdown-value.positive {
    color: #22c55e;
}

.breakdown-value.negative {
    color: #ef4444;
}

.breakdown-value.neutral {
    color: var(--text-muted);
}

.prediction-cta {
    display: flex;
    gap: 0.75rem;
}

.prediction-cta .btn {
    flex: 1;
}

/* My Wagers Page */
.wagers-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.summary-value.positive { color: #22c55e; }
.summary-value.negative { color: #ef4444; }

.wagers-section {
    margin-bottom: 2rem;
}

.wagers-section h2 {
    margin-bottom: 1rem;
}

.wagers-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wager-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wager-item.won {
    border-left: 3px solid #22c55e;
}

.wager-item.lost {
    border-left: 3px solid #ef4444;
}

.wager-prediction a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}

.wager-prediction a:hover {
    text-decoration: underline;
}

.wager-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
}

.wager-side {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
}

.wager-side.yes {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.wager-side.no {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.wager-amount {
    color: var(--text-primary);
    font-weight: 500;
}

.wager-odds,
.wager-end {
    color: var(--text-secondary);
}

.wager-result {
    font-weight: 600;
}

.wager-result.won { color: #22c55e; }
.wager-result.lost { color: #ef4444; }

/* Airdrop Detail Page */
.airdrop-detail {
    max-width: 800px;
}

.airdrop-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.airdrop-detail-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

.airdrop-detail-title-col {
    flex: 1;
}

.airdrop-detail-title-col h1 {
    margin: 0;
    font-size: 1.5rem;
}

.airdrop-detail-project {
    color: var(--text-secondary);
}

.airdrop-token-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.airdrop-description {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.airdrop-requirements,
.airdrop-chains-section,
.airdrop-dates-section {
    margin-bottom: 1.5rem;
}

.airdrop-requirements h3,
.airdrop-chains-section h3,
.airdrop-dates-section h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.airdrop-requirements ul {
    list-style: disc;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.airdrop-requirements li {
    margin-bottom: 0.5rem;
}

.chains-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.date-card {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 1rem;
}

.date-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.date-value {
    font-weight: 600;
    color: var(--text-primary);
}

.airdrop-actions-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.airdrop-stats {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ============ Lucky Spin ============ */

/* Lucky Spin Card on Home */
.lucky-spin-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(168, 85, 247, 0.1) 100%);
    border: 2px solid #a855f7;
    position: relative;
    overflow: hidden;
}

.lucky-spin-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    animation: spin-glow 10s linear infinite;
    pointer-events: none;
}

@keyframes spin-glow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-badge {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.spin-title {
    text-align: center;
    margin: 0.5rem 0;
    font-size: 1rem;
}

.spin-wheel-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0.5rem auto;
}

.spin-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #ef4444 0deg 180deg,
        #22c55e 180deg 252deg,
        #3b82f6 252deg 324deg,
        #f59e0b 324deg 360deg
    );
    position: relative;
    animation: spin-preview 8s linear infinite;
}

@keyframes spin-preview {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-segment {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 5;
}

/* Position labels in center of each segment - matching modal positioning */
/* Conic: Red 0-180deg, Green 180-252deg, Blue 252-324deg, Yellow 324-360deg */
/* Red (0): center at 90deg = 3 o'clock */
.seg-lose { top: 50%; right: 18%; transform: translateY(-50%); }
/* Green (5): center at 213deg = ~7 o'clock */
.seg-win5 { bottom: 21%; left: 31%; transform: translate(-50%, 50%); }
/* Blue (10): center at 288deg = ~10 o'clock */
.seg-win10 { top: 38%; left: 16%; transform: translate(-50%, -50%); }
/* Yellow (20): center at 344deg = ~11 o'clock */
.seg-win20 { top: 16%; left: 40%; transform: translate(-50%, -50%); }

.spin-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid var(--accent-primary);
}

.spin-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.spin-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

/* Spin Modal */
.spin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.spin-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.spin-modal {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
}

.spin-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
}

.spin-modal-title {
    text-align: center;
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.spin-modal-cost {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Spin Wheel Large */
.spin-wheel-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto 1.5rem;
}

.spin-wheel-large {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    border: 4px solid var(--border-color);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    /* Same conic gradient as preview: 50% red, 20% green, 20% blue, 10% yellow */
    background: conic-gradient(
        #ef4444 0deg 180deg,
        #22c55e 180deg 252deg,
        #3b82f6 252deg 324deg,
        #f59e0b 324deg 360deg
    );
}

/* Labels positioned on the wheel */
.wheel-label {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 5;
}

/* Position labels in center of each segment */
/* Conic: Red 0-180deg, Green 180-252deg, Blue 252-324deg, Yellow 324-360deg */
/* Red (0): center at 90deg = 3 o'clock */
.label-0 { top: 50%; right: 18%; transform: translateY(-50%); }
/* Green (5): center at 213deg = ~7 o'clock */
.label-5 { bottom: 21%; left: 31%; transform: translate(-50%, 50%); }
/* Blue (10): center at 288deg = ~10 o'clock */
.label-10 { top: 38%; left: 16%; transform: translate(-50%, -50%); }
/* Yellow (20): center at 344deg = ~11 o'clock */
.label-20 { top: 16%; left: 40%; transform: translate(-50%, -50%); }

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 50%;
    border: 3px solid #a855f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.wheel-center:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
    border-color: #c084fc;
}

.wheel-center:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    z-index: 10;
}

.wheel-pointer-large {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid #a855f7;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    z-index: 20;
}

/* Spin Odds */
.spin-odds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.odds-item {
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 500;
}

.odds-item.lose {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.odds-item.win5 {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.odds-item.win10 {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.odds-item.win20 {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.spin-modal-balance {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.spin-modal-actions {
    display: flex;
    gap: 0.75rem;
}

.spin-modal-actions .btn {
    flex: 1;
}

.spin-confirm-btn {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    border: none !important;
    color: #fff !important;
}

.spin-confirm-btn:hover {
    opacity: 0.9;
}

.spin-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spin Result */
.spin-result {
    text-align: center;
    padding: 1rem 0;
}

.spin-result h3 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.spin-result p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

#spinAgain {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border: none;
    color: #fff;
}

/* News Summary Card */
.news-summary-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.news-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6, #06b6d4);
}

.news-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.news-summary-title {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ai-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    border-radius: 10px;
    flex-shrink: 0;
}

.ai-icon svg {
    color: #fff;
    stroke: #fff;
}

.news-summary-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.summary-token-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #f0b90b, #f5d03b);
    color: #000;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.375rem;
    vertical-align: middle;
}

/* Loading States */
.ai-icon.loading-pulse {
    animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.news-summary-skeleton {
    padding-left: 3.25rem;
    margin-top: 1rem;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, var(--bg-primary) 25%, var(--border-color) 50%, var(--bg-primary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.skeleton-line.short {
    width: 60%;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ai-icon.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.ai-icon.neutral {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.error-text {
    color: #ef4444;
}

.news-summary-content-wrapper .news-summary-header,
.news-summary-content-wrapper .news-sentiment-bar,
.news-summary-content-wrapper .news-summary-content,
.news-summary-content-wrapper .news-signals {
    animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.summary-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-badge svg {
    color: #a78bfa;
}

.news-summary-content {
    font-size: 0.925rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-left: 3.25rem;
}

.news-summary-content p {
    margin-bottom: 0.875rem;
}

.news-summary-content p:last-child {
    margin-bottom: 0;
}

/* AI Sentiment Badge */
.ai-sentiment-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    min-width: 80px;
}

.ai-sentiment-badge.bullish {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.ai-sentiment-badge.bearish {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.ai-sentiment-badge.neutral {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.1));
    border: 1px solid rgba(156, 163, 175, 0.4);
}

.ai-sentiment-badge .sentiment-score {
    font-size: 1.25rem;
    font-weight: 700;
}

.ai-sentiment-badge.bullish .sentiment-score { color: #22c55e; }
.ai-sentiment-badge.bearish .sentiment-score { color: #ef4444; }
.ai-sentiment-badge.neutral .sentiment-score { color: #9ca3af; }

.ai-sentiment-badge .sentiment-label-text {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Sentiment Bar */
.news-sentiment-bar {
    margin: 1rem 0;
    padding-left: 3.25rem;
}

.sentiment-bar-track {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: transparent;
}

.sentiment-bar-bullish {
    background: #22c55e;
    transition: width 0.3s ease;
}

.sentiment-bar-neutral {
    background: #6b7280;
    transition: width 0.3s ease;
}

.sentiment-bar-bearish {
    background: #ef4444;
    transition: width 0.3s ease;
}

.sentiment-bar-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-item.bullish .legend-dot { background: #22c55e; }
.legend-item.neutral .legend-dot { background: #6b7280; }
.legend-item.bearish .legend-dot { background: #ef4444; }

/* News Signals */
.news-signals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.signals-group {
    font-size: 0.8rem;
}

.signals-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.signals-group.bullish .signals-label {
    color: #22c55e;
}

.signals-group.bearish .signals-label {
    color: #ef4444;
}

.signals-group ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary);
}

.signals-group li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .news-summary-card {
        padding: 1.25rem;
    }

    .news-summary-content {
        padding-left: 0;
        margin-top: 1rem;
    }

    .news-sentiment-bar {
        padding-left: 0;
    }

    .news-signals {
        grid-template-columns: 1fr;
    }

    .ai-icon {
        width: 36px;
        height: 36px;
    }

    .ai-icon svg {
        width: 18px;
        height: 18px;
    }

    .sentiment-bar-legend {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ============================================
   GG Token Page Styles
   ============================================ */

.gg-token-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.gg-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.gg-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gg-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Token Info Grid - 3x2 layout */
.token-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.token-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.token-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.token-info-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Contract Links */
.contract-links {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.contract-links h3 {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.contract-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.contract-label {
    color: var(--text-muted);
    min-width: 100px;
}

.contract-link a {
    color: var(--accent-purple);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: monospace;
}

.contract-link a:hover {
    text-decoration: underline;
}

/* Wallet Prompt */
.wallet-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    gap: 1rem;
}

.wallet-prompt svg {
    color: var(--text-muted);
    opacity: 0.5;
}

.wallet-prompt h3 {
    color: var(--text-primary);
    margin-bottom: 0;
}

.wallet-prompt p {
    color: var(--text-muted);
    max-width: 400px;
    margin: 0;
}

.wallet-prompt .network-note {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Wallet Connected */
.wallet-connected {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.wallet-address-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.network-badge {
    padding: 0.25rem 0.5rem;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-primary);
}

.network-badge.wrong {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Warning Banner */
.warning-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    color: #eab308;
}

.warning-banner span {
    flex: 1;
}

/* Balance Card */
.balance-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.balance-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.balance-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.balance-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.balance-value.rewards {
    color: #22c55e;
}

/* Stakes Section */
.stakes-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.stakes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.loading-placeholder {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
}

/* Stake Card */
.stake-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
}

.stake-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stake-header .stake-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stake-header .stake-apy {
    font-size: 0.875rem;
    font-weight: 600;
    color: #22c55e;
    padding: 0.25rem 0.625rem;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 4px;
}

.stake-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stake-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stake-detail .detail-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.stake-detail .detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.stake-detail .pending-rewards {
    color: #22c55e;
}

.stake-detail .time-remaining {
    color: #f59e0b;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.time-remaining-row {
    display: flex;
}

.unstake-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.stake-actions {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.stake-actions .btn {
    flex: 1;
}

/* Stake Form */
.stake-form-section {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.stake-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.stake-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stake-form label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.input-with-max {
    display: flex;
    gap: 0.5rem;
}

.input-with-max input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    -moz-appearance: textfield;
}

/* Hide number input spinners */
.input-with-max input::-webkit-outer-spin-button,
.input-with-max input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-with-max input:focus {
    outline: none;
    border-color: var(--accent-purple);
}

/* Duration Slider */
.duration-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--bg-card);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-purple);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.duration-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent-purple);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}

.duration-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* APY Preview */
.apy-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
}

.apy-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.apy-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #22c55e;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 0.75rem;
}

.form-actions .btn {
    flex: 1;
}

/* Button Styles (extend existing) */
.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .gg-token-page {
        max-width: 100%;
    }

    .gg-section {
        padding: 1rem;
    }

    .token-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stake-details {
        grid-template-columns: 1fr;
    }

    .wallet-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .balance-card {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .stake-actions {
        flex-direction: column;
    }
}