/* =========================================================
   SHINOBI BUILDS — LIGHT THEME
   Mantém o visual colorido e corrige somente o modo claro
   ========================================================= */

html.sp-light body {
    background:
        radial-gradient(900px 520px at 78% 18%, rgba(255, 154, 64, .10), transparent 62%),
        linear-gradient(135deg, #eef5fa 0%, #e7f0f6 48%, #f5f7f9 100%) !important;
    color: #172b3d !important;
}

/* =========================
   HEADER
   ========================= */

html.sp-light .sp-top {
    background: rgba(248, 251, 253, .96) !important;
    border-bottom: 1px solid #cbd9e4 !important;
    box-shadow: 0 2px 15px rgba(35, 70, 95, .06);
}

html.sp-light .sp-nav a {
    color: #38536a !important;
}

html.sp-light .sp-nav a:hover {
    color: #172b3d !important;
    background: #edf4f8 !important;
}

html.sp-light .sp-nav a.active {
    color: #172b3d !important;
    background: #fff7ef !important;
    border-color: #ffbd8a !important;
    box-shadow: inset 0 -2px #ff6a00 !important;
}

html.sp-light .sp-account {
    background: #f8fbfd !important;
    color: #20394e !important;
    border-color: #c5d5e1 !important;
}

html.sp-light .sp-account:hover {
    border-color: #ff7a18 !important;
    color: #172b3d !important;
}

html.sp-light .sp-create-build {
    background: #ff6a00 !important;
    border-color: #ff6a00 !important;
    color: #fff !important;
}

/* =========================
   TÍTULO
   ========================= */

html.sp-light .hero h1 {
    color: #172b3d !important;
    -webkit-text-fill-color: #172b3d !important;
}

html.sp-light .hero p {
    color: #60788d !important;
    -webkit-text-fill-color: #60788d !important;
}

html.sp-light .eyebrow {
    color: #f06400 !important;
}

/* =========================
   PESQUISA
   ========================= */

html.sp-light .tools input,
html.sp-light .tools select,
html.sp-light .build-sort select {
    background: #ffffff !important;
    color: #20394e !important;
    border-color: #bfd1df !important;
}

html.sp-light .tools input::placeholder {
    color: #7890a3 !important;
}

html.sp-light .tools input:focus,
html.sp-light .tools select:focus {
    border-color: #ff8a32 !important;
    box-shadow: 0 0 0 2px rgba(255, 138, 50, .12) !important;
}

html.sp-light .build-sort label {
    color: #60788d !important;
}

/* =========================
   TÍTULO DO RANKING
   ========================= */

html.sp-light .community-ranking-title {
    color: #172b3d !important;
    -webkit-text-fill-color: #172b3d !important;
}

html.sp-light .community-ranking-sub {
    color: #60788d !important;
    -webkit-text-fill-color: #60788d !important;
}

/* =========================
   RANKING — CARDS
   ========================= */

/* 1º, 2º e 3º agora ficam claros */
html.sp-light .community-rank-card {
    background: linear-gradient(145deg, #ffffff, #f1f7fb) !important;
    color: #172b3d !important;
    border-color: #c5d7e4 !important;
    box-shadow: 0 8px 25px rgba(31, 62, 88, .08) !important;
}

/* 1º lugar */
html.sp-light .community-rank-card.rank-1 {
    border-color: rgba(255, 176, 32, .70) !important;
    box-shadow:
        0 8px 28px rgba(255, 176, 32, .12),
        inset 0 2px 0 rgba(255, 176, 32, .35) !important;
}

/* 2º lugar */
html.sp-light .community-rank-card.rank-2 {
    border-color: rgba(170, 181, 192, .75) !important;
}

/* 3º lugar */
html.sp-light .community-rank-card.rank-3 {
    border-color: rgba(184, 125, 76, .60) !important;
}

/* =========================
   CORES DOS LUGARES
   ========================= */

html.sp-light .community-rank-card.rank-1 .community-rank-pos {
    color: #d99700 !important;
}

html.sp-light .community-rank-card.rank-2 .community-rank-pos {
    color: #7d8791 !important;
}

html.sp-light .community-rank-card.rank-3 .community-rank-pos {
    color: #a85f28 !important;
}

/* =========================
   TEXTO DOS RANKINGS
   ========================= */

html.sp-light .community-rank-name {
    color: #172b3d !important;
    -webkit-text-fill-color: #172b3d !important;
}

html.sp-light .community-rank-meta {
    color: #60788d !important;
    -webkit-text-fill-color: #60788d !important;
}

html.sp-light .community-rank-score {
    color: #20394e !important;
    -webkit-text-fill-color: #20394e !important;
}

html.sp-light .community-rank-votes {
    color: #70879a !important;
    -webkit-text-fill-color: #70879a !important;
}

html.sp-light .community-rank-stars {
    color: #ffad16 !important;
}

/* =========================
   BOTÃO DO RANKING
   ========================= */

html.sp-light .community-rank-btn {
    background: #ffffff !important;
    color: #20394e !important;
    border-color: #bfd1df !important;
}

html.sp-light .community-rank-btn:hover {
    background: #fff7ef !important;
    color: #d95700 !important;
    border-color: #ff8a32 !important;
}

/* =========================
   CARDS DAS BUILDS
   ========================= */

html.sp-light #grid .card {
    background: linear-gradient(145deg, #ffffff, #f3f8fb) !important;
    color: #172b3d !important;
    border-color: #c6d8e4 !important;
    box-shadow: 0 8px 25px rgba(31, 62, 88, .08) !important;
}

html.sp-light #grid .card:hover {
    border-color: #a9c3d5 !important;
    box-shadow: 0 12px 30px rgba(31, 62, 88, .12) !important;
}

html.sp-light #grid .card .name {
    color: #172b3d !important;
    -webkit-text-fill-color: #172b3d !important;
}

