/* ==========================================
   EYESCODE PROFILE DESKTOP
========================================== */


/* ==========================================
   VARIABLES
========================================== */

:root {

    --profile-color:#2563eb;
    --profile-color-light:#60a5fa;
    --profile-glow:rgba(37,99,235,.35);

}



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


.profile-page {

    padding:40px 0 80px;

}


.profile-page .container {

    max-width:1380px;

    margin:auto;

}



/* ==========================================
   GLASS SYSTEM
========================================== */


.glass {

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.04)
    );


    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);


    border:

    1px solid rgba(255,255,255,.12);


    box-shadow:

    0 20px 50px rgba(0,0,0,.35),

    inset 0 1px 0 rgba(255,255,255,.08);

}



/* ==========================================
   HERO
========================================== */
.profile-hero{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    isolation:isolate;

}


.profile-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(37,99,235,.45),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 10%,
            rgba(59,130,246,.35),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 120%,
            rgba(37,99,235,.20),
            transparent 55%
        );

    z-index:-2;

}


.profile-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(9,12,20,.45),
            #0d1118 95%
        );

    z-index:-1;

}

.profile-header {
    
    position: relative;
    
    z-index: 5;
    
}

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


.profile-header {

    position:relative;

    z-index:10;


    display:flex;

    align-items:flex-end;


    gap:28px;


    margin-top:-90px;


    padding:

    0 40px 40px;

}



/* ==========================================
   AVATAR
========================================== */


.profile-avatar {

    position:relative;

    z-index:20;


    width:170px;

    height:170px;


    flex-shrink:0;


    border-radius:50%;


    border:

    6px solid #171f31;


    background:#26344f;


    display:flex;

    align-items:center;

    justify-content:center;


    box-shadow:

    0 0 35px rgba(37,99,235,.18);


    transition:.3s;

}



.profile-avatar:hover {

    transform:scale(1.05);


    box-shadow:

    0 0 45px var(--profile-glow);

}



.profile-avatar img {

    width:100%;

    height:100%;


    object-fit:cover;


    border-radius:50%;


    position:relative;

    z-index:2;

}



.profile-avatar::before {

    content:"";


    position:absolute;


    inset:-12px;


    border-radius:50%;


    background:

    radial-gradient(
        var(--profile-glow),
        transparent 70%
    );


}



/* ==========================================
   AVATAR FRAME
========================================== */


.avatar-frame {


    position:absolute;


    inset:-10px;


    border-radius:50%;


    border:

    3px solid var(--profile-color);


    box-shadow:

    0 0 20px var(--profile-glow);


    z-index:3;

}



.premium-frame {

    animation:

    frameGlow 2s infinite alternate;

}



@keyframes frameGlow {


    from {

        opacity:.7;

    }


    to {

        opacity:1;

    }

}



.avatar-level-ring {


    position:absolute;


    inset:-10px;


    border-radius:50%;


    border:

    2px solid var(--profile-color);


    opacity:.7;

}



/* ==========================================
   PROFILE INFO
========================================== */


.profile-user {

    flex:1;


    padding-bottom:8px;


}



.profile-gamertag {

    font-size:38px;

    font-weight:700;


    letter-spacing:-1px;


    line-height:1;

}



.profile-bio {


    max-width:650px;


    margin-top:10px;


    color:#9ca3af;


    line-height:1.7;

}



.level-box {


    display:flex;


    align-items:center;


    gap:10px;


    margin-top:10px;

}



.profile-level {


    display:inline-flex;


    padding:

    6px 12px;


    border-radius:999px;


    background:

    rgba(37,99,235,.15);


    color:

    var(--profile-color-light);


    font-size:.9rem;


    font-weight:600;

}



/* ==========================================
   EDIT BUTTON
========================================== */
.profile-edit {
    
    display: inline-flex;
    
    align-items: center;
    
    gap: 8px;
    
    padding: 10px 16px;
    
    border-radius: 12px;
    
    border: 1px solid rgba(255, 255, 255, .12);
    
    background: rgba(255, 255, 255, .06);
    
    color: white;
    
    font-weight: 600;
    
    cursor: pointer;
    
    transition: .25s;
    
    width: auto;
    
}}



