:root {
    --background: #080808;
    --background-light: #111111;
    --card: rgba(20, 20, 20, 0.88);
    --card-hover: rgba(31, 31, 31, 0.96);
    --border: rgba(255, 255, 255, 0.12);
    --text: #ffffff;
    --text-muted: #a6a6a6;
    --purple: #ff6b00;
    --purple-light: #ffad5c;
    --green: #ff9a3c;
    --orange: #ff9f43;
    --blue: #ffffff;
    --danger: #d5d5d5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.page-wrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
}

.background-effects {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.background-effects::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.background-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: .16;
    animation: floatingGlow 12s ease-in-out infinite alternate;
}

.glow-one {
    background: var(--purple);
    top: -300px;
    left: -180px;
}

.glow-two {
    background: #ff8a1e;
    top: 25%;
    right: -350px;
    animation-delay: -4s;
}

.glow-three {
    background: #ffb05b;
    bottom: -400px;
    left: 30%;
    animation-delay: -8s;
}

@keyframes floatingGlow {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, 50px, 0) scale(1.15);
    }
}

/* NAVBAR */

.main-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 82px;
    display: flex;
    align-items: center;
    background: rgba(8, 8, 8, .80);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.brand-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--purple), #c24100);
    box-shadow: 0 10px 30px rgba(255, 107, 0, .3);
    font-size: 19px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.brand-name span,
.footer-logo span {
    color: var(--purple-light);
}

.brand-text small {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.7px;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link-custom {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    transition: .25s;
}

.nav-link-custom:hover {
    color: white;
    background: rgba(255,255,255,.055);
}

.nav-link-custom i {
    font-size: 13px;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 11px;
    background: var(--purple);
    color: white;
    font-size: 14px;
    font-weight: 700;
    transition: .25s;
}

.login-button:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 107, 0, .32);
}

.user-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 7px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.user-info span {
    font-size: 13px;
    font-weight: 700;
}

.user-info small {
    color: var(--text-muted);
    font-size: 10px;
}

.user-button > i {
    color: var(--text-muted);
    font-size: 10px;
}

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: white;
}

/* HERO */

.hero-section {
    padding: 115px 0 80px;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.hero-badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 107, 0, .22);
    border-radius: 100px;
    background: rgba(255, 107, 0, .08);
    color: var(--purple-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 14px var(--green);
    animation: statusPulse 1.8s infinite;
}

@keyframes statusPulse {
    50% {
        opacity: .4;
        transform: scale(.75);
    }
}

.hero-content h1 {
    max-width: 650px;
    margin-bottom: 25px;
    font-size: clamp(55px, 6vw, 88px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -5px;
}

.hero-content h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, var(--purple-light), #ffb457);
    background-clip: text;
    -webkit-background-clip: text;
}

.hero-description {
    max-width: 570px;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 13px;
    margin-top: 35px;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 23px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    transition: .3s;
}

.primary-button {
    background: var(--purple);
    color: white;
    box-shadow: 0 14px 35px rgba(255, 107, 0, .22);
}

.primary-button:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(255, 107, 0, .38);
}

.secondary-button {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.035);
}

.secondary-button:hover {
    color: white;
    background: rgba(255,255,255,.07);
    transform: translateY(-3px);
}

.hero-community {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
}

.community-avatars {
    display: flex;
}

.community-avatar {
    width: 35px;
    height: 35px;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--background);
    border-radius: 50%;
    background: linear-gradient(135deg, #242424, #121212);
    color: var(--purple-light);
    font-size: 11px;
    font-weight: 800;
}

.community-avatar:first-child {
    margin-left: 0;
}

.more-avatar {
    background: var(--purple);
    color: white;
}

.community-text {
    display: flex;
    flex-direction: column;
}

.community-text strong {
    font-size: 12px;
}

.community-text span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
}

/* SERVER CARD */

.hero-panel {
    position: relative;
}

.panel-glow {
    position: absolute;
    inset: 10%;
    background: var(--purple);
    filter: blur(100px);
    opacity: .17;
}

.server-card {
    position: relative;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: rgba(18, 18, 18, .80);
    backdrop-filter: blur(25px);
    box-shadow: 0 40px 100px rgba(0,0,0,.38);
}

.server-card-header {
    display: flex;
    align-items: center;
    padding: 4px 4px 18px;
}

.server-logo {
    width: 48px;
    height: 48px;
    margin-right: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--purple), #c24100);
}

.server-label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.server-card-header h2 {
    margin: 3px 0 0;
    font-size: 18px;
    font-weight: 800;
}