html.sp-light #grid .card .desc {
    color: #60788d !important;
    -webkit-text-fill-color: #60788d !important;
}

html.sp-light #grid .card .meta {
    color: #60788d !important;
    border-top-color: #d2dfe8 !important;
}

html.sp-light #grid .card .meta span {
    color: #60788d !important;
    -webkit-text-fill-color: #60788d !important;
}

/* =========================
   TAGS
   ========================= */

html.sp-light #grid .card .tag {
    background: #eef6fb !important;
    color: #31566f !important;
    border-color: #bdd3e1 !important;
}

/* =========================
   AVALIAÇÃO
   ========================= */

html.sp-light #grid .build-rating {
    color: #60788d !important;
}

html.sp-light #grid .build-rating-stars {
    color: #ffad16 !important;
}

html.sp-light #grid .build-rating-value {
    color: #20394e !important;
}

html.sp-light #grid .build-rating-count {
    color: #70879a !important;
}

/* =========================
   BOTÕES DOS CARDS
   ========================= */

html.sp-light #grid .card .btn {
    background: #ffffff !important;
    color: #20394e !important;
    border-color: #bfd1df !important;
}

html.sp-light #grid .card .btn:hover {
    background: #fff7ef !important;
    color: #d95700 !important;
    border-color: #ff8a32 !important;
}

html.sp-light #grid .card .btn.danger {
    background: #fff5f6 !important;
    color: #d83f4e !important;
    border-color: #efa7ae !important;
}

/* =========================
   EMPTY
   ========================= */

html.sp-light .empty,
html.sp-light .community-rank-empty {
    background: rgba(255, 255, 255, .72) !important;
    color: #60788d !important;
    border-color: #c6d8e4 !important;
}

/* =========================
   RATING MODAL
   ========================= */

html.sp-light #shinobiRatingModal .rating-modal {
    background: linear-gradient(145deg, #ffffff, #f1f7fb) !important;
    color: #172b3d !important;
    border-color: #c5d7e4 !important;
}

html.sp-light #shinobiRatingModal .rating-star {
    color: #aab7c2 !important;
}

html.sp-light #shinobiRatingModal .rating-star.active,
html.sp-light #shinobiRatingModal .rating-star:hover {
    color: #ffb020 !important;
}

html.sp-light #shinobiRatingModal .rating-actions button {
    background: #ffffff !important;
    color: #20394e !important;
    border-color: #bfd1df !important;
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:850px) {
    html.sp-light .sp-top {
        background: #f8fbfd !important;
    }
}