/* ==========================================
   EYESCODE COLORS
========================================== */

:root {
    
    --eyes-blue: #2563eb;
    --eyes-light: #60a5fa;
    
    --eyes-bg: #0b1120;
    --eyes-card: #171f31;
    
    --eyes-border: rgba(255, 255, 255, .08);
    --eyes-border-hover: rgba(96, 165, 250, .28);
    
    --eyes-text: #f8fafc;
    --eyes-text-soft: #94a3b8;
    
    --eyes-glow: rgba(37, 99, 235, .18);
    
}


/* ==========================================
   POST CARD
========================================== */

.post-card{

    width:100%;
   max-width:760px;

    position:relative;

    overflow:visible;

    border-radius:24px;

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

    backdrop-filter:blur(20px);

    border:1px solid var(--eyes-border);

    box-shadow:
        0 20px 50px rgba(0,0,0,.40);

    transition:.30s;

}

.post-card::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:

    linear-gradient(
        90deg,
        transparent,
        var(--eyes-blue),
        transparent
    );

    opacity:.55;

}


.post-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top right,

        rgba(37,99,235,.08),

        transparent 45%

    );

    pointer-events:none;

}


.post-card:hover {
    
    transform: translateY(-6px);
    
    border-color: rgba(96, 165, 250, .35);
    
    box-shadow:
    
        0 30px 70px rgba(0, 0, 0, .45),
        
        0 0 0 1px rgba(37, 99, 235, .18),
        
        0 0 40px rgba(37, 99, 235, .18);
    
}
/* ==========================================
   HEADER
========================================== */

.post-header {
    
    position: relative;
    
    display: flex;
    
    align-items: flex-end;
    
    gap: 20px;
    
    margin-top: -68px;
    
    padding: 0 26px 22px;
    
    z-index: 10;
    
}


.post-user {


    flex:1;


}



.post-name {
    
    display: flex;
    
    align-items: center;
    
    gap: 8px;
    
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .2px;
    
    color:#fff;
    
    
}



.verified {
    
    width: 18px;
    
    height: 18px;
    
    display: flex;
    
    justify-content: center;
    
    align-items: center;
    
    border-radius: 50%;
    
    background: #2563eb;
    
    color: white;
    
    font-size: 10px;
    
}



.post-meta {
    
    display: flex;
    
    align-items: center;
    
    flex-wrap: wrap;
    
    gap: 8px;
    
    margin-top:6px;
    
    font-size:13px;
    
color:#8ea3c2;
    
}



.post-menu {


    background:none;


    border:none;


    color:#94a3b8;


    font-size:24px;


    cursor:pointer;


}




/* ==========================================
   CONTEÚDO
========================================== */


.post-content {
    
padding:20px 22px 24px;
    
}


.post-content p {


   margin:0;
   
   font-size:15px;
   
   line-height:1.8;
   
   color:#d8e2f0;


}





/* ==========================================
   IMAGEM
========================================== */


.post-media {


    width:100%;


    max-height:450px;


    overflow:hidden;


}



.post-media img {


    width:100%;


    height:auto;


    display:block;


    object-fit:cover;


}




/* ==========================================
   AÇÕES
========================================== */
.post-actions button {
    
    flex: 1;
    
    height: 50px;
    
    border-radius: 16px;
    
    border: 1px solid transparent;
    
    background: rgba(255, 255, 255, .03);
    
    color: #cbd5e1;
    
    font-weight: 600;
    
    transition:
    
        .25s background,
        
        .25s border,
        
        .25s transform,
        
        .25s color;
    
}


.post-actions button {


    flex:1;


    padding:10px;

    height:46px;
    
    font-weight:600;
    
    border-radius:14px;


    border:none;


    background:

    rgba(255,255,255,.05);


    color:#cbd5e1;


    cursor:pointer;


    transition:.25s;


}


.post-actions button:hover {
    
    background: rgba(37, 99, 235, .12);
    
    border-color: rgba(37, 99, 235, .35);
    
    transform: translateY(-2px);
    
    color: #fff;
    
}


/* LIKE */


.post-actions button:first-child:hover {


    color:#ef4444;


}

.post-category {
    
    position: absolute;
    
    top: 18px;
    
    left: 18px;
    
    padding: 8px 16px;
    
    border-radius: 999px;
    
    background: rgba(10, 15, 25, .55);
    
    backdrop-filter: blur(12px);
    
    color: #fff;
    
    font-size: 13px;
    
    font-weight: 700;
    
    z-index: 20;
    
}