.profile-edit:hover {


    transform:translateY(-2px);


    background:

    var(--profile-color-light);


}



/* ==========================================
   STATS
========================================== */


.profile-stats {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:18px;


    padding:

    0 40px 35px;

}



.profile-stat {


    padding:22px;


    border-radius:20px;


    text-align:center;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid rgba(255,255,255,.08);


    transition:.3s;

}



.profile-stat:hover {


    transform:translateY(-5px);


    border-color:#2563eb;


    background:

    rgba(37,99,235,.12);

}



.profile-stat strong {


    display:block;


    font-size:30px;


    font-weight:700;

}



.profile-stat span {


    display:block;


    margin-top:8px;


    color:#94a3b8;


}

/* ==========================================
   PROFILE CONTENT
========================================== */

.profile-content{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:28px;

    margin-top:28px;

}


/* ==========================================
   SIDEBAR
========================================== */

.profile-sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.profile-card,
.profile-achievements,
.profile-links{

    transition:.3s;

}


.profile-card:hover,
.profile-achievements:hover,
.profile-links:hover{

    transform:translateY(-4px);

    border-color:rgba(37,99,235,.25);

}


.profile-sidebar h3{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:#94a3b8;

}


.profile-sidebar h3::before{

    content:"";

    width:4px;

    height:18px;

    border-radius:20px;

    background:var(--profile-color);

}



/* ==========================================
   ABOUT
========================================== */

.profile-card{

    padding:22px;

    border-radius:20px;

}


.profile-card p{

    color:#94a3b8;

    line-height:1.7;

}



/* ==========================================
   LINKS
========================================== */

.profile-links{

    padding:22px;

    border-radius:20px;

}


#profileLinks{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.profile-link{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:14px;

    text-decoration:none;

    color:#e5e7eb;

    background:rgba(255,255,255,.04);

    transition:.25s;

}


.profile-link:hover{

    transform:translateX(6px);

    background:rgba(37,99,235,.15);

}


.profile-link i{

    width:22px;

    text-align:center;

    font-size:20px;

}


.profile-link span{

    display:block;

    font-weight:600;

}


.profile-link small{

    display:block;

    color:#94a3b8;

    font-size:.78rem;

}



/* ==========================================
   FEED
========================================== */

.profile-feed{

    display:flex;

    flex-direction:column;

    gap:20px;

}



/* ==========================================
   TABS
========================================== */

.profile-tabs{

    display:flex;

    gap:10px;

    padding:10px;

    border-radius:18px;

}


.profile-tabs button{

    flex:1;

    padding:13px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.04);

    color:#94a3b8;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}


.profile-tabs button:hover,

.profile-tabs button.active{

    background:rgba(37,99,235,.25);

    color:white;

}



/* ==========================================
   POSTS
========================================== */

.profile-posts{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.post-card{

    transition:.3s;

}


.post-card:hover{

    transform:translateY(-4px);

}


.post-header{

    display:flex;

    align-items:center;

    gap:12px;

}


.post-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#26344f;

}


.post-card p{

    margin-top:15px;

    color:#cbd5e1;

    line-height:1.6;

}



/* ==========================================
   XP SYSTEM
========================================== */

.xp-container{

    margin-top:18px;

    max-width:420px;

}


.xp-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-size:.85rem;

    color:#94a3b8;

}


.xp-progress{

    position:relative;

    overflow:hidden;

    height:12px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.08)
        );

    border:1px solid rgba(255,255,255,.05);

}


.xp-bar{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            90deg,
            #2563eb 0%,
            #3b82f6 35%,
            #60a5fa 70%,
            #93c5fd 100%
        );

}
.xp-bar::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at center,

            rgba(255,255,255,.35),

            transparent 70%

        );

    opacity:.45;

}

.xp-bar::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        110deg,

        transparent 20%,

        rgba(255,255,255,.45) 50%,

        transparent 80%

    );

    transform:translateX(-150%);

    animation:xpShine 2.5s linear infinite;

}


@keyframes xpShine{

    to{

        transform:translateX(250%);

    }

}


.xp-bar.almost-level{

    animation:xpPulse 1s infinite alternate;

}


