* {
    box-sizing: border-box
}

:root {
    --pink: #ff6fa8;
    --pink-dark: #e43e80;
    --teal: #1eb7a6;
    --cream: #fff6e8;
    --card: #fffaf1e6;
    --text: #172033;
    --muted: #627083;
    --purple: #7c5cff;
    --gold: #f6c445;
    --green: #32c36c;
    --red: #ff5c7a;
    --blue: #4a90e2;
    --shadow: 0 14px 30px #6d28461a;
}

body {
    margin: 0;
    font-family: Segoe UI, Arial, sans-serif;
    color: var(--text);
    background: var(--cream);
    overflow: hidden;
}

.bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(255, 248, 235, .84), rgba(255, 248, 235, .84)), url('assets/background.png') center/cover no-repeat;
    z-index: -2
}

.decor {
    position: fixed;
    z-index: -1;
    font-size: 30px;
    opacity: .55;
    pointer-events: none;
    animation: floatDecor 7s ease-in-out infinite
}

.decor-1 {
    top: 7%;
    left: 26%
}

.decor-2 {
    top: 18%;
    right: 8%;
    animation-delay: .7s
}

.decor-3 {
    bottom: 10%;
    right: 12%;
    animation-delay: 1.3s
}

.decor-4 {
    top: 54%;
    left: 37%;
    animation-delay: 2s
}

.decor-5 {
    bottom: 22%;
    left: 18%;
    animation-delay: 2.5s
}

