/* =========================================================
   CAT GANG // MEMBERS
   Community Network Interface
========================================================= */

:root {

    --cg-green: #00ff66;
    --cg-cyan: #00eaff;
    --cg-pink: #ff2bd6;

    --cg-bg: #03070a;
    --cg-panel: rgba(5, 10, 14, 0.90);
    --cg-panel-light: rgba(8, 16, 20, 0.82);

    --cg-border: rgba(0, 255, 102, 0.22);
    --cg-border-strong: rgba(0, 255, 102, 0.48);

    --cg-text: #e7ffff;
    --cg-muted: #7f9299;
    --cg-dim: #52636a;

    --cg-danger: #ff5555;

    --cg-radius: 6px;

    --cg-glow:
        0 0 18px rgba(0, 255, 102, 0.10);

    --cg-glow-strong:
        0 0 25px rgba(0, 255, 102, 0.20);
}


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

.members-wrapper {

    width: min(1500px, calc(100% - 50px));

    margin: 0 auto;

    padding-top: 55px;
    padding-bottom: 60px;

    position: relative;

    z-index: 2;
}


/* =========================================================
   MAIN GRID
========================================================= */

.members-layout {

    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr)
        250px;

    gap: 20px;

    align-items: start;
}


/* =========================================================
   GENERIC PANEL
========================================================= */

.panel {

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(8, 17, 21, 0.94),
            rgba(3, 8, 11, 0.94)
        );

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

    border-radius:
        var(--cg-radius);

    overflow: hidden;

    box-shadow:
        var(--cg-glow);

    backdrop-filter:
        blur(10px);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/*
 * Technical corner accent
 */

.panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 35px;
    height: 1px;

    background:
        var(--cg-green);

    box-shadow:
        0 0 8px
        rgba(0, 255, 102, .65);

}


/*
 * Subtle lower accent
 */

.panel::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 25px;
    height: 1px;

    background:
        var(--cg-cyan);

    opacity: .35;

}


.panel:hover {

    border-color:
        var(--cg-border-strong);

    box-shadow:
        var(--cg-glow-strong);

}


/* =========================================================
   PANEL HEADINGS
========================================================= */

.panel h2 {

    margin: 0;

    padding: 15px 18px;

    border-bottom:
        1px solid
        rgba(0, 255, 102, .13);

    color:
        var(--cg-green);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-shadow:
        0 0 10px
        rgba(0, 255, 102, .25);
}


.panel-content {

    padding: 18px;

}


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

.left-sidebar {

    display: flex;

    flex-direction: column;

    gap: 18px;

    min-width: 0;
}


/* =========================================================
   PROFILE CARD
========================================================= */

.profile-card {

    padding: 26px 20px 24px;

    text-align: center;

}


.profile-card::before {

    width: 70px;

}


.member-avatar {

    display: block;

    width: 110px;
    height: 110px;

    margin:
        2px auto 18px;

    border-radius:
        50%;

    border:
        2px solid
        var(--cg-green);

    object-fit:
        cover;

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

    box-shadow:
        0 0 0 4px rgba(0, 255, 102, .04),
        0 0 22px rgba(0, 255, 102, .25);

}


/* =========================================================
   PROFILE IDENTITY
========================================================= */

.profile-card h2 {

    margin:
        0 0 8px;

    padding: 0;

    border: none;

    color:
        var(--cg-text);

    font-size: 18px;

    letter-spacing: 1.5px;

    text-shadow:
        0 0 12px
        rgba(0, 255, 102, .18);

}