@keyframes xpPulse{

    from{

        box-shadow:0 0 12px var(--profile-glow);

    }

    to{

        box-shadow:0 0 30px var(--profile-glow);

    }

}



/* ==========================================
   LEVEL UP
========================================== */

.level-up{

    animation:levelBounce .45s;

}


@keyframes levelBounce{

    0%{

        transform:scale(.85);

    }

    55%{

        transform:scale(1.18);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================
   PROFILE EDITOR
========================================== */

.profile-editor-overlay{

    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.65);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:5000;

}

.profile-editor-overlay.active{

    opacity:1;
    visibility:visible;

}

.profile-editor{

    width:min(95%,520px);

    max-height:90vh;

    display:flex;
    flex-direction:column;

    background:#16181d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

}

.profile-editor-overlay.active .profile-editor{

    transform:translateY(0);

}


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

.editor-header{

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

    padding:20px 24px;

    border-bottom:
    1px solid rgba(255,255,255,.08);

}

.editor-header h2{

    font-size:20px;

}

.editor-close{

    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;

}


/* ==========================================
   EDITOR BODY
========================================== */

.editor-body{

    padding:24px;

    overflow-y:auto;

    max-height:70vh;

}

.editor-section{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:28px;

}

.editor-section h3{

    margin-bottom:5px;

}

.editor-section label{

    font-weight:600;

}

.editor-help{

    color:#94a3b8;

    font-size:.85rem;

    line-height:1.5;

}


/* ==========================================
   INPUTS
========================================== */

.editor-section input,

.editor-section textarea{

    width:100%;

    background:#1d2128;

    color:white;

    border:

    1px solid rgba(255,255,255,.10);

    border-radius:12px;

    font-size:15px;

    transition:.25s;

}

.editor-section input{

    padding:13px 14px;

}

.editor-section textarea{

    resize:none;

    height:120px;

    padding:14px;

}

.editor-section input:focus,

.editor-section textarea:focus{

    outline:none;

    border-color:var(--profile-color);

    box-shadow:

    0 0 0 3px rgba(37,99,235,.15);

}


/* ==========================================
   BIO COUNTER
========================================== */

.bio-counter{

    display:flex;

    justify-content:flex-end;

    font-size:13px;

    opacity:.7;

}


/* ==========================================
   AVATAR EDITOR
========================================== */

.editor-avatar{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.avatar-preview{

    position:relative;

    width:130px;

    height:130px;

    overflow:hidden;

    border-radius:50%;

    border:3px solid var(--profile-color);

    background:#242933;

    cursor:pointer;

    transition:.25s;

}

.avatar-preview:hover{

    transform:scale(1.03);

}

.avatar-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.avatar-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    opacity:0;

    transition:.25s;

}

.avatar-preview:hover .avatar-overlay{

    opacity:1;

}

.avatar-overlay i{

    color:white;

    font-size:28px;

}


/* ==========================================
   BUTTONS
========================================== */

.change-avatar,

.change-banner,

.btn-save,

.btn-cancel{

    padding:12px 22px;

    border:none;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.change-avatar,

.change-banner,

.btn-save{

    background:var(--profile-color);

    color:white;

}

.change-avatar:hover,

.change-banner:hover,

.btn-save:hover{

    transform:translateY(-2px);

    box-shadow:

    0 12px 30px rgba(37,99,235,.30);

}

.btn-cancel{

    background:#2b313b;

    color:white;

}


/* ==========================================
   ACTIONS
========================================== */

.editor-actions{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:25px;

}


/* ==========================================
   CURRENT POST BANNER
========================================== */

.current-banner-preview{

    width:100%;

    height:120px;

    border-radius:16px;

    overflow:hidden;

    background:#242933;

    border:

    1px solid rgba(255,255,255,.08);

}


/* ==========================================
   LEVEL UP POPUP
========================================== */

.levelup-popup{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.levelup-popup.show{

    opacity:1;

    visibility:visible;

}

.levelup-card{

    width:380px;

    padding:40px;

    text-align:center;

    border-radius:24px;

    background:#171f31;

    border:

    1px solid rgba(255,255,255,.08);

    transform:scale(.85);

    transition:.35s;

    box-shadow:

    0 30px 70px rgba(0,0,0,.5);

}

.levelup-popup.show .levelup-card{

    transform:scale(1);

}

.levelup-icon{

    font-size:70px;

    margin-bottom:20px;

    animation:levelFloat 1s infinite alternate;

}

.levelup-card h2{

    font-size:36px;

    color:#3b82f6;

    margin-bottom:10px;

}

.levelup-card h3{

    margin-bottom:15px;

}

.levelup-card p{

    color:#94a3b8;

}

@keyframes levelFloat{

    from{

        transform:translateY(-4px);

    }

    to{

        transform:translateY(6px);

    }

}


/* ==========================================
   PROFILE ACHIEVEMENTS
========================================== */

.profile-achievements{

    padding:22px;

    border-radius:20px;

}

.achievement-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.achievement{

    position:relative;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    border-radius:18px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,255,255,.08);

    transition:
    transform .25s,
    border-color .25s,
    box-shadow .25s,
    background .25s;

}

.achievement:hover{

    transform:translateY(-3px);

}

.achievement.locked{

    opacity:.35;

    filter:grayscale(1);

}

.achievement-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,255,255,.08);

}

