/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ─── Tema Claro ─────────────────────────────────────────────────────────────── */
body.light-theme {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
}
body.light-theme .container    { background: white; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
body.light-theme .left         { background: #f9f9f9; border-right: 1px solid #ddd; }
body.light-theme .right        { background: white; }
body.light-theme .server-card  { background: #f0f0f0; border: 1px solid #ddd; }
body.light-theme .stat-label   { color: #666; }
body.light-theme .progressBar  { background: #ddd; }
body.light-theme .legal        { color: #666; }
body.light-theme li            { border-bottom: 1px solid #eee; }
body.light-theme h2            { color: #888; }
body.light-theme h3            { color: #999; }
body.light-theme .total        { color: #00aa66; }

/* ─── Tema Escuro ────────────────────────────────────────────────────────────── */
body.dark-theme {
    background: linear-gradient(135deg, #0b0b0b 0%, #1a1a1a 100%);
    color: #eee;
}
body.dark-theme .container    { background: #1e1e1e; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
body.dark-theme .left         { background: #252525; border-right: 1px solid #333; }
body.dark-theme .right        { background: #1e1e1e; }
body.dark-theme .server-card  { background: #2a2a2a; border: 1px solid #3a3a3a; }
body.dark-theme .stat-label   { color: #999; }
body.dark-theme .progressBar  { background: #333; }
body.dark-theme .legal        { color: #666; }
body.dark-theme li            { border-bottom: 1px solid #333; }
body.dark-theme h2            { color: #aaa; }
body.dark-theme h3            { color: #aaa; }
body.dark-theme .total        { color: #00ff99; text-shadow: 0 0 10px rgba(0,255,153,0.4); }

/* ─── Top Bar ────────────────────────────────────────────────────────────────── */
.top-bar {
    position: fixed;
    top: 10px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 1000;
    background: rgba(0,0,0,0.55);
    padding: 8px 15px;
    border-radius: 30px;
    backdrop-filter: blur(6px);
    align-items: center;
}

.theme-switcher i {
    cursor: pointer;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.2s, transform 0.2s;
}
.theme-switcher i:hover,
.theme-switcher i.active {
    color: #fff;
    transform: scale(1.2);
}
.theme-switcher i.active { color: #ffcc44; }

.language-switcher img {
    cursor: pointer;
    width: 24px;
    height: 18px;
    border-radius: 3px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}
.language-switcher img:hover { opacity: 1; transform: scale(1.15); }

/* ─── Container ──────────────────────────────────────────────────────────────── */
.container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 60px 20px 20px;
    border-radius: 20px;
    overflow: hidden;
    transition: background 0.3s;
}

.left, .right {
    flex: 1;
    padding: 40px;
    transition: all 0.3s ease;
}

/* ─── Logo & Headings ────────────────────────────────────────────────────────── */
.logo {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

h1 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 10px;
    color: #ff4444;
}

body.dark-theme h1 { text-shadow: 0 2px 5px rgba(255,68,68,0.3); }

h2 {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin: 20px 0 5px;
    text-transform: uppercase;
}

h3 {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 20px 0 8px;
}

/* ─── Total ──────────────────────────────────────────────────────────────────── */
.total {
.total-meta { font-size: 1rem; color: #888; margin-top: -6px; margin-bottom: 10px; font-weight: 500; }
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

/* ─── Listas ─────────────────────────────────────────────────────────────────── */
ul {
    list-style: none;
    margin: 5px 0 15px;
}

li {
    padding: 8px 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.88rem;
    transition: background 0.15s;
    border-radius: 4px;
}
li:hover { background: rgba(255,68,68,0.07); }

li::before {
    content: "•";
    color: #ff4444;
    font-weight: bold;
    flex-shrink: 0;
}

.donation-name  { font-weight: 600; }
.donation-country { color: #999; font-size: 0.82rem; }
.donation-value { color: #00cc77; font-weight: 600; margin-left: auto; }
.donation-server { font-size: 0.8rem; color: #aaa; }
.donation-date  { font-size: 0.76rem; color: #888; }

.rank-pos   { font-size: 1.1rem; flex-shrink: 0; }
.rank-name  { font-weight: 600; }
.rank-country { color: #999; font-size: 0.82rem; }
.rank-total { color: #00cc77; font-weight: 700; margin-left: auto; }

/* ─── Botões de Doação ───────────────────────────────────────────────────────── */
.donation-buttons {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.donateButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    flex: 1 1 auto;
}

.pix-button {
    background: linear-gradient(45deg, #32BCAD, #20A0A0);
    color: white;
    box-shadow: 0 5px 15px rgba(50,188,173,0.4);
}
.pix-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(50,188,173,0.6); }

.paypal-button {
    background: linear-gradient(45deg, #00457C, #009cde);
    color: white;
    box-shadow: 0 5px 15px rgba(0,69,124,0.4);
}
.paypal-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,69,124,0.6); }

/* ─── Legal ──────────────────────────────────────────────────────────────────── */
.legal {
    font-size: 0.78rem;
    line-height: 1.6;
    margin-top: 25px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.legal i { flex-shrink: 0; margin-top: 2px; color: #ff6666; }

/* ─── Server Card ────────────────────────────────────────────────────────────── */
.server-card {
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
    transition: transform 0.2s;
}
.server-card:hover { transform: translateY(-2px); }

.server-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ff4444 !important;
    margin: 0 0 12px !important;
}

.server-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.stat { display: flex; flex-direction: column; }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 1.35rem; font-weight: 700; }
body.dark-theme  .stat-value { color: #eee; }
body.light-theme .stat-value { color: #333; }
.stat-value.highlight { color: #00cc77 !important; }

/* ─── Barra de Progresso ─────────────────────────────────────────────────────── */
.progressBar {
    width: 100%;
    height: 26px;
    border-radius: 13px;
    overflow: hidden;
    margin: 6px 0 4px;
    position: relative;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, #00ff99, #00cc77);
    border-radius: 13px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-width: 2px;
}

.progress-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
}

.server-status {
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 8px;
    padding: 4px 0;
    border-radius: 6px;
}
.status-paid    { color: #00cc66; }
.status-pending { color: #ffaa00; }

/* ─── Meses Pagos ────────────────────────────────────────────────────────────── */
.meses-pagos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 15px 0 10px;
}

.mes-item {
    width: 62px;
    height: 62px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}
.mes-item:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

.mes-item.pago    { background: linear-gradient(135deg, #00cc66, #00aa55); color: white; }
.mes-item.nao-pago { background: linear-gradient(135deg, #ff4444, #cc2222); color: white; }

.mes-numero { font-size: 1rem; }
.mes-status { font-size: 1rem; margin-top: 2px; }

/* ─── Loading / Error ────────────────────────────────────────────────────────── */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 60px 20px;
    color: #aaa;
    font-size: 1rem;
}
.loading-state i { font-size: 2rem; color: #ff4444; }

.error-msg { color: #ff6666 !important; }

/* ─── Responsivo ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .container {
        flex-direction: column;
        margin: 70px 12px 12px;
    }
    .left, .right { padding: 28px 24px; }
    .total { font-size: 2.6rem; }
    .donation-buttons { flex-direction: column; }
}

@media (max-width: 480px) {
    .top-bar { top: 5px; right: 10px; padding: 6px 10px; gap: 10px; }
    h1 { font-size: 1.5rem; }
    .total { font-size: 2rem; }
    .mes-item { width: 50px; height: 50px; }
    .mes-numero { font-size: 0.85rem; }
    .server-stats { flex-direction: column; gap: 8px; }
}