@keyframes floatDecor {

    0%,
    100% {
        transform: translateY(0) rotate(-8deg)
    }

    50% {
        transform: translateY(-14px) rotate(8deg)
    }
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 315px;
    background: linear-gradient(180deg, #12b7a8, #088b7d);
    padding: 14px;
    box-shadow: 0 20px 50px #6d284633;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 5
}

.brand-card {
    background: #fffaf1;
    border: 2px solid #ff91bd;
    border-radius: 34px;
    text-align: center;
    padding: 8px 12px 14px;
    box-shadow: 0 16px 30px #56284726;
    overflow: hidden
}

.mascot {
    height: 286px;
    object-fit: contain;
    display: block;
    margin: -8px auto -56px
}

.logo {
    width: 116%;
    max-height: 180px;
    object-fit: contain;
    margin-left: -8%;
    display: block
}

nav {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.nav-btn {
    border: 2px solid #ff91bd;
    border-radius: 18px;
    background: #ffffff26;
    color: white;
    font-weight: 900;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: .2s;
    font-size: 15px
}

.nav-btn:hover,
.nav-btn.active {
    background: #ff6fa8;
    transform: translateX(4px);
    box-shadow: 0 2px 2px #6a204733
}

.values {
    margin-top: auto;
    border: 1px solid #ffffff66;
    border-radius: 24px;
    padding: 14px 16px;
    color: white;
    background: #ffffff1c
}

.values strong {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.2
}

.values span {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.15
}

.values span:last-child {
    margin-bottom: 0
}

.main {
    margin-left: 315px;
    height: 100vh;
    padding: 16px 22px;
    overflow: hidden
}

.page {
    display: none;
    height: 100%;
    overflow: auto
}

.page.active {
    display: block
}

.home-v2.active {

    display: grid;

    grid-template-rows:

        auto
        /* Hero */
        auto
        /* Resumo */
        auto
        /* Top5 */
        1fr;
    /* Parte inferior */

    gap: 10px;

    overflow: hidden;

}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px
}

.hero-copy {
    min-width: 0
}

.hello {
    color: #ff5b9c;
    font-size: 24px;
    font-weight: 900
}

.hero h1 {
    font-size: 46px;
    line-height: 1;
    margin: 0;
    color: #172033
}

.hero h1 span {
    font-size: .75em
}

.hero p {
    font-size: 17px;
    color: #51606f;
    margin: 10px 0 0
}

.hero-pills {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: flex-start
}

.pill {
    min-width: 135px;
    background: var(--card);
    border: 2px solid #ffb6cf;
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 12px 28px #6d28461a
}

.pill small {
    display: block;
    color: #e74282;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px
}

.pill strong {
    font-size: 20px
}

.online {
    color: #099e55
}

.summary-panel,
.panel {
    background: var(--card);
    border: 2px solid #ffb6cf;
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(4px)
}

.summary-panel {
    padding: 16px 18px
}

.summary-panel h2,
.panel h3 {
    margin: 0 0 12px;
    color: #f13c82;
    text-transform: uppercase
}

.summary-panel h2 {
    font-size: 22px
}

.panel {
    padding: 18px;
    min-height: 0;
    overflow: hidden
}

.panel:hover,
.metric:hover {
    transform: translateY(-2px)
}

.metrics {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.metric {

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 8px 12px;

    background: #fff9f0;

    border: 1px solid #ffd8e7;

    border-radius: 18px;

    min-height: 54px;
}

.metric-icon {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.metric-icon img {

    width: 48px;
    height: 48px;
}

.metric-content {

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-title {

    display: flex;
    align-items: baseline;
    gap: 8px;

    flex-wrap: wrap;
}

.metric-title strong {

    font-size: 17px;

    line-height: 1;

    color: #1f2640;
}

.metric-title span {

    font-size: 12px;

    font-weight: 700;

    color: #2b3149;
}

.metric small {

    margin-top: 4px;

    font-size: 11px;

    font-weight: 700;
}

.metric small.up {
    color: #07975d;
}

.metric small.down {
    color: #e43e80;
}

.metric small.neutral {
    color: #607080;
}

.desktop-top-row {
    display: grid;
    grid-template-columns: 34px 48px 1fr 58px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #ffe0ec
}

.desktop-top-row:last-child {
    border-bottom: 0
}

.desktop-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px
}

.desktop-medal span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffeaf4;
    color: #f54493;
    font-weight: 900
}

.desktop-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7f7f7;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.desktop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.desktop-avatar span {
    font-weight: 900;
    font-size: 22px
}

.desktop-rank-info {
    min-width: 0
}

.desktop-rank-info strong {
    display: block;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.desktop-rank-info small {
    display: block;
    color: #8b7d9b;
    font-weight: 700;
    font-size: 12px;
    margin-top: 1px
}

.desktop-bar {
    height: 9px;
    background: #fff0f6;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px
}

.desktop-bar i {
    display: block;
    height: 100%;
    border-radius: 999px
}

.desktop-bar i.checks {
    background: linear-gradient(90deg, #a77bff, #7857da)
}

.desktop-bar i.points {
    background: linear-gradient(90deg, #ffc94d, #ff8f3f)
}

.desktop-bar i.deleted {
    background: linear-gradient(90deg, #f4c84d, #f0a83b)
}

.desktop-rank-score {
    text-align: right
}

.desktop-rank-score b {
    display: block;
    font-size: 24px;
    line-height: 1;
    color: #f54493
}

.desktop-rank-score small {
    font-size: 12px;
    font-weight: 900;
    color: #f54493
}

.link-btn {
    border: 0;
    background: #fff0f6;
    color: #e43e80;
    font-weight: 900;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 14px;
    padding: 9px 12px;
    width: 100%
}

.donut-row {

    display: grid;

    grid-template-columns: 150px 1fr;

    align-items: center;

    gap: 24px;
}

.donut {

    width: 150px;
    height: 150px;

    border-radius: 50%;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;

    margin-top: 4px;
}

.donut::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: #fff7ea;

    box-shadow: inset 0 0 0 1px #ffd2df;

    z-index: 1;
}

.donut b {

    position: relative;
    z-index: 2;

    font-size: 22px;
    font-weight: 900;

    color: #24304a;

    line-height: 1;
}

.donut span {

    position: relative;
    z-index: 2;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 700;

    color: #66758a;

    line-height: 1;
}

.feedback-donut {

    background: conic-gradient(var(--pink) var(--pct),
            var(--teal) 0);
}


.mini-stats {

    display: flex;

    flex-direction: column;

    justify-content: center;
    margin-top: 4px;
    gap: 8px;
}

.mini-stats>div {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 12px;

    background: #fff9f0;

    border: 1px solid #ffdce8;

    border-radius: 16px;
}

.mini-stats span {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    font-weight: 700;

    color: #2d3148;
}

.mini-stats strong {

    font-size: 18px;

    color: #1f2640;

    font-weight: 800;
}

/* ===========================
   SITUAÇÃO DA EQUIPE
=========================== */


#teamCards {

    flex: 1;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.team-line {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;
    min-height: 56px;

    border-radius: 18px;
}

.team-line span {

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 16px;
    font-weight: 700;
}

.team-line strong {

    font-size: 24px;
    font-weight: 800;

    line-height: 1;
}

.team-line.gold {
    background: #fff3d8;
    color: #8c6700;
}

.team-line.green {
    background: #e8faf0;
    color: #1f8f49;
}

.team-line.red {
    background: #ffe8ee;
    color: #c72b4e;
}

.team-line.blue {
    background: #e7f0ff;
    color: #2d67d8;
}

.team-line.total {
    background: #f9f5e8;
    color: #1f2640;
}

/* ===========================
   EVOLUÇÃO SEMANAL
=========================== */

.chart {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0;
    height: 145px;
}

.chart svg {
    margin-top: -6px;
    width: 100%;
    height: 145px;
}

/* Grid */

.chart-grid {

    stroke: #f2dce6;

    stroke-width: 1;
}

/* Eixos */

.chart-x-label,
.chart-y-label {

    fill: #7c8799;

    font-size: 11px;

    font-weight: 700;
}

/* Linhas */

.line {

    fill: none;

    stroke-width: 5;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.line-ver {

    stroke: var(--purple);
}

.line-feed {

    stroke: var(--teal);
}

.line-deleted {

    stroke: #ffd23f;
}

/* Pontos */

.chart-point {

    stroke: #fff;

    stroke-width: 3;
}

.point-ver {

    fill: var(--purple);
}

.point-feed {

    fill: var(--teal);
}

.point-deleted {

    fill: #ffd23f;
}

/* Legenda */

.legend-row {

    display: flex;

    justify-content: center;

    gap: 26px;

    margin-top: 5px;

    font-size: 12px;

    font-weight: 700;
}

.legend-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    display: inline-block;

    margin-right: 6px;
}

.legend-dot.purple {

    background: var(--purple);
}

.legend-dot.teal {

    background: var(--teal);
}

.legend-dot.gold {

    background: #ffd23f;
}

.mission {

    display: flex;
    align-items: stretch;
    gap: 14px;

    margin-top: -2px;
}

.mission-icon {

    width: 86px;
    height: 86px;

    flex: 0 0 86px;

    border-radius: 50%;

    background: linear-gradient(180deg, #ffe6ef, #ffd5e5);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 46px;
}

.mission h3 {

    margin-bottom: 8px;
}

.mission-content {

    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    align-items: start;
}

.mission p {

    margin: 0;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.45;
    color: #3a3f55;
}

.mission strong {

    display: block;
    margin-top: 2px;
    font-size: 17px;
    font-style: italic;
    font-weight: 800;

    color: #f54493;
}

.mission-values {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
}

.mission-values span {
    border: 1px solid #ffd4e4;
    border-radius: 14px;
    background: #fff6fb;
    color: #334052;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px
}

.page-head h2 {
    font-size: 36px;
    margin: 0
}

.page-head p {
    margin: 4px 0;
    color: #627083
}

select {
    border: 2px solid #ffb6cf;
    background: white;
    border-radius: 16px;
    padding: 12px 16px;
    font-weight: 900
}

.table-panel {
    padding: 18px;
    min-height: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fffefa;
    border-radius: 18px;
    overflow: hidden
}

th {
    background: #ff7fab;
    color: white;
    text-align: left;
    padding: 12px
}

td {
    padding: 11px;
    border-bottom: 1px solid #ffd6e3
}

tr:hover td {
    background: #fff0f6
}

.medal {
    font-weight: 900;
    color: #e43e80
}

.status-rpp {
    color: #236bd6;
    font-weight: 900
}

.status-ativo {
    color: #07975d;
    font-weight: 900
}

.status-inativo {
    color: #e43e80;
    font-weight: 900
}

.status-gestao {
    color: #c48e00;
    font-weight: 900
}

.team-separator td {
    background: #fff0f6 !important;
    color: #e43e80;
    font-weight: 900;
    text-transform: uppercase
}

.health-graph {
    margin-bottom: 18px
}

.empty {
    font-weight: 900;
    color: #687386;
    background: #fff0f6;
    border: 1px solid #ffd6e3;
    border-radius: 16px;
    padding: 12px 14px;
    display: inline-block
}

@media(max-height:820px) {
    .hero h1 {
        font-size: 40px
    }

    .metric {
        min-height: 76px;
        padding: 9px 12px
    }

    .metric img {
        width: 54px;
        height: 54px
    }

    .metric strong {
        font-size: 25px
    }

    .panel {
        padding: 14px
    }

    .desktop-top-row {
        padding: 6px 0
    }

    .donut {
        width: 84px;
        height: 84px;
    }

    .donut:after {
        width: 58px;
        height: 58px;
    }

    .chart svg {
        height: 145px
    }

    .mission p {
        font-size: 15px
    }

    .mission-values span {
        padding: 7px 8px
    }
}

/* ===== Desktop V2.1 Top5 ===== */
.desktop-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 21vw, 350px);
    gap: 10px;
    align-items: stretch;
}

.desktop-main-stack {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.desktop-rank-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.desktop-indicator-row {
    display: grid;
    grid-template-columns: minmax(380px, .72fr) minmax(0, 1.35fr);
    gap: 10px;
    min-width: 0;
}

.desktop-side-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    height: 100%;
}

.desktop-grid-top {
    display: grid;
    grid-template-columns: 1.32fr 1.32fr .78fr;

    gap: 10px;
    align-items: start;
}

.desktop-rank-card,
.team-panel {

    display: flex;

    flex-direction: column;

    min-height: 400px;
    height: 400px;
    padding: 20px;
}

.panel-title {

    font-size: 18px;

    font-weight: 800;

    color: #f54493;

    margin-bottom: 14px;

}

.top-card {

    display: grid;

    grid-template-columns:
        34px 44px 1fr 58px;

    align-items: center;

    gap: 12px;

    padding: 8px 0;
    min-height: 52px;
    border-bottom: 1px solid #ffe7f1;

}

.top-card:last-child {

    border: none;

}

.top-pos {

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

}

.top-pos span {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #fff0f6;

    display: grid;

    place-items: center;

    font-size: 15px;

    font-weight: 700;

    color: #f54493;

}

.top-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    overflow: hidden;

    background: #f7f7f7;

}

.top-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.top-avatar span {

    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    font-weight: 700;

}

.top-main {

    min-width: 0;

}

.top-name {

    font-size: 13px;

    font-weight: 700;

    color: #1d2440;

    white-space: nowrap;

}

.top-name small {

    color: #8b7d9b;

    font-size: 11px;

    font-weight: 500;

}

.top-bar {

    margin-top: 6px;

    height: 7px;

    background: #fff0f6;

    border-radius: 999px;

    overflow: hidden;

}

.top-fill {

    height: 100%;

    border-radius: 999px;

}

.top-fill.verificacoes {

    background: linear-gradient(90deg, #a975ff, #7557dc);

}

.top-fill.pontos {

    background: linear-gradient(90deg, #ffc54b, #ff903c);

}

.top-score {

    text-align: right;

}

.top-score strong {

    display: block;

    font-size: 16px;

    color: #f54493;

}

.top-score small {

    color: #f54493;

    font-size: 12px;

}

.desktop-rank-btn {

    margin-top: auto;

    width: 100%;

    border: none;

    padding: 10px;
    font-size: 14px;

    border-radius: 16px;

    background: #fff1f7;

    color: #f54493;

    font-weight: 700;

    cursor: pointer;

}

.desktop-highlight-card {
    display: flex;
    flex-direction: column;
    min-height: 246px;
    height: 246px;
    padding: 14px 16px;
}

.desktop-highlights {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.desktop-highlight-item {
    display: grid;
    grid-template-columns: 30px 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 10px 12px;
    border: 2px solid #ffd4e4;
    border-radius: 18px;
    background: #fffdf9;
}

.desktop-highlight-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff0c8;
    color: #9a6c00;
    font-weight: 900;
}

.desktop-highlight-info {
    min-width: 0;
}

.desktop-highlight-info strong,
.desktop-highlight-info small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desktop-highlight-info strong {
    color: #1d2440;
    font-size: 16px;
    font-weight: 900;
}

.desktop-highlight-info small {
    color: #8b7d9b;
    font-size: 12px;
    font-weight: 800;
}

.desktop-highlight-item b {
    color: #f54493;
    font-size: 17px;
    white-space: nowrap;
}

.desktop-highlight-empty {
    min-height: 130px;
    display: grid;
    place-items: center;
    color: #8b7d9b;
    font-weight: 900;
    border: 2px dashed #ffd4e4;
    border-radius: 18px;
}

.desktop-grid-bottom {

    display: grid;

    grid-template-columns: 1fr 1.3fr .78fr;

    gap: 10px;

    align-items: start;
}

.desktop-mission-card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding-top: 14px;
}

.desktop-feedback-card,
.desktop-chart-card,
.desktop-mission-card {

    display: flex;
    flex-direction: column;

    padding: 14px 16px;

    min-height: 246px;
    height: 246px;
}

.desktop-team-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    flex: 1 1 auto;
    min-height: 0;
}

/* CORREÇÃO FINAL DO TEXTO DENTRO DO RING */
.feedback-donut {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.feedback-donut b {
    position: relative !important;
    z-index: 3 !important;

    font-size: 17px !important;
    line-height: 1 !important;

    margin: 0 !important;
}

.feedback-donut span {
    position: relative !important;
    z-index: 3 !important;

    bottom: auto !important;
    margin: 4px 0 0 0 !important;

    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

/* Pagina de ranks */

.ranking-panel{

    padding:24px;
}

.ranking-search{

    width:100%;

    height:56px;

    border:2px solid #ffd1e3;

    border-radius:20px;

    padding:0 20px;

    font-size:17px;

    margin-bottom:20px;

    background:#fffdf9;
}

.ranking-cards{

    display:flex;

    flex-direction:column;

    gap:18px;

    overflow:auto;

    max-height:calc(100vh - 260px);

    padding-right:6px;
}

.rank-card{

    display:grid;

    grid-template-columns:

        46px
        72px
        1fr
        110px;

    align-items:center;

    gap:18px;

    background:#fff9f0;

    border:2px solid #ffd7e7;

    border-radius:28px;

    padding:20px;

    transition:.2s;
}

.rank-card:hover{

    transform:translateY(-3px);

    box-shadow:0 16px 28px rgba(255,80,140,.15);
}

.rank-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    overflow:hidden;

    background:#f5f5f5;
}

.rank-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;
}

.rank-name{

    font-size:28px;

    font-weight:800;

    color:#1f2640;
}

.rank-id{

    color:#9a96aa;

    font-size:16px;
}

.rank-info{

    color:#666;

    font-size:18px;

    margin-top:6px;
}

.rank-score{

    text-align:right;
}

.rank-score strong{

    font-size:56px;

    line-height:1;

    color:#1d2342;
}

.rank-score span{

    display:block;

    color:#ff4d93;

    font-weight:800;

    font-size:20px;
}

.rank-medal{

    font-size:28px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.rank-info{

    display:grid;

    grid-template-columns:repeat(2,minmax(140px,1fr));

    gap:8px 18px;

    margin-top:10px;
}

.rank-stat{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:6px 10px;

    background:#fff8fb;

    border:1px solid #ffd8e6;

    border-radius:12px;
}

.rank-stat span{

    font-size:13px;

    color:#616b7e;

    font-weight:700;
}

.rank-stat strong{

    font-size:15px;

    color:#1f2640;

    font-weight:800;
}

/* ===== EQUIPE ===== */

.team-cards{

    display:flex;
    flex-direction:column;
    gap:28px;

    max-height:calc(100vh - 220px);

    overflow:auto;

    padding-right:6px;

}

.team-group{

    display:flex;
    flex-direction:column;

    gap:18px;

}

.team-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 26px;

    border-radius:22px;

    font-size:28px;
    font-weight:800;

}

.team-header.gold{

    background:#fff3d8;
    color:#9b7000;

}

.team-header.green{

    background:#e8faf0;
    color:#16884d;

}

.team-header.red{

    background:#ffe8ef;
    color:#d03357;

}

.team-header.blue{

    background:#eaf2ff;
    color:#2b67d8;

}

.member-card{

    display:grid;

    grid-template-columns:
        74px
        1fr
        170px;

    align-items:center;

    gap:20px;

    padding:22px;

    border:2px solid #ffd8e7;

    border-radius:26px;

    background:#fffaf3;

    transition:.2s;

}

.member-card:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 22px rgba(255,80,140,.12);

}

.member-avatar{

    width:74px;
    height:74px;

    border-radius:50%;

    overflow:hidden;

    background:#f3f3f3;

}

.member-avatar img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.member-avatar span{

    width:100%;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:32px;
    font-weight:800;

}

.member-name{

    font-size:28px;
    font-weight:800;

    color:#1f2640;

}

.member-id{

    font-size:17px;

    color:#9892a5;

}

.member-role{

    text-align:right;

    font-size:22px;

    color:#1f2640;

}