/* ═══════════════════════════════════════════════════
   NQT Prediction CSS — assets/css/nqt-prediction.css
   ═══════════════════════════════════════════════════ */

.prediction-header { margin-bottom: var(--space-6); }
.prediction-header h2 { margin-bottom: var(--space-2); }

/* ── Grid ─────────────────────────── */
.predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* ── Card ─────────────────────────── */
.prediction-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: var(--transition-base);
}

.pred-category { align-self: flex-start; }

.pred-question {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

/* ── Odds Bar ─────────────────────── */
.pred-odds-bar {
    display: flex;
    height: 36px;
    border-radius: var(--radius-md);
    overflow: hidden;
    gap: 2px;
}

.pred-odds-yes {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: width 0.5s ease;
    min-width: 40px;
}

.pred-odds-no {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: width 0.5s ease;
    min-width: 40px;
}

.pred-multipliers {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* ── Stats ────────────────────────── */
.pred-stats {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Bet Form ─────────────────────── */
.pred-bet-form { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border-light); padding-top: var(--space-4); }

.bet-side-selector { display: flex; gap: var(--space-2); }

.btn-side {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}
.btn-side--yes.active { background: #10B981; border-color: #10B981; color: #fff; }
.btn-side--no.active  { background: #EF4444; border-color: #EF4444; color: #fff; }
.btn-side:hover:not(.active) { background: var(--bg-tertiary); }

.bet-amount-row { display: flex; flex-direction: column; gap: var(--space-1); }
.bet-preview { font-size: var(--font-size-xs); min-height: 16px; }

/* ── My Bets ──────────────────────── */
.bets-list { display: flex; flex-direction: column; gap: var(--space-2); }

.bet-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}
.bet-row--won  { border-left: 3px solid var(--success); }
.bet-row--lost { border-left: 3px solid var(--error); opacity: 0.7; }

.bet-question { font-size: var(--font-size-sm); color: var(--text-primary); }
.bet-side.side-yes { color: #10B981; font-weight: 700; }
.bet-side.side-no  { color: #EF4444; font-weight: 700; }
.bet-amount { color: var(--text-secondary); font-size: var(--font-size-sm); }

/* ── Categories ───────────────────── */
.badge--nqt_price  { background: #8B5CF6; color: #fff; }
.badge--burn_vault { background: #EF4444; color: #fff; }
.badge--milestone  { background: #F59E0B; color: #fff; }
.badge--platform   { background: #06B6D4; color: #fff; }
.badge--custom     { background: var(--bg-tertiary); color: var(--text-primary); }
.badge--pending    { background: #F59E0B; color: #fff; }

@media (max-width: 640px) {
    .predictions-grid { grid-template-columns: 1fr; }
    .bet-row { grid-template-columns: 1fr auto auto; }
}


/* ═══════════════════════════════════════════════════
   NQT Bounty CSS — assets/css/nqt-bounty.css
   ═══════════════════════════════════════════════════ */

.bounty-header { margin-bottom: var(--space-5); }

/* ── Filters ──────────────────────── */
.bounty-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.filter-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition-fast);
}
.filter-btn:hover { background: var(--bg-secondary); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Grid ─────────────────────────── */
.bounties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* ── Card ─────────────────────────── */
.bounty-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: var(--transition-base);
}

.bounty-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bounty-icon { font-size: 2rem; }

.bounty-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bounty-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.bounty-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bounty-reward { color: var(--accent); font-weight: 700; font-size: var(--font-size-sm); }
.bounty-slots  { color: var(--text-secondary); font-size: var(--font-size-sm); }
.bounty-expires { color: var(--warning); font-size: var(--font-size-xs); }

.bounty-instructions {
    background: var(--info-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Submissions ──────────────────── */
.submissions-list { display: flex; flex-direction: column; gap: var(--space-2); }

.submission-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}
.submission--approved { border-left: 3px solid var(--success); }
.submission--rejected { border-left: 3px solid var(--error); opacity: 0.8; }
.submission--pending  { border-left: 3px solid var(--warning); }

.sub-bounty  { font-size: var(--font-size-sm); font-weight: 500; }
.sub-reward  { color: var(--accent); font-size: var(--font-size-sm); font-weight: 600; }
.sub-notes   { grid-column: 2; font-size: var(--font-size-xs); }

/* ── Category badges ──────────────── */
.badge--content      { background: #8B5CF6; color: #fff; }
.badge--tutorial     { background: #3B82F6; color: #fff; }
.badge--bug          { background: #EF4444; color: #fff; }
.badge--social_media { background: #EC4899; color: #fff; }
.badge--review       { background: #F59E0B; color: #fff; }
.badge--translation  { background: #10B981; color: #fff; }
.badge--recruitment  { background: #06B6D4; color: #fff; }

@media (max-width: 640px) {
    .bounties-grid { grid-template-columns: 1fr; }
    .submission-row { grid-template-columns: 24px 1fr auto; }
}