.member-rank {

    margin:
        0 0 12px;

    color:
        var(--cg-green);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.member-bio {

    margin: 0;

    color:
        var(--cg-muted);

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================================
   MEMBER MENU
========================================================= */

.member-menu {

    display: flex;

    flex-direction: column;

}


.member-menu a {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 42px;

    padding:
        0 17px;

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

    color:
        var(--cg-muted);

    text-decoration: none;

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size: 12px;

    letter-spacing: .7px;

    transition:
        color .18s ease,
        background .18s ease,
        padding .18s ease;
}


.member-menu a:last-child {

    border-bottom: none;

}


.member-menu a::before {

    content: ">";

    margin-right: 9px;

    color:
        var(--cg-dim);

    transition:
        color .18s ease;

}


.member-menu a:hover {

    padding-left: 21px;

    background:
        rgba(0, 255, 102, .055);

    color:
        var(--cg-green);

}


.member-menu a:hover::before {

    color:
        var(--cg-green);

}


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

.feed-column {

    display: flex;

    flex-direction: column;

    gap: 20px;

    min-width: 0;

}


/* =========================================================
   CREATE POST
========================================================= */

.create-post {

    padding-bottom: 18px;

}


.create-post h2 {

    display: flex;

    align-items: center;

    gap: 10px;

}


.create-post h2::before {

    content: "//";

    color:
        var(--cg-cyan);

    font-family:
        monospace;

    font-size: 12px;

}


/* =========================================================
   TEXTAREA
========================================================= */

.create-post textarea {

    display: block;

    width:
        calc(100% - 36px);

    min-height:
        125px;

    margin:
        18px;

    padding:
        15px;

    box-sizing:
        border-box;

    resize:
        vertical;

    border:
        1px solid
        rgba(0, 255, 102, .20);

    border-radius:
        4px;

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

    color:
        var(--cg-text);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        13px;

    line-height:
        1.7;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.create-post textarea::placeholder {

    color:
        var(--cg-dim);

}


.create-post textarea:focus {

    outline:
        none;

    border-color:
        var(--cg-green);

    background:
        rgba(0, 255, 102, .025);

    box-shadow:
        0 0 18px
        rgba(0, 255, 102, .10);

}


/* =========================================================
   POST FOOTER / CHARACTER COUNTER
========================================================= */

.post-footer {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    padding:
        0 20px 12px;

}


#char-count {

    color:
        var(--cg-dim);

    font-family:
        monospace;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        1px;

}


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

.post-buttons {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 18px;

}


.post-buttons button {

    min-height:
        36px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(0, 255, 102, .30);

    border-radius:
        4px;

    background:
        rgba(0, 255, 102, .055);

    color:
        var(--cg-green);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    cursor:
        pointer;

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

}


.post-buttons button:hover:not(:disabled) {

    background:
        var(--cg-green);

    border-color:
        var(--cg-green);

    color:
        #020605;

    box-shadow:
        0 0 15px
        rgba(0, 255, 102, .30);

    transform:
        translateY(-1px);

}


.post-buttons button:disabled {

    opacity:
        .35;

    cursor:
        not-allowed;

}


/* =========================================================
   IMAGE PREVIEW
========================================================= */

.post-image-preview {

    width:
        calc(100% - 36px);

    margin:
        16px 18px;

    padding:
        12px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        rgba(0, 234, 255, .16);

    border-radius:
        4px;

    background:
        rgba(0, 234, 255, .025);

}


.post-image-preview[hidden] {

    display:
        none;

}


.post-image-preview img {

    display:
        block;

    max-width:
        100%;

    max-height:
        350px;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border:
        1px solid
        rgba(0, 234, 255, .20);

    border-radius:
        3px;

}


/* =========================================================
   REMOVE IMAGE
========================================================= */

#remove-post-image {

    padding:
        7px 13px;

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

    border-radius:
        4px;

    background:
        rgba(255, 50, 50, .035);

    color:
        #ff7777;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    cursor:
        pointer;

    transition:
        .18s ease;

}


#remove-post-image:hover {

    border-color:
        var(--cg-danger);

    background:
        rgba(255, 50, 50, .10);

    color:
        #ff5555;

    box-shadow:
        0 0 12px
        rgba(255, 50, 50, .15);

}


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

#feed {

    padding:
        2px 0 1px;

}


/* =========================================================
   INDIVIDUAL POST
========================================================= */