.achievement i{

    font-size:28px;

}

.achievement-info{

    flex:1;

}

.achievement strong{

    display:block;

    font-size:15px;

    color:#fff;

}

.achievement p{

    margin-top:5px;

    color:#94a3b8;

    font-size:13px;

    line-height:1.5;

}

.achievement-rarity{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:10px;

    padding:5px 11px;

    border-radius:999px;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.achievement.comum {
    
    border-color: rgba(34, 197, 94, .35);
    
}

.achievement.comum:hover {
    
    border-color: #22c55e;
    
    box-shadow:
        0 12px 28px rgba(34, 197, 94, .18);
    
}

.achievement.comum i {
    
    color: #22c55e;
    
}

.comum .achievement-rarity {
    
    background: rgba(34, 197, 94, .15);
    
    color: #22c55e;
    
}

.achievement.rara {
    
    border-color: rgba(168, 85, 247, .35);
    
}

.achievement.rara:hover {
    
    border-color: #a855f7;
    
    box-shadow:
        0 12px 30px rgba(168, 85, 247, .22);
    
}

.achievement.rara i {
    
    color: #a855f7;
    
}

.rara .achievement-rarity {
    
    background: rgba(168, 85, 247, .15);
    
    color: #a855f7;
    
}

.achievement.epica {
    
    border-color: rgba(250, 204, 21, .35);
    
}

.achievement.epica:hover {
    
    border-color: #facc15;
    
    box-shadow:
        0 14px 34px rgba(250, 204, 21, .24);
    
}

.achievement.epica i {
    
    color: #facc15;
    
}

.epica .achievement-rarity {
    
    background: rgba(250, 204, 21, .15);
    
    color: #facc15;
    
}

.achievement.lendaria {
    
    border-color: rgba(239, 68, 68, .45);
    
}

.achievement.lendaria i {
    
    color: #ef4444;
    
}

.lendaria .achievement-rarity {
    
    background: rgba(239, 68, 68, .15);
    
    color: #ef4444;
    
}

.achievement.lendaria:hover {
    
    border-color: #ef4444;
    
    box-shadow:
        0 0 35px rgba(239, 68, 68, .30);
    
}

.achievement.lendaria::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:translateX(-150%);

    animation:legendaryShine 3.5s infinite;

}

@keyframes legendaryShine{

    100%{

        transform:translateX(250%);

    }

}

.profile-hero>* {
    position: relative;
    z-index: 2;
}

.xp-bar{

    position:relative;

    height:100%;

    border-radius:999px;

background:
linear-gradient(
    180deg,
    #60a5fa 0%,
    #3b82f6 45%,
    #2563eb 55%,
    #1d4ed8 100%
);

    box-shadow:
        0 0 18px var(--profile-glow);

    transition:
        width .55s cubic-bezier(.3,.61,.36,1);

}

.profile-banner {
    
    position: relative;
    
    z-index: 1;
    
    overflow: hidden;
    
}