.post-stats {
    
    display: flex;
    
    justify-content: space-between;
    
    align-items: center;
    
    padding: 18px 24px;
    
    border-top: 1px solid rgba(255, 255, 255, .05);
    
    color: #94a3b8;
    
    font-size: 14px;
    
}

.post-stats span {
    
    display: flex;
    
    align-items: center;
    
    gap: 6px;
    
}
/* MOBILE */



.post-badges {
    
    display: flex;
    
    align-items: center;
    
    gap: 6px;
    
}

.post-badge {
    
    width: 20px;
    
    height: 20px;
    
}
/* ==========================================
   ACHIEVEMENT POST
========================================== */


.post-achievement {


    margin:

    0 20px 20px;


    padding:18px;


    display:flex;


    align-items:center;


    gap:15px;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        rgba(37,99,235,.18),
        rgba(96,165,250,.08)
    );


    border:

    1px solid rgba(37,99,235,.35);


    box-shadow:

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


}



.post-achievement:first-letter {


    font-size:35px;


}



.post-achievement strong {


    display:block;


    color:white;


}



.post-achievement span {


    color:#94a3b8;


    font-size:13px;


}
/* ==========================================
   AVATAR WRAPPER
========================================== */
.avatar-wrapper {
    
    position: relative;
    
    width: 80px;
    
    height: 80px;
    
    flex-shrink: 0;
    
    z-index: 20;
    
}
.post-user {
    
    flex: 1;
    
    position: relative;
    
    z-index: 20;
    
}
.avatar-wrapper::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--eyes-blue),

            var(--eyes-light)

        );

    opacity:.18;

    filter:blur(5px);

}

.post-avatar {
    
    width: 80px;
    
    height: 80px;
    
    object-fit: cover;
    
    border-radius: 50%;
    
    border: 4px solid #171f31;
    
    background: #26344f;
    
    box-shadow:
        0 10px 25px rgba(0, 0, 0, .35);
    
}

.post-banner {
    
    height: 170px;
    
    position: relative;
    
    overflow: visible;
    
    border-radius: 24px 24px 0 0;
    
    z-index: 1;
    
}
.post-banner::after {

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:80px;

    background:
    linear-gradient(
        to bottom,
        transparent,
        rgba(11,17,32,0.95)
    );

    pointer-events:none;

    z-index:2;

}
.post-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(255,255,255,.12),
        transparent 45%
    );

    border-radius:24px 24px 0 0;

    pointer-events:none;

    z-index:1;

}
.post-banner.eyescode-blue{

    background:

        linear-gradient(

            135deg,

            #2563eb,

            #1d4ed8,

            #0f172a

        );

}

.post-banner.galaxy {
    
    background:
    
        radial-gradient(circle at top, #60a5fa, transparent 30%),
        
        radial-gradient(circle at bottom, #4338ca, transparent 35%),
        
        #09090b;
    
}

.post-banner.cyber{

    background:

        repeating-linear-gradient(

            90deg,

            rgba(37,99,235,.18),

            rgba(37,99,235,.18) 2px,

            transparent 2px,

            transparent 12px

        ),

        #111827;

}

.post-banner.inferno{

    background:

        linear-gradient(

            135deg,

            #7f1d1d,

            #dc2626,

            #f97316

        );

}

.post-banner.forest{

    background:

        linear-gradient(

            160deg,

            #14532d,

            #166534,

            #052e16

        );

}

.post-banner.diamond{

    background:

        linear-gradient(

            135deg,

            #38bdf8,

            #e0f2fe,

            #2563eb

        );

}

.post-banner.carbon{

    background:

        repeating-linear-gradient(

            45deg,

            #161616,

            #161616 10px,

            #1f1f1f 10px,

            #1f1f1f 20px

        );

}

.post-banner.aurora{

    background:

        linear-gradient(

            90deg,

            #2563eb,

            #8b5cf6,

            #14b8a6,

            #2563eb

        );

    background-size:300%;

    animation:

        aurora 10s linear infinite;

}

@keyframes aurora{

    to{

        background-position:300%;

    }

}
/* ==========================================
   MATRIX
========================================== */

/* ==========================================
   MATRIX RAIN
========================================== */

.post-banner.matrix {

    position: relative;

    overflow: hidden;

    background:

    radial-gradient(
        circle at center,
        #064e3b,
        #020617 70%
    );

}


.matrix-code {

    position:absolute;

    top:-100%;

    color:#22c55e;

    font-family:monospace;

    font-size:18px;

    line-height:22px;

    opacity:.45;

    text-shadow:

    0 0 8px #22c55e;

    animation:

    matrixFall linear infinite;

    white-space:pre;

}



@keyframes matrixFall {


    from {

        transform:translateY(-20%);

    }


    to {

        transform:translateY(140%);

    }


}


/* brilho passando */

.post-banner.matrix::after {

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        180deg,
        transparent,
        rgba(34,197,94,.18),
        transparent
    );


    animation:

    matrixScan 3s infinite;

}



@keyframes matrixScan {


    from {

        transform:translateY(-100%);

    }


    to {

        transform:translateY(100%);

    }


}

/*==========================================
CRIAR POST
==========================================*/

.create-post {
    
    padding: 22px;
    
    border-radius: 24px;
    
}

.create-post-header {
    
    display: flex;
    
    gap: 16px;
    
    align-items: flex-start;
    
}

.create-post-avatar {
    
    width: 58px;
    
    height: 58px;
    
    border-radius: 50%;
    
    object-fit: cover;
    
    border: 3px solid rgba(37, 99, 235, .35);
    
    flex-shrink: 0;
    
}

#createPostAvatar {
    
    background: #26344f;
    
}