.post {

    position:
        relative;

    margin:
        16px;

    padding:
        18px;

    background:
        rgba(0, 255, 102, .018);

    border:
        1px solid
        rgba(0, 255, 102, .12);

    border-radius:
        4px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.post:hover {

    border-color:
        rgba(0, 255, 102, .28);

    background:
        rgba(0, 255, 102, .028);

    box-shadow:
        0 0 18px
        rgba(0, 255, 102, .055);

}


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

.post-header {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        15px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        rgba(0, 255, 102, .09);

}


.feed-avatar {

    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(0, 255, 102, .38);

    border-radius:
        50%;

    object-fit:
        cover;

    box-shadow:
        0 0 12px
        rgba(0, 255, 102, .12);

}


.post-user-info {

    min-width:
        0;

}


.post-header strong {

    color:
        var(--cg-green);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        13px;

    letter-spacing:
        .8px;

}


.post-header small {

    color:
        var(--cg-dim);

    font-family:
        monospace;

    font-size:
        10px;

}


/* =========================================================
   POST CONTENT
========================================================= */

.post p {

    margin:
        0;

    padding:
        6px 0 8px;

    color:
        #c9d8dc;

    font-size:
        13px;

    line-height:
        1.75;

    word-break:
        break-word;

}


/* =========================================================
   POST IMAGE
========================================================= */

.post-image-container {

    width:
        100%;

    margin-top:
        12px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    overflow:
        hidden;

    border-radius:
        4px;

}


.post-image {

    display:
        block;

    max-width:
        100%;

    max-height:
        600px;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border:
        1px solid
        rgba(0, 255, 102, .14);

    border-radius:
        4px;

}


/* =========================================================
   THREE DOT POST MENU
========================================================= */

.post-menu-btn {

    position:
        absolute;

    top:
        12px;

    right:
        12px;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(0, 255, 102, .22);

    border-radius:
        4px;

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

    color:
        var(--cg-green);

    font-size:
        20px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        .18s ease;

}


.post-menu-btn:hover {

    background:
        rgba(0, 255, 102, .10);

    border-color:
        var(--cg-green);

    box-shadow:
        0 0 12px
        rgba(0, 255, 102, .20);

}


/* =========================================================
   POST DROPDOWN
========================================================= */

.post-menu {

    position:
        absolute;

    top:
        51px;

    right:
        12px;

    width:
        165px;

    padding:
        5px;

    background:
        rgba(3, 8, 10, .98);

    border:
        1px solid
        rgba(0, 255, 102, .42);

    border-radius:
        4px;

    box-shadow:
        0 0 22px
        rgba(0, 255, 102, .13);

    z-index:
        100;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-5px);

    transform-origin:
        top right;

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;

}


.post-menu.open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


/* =========================================================
   DELETE POST BUTTON
========================================================= */

.delete-post-btn {

    width:
        100%;

    display:
        block;

    padding:
        9px 10px;

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

    border-radius:
        3px;

    background:
        rgba(255, 50, 50, .025);

    color:
        #ff7070;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        .18s ease;

}


.delete-post-btn:hover {

    background:
        rgba(255, 50, 50, .10);

    border-color:
        #ff5555;

    color:
        #ff5555;

}


/* =========================================================
   REACTIONS
========================================================= */

.reactions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        13px;

    padding-top:
        12px;

    border-top:
        1px solid
        rgba(0, 255, 102, .08);

}


.reactions button {

    min-height:
        30px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(0, 255, 102, .20);

    border-radius:
        3px;

    background:
        rgba(0, 255, 102, .025);

    color:
        var(--cg-muted);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        10px;

    cursor:
        pointer;

    transition:
        .18s ease;

}


.reactions button:hover {

    border-color:
        var(--cg-green);

    background:
        rgba(0, 255, 102, .08);

    color:
        var(--cg-green);

}


.reaction-btn.active {

    border-color:
        var(--cg-green);

    background:
        rgba(0, 255, 102, .08);

    color:
        var(--cg-green);

    box-shadow:
        0 0 9px
        rgba(0, 255, 102, .15);

    transform:
        translateY(-1px);

}


.reaction-count {

    margin-left:
        3px;

    color:
        inherit;

}


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

.right-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


/* =========================================================
   SYSTEM / ONLINE PANELS
========================================================= */

.right-sidebar .panel-content p {

    margin:
        0;

    padding:
        9px 0;

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

    color:
        var(--cg-muted);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        11px;

}


.right-sidebar .panel-content p:last-child {

    border-bottom:
        none;

}


/* =========================================================
   DELETE MODAL
========================================================= */

