/* ── CO2 Competition Graph — frontend styles ────────────────────────── */

/* Honeypot */
.co2-hp-wrap {
    position: absolute;
    left:     -9999px;
    height:   0;
    overflow: hidden;
}

/* ── Form ───────────────────────────────────────────────────────────── */
.co2-form-wrap {
    max-width: 420px;
    margin:    0 0 2rem;
}

.co2-form {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.co2-field {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.co2-field label {
    font-size:   13px;
    font-weight: 500;
    color:       #444;
}

.co2-field input {
    padding:       8px 12px;
    border:        1px solid #ccc;
    border-radius: 6px;
    font-size:     15px;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color 0.2s;
}

.co2-field input:focus {
    outline:      none;
    border-color: #1D9E75;
    box-shadow:   0 0 0 3px rgba(29, 158, 117, 0.15);
}

.co2-submit {
    align-self:    flex-start;
    padding:       10px 24px;
    background:    #1D9E75;
    color:         #fff;
    border:        none;
    border-radius: 6px;
    font-size:     15px;
    font-weight:   500;
    cursor:        pointer;
    transition:    background 0.2s, opacity 0.2s;
}

.co2-submit:hover    { background: #0F6E56; }
.co2-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.co2-message {
    font-size:  14px;
    min-height: 20px;
    margin:     4px 0 0;
}

.co2-message.co2-success { color: #0F6E56; }
.co2-message.co2-error   { color: #993C1D; }

/* ── Graph ──────────────────────────────────────────────────────────── */
.co2-graph-wrap {
    max-width: 700px;
    margin:    0 0 2rem;
}

#co2-chart {
    width:      100% !important;
    max-height: 380px;
}

/* ── Leaderboard ────────────────────────────────────────────────────── */
.co2-leaderboard {
    max-width:   560px;
    margin:      0 0 2rem;
    font-size:   15px;
}

.co2-leaderboard-table {
    width:           100%;
    border-collapse: collapse;
}

.co2-leaderboard-table th,
.co2-leaderboard-table td {
    padding:     10px 14px;
    text-align:  left;
    border-bottom: 1px solid #e5e5e5;
}

.co2-leaderboard-table thead th {
    font-size:        12px;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.05em;
    color:            #666;
    background:       #f8f8f8;
    border-bottom:    2px solid #ddd;
}

.co2-lb-rank  { width: 36px; color: #999; font-size: 13px; }
.co2-lb-value { font-weight: 500; }

.co2-lb-winning td { background: #f0faf6; }
.co2-lb-losing  td { background: #fff8f5; }

/* Badges */
.co2-badge {
    display:       inline-block;
    padding:       3px 9px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   500;
}

.co2-badge-win  { background: #d4f0e5; color: #085041; }
.co2-badge-lose { background: #fde8df; color: #712B13; }

.co2-leaderboard-footer {
    margin:    10px 0 0;
    font-size: 13px;
    color:     #888;
}

.co2-leaderboard-empty {
    color:     #888;
    font-size: 14px;
}