#createPostAvatar:hover {
    
    transform: scale(1.03);
    
}

#createPostAvatar {
    
    transition: .25s;
    
}

#createPostAvatar {
    
    box-shadow: 0 0 15px rgba(37, 99, 235, .15);
    
}

#createPostAvatar {
    
    cursor: pointer;
    
}

#postText {
    
    flex: 1;
    
    min-height: 90px;
    
    resize: none;
    
    border: none;
    
    outline: none;
    
    background: transparent;
    
    color: #f8fafc;
    
    font-size: 16px;
    
    font-family: inherit;
    
    line-height: 1.7;
    
}

#postText::placeholder {
    
    color: #94a3b8;
    
}

.create-post-footer {
    
    margin-top: 18px;
    
    padding-top: 18px;
    
    border-top: 1px solid rgba(255, 255, 255, .06);
    
    display: flex;
    
    justify-content: space-between;
    
    align-items: center;
    
}

.create-post-tools {
    
    display: flex;
    
    gap: 10px;
    
}

.create-post-tools button {
    
    width: 42px;
    
    height: 42px;
    
    border: none;
    
    border-radius: 12px;
    
    background: rgba(255, 255, 255, .05);
    
    color: #94a3b8;
    
    cursor: pointer;
    
    transition: .25s;
    
}

.create-post-tools button:hover {
    
    background: rgba(37, 99, 235, .18);
    
    color: #fff;
    
}

#publishPost {
    
    padding: 12px 26px;
    
    border: none;
    
    border-radius: 14px;
    
    background: #2563eb;
    
    color: #fff;
    
    font-weight: 600;
    
    cursor: pointer;
    
    transition: .25s;
    
}

#publishPost:hover {
    
    transform: translateY(-2px);
    
    box-shadow: 0 12px 28px rgba(37, 99, 235, .25);
    
}
/* ==========================================
   BOTÃO DE OPÇÕES DO POST
========================================== */

.post-banner {
    position: relative;
}


.btn-post-menu {
    
    position: absolute;
    
    top: 12px;
    right: 12px;
    
    
    width: 38px;
    height: 38px;
    
    
    border-radius: 50%;
    
    
    border: none;
    
    
    background: rgba(255, 255, 255, 0.9);
    
    
    font-size: 20px;
    
    
    cursor: pointer;
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    transition: .2s;
    
    
    z-index: 50;
    
}
.post-banner::before,
.post-banner::after {
    
    z-index: 1;
    
}



.btn-post-menu:hover {
    
    transform: scale(1.1);
    
    background: white;
    
}



/* ==========================================
   MENU DE AÇÕES
========================================== */


.post-menu {
    
    display: none;
    
    
    position: absolute;
    
    
    top: 55px;
    
    right: 12px;
    
    
    width: 150px;
    
    
    background: white;
    
    
    border-radius: 12px;
    
    
    padding: 8px;
    
    
    box-shadow:
        0 5px 20px rgba(0, 0, 0, .25);
    
    
    z-index: 10000;
    
    
}



/* BOTÕES DO MENU */


.post-menu button {
    
    
    width: 100%;
    
    
    padding: 10px;
    
    
    border: none;
    
    
    background: transparent;
    
    
    text-align: left;
    
    
    font-size: 14px;
    
    
    border-radius: 8px;
    
    
    cursor: pointer;
    z-index: 1000;
    
    transition: .2s;
    
    
}



.post-menu button:hover {
    
    background: #f1f1f1;
    
}



/* EDITAR */

.editar-post {
    
    color: #2563eb;
    
}



/* EXCLUIR */

.excluir-post {
    
    color: #dc2626;
    
}