.delete-modal {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

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

    backdrop-filter:
        blur(7px);

    z-index:
        1000;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


.delete-modal.open {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   MODAL BOX
========================================================= */

.delete-modal-box {

    width:
        min(420px, 100%);

    background:
        rgba(4, 10, 12, .98);

    border:
        1px solid
        rgba(0, 255, 102, .42);

    border-radius:
        5px;

    box-shadow:
        0 0 30px
        rgba(0, 255, 102, .15),
        0 0 80px
        rgba(0, 0, 0, .50);

    transform:
        translateY(-10px)
        scale(.97);

    transition:
        transform .2s ease;

}


.delete-modal.open .delete-modal-box {

    transform:
        translateY(0)
        scale(1);

}


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

.delete-modal-header {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        14px 17px;

    border-bottom:
        1px solid
        rgba(0, 255, 102, .12);

    color:
        var(--cg-green);

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

}


.delete-modal-warning {

    color:
        var(--cg-danger);

    font-size:
        17px;

    text-shadow:
        0 0 10px
        rgba(255, 50, 50, .5);

}


/* =========================================================
   MODAL BODY
========================================================= */

.delete-modal-body {

    padding:
        21px 17px 10px;

}


.delete-modal-body p {

    margin:
        0 0 7px;

    color:
        var(--cg-text);

    font-size:
        14px;

    line-height:
        1.5;

}


.delete-modal-body small {

    color:
        var(--cg-dim);

    font-family:
        monospace;

    font-size:
        10px;

}


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

.delete-modal-actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        8px;

    padding:
        15px 17px 17px;

}


.delete-modal-actions button {

    min-height:
        34px;

    padding:
        0 14px;

    border-radius:
        3px;

    font-family:
        "Chakra Petch",
        var(--font-mono),
        monospace;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    cursor:
        pointer;

    transition:
        .18s ease;

}


/* =========================================================
   CANCEL
========================================================= */

.delete-modal-cancel {

    border:
        1px solid
        rgba(0, 255, 102, .22);

    background:
        rgba(0, 255, 102, .025);

    color:
        var(--cg-muted);

}


.delete-modal-cancel:hover {

    border-color:
        var(--cg-green);

    background:
        rgba(0, 255, 102, .08);

    color:
        var(--cg-green);

}


/* =========================================================
   DELETE
========================================================= */

.delete-modal-confirm {

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

    background:
        rgba(255, 50, 50, .05);

    color:
        #ff7070;

}


.delete-modal-confirm:hover {

    border-color:
        #ff5555;

    background:
        rgba(255, 50, 50, .12);

    color:
        #ff5555;

    box-shadow:
        0 0 12px
        rgba(255, 50, 50, .15);

}


/* =========================================================
   RESPONSIVE // TABLET
========================================================= */

@media (max-width: 1200px) {

    .members-wrapper {

        width:
            min(1100px, calc(100% - 35px));

    }


    .members-layout {

        grid-template-columns:
            230px
            minmax(0, 1fr);

    }


    .right-sidebar {

        grid-column:
            1 / -1;

        display:
            grid;

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

    }

}


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

@media (max-width: 900px) {

    .members-wrapper {

        width:
            calc(100% - 24px);

        padding-top:
            35px;

    }


    .members-layout {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    .left-sidebar,
    .right-sidebar {

        width:
            100%;

    }


    .right-sidebar {

        display:
            flex;

        flex-direction:
            column;

    }


    .member-avatar {

        width:
            95px;

        height:
            95px;

    }

}


/* =========================================================
   RESPONSIVE // SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .members-wrapper {

        width:
            calc(100% - 16px);

        padding-top:
            25px;

        padding-bottom:
            35px;

    }


    .panel h2 {

        padding:
            13px 14px;

        font-size:
            12px;

    }


    .profile-card {

        padding:
            22px 15px;

    }


    .create-post textarea {

        width:
            calc(100% - 28px);

        margin:
            14px;

    }


    .post-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            0 14px;

    }


    .post-buttons button {

        width:
            100%;

    }


    .post {

        margin:
            12px;

        padding:
            14px;

    }


    .reactions {

        gap:
            5px;

    }


    .reactions button {

        flex:
            1 1 auto;

        padding:
            0 8px;

    }


    .delete-modal-actions {

        flex-direction:
            column-reverse;

    }


    .delete-modal-actions button {

        width:
            100%;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .panel,
    .member-menu a,
    .post,
    .post-menu-btn,
    .reactions button,
    .post-buttons button,
    .delete-modal,
    .delete-modal-box {

        transition:
            none;

    }

}