.online-badge {
    margin-left: auto;
    padding: 7px 10px;
    border-radius: 100px;
    background: rgba(255, 154, 60, .1);
    color: var(--green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.server-image {
    position: relative;
    height: 310px;
    overflow: hidden;
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgba(255,107,0,.28), transparent),
        radial-gradient(circle at 70% 30%, #3a220f, #17110c 55%, #090909);
}

.server-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(120deg, transparent 45%, rgba(255,255,255,.04)),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: auto, 100% 40px;
}

.city-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    opacity: .65;
    background:
        linear-gradient(90deg,
            #111111 5%,
            transparent 5% 9%,
            #111111 9% 16%,
            transparent 16% 20%,
            #111111 20% 29%,
            transparent 29% 34%,
            #111111 34% 42%,
            transparent 42% 47%,
            #111111 47% 60%,
            transparent 60% 65%,
            #111111 65% 73%,
            transparent 73% 78%,
            #111111 78% 90%,
            transparent 90%);
    clip-path: polygon(
        0 45%, 5% 45%, 5% 20%, 10% 20%, 10% 55%,
        18% 55%, 18% 30%, 25% 30%, 25% 60%,
        34% 60%, 34% 10%, 42% 10%, 42% 50%,
        49% 50%, 49% 25%, 60% 25%, 60% 62%,
        67% 62%, 67% 38%, 75% 38%, 75% 55%,
        82% 55%, 82% 15%, 91% 15%, 91% 48%,
        100% 48%, 100% 100%, 0 100%
    );
}

.server-image-content {
    position: absolute;
    left: 28px;
    bottom: 27px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
}

.server-image-content i {
    color: var(--purple-light);
    font-size: 24px;
}

.server-image-content div {
    display: flex;
    flex-direction: column;
}

.server-image-content span {
    color: #d6d6d6;
    font-size: 12px;
}

.server-image-content strong {
    margin-top: 2px;
    font-size: 20px;
}

.server-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 17px;
}

.server-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 55px;
    border-right: 1px solid var(--border);
}

.server-stat:last-child {
    border-right: 0;
}

.server-stat i {
    color: var(--purple-light);
}

.server-stat div {
    display: flex;
    flex-direction: column;
}

.server-stat span {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.server-stat strong {
    margin-top: 3px;
    font-size: 12px;
}

.status-online {
    color: var(--green);
}

/* STATS */

.stats-section {
    padding: 30px 0 100px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--card);
    backdrop-filter: blur(18px);
    transition: .3s;
}

.stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,107,0,.25);
    background: var(--card-hover);
}

.stat-icon {
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.purple-icon {
    color: var(--purple-light);
    background: rgba(255,107,0,.12);
}

.green-icon {
    color: var(--green);
    background: rgba(255,154,60,.1);
}

.orange-icon {
    color: var(--orange);
    background: rgba(255,159,67,.1);
}

.blue-icon {
    color: var(--blue);
    background: rgba(255,255,255,.1);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-content > span {
    color: var(--text-muted);
    font-size: 11px;
}

.stat-content strong {
    margin: 3px 0;
    font-size: 21px;
    font-weight: 800;
}

.stat-content small {
    color: var(--text-muted);
    font-size: 9px;
}

.stat-content small i {
    color: var(--green);
}

/* SECTIONS */

.ranking-preview-section,
.features-section {
    padding: 90px 0;
}

.ranking-preview-section {
    background: rgba(255,255,255,.012);
    border-top: 1px solid rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.025);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 38px;
}

.section-label {
    color: var(--purple-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.section-header h2,
.section-title-center h2 {
    margin: 8px 0 12px;
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 850;
    letter-spacing: -2px;
}

.section-header p,
.section-title-center p {
    max-width: 600px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 14px;
}

.section-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--purple-light);
    font-size: 13px;
    font-weight: 700;
}

.section-link:hover {
    color: white;
}

.ranking-preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
}

.ranking-player {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    transition: .25s;
}

.ranking-player:last-child {
    border-bottom: 0;
}

.ranking-player:hover {
    color: white;
    background: rgba(255,107,0,.055);
}

.ranking-position {
    width: 35px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
}

.position-1 {
    color: #ffad5c;
}

.position-2 {
    color: #e7e7e7;
}

.position-3 {
    color: #c85a00;
}

.ranking-avatar {
    width: 47px;
    height: 47px;
    margin-right: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255,107,0,.1);
    color: var(--purple-light);
}

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

.ranking-player-info {
    display: flex;
    flex-direction: column;
}

.ranking-player-info strong {
    font-size: 13px;
}

.ranking-player-info span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.ranking-money {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.ranking-money span {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.ranking-money strong {
    margin-top: 3px;
    color: var(--green);
    font-size: 14px;
}

.ranking-arrow {
    margin-left: 25px;
    color: #777777;
    font-size: 10px;
}

.empty-state {
    padding: 65px 20px;
    text-align: center;
}

.empty-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,107,0,.1);
    color: var(--purple-light);
    font-size: 22px;
}

.empty-state h3 {
    font-size: 18px;
}

.empty-state p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* FEATURES */

.section-title-center {
    margin-bottom: 45px;
    text-align: center;
}

.section-title-center p {
    margin: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    padding: 35px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    transition: .35s;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,107,0,.3);
}

.feature-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,107,0,.2), rgba(255,107,0,.05));
    color: var(--purple-light);
    font-size: 20px;
}

.feature-card h3 {
    font-size: 18px;
    font-weight: 750;
}

.feature-card p {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* FOOTER */

.main-footer {
    padding: 45px 0;
    border-top: 1px solid var(--border);
    background: rgba(5,5,5,.64);
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.footer-logo {
    font-size: 17px;
    font-weight: 800;
}

.footer-brand p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 10px;
}

.footer-links {
    display: flex;
    gap: 25px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 11px;
    transition: .2s;
}

.footer-links a:hover {
    color: white;
}

.footer-copyright {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.footer-copyright span {
    font-size: 10px;
}

.footer-copyright small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

/* ANIMATIONS */

[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

[data-animate].animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-badge,
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-community {
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .navbar-links {
        position: absolute;
        top: 82px;
        left: 15px;
        right: 15px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: rgba(14,14,14,.97);
        backdrop-filter: blur(25px);
    }

    .navbar-links.active {
        display: flex;
    }

    .mobile-menu-button {
        display: block;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .hero-section {
        padding: 80px 0 55px;
    }

    .hero-content h1 {
        font-size: 54px;
        letter-spacing: -3px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .server-image {
        height: 250px;
    }

    .server-stats {
        grid-template-columns: 1fr;
    }

    .server-stat {
        justify-content: flex-start;
        padding: 13px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .server-stat:last-child {
        border-bottom: 0;
    }

    .ranking-money {
        display: none;
    }

    .ranking-arrow {
        margin-left: auto;
    }

    .footer-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-copyright {
        text-align: center;
    }

    .user-info {
        display: none;
    }
}

@media (max-width: 480px) {
    .brand-text small {
        display: none;
    }

    .login-button span {
        display: none;
    }

    .hero-content h1 {
        font-size: 45px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-community {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================
   RANKING PAGE
========================================= */

.ranking-page {
    min-height: 100vh;
}

.page-hero {
    padding: 95px 0 50px;
}

.page-hero-content {
    max-width: 760px;
}

.page-hero-content h1 {
    margin: 0 0 22px;
    font-size: clamp(50px, 6vw, 82px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -5px;
}

.page-hero-content h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(
        90deg,
        var(--purple-light),
        #ffb457
    );
    background-clip: text;
    -webkit-background-clip: text;
}

.page-hero-content > p {
    max-width: 620px;
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.8;
}

/* PODIUM */

.podium-section {
    padding: 45px 0 100px;
}

.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 22px;
    max-width: 1000px;
    margin: auto;
}

.podium-card {
    position: relative;
    min-height: 340px;
    padding: 45px 25px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    text-align: center;
    transition: .35s;
}

.podium-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -140px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .25;
}

.podium-card:hover {
    color: white;
    transform: translateY(-10px);
}

.podium-first {
    min-height: 400px;
    padding-top: 60px;
    border-color: rgba(255, 173, 92, .25);
    background:
        linear-gradient(
            180deg,
            rgba(255, 173, 92, .055),
            transparent 45%
        ),
        var(--card);
}

.podium-first::before {
    background: #ffad5c;
}

.podium-second::before {
    background: #e7e7e7;
}

.podium-third::before {
    background: #c85a00;
}

.podium-position {
    position: absolute;
    top: 18px;
    left: 20px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
}

.podium-first .podium-position {
    color: #ffad5c;
}

.podium-second .podium-position {
    color: #e7e7e7;
}

.podium-third .podium-position {
    color: #c85a00;
}

.crown {
    position: absolute;
    top: 20px;
    color: #ffad5c;
    font-size: 25px;
    animation: crownFloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 173, 92, .4));
}

@keyframes crownFloat {
    50% {
        transform: translateY(-6px) rotate(4deg);
    }
}

.podium-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.08);
    border-radius: 28px;
    background: rgba(255,107,0,.12);
    color: var(--purple-light);
    font-size: 30px;
}

.podium-first .podium-avatar {
    width: 120px;
    height: 120px;
    border-color: rgba(255, 173, 92, .25);
    box-shadow: 0 20px 60px rgba(255, 173, 92, .12);
}

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

.podium-medal {
    width: 38px;
    height: 38px;
    margin-top: -15px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--background-light);
    border-radius: 50%;
}

.gold-medal {
    color: #3b1a00;
    background: #ffad5c;
}

.silver-medal {
    color: #292929;
    background: #e7e7e7;
}

.bronze-medal {
    color: #3b1a00;
    background: #c85a00;
}

.podium-card h2 {
    margin: 20px 0 5px;
    font-size: 19px;
    font-weight: 800;
}

.podium-job {
    color: var(--text-muted);
    font-size: 11px;
}

.podium-money {
    margin-top: 18px;
    color: var(--green);
    font-size: 20px;
    font-weight: 850;
}

/* FULL RANKING */

.ranking-list-section {
    padding: 90px 0 120px;
    border-top: 1px solid rgba(255,255,255,.025);
    background: rgba(255,255,255,.012);
}

.ranking-count {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.ranking-count > i {
    color: var(--purple-light);
}

.ranking-count div {
    display: flex;
    flex-direction: column;
}

.ranking-count span {
    color: var(--text-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.ranking-count strong {
    margin-top: 2px;
    font-size: 15px;
}

.full-ranking {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    backdrop-filter: blur(20px);
}

.ranking-table-header,
.ranking-table-row {
    display: grid;
    grid-template-columns:
        100px
        minmax(250px, 2fr)
        minmax(180px, 1fr)
        minmax(160px, 1fr)
        40px;
    align-items: center;
}

.ranking-table-header {
    min-height: 55px;
    padding: 0 25px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-table-row {
    min-height: 82px;
    padding: 10px 25px;
    border-bottom: 1px solid var(--border);
    transition: .25s;
}

.ranking-table-row:last-child {
    border-bottom: 0;
}

.ranking-table-row:hover {
    color: white;
    background: rgba(255, 107, 0, .055);
}

.table-position {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
}

.table-position i {
    font-size: 17px;
}

.rank-gold {
    color: #ffad5c;
    filter: drop-shadow(0 0 8px rgba(255,173,92,.3));
}

.rank-silver {
    color: #e7e7e7;
}

.rank-bronze {
    color: #c85a00;
}

.table-player {
    display: flex;
    align-items: center;
    gap: 14px;
}

.table-avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: rgba(255,107,0,.1);
    color: var(--purple-light);
}

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

.table-player > div:last-child {
    display: flex;
    flex-direction: column;
}

.table-player strong {
    font-size: 13px;
}

.table-player span {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

.table-job {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-muted);
    font-size: 11px;
}

.table-job i {
    color: var(--purple-light);
    font-size: 10px;
}

.table-money {
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
}

.table-arrow {
    color: #777777;
    font-size: 10px;
    text-align: right;
}

/* RANKING RESPONSIVE */

@media (max-width: 991px) {
    .podium-grid {
        max-width: 700px;
    }

    .podium-card {
        min-height: 300px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .podium-first {
        min-height: 350px;
    }

    .podium-avatar {
        width: 80px;
        height: 80px;
    }

    .podium-first .podium-avatar {
        width: 100px;
        height: 100px;
    }

    .ranking-table-header,
    .ranking-table-row {
        grid-template-columns:
            70px
            minmax(220px, 2fr)
            minmax(130px, 1fr)
            130px
            25px;
    }
}

@media (max-width: 767px) {
    .page-hero {
        padding: 75px 0 35px;
    }

    .page-hero-content h1 {
        font-size: 52px;
        letter-spacing: -3px;
    }

    .podium-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .podium-first {
        order: -1;
    }

    .podium-card,
    .podium-first {
        min-height: auto;
        padding: 55px 25px 35px;
    }

    .podium-first .podium-avatar,
    .podium-avatar {
        width: 95px;
        height: 95px;
    }

    .ranking-table-header {
        display: none;
    }

    .ranking-table-row {
        grid-template-columns: 45px 1fr auto 20px;
        padding: 14px 17px;
    }

    .table-job {
        display: none;
    }

    .table-money {
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .page-hero-content h1 {
        font-size: 44px;
    }

    .ranking-table-row {
        grid-template-columns: 35px 1fr 20px;
    }

    .table-money {
        display: none;
    }

    .table-avatar {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .table-player strong {
        font-size: 11px;
    }
}

.login-button-disabled {
    cursor: default;
    opacity: .72;
}

.login-button-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* =========================================
   PLAYER PROFILE
========================================= */

.profile-page {
    min-height: 100vh;
}

.profile-hero {
    padding: 75px 0 110px;
}

.profile-header-card,
.profile-card,
.finance-card {
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .13);
}

.profile-header-card {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
}

.profile-cover {
    position: relative;
    height: 160px;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(255, 107, 0, .86), rgba(196, 80, 0, .58)),
        linear-gradient(45deg, #241407, #38200b);
}

.profile-cover::before,
.profile-cover::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
}

.profile-cover::before {
    width: 290px;
    height: 290px;
    top: -180px;
    right: 9%;
    background: rgba(255, 255, 255, .18);
}

.profile-cover::after {
    width: 180px;
    height: 180px;
    bottom: -110px;
    left: 37%;
    background: rgba(255, 175, 92, .18);
}

.profile-cover-glow {
    position: absolute;
    width: 500px;
    height: 110px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-16deg);
    background: rgba(255, 255, 255, .08);
    filter: blur(25px);
}

.profile-header-content {
    position: relative;
    min-height: 150px;
    padding: 0 38px 30px;
    display: flex;
    align-items: end;
    gap: 25px;
}

.profile-avatar-wrapper {
    position: relative;
    flex: 0 0 132px;
    width: 132px;
    height: 132px;
    margin-top: -65px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 5px solid var(--card);
    border-radius: 30px;
    background: linear-gradient(135deg, var(--purple), #e85f00);
    color: white;
    font-size: 40px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
}

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

.profile-status {
    position: absolute;
    right: 2px;
    bottom: 3px;
    width: 25px;
    height: 25px;
    border: 4px solid var(--card);
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 16px rgba(255, 154, 60, .7);
}

.profile-main-info {
    padding-bottom: 3px;
}

.profile-label {
    color: var(--purple-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.profile-main-info h1 {
    margin: 6px 0 12px;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 850;
    letter-spacing: -1.5px;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-tags span {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .025);
    font-size: 10px;
}

.profile-tags i {
    margin-right: 5px;
    color: var(--purple-light);
}

.profile-rank {
    margin: 0 0 3px auto;
    padding: 11px 0 11px 28px;
    min-width: 125px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
}

.profile-rank span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.profile-rank strong {
    margin: 2px 0;
    color: #ffad5c;
    font-size: 30px;
    line-height: 1;
}

.profile-rank small {
    color: var(--text-muted);
    font-size: 9px;
}

.profile-grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(285px, 1fr);
    gap: 25px;
}

.profile-left-column,
.profile-right-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.profile-card,
.finance-card {
    padding: 28px;
    border-radius: 20px;
}

.profile-card-header,
.finance-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.profile-card-header h2,
.finance-card-header h2 {
    margin: 6px 0 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.profile-card-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 107, 0, .13);
    color: var(--purple-light);
}

.information-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.information-item,
.history-item,
.bank-balance {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255, 255, 255, .017);
}

.information-icon,
.history-icon,
.bank-icon {
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 107, 0, .1);
    color: var(--purple-light);
    font-size: 13px;
}

.information-item > div:last-child,
.history-item > div:last-child,
.bank-balance > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.information-item span,
.history-item span,
.bank-balance span {
    color: var(--text-muted);
    font-size: 9px;
}

.information-item strong,
.history-item strong,
.bank-balance strong {
    margin-top: 3px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.level-section {
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255, 107, 0, .11), rgba(255, 107, 0, .025));
}

.level-header,
.level-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.level-header span,
.level-footer,
.xp-value {
    color: var(--text-muted);
    font-size: 10px;
}

.level-header strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
}

.xp-value {
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(255, 107, 0, .16);
    color: var(--purple-light);
    font-weight: 700;
}

.xp-bar,
.reputation-bar {
    height: 9px;
    margin: 18px 0 10px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
}

.xp-progress,
.reputation-progress {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--purple), #ffb457);
    box-shadow: 0 0 15px rgba(255, 107, 0, .55);
}

.finance-card {
    background:
        linear-gradient(135deg, rgba(255, 154, 60, .13), rgba(255, 154, 60, .015) 60%),
        var(--card);
}

.finance-card-header > span,
.finance-card-header span {
    color: var(--green);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.finance-card-header > i {
    color: var(--green);
    font-size: 28px;
    filter: drop-shadow(0 0 15px rgba(255, 154, 60, .35));
}

.finance-balance {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.finance-balance span {
    color: var(--text-muted);
    font-size: 10px;
}

.finance-balance strong {
    margin-top: 6px;
    color: var(--green);
    font-size: clamp(31px, 4vw, 42px);
    font-weight: 850;
    letter-spacing: -2px;
}

.bank-balance {
    background: rgba(255, 154, 60, .045);
}

.bank-icon {
    background: rgba(255, 154, 60, .1);
    color: var(--green);
}

.reputation-value {
    display: flex;
    align-items: end;
    gap: 9px;
}

.reputation-value strong {
    color: #ffad5c;
    font-size: 42px;
    line-height: .9;
}

.reputation-value span {
    color: var(--text-muted);
    font-size: 10px;
}

.reputation-progress {
    background: linear-gradient(90deg, #ffbf49, #ffad5c);
    box-shadow: 0 0 15px rgba(255, 173, 92, .35);
}

.profile-not-found {
    max-width: 570px;
    margin: 65px auto;
    padding: 60px 30px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    text-align: center;
}

.profile-not-found h1 {
    margin: 0 0 12px;
    font-size: 28px;
}

.profile-not-found p {
    margin: 0 0 25px;
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .profile-hero {
        padding: 45px 0 70px;
    }

    .profile-header-content {
        padding: 0 22px 25px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-main-info {
        width: calc(100% - 157px);
        padding-top: 17px;
    }

    .profile-rank {
        width: 100%;
        margin: 0;
        padding: 17px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .profile-cover {
        height: 115px;
    }

    .profile-avatar-wrapper {
        flex-basis: 96px;
        width: 96px;
        height: 96px;
        margin-top: -48px;
    }

    .profile-avatar {
        border-radius: 24px;
    }

    .profile-main-info {
        width: calc(100% - 121px);
    }

    .profile-main-info h1 {
        font-size: 25px;
    }

    .profile-card,
    .finance-card {
        padding: 20px;
    }

    .information-grid {
        grid-template-columns: 1fr;
    }
}

/* THE DISTRICT — minimalistyczny motyw */
:root {
    --background: #ffffff;
    --background-light: #f6f6f4;
    --card: #ffffff;
    --card-hover: #ffffff;
    --border: #deded9;
    --text: #111111;
    --text-muted: #686863;
    --purple: #e56000;
    --purple-light: #e56000;
    --green: #111111;
    --orange: #e56000;
    --blue: #111111;
    --danger: #111111;
}

body { background: var(--background); color: var(--text); }
.background-effects, .background-glow, .panel-glow, .profile-cover-glow { display: none !important; }
.page-wrapper { background: #fff; }

.main-navbar {
    height: 72px;
    position: sticky;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #111;
    box-shadow: none;
    backdrop-filter: none;
}
.brand { gap: 11px; }
.brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: #111;
    box-shadow: none !important;
    font-size: 11px;
    letter-spacing: -.5px;
}
.district-mark { color: #fff; font-size: 11px; font-weight: 900; letter-spacing: -1px; }
.brand-name, .footer-logo { color: #111; font-size: 18px; font-weight: 800; letter-spacing: -.7px; }
.brand-name span, .footer-logo span { color: inherit; }
.brand-text small { color: var(--text-muted); font-size: 9px; letter-spacing: 1.3px; }
.navbar-links { gap: 2px; }
.nav-link-custom { padding: 8px 11px; border-radius: 0; color: #4d4d48; font-weight: 600; }
.nav-link-custom:hover { color: #111; background: #f4f4f1; }
.login-button, .primary-button {
    border-radius: 0;
    background: #111;
    color: #fff;
    box-shadow: none !important;
}
.login-button:hover, .primary-button:hover { transform: none; background: #e56000; color: #fff; }
.user-button { border-radius: 0; background: #fff; }

.hero-section, .page-hero, .profile-hero { padding: 86px 0 72px; background: #fff; }
.hero-container { align-items: center; gap: 74px; }
.hero-content { max-width: 630px; }
.hero-badge, .section-label, .server-label, .profile-label {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e56000;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.35px;
}
.status-dot { background: #e56000; box-shadow: none; }
.hero-content h1 { color: #111; font-size: clamp(42px, 6vw, 76px); letter-spacing: -3.5px; }
.hero-content h1 span { color: #111; text-decoration: underline; text-decoration-color: #e56000; text-decoration-thickness: 5px; text-underline-offset: 8px; }
.hero-description, .section-header p, .section-title-center p { color: var(--text-muted); }
.secondary-button { border-radius: 0; background: #fff; color: #111; border: 1px solid #111; }
.secondary-button:hover { color: #111; transform: none; background: #f4f4f1; }
.hero-community { border-top: 1px solid var(--border); }
.community-avatar { border-radius: 50%; background: #111; color: #fff; border-color: #fff; }
.more-avatar { background: #e56000; }

.hero-panel { max-width: 450px; }
.server-card, .stat-card, .feature-card, .profile-card, .finance-card, .profile-header-card,
.ranking-player, .ranking-table-row, .podium-card, .empty-state, .profile-not-found {
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}
.server-card { border-top: 3px solid #111 !important; }
.server-card-header { padding: 24px; }
.server-logo, .feature-icon, .stat-icon, .profile-card-icon, .information-icon, .history-icon, .empty-icon {
    border-radius: 0 !important;
    background: #f4f4f1 !important;
    color: #111 !important;
}
.server-image { display: none; }
.server-stats { border-top: 1px solid var(--border); }
.server-stat { border-right: 1px solid var(--border); }
.online-badge, .profile-status { border-radius: 0; background: #f4f4f1; color: #111; }
.status-online { color: #111; }

.stats-section, .ranking-preview-section, .features-section, .ranking-list-section, .podium-section { background: #fff; }
.stats-grid, .features-grid { gap: 0; border: 1px solid var(--border); }
.stat-card, .feature-card { border: 0 !important; border-right: 1px solid var(--border) !important; }
.stat-card:last-child, .feature-card:last-child { border-right: 0 !important; }
.stat-card:hover, .feature-card:hover, .ranking-player:hover, .ranking-table-row:hover, .podium-card:hover { transform: none; background: #f8f8f6 !important; }
.stat-icon.purple-icon, .stat-icon.green-icon, .stat-icon.orange-icon, .stat-icon.blue-icon { background: #f4f4f1 !important; color: #111 !important; }
.stat-content strong, .finance-balance strong, .xp-value strong, .reputation-value strong { color: #111; }
.section-header, .section-title-center { border-bottom: 1px solid #111; padding-bottom: 20px; }
.section-link { color: #111; font-weight: 700; }
.section-link:hover { color: #e56000; }

.ranking-preview, .full-ranking { border-top: 1px solid var(--border); }
.ranking-player, .ranking-table-row { border-width: 0 0 1px !important; }
.ranking-position, .table-position { color: #111; background: transparent; }
.position-1, .position-2, .position-3, .rank-gold, .rank-silver, .rank-bronze { color: #e56000 !important; background: transparent !important; }
.ranking-avatar, .table-avatar, .podium-avatar { border-radius: 50%; background: #f4f4f1; }
.ranking-money strong, .table-money strong, .podium-money { color: #111; }
.ranking-arrow, .table-arrow { color: #111; }

.page-hero { border-bottom: 1px solid #111; }
.page-hero-content h1, .profile-main-info h1 { color: #111; }
.ranking-count { color: var(--text-muted); }
.podium-grid { gap: 14px; }
.podium-card { padding: 25px 18px; }
.podium-first { border-top: 3px solid #e56000 !important; }
.podium-medal, .crown { color: #e56000 !important; filter: none; }

.profile-cover { height: 130px; background: #111 !important; }
.profile-avatar-wrapper { border-color: #fff; }
.profile-avatar { border-radius: 50%; }
.profile-rank { border-left-color: var(--border); }
.profile-rank strong { color: #111; }
.profile-tags span { border-radius: 0; background: #f4f4f1; color: #111; }
.profile-grid { gap: 16px; }
.profile-card, .finance-card { padding: 25px; }
.profile-card-header, .finance-card-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.information-item { border-bottom-color: var(--border); }
.level-section, .reputation-card, .bank-balance { background: #f4f4f1 !important; }
.xp-bar, .reputation-bar { background: #deded9; border-radius: 0; }
.xp-progress, .reputation-progress { background: #e56000; border-radius: 0; box-shadow: none; }

.main-footer { background: #111; border: 0; }
.main-footer .brand-icon { background: #fff; }
.main-footer .district-mark { color: #111; }
.main-footer .footer-logo, .footer-copyright span { color: #fff; }
.main-footer p, .main-footer a, .footer-copyright small { color: #bcbcb7; }
.main-footer a:hover { color: #fff; }

[data-animate] { opacity: 1; transform: none; transition: none; }
@media (max-width: 991px) {
    .hero-container { gap: 38px; }
    .stats-grid, .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
    .stat-card, .feature-card { border-bottom: 1px solid var(--border) !important; }
}
@media (max-width: 767px) {
    .main-navbar { height: 64px; }
    .hero-section, .page-hero, .profile-hero { padding: 52px 0; }
    .hero-content h1 { letter-spacing: -2px; }
    .stats-grid, .features-grid { grid-template-columns: 1fr; }
    .stat-card, .feature-card { border-right: 0 !important; }
    .navbar-links { background: #fff; border: 1px solid #111; border-radius: 0; }
}
/* THE DISTRICT — ciemny, stonowany motyw */
:root {
    --background: #080808;
    --background-light: #101010;
    --card: #111111;
    --card-hover: #151515;
    --border: #292929;
    --text: #f4f4f2;
    --text-muted: #9b9b96;
    --purple: #ff6a00;
    --purple-light: #ff6a00;
    --green: #f4f4f2;
    --orange: #ff6a00;
    --blue: #f4f4f2;
    --danger: #f4f4f2;
}

body, .page-wrapper, .hero-section, .page-hero, .profile-hero,
.stats-section, .ranking-preview-section, .features-section, .ranking-list-section, .podium-section {
    background: var(--background) !important;
    color: var(--text);
}
.main-navbar { background: rgba(8,8,8,.96) !important; border-bottom-color: #343434; }
.brand-icon { width: 124px; height: 44px; background: transparent !important; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name, .footer-logo { color: #f4f4f2; }
.brand-text small { color: #a9a9a3; }
.nav-link-custom { color: #c6c6c0; }
.nav-link-custom:hover { color: #fff; background: #1a1a1a; }
.login-button, .primary-button { background: #f4f4f2; color: #111; }
.login-button:hover, .primary-button:hover { background: #ff6a00; color: #111; }
.secondary-button { background: transparent; color: #f4f4f2; border-color: #555; }
.secondary-button:hover { background: #171717; color: #fff; }

.hero-content h1, .page-hero-content h1, .profile-main-info h1 { color: #f4f4f2; }
.hero-content h1 span { color: #f4f4f2; text-decoration-color: #ff6a00; }
.hero-description, .section-header p, .section-title-center p { color: #aaa9a4; }
.hero-community { border-top-color: #292929; }
.community-avatar { background: #1c1c1c; border-color: #080808; color: #fff; }
.more-avatar { background: #ff6a00; color: #111; }
.hero-badge, .section-label, .server-label, .profile-label { color: #ff6a00; }
.status-dot { background: #ff6a00; }

.server-card, .stat-card, .feature-card, .profile-card, .finance-card, .profile-header-card,
.ranking-player, .ranking-table-row, .podium-card, .empty-state, .profile-not-found {
    background: #111 !important;
    border-color: #292929 !important;
    color: #f4f4f2;
}
.server-card { border-top-color: #ff6a00 !important; }
.server-image { display: none; }
.server-logo { width: 66px; height: 46px; padding: 0; background: transparent !important; }
.server-logo img { width: 100%; height: 100%; object-fit: contain; }
.server-stat, .profile-rank, .information-item { border-color: #292929; }
.server-logo, .feature-icon, .stat-icon, .profile-card-icon, .information-icon, .history-icon, .empty-icon {
    background: #1a1a1a !important;
    color: #f4f4f2 !important;
}
.online-badge, .profile-status, .profile-tags span { background: #1a1a1a; color: #f4f4f2; }
.status-online, .stat-content strong, .finance-balance strong, .xp-value strong, .reputation-value strong,
.ranking-money strong, .table-money strong, .podium-money, .profile-rank strong { color: #f4f4f2; }

.stats-grid, .features-grid { border-color: #292929; }
.stat-card, .feature-card { border-color: #292929 !important; }
.stat-card:hover, .feature-card:hover, .ranking-player:hover, .ranking-table-row:hover, .podium-card:hover { background: #171717 !important; }
.stat-icon.purple-icon, .stat-icon.green-icon, .stat-icon.orange-icon, .stat-icon.blue-icon { background: #1a1a1a !important; color: #f4f4f2 !important; }
.section-header, .section-title-center { border-bottom-color: #3b3b3b; }
.section-link { color: #f4f4f2; }
.section-link:hover { color: #ff6a00; }

.ranking-preview, .full-ranking { border-color: #292929; }
.ranking-avatar, .table-avatar, .podium-avatar { background: #1a1a1a; }
.ranking-position, .table-position, .ranking-arrow, .table-arrow { color: #f4f4f2; }
.position-1, .position-2, .position-3, .rank-gold, .rank-silver, .rank-bronze, .podium-medal, .crown { color: #ff6a00 !important; }
.page-hero { border-bottom-color: #343434; }
.profile-cover { background: #151515 !important; }
.level-section, .reputation-card, .bank-balance { background: #171717 !important; }
.xp-bar, .reputation-bar { background: #333; }
.xp-progress, .reputation-progress { background: #ff6a00; }

.main-footer { background: #050505 !important; border-top: 1px solid #292929; }
.main-footer .brand-icon { background: transparent !important; }
.main-footer .footer-logo, .footer-copyright span { color: #f4f4f2; }
.main-footer p, .main-footer a, .footer-copyright small { color: #9b9b96; }
.main-footer a:hover { color: #ff6a00; }