/* ==========================================================
   GUE SOCIAL
   Design System v1.0
   Loekepo Labs
========================================================== */

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

:root{

    --primary:#2563EB;
    --primary-hover:#1D4ED8;

    --success:#16A34A;
    --danger:#DC2626;
    --warning:#EA580C;

    --bg:#F4F6F8;
    --surface:#FFFFFF;

    --text:#111827;
    --muted:#6B7280;

    --border:#D9DEE7;
    --border-light:#ECEFF3;

    --hover:#F5F7FA;

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:20px;

    --shadow-sm:0 1px 3px rgba(0,0,0,.04);

    --shadow:
        0 2px 10px rgba(0,0,0,.05);

    --shadow-lg:
        0 12px 40px rgba(0,0,0,.08);

    --transition:.18s ease;

}

/* ==========================
   RESET
========================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;

    font-size:16px;

    line-height:1.6;

    overflow-x:hidden;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

button{

    font:inherit;

}

input,
textarea,
select{

    font:inherit;

}

/* ==========================================================
   STEP 1B
   LAYOUT
========================================================== */

/* ==========================
   APP
========================== */

.app{

    width:100%;

    max-width:1600px;

    margin:auto;

    display:grid;

    grid-template-columns:260px minmax(0,840px) 330px;

    gap:24px;

    align-items:start;

    padding:0 24px;

}


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

.sidebar{

    position:sticky;

    top:0;

    height:100vh;

    overflow-y:auto;

    background:var(--surface);

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

    padding:22px;

}


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

.main{

    min-height:100vh;

    background:var(--surface);

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

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

}


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

.content{

    padding:20px;

}


/* ==========================
   NAVBAR
========================== */

.navbar{

    position:sticky;

    top:0;

    z-index:100;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px;

    background:#fff;

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

}


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

.rightbar{

    position:sticky;

    top:0;

    height:100vh;

    overflow-y:auto;

    padding:20px;

}


/* Scrollbar */

.sidebar::-webkit-scrollbar,

.rightbar::-webkit-scrollbar{

    width:6px;

}

.sidebar::-webkit-scrollbar-thumb,

.rightbar::-webkit-scrollbar-thumb{

    background:#D7DCE5;

    border-radius:10px;

}


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

.card{

    background:#fff;

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

    border-radius:18px;

    box-shadow:var(--shadow);

    padding:18px;

    margin-bottom:18px;

    transition:var(--transition);

}

.card:hover{

    box-shadow:var(--shadow-lg);

}


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

.panel{

    background:#fff;

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

    border-radius:18px;

    padding:18px;

    margin-bottom:18px;

}


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

.avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    background:#EDF2F7;

}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* ==========================
   LOGO
========================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:30px;

}

.logo img{

    width:170px;

    height:auto;

    display:block;

}


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

@media(max-width:1280px){

    .app{

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

    }

    .rightbar{

        display:none;

    }

}

@media(max-width:768px){

    .app{

        display:block;

        padding:0;

    }

    .sidebar{

        display:none;

    }

    .main{

        border:none;

    }

    .content{

        padding:16px;

        padding-bottom:90px;

    }

}

/* ==========================================================
   STEP 1C
   MENU • BUTTON • FORM • TYPOGRAPHY
========================================================== */


/* ==========================
   TYPOGRAPHY
========================== */

h1,h2,h3,h4,h5{

    color:var(--text);

    font-weight:700;

    line-height:1.3;

}

h1{

    font-size:28px;

}

h2{

    font-size:22px;

}

h3{

    font-size:18px;

}

small{

    color:var(--muted);

}


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

.menu{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 16px;

    border-radius:14px;

    color:#374151;

    font-weight:600;

    transition:.18s;

}

.menu a i{

    width:22px;

    text-align:center;

    font-size:20px;

}

.menu a span{

    flex:1;

}

.menu a:hover{

    background:#F3F4F6;

    color:#111827;

}

.menu a.active{

    background:#111827;

    color:#fff;

}

.menu a.active i{

    color:#fff;

}


/* ==========================
   BUTTON
========================== */

.btn{

    height:46px;

    border:none;

    border-radius:14px;

    padding:0 22px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.18s;

}

.btn-primary{

    background:#111827;

    color:#fff;

}

.btn-primary:hover{

    background:#000;

    transform:translateY(-1px);

}

.btn-outline{

    background:#fff;

    color:#111827;

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

}

.btn-outline:hover{

    background:#F8F9FB;

}

.btn-light{

    background:#F3F4F6;

}

.btn-light:hover{

    background:#E5E7EB;

}


/* ==========================
   INPUT
========================== */

input,

textarea,

select{

    width:100%;

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

    border-radius:14px;

    background:#fff;

    padding:13px 16px;

    color:#111827;

    transition:.18s;

}

input:focus,

textarea:focus,

select:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}


/* ==========================
   SEARCH BOX
========================== */

.search-box{

    position:relative;

}

.search-box input{

    padding-left:45px;

}

.search-box i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#9CA3AF;

}


/* ==========================
   DIVIDER
========================== */

.divider{

    height:1px;

    background:var(--border-light);

    margin:18px 0;

}


/* ==========================
   BADGE
========================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    background:#EEF2FF;

    color:#2563EB;

}


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

.dropdown{

    background:#fff;

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

    border-radius:16px;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

.dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

}

.dropdown a:hover{

    background:#F3F4F6;

}

/* ==========================================================
   STEP 2A
   COMPOSER
========================================================== */

.composer{

    background:#fff;

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

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:20px;

    margin-bottom:20px;

}


/* HEADER */

.composer-header{

    display:flex;

    align-items:flex-start;

    gap:16px;

}


/* TEXTAREA */

.composer textarea{

    width:100%;

    min-height:52px;

    max-height:300px;

    border:none;

    resize:none;

    outline:none;

    background:transparent;

    font-size:20px;

    line-height:1.6;

    color:#111827;

    overflow:hidden;

}

.composer textarea::placeholder{

    color:#9CA3AF;

}


/* FOOTER */

.composer-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid var(--border-light);

}


/* LEFT ACTION */

.composer-tools{

    display:flex;

    align-items:center;

    gap:8px;

}


/* ICON BUTTON */

.tool-btn{

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    border-radius:12px;

    cursor:pointer;

    transition:.18s;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    color:#4B5563;

}

.tool-btn:hover{

    background:#F3F4F6;

}


/* COLORS */

.tool-btn.photo:hover{

    color:#16A34A;

}

.tool-btn.emoji:hover{

    color:#F59E0B;

}

.tool-btn.location:hover{

    color:#DC2626;

}

.tool-btn.poll:hover{

    color:#2563EB;

}

.tool-btn.gif:hover{

    color:#9333EA;

}


/* POST BUTTON */

.composer .btn{

    min-width:130px;

    height:44px;

    border-radius:999px;

}


/* IMAGE PREVIEW */

.preview-images{

    display:grid;

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

    gap:10px;

    margin-top:18px;

}

.preview-images img{

    width:100%;

    border-radius:16px;

}


/* LINK PREVIEW */

.link-preview{

    margin-top:18px;

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

    border-radius:16px;

    overflow:hidden;

}

.link-preview img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.link-preview-content{

    padding:16px;

}

.link-domain{

    font-size:13px;

    color:#6B7280;

}

.link-title{

    font-weight:700;

    margin-top:4px;

}

.link-desc{

    margin-top:6px;

    color:#6B7280;

    font-size:14px;

}


/* CHARACTER */

.char-counter{

    margin-left:auto;

    margin-right:14px;

    color:#6B7280;

    font-size:13px;

}


/* DRAG */

.composer.drag{

    border:2px dashed #2563EB;

    background:#EFF6FF;

}

/* ==========================================================
   STEP 2B
   COMPOSER ADVANCED
========================================================== */

/* HEADER */

.composer-header{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

/* BODY */

.composer-body{

    flex:1;

}

/* USER */

.composer-user{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:8px;

}

.composer-user-name{

    font-size:15px;

    font-weight:700;

    color:#111827;

}

.composer-user-meta{

    font-size:13px;

    color:#6B7280;

}

/* TEXTAREA */

.composer textarea{

    width:100%;

    min-height:48px;

    max-height:320px;

    padding:0;

    border:none;

    resize:none;

    background:none;

    font-size:21px;

    line-height:1.6;

    overflow:hidden;

}

.composer textarea::placeholder{

    color:#9CA3AF;

    font-weight:400;

}

/* IMAGE GRID */

.preview-grid{

    margin-top:18px;

    display:grid;

    gap:8px;

    border-radius:16px;

    overflow:hidden;

}

.preview-grid.one{

    grid-template-columns:1fr;

}

.preview-grid.two{

    grid-template-columns:1fr 1fr;

}

.preview-grid.three{

    grid-template-columns:2fr 1fr;

}

.preview-grid.four{

    grid-template-columns:1fr 1fr;

}

.preview-grid img{

    width:100%;

    height:260px;

    object-fit:cover;

    cursor:pointer;

    transition:.18s;

}

.preview-grid img:hover{

    opacity:.96;

}

/* LINK */

.link-preview{

    margin-top:16px;

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

    border-radius:16px;

    overflow:hidden;

    transition:.18s;

}

.link-preview:hover{

    box-shadow:var(--shadow);

}

.link-preview img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.link-info{

    padding:16px;

}

.link-site{

    color:#6B7280;

    font-size:13px;

}

.link-title{

    margin-top:4px;

    font-weight:700;

}

.link-description{

    margin-top:6px;

    color:#6B7280;

    font-size:14px;

}

/* FOOTER */

.composer-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid var(--border-light);

}

/* TOOLS */

.composer-tools{

    display:flex;

    align-items:center;

    gap:6px;

}

/* TOOL */

.tool{

    width:40px;

    height:40px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.18s;

    color:#6B7280;

}

.tool:hover{

    background:#F3F4F6;

}

/* INDIVIDUAL COLORS */

.tool.photo:hover{

    color:#16A34A;

}

.tool.video:hover{

    color:#EF4444;

}

.tool.poll:hover{

    color:#2563EB;

}

.tool.location:hover{

    color:#EA580C;

}

.tool.gif:hover{

    color:#9333EA;

}

.tool.emoji:hover{

    color:#F59E0B;

}

/* COUNTER */

.counter{

    color:#6B7280;

    font-size:13px;

    margin-right:14px;

}

/* POST */

.post-submit{

    min-width:120px;

    height:44px;

    border-radius:999px;

    font-weight:700;

}

/* DRAG */

.composer.dragging{

    border:2px dashed var(--primary);

    background:#EFF6FF;

}

/* PROGRESS */

.progress-circle{

    width:26px;

    height:26px;

}

/* AUDIENCE */

.audience{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 10px;

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

    border-radius:999px;

    font-size:12px;

    cursor:pointer;

    transition:.18s;

}

.audience:hover{

    background:#F8FAFC;

}

/* ==========================================================
   STEP 3A
   FEED & POST
========================================================== */

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

.post{

    background:#fff;

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

    border-radius:18px;

    overflow:hidden;

    margin-bottom:20px;

    transition:.2s;

    box-shadow:var(--shadow);

}

.post:hover{

    box-shadow:var(--shadow-lg);

}


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

.post-header{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px;

}

.post-user{

    flex:1;

}

.post-name{

    display:flex;

    align-items:center;

    gap:6px;

    font-weight:700;

    color:#111827;

}

.post-name .verified{

    color:#2563EB;

    font-size:15px;

}

.post-meta{

    margin-top:2px;

    color:#6B7280;

    font-size:13px;

}

.post-menu{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.18s;

}

.post-menu:hover{

    background:#F3F4F6;

}


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

.post-content{

    padding:0 18px 16px;

    font-size:16px;

    line-height:1.8;

    color:#111827;

    white-space:pre-wrap;

    word-break:break-word;

}

.post-content p{

    margin-bottom:14px;

}

.post-content a{

    color:#2563EB;

    font-weight:600;

}

.post-content a:hover{

    text-decoration:underline;

}


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

.post-image{

    width:100%;

    overflow:hidden;

    background:#F8FAFC;

}

.post-image img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:.25s;

}

.post-image img:hover{

    transform:scale(1.02);

}


/* ==========================
   MULTI IMAGE
========================== */

.post-gallery{

    display:grid;

    gap:2px;

    background:#fff;

}

.post-gallery.two{

    grid-template-columns:1fr 1fr;

}

.post-gallery.three{

    grid-template-columns:2fr 1fr;

}

.post-gallery.four{

    grid-template-columns:1fr 1fr;

}

.post-gallery img{

    width:100%;

    height:250px;

    object-fit:cover;

}


/* ==========================
   VIDEO
========================== */

.post-video video{

    width:100%;

    display:block;

}


/* ==========================
   LINK PREVIEW
========================== */

.post-link{

    margin:16px 18px;

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

    border-radius:16px;

    overflow:hidden;

    transition:.18s;

}

.post-link:hover{

    box-shadow:var(--shadow);

}

.post-link img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.post-link-body{

    padding:16px;

}

.post-link-domain{

    color:#6B7280;

    font-size:13px;

}

.post-link-title{

    margin-top:5px;

    font-weight:700;

}

.post-link-description{

    margin-top:6px;

    color:#6B7280;

    font-size:14px;

}


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

.post-stats{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 18px;

    color:#6B7280;

    font-size:14px;

    border-top:1px solid var(--border-light);

}

.post-stats strong{

    color:#111827;

}

/* ==========================================================
   STEP 3B
   ACTION BAR
========================================================== */

.post-actions{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    padding:10px 14px;

    border-top:1px solid var(--border-light);

}


/* GROUP */

.action-group{

    display:flex;

    align-items:center;

    gap:6px;

}


/* BUTTON */

.action-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    padding:0 14px;

    border:none;

    background:transparent;

    border-radius:12px;

    cursor:pointer;

    transition:.18s ease;

    color:#6B7280;

    font-size:14px;

    font-weight:600;

}

.action-btn svg{

    width:20px;

    height:20px;

}

.action-btn:hover{

    background:#F3F4F6;

}


/* LIKE */

.action-like:hover{

    color:#2563EB;

    background:#EFF6FF;

}


/* COMMENT */

.action-comment:hover{

    color:#0891B2;

    background:#ECFEFF;

}


/* REPOST */

.action-repost:hover{

    color:#16A34A;

    background:#ECFDF5;

}


/* SHARE */

.action-share:hover{

    color:#7C3AED;

    background:#F5F3FF;

}


/* SAVE */

.action-save:hover{

    color:#EA580C;

    background:#FFF7ED;

}


/* ACTIVE */

.action-btn.active{

    font-weight:700;

}


/* LIKE ACTIVE */

.action-like.active{

    color:#2563EB;

}


/* COMMENT ACTIVE */

.action-comment.active{

    color:#0891B2;

}


/* REPOST ACTIVE */

.action-repost.active{

    color:#16A34A;

}


/* SHARE ACTIVE */

.action-share.active{

    color:#7C3AED;

}


/* SAVE ACTIVE */

.action-save.active{

    color:#EA580C;

}


/* COUNTER */

.action-count{

    font-size:13px;

    font-weight:600;

}


/* ICON */

.action-icon{

    display:flex;

    align-items:center;

    justify-content:center;

}


/* HOVER */

.action-btn:hover .action-icon{

    transform:scale(1.08);

    transition:.18s;

}


/* CLICK */

.action-btn:active{

    transform:scale(.95);

}


/* RESPONSIVE */

@media(max-width:768px){

    .post-actions{

        padding:8px;

    }

    .action-btn{

        flex:1;

        padding:0;

        gap:5px;

        font-size:13px;

    }

}

/* ==========================================================
   STEP 3C
   POST PREMIUM
========================================================== */

/* USER INFO */

.post-user{

    display:flex;

    flex-direction:column;

    flex:1;

    min-width:0;

}

.post-name{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:16px;

    font-weight:700;

    color:#111827;

}

.post-name a{

    color:inherit;

}

.post-name a:hover{

    text-decoration:underline;

}

/* VERIFIED */

.verified{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    font-weight:700;

}

/* USERNAME */

.post-username{

    margin-top:2px;

    font-size:14px;

    color:#6B7280;

}

/* TIME */

.post-time{

    color:#9CA3AF;

}

.post-time::before{

    content:"•";

    margin:0 6px;

}

/* FOLLOW */

.follow-btn{

    height:34px;

    padding:0 18px;

    border-radius:999px;

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

    background:#fff;

    cursor:pointer;

    font-weight:700;

    transition:.18s;

}

.follow-btn:hover{

    background:#111827;

    color:#fff;

}

/* MORE */

.post-more{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    transition:.18s;

}

.post-more:hover{

    background:#F3F4F6;

}

/* HASHTAG */

.post-content .hashtag{

    color:#2563EB;

    font-weight:600;

}

.post-content .hashtag:hover{

    text-decoration:underline;

}

/* MENTION */

.post-content .mention{

    color:#2563EB;

    font-weight:600;

}

.post-content .mention:hover{

    text-decoration:underline;

}

/* QUOTE */

.quote-post{

    margin-top:18px;

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

    border-radius:16px;

    overflow:hidden;

    transition:.18s;

}

.quote-post:hover{

    box-shadow:var(--shadow);

}

.quote-body{

    padding:16px;

}

/* REPOST */

.repost-label{

    display:flex;

    align-items:center;

    gap:8px;

    padding:14px 18px 0;

    color:#16A34A;

    font-size:13px;

    font-weight:700;

}

/* POLL */

.poll{

    margin-top:18px;

}

.poll-option{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

    padding:12px 16px;

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

    border-radius:12px;

    cursor:pointer;

    transition:.18s;

}

.poll-option:hover{

    background:#F8FAFC;

}

/* LOCATION */

.post-location{

    margin-top:14px;

    color:#2563EB;

    font-size:14px;

    font-weight:600;

}

/* TAGS */

.post-tags{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-top:16px;

}

.post-tag{

    padding:6px 12px;

    border-radius:999px;

    background:#F3F4F6;

    font-size:13px;

    transition:.18s;

}

.post-tag:hover{

    background:#E5E7EB;

}

/* IMAGE */

.post-image{

    background:#F8FAFC;

}

.post-image img{

    border-radius:0;

}

/* GALLERY */

.post-gallery{

    overflow:hidden;

}

.post-gallery img{

    transition:.25s;

}

.post-gallery img:hover{

    transform:scale(1.03);

}

/* READ MORE */

.read-more{

    color:#2563EB;

    cursor:pointer;

    font-weight:600;

}

.read-more:hover{

    text-decoration:underline;

}

/* ==========================================================
   STEP 4A
   COMMENT SYSTEM
========================================================== */

.comments{

    margin-top:18px;

    border-top:1px solid var(--border-light);

}

/* ITEM */

.comment{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:18px;

    border-bottom:1px solid var(--border-light);

    transition:.18s;

}

.comment:hover{

    background:#FAFBFC;

}

/* AVATAR */

.comment-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

}

.comment-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* BODY */

.comment-body{

    flex:1;

    min-width:0;

}

/* HEADER */

.comment-header{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

}

.comment-name{

    font-weight:700;

    color:#111827;

}

.comment-name:hover{

    text-decoration:underline;

}

.comment-time{

    color:#9CA3AF;

    font-size:13px;

}

/* TEXT */

.comment-text{

    margin-top:6px;

    color:#374151;

    line-height:1.7;

    word-break:break-word;

}

/* MENTION */

.comment-text .mention{

    color:#2563EB;

    font-weight:600;

}

/* HASHTAG */

.comment-text .hashtag{

    color:#2563EB;

    font-weight:600;

}

/* IMAGE */

.comment-image{

    margin-top:12px;

    border-radius:14px;

    overflow:hidden;

}

.comment-image img{

    width:100%;

}

/* ACTION */

.comment-actions{

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:10px;

}

/* BUTTON */

.comment-btn{

    display:flex;

    align-items:center;

    gap:5px;

    padding:6px 10px;

    border:none;

    background:transparent;

    border-radius:10px;

    cursor:pointer;

    font-size:13px;

    color:#6B7280;

    transition:.18s;

}

.comment-btn:hover{

    background:#F3F4F6;

}

/* LIKE */

.comment-like:hover{

    color:#2563EB;

}

/* DISLIKE */

.comment-dislike:hover{

    color:#DC2626;

}

/* REPLY */

.comment-reply:hover{

    color:#0891B2;

}

/* REPORT */

.comment-report:hover{

    color:#EA580C;

}

/* ACTIVE */

.comment-like.active{

    color:#2563EB;

    font-weight:700;

}

.comment-dislike.active{

    color:#DC2626;

    font-weight:700;

}

/* COUNT */

.comment-count{

    font-weight:600;

    font-size:12px;

}

/* ==========================================================
   STEP 4B
   REPLY SYSTEM
========================================================== */

/* ==========================
   REPLY CONTAINER
========================== */

.reply-list{

    margin-left:54px;

    margin-top:10px;

    padding-left:20px;

    border-left:2px solid var(--border-light);

}

/* ITEM */

.reply{

    display:flex;

    gap:12px;

    padding:16px 0;

}

/* AVATAR */

.reply-avatar{

    width:38px;

    height:38px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

}

.reply-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* BODY */

.reply-body{

    flex:1;

}

/* HEADER */

.reply-header{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}

.reply-name{

    font-weight:700;

    color:#111827;

}

.reply-name:hover{

    text-decoration:underline;

}

.reply-time{

    font-size:12px;

    color:#9CA3AF;

}

/* CONTENT */

.reply-text{

    margin-top:6px;

    color:#374151;

    line-height:1.7;

}

/* ACTION */

.reply-actions{

    display:flex;

    gap:6px;

    margin-top:10px;

}

/* BUTTON */

.reply-btn{

    border:none;

    background:none;

    cursor:pointer;

    padding:6px 10px;

    border-radius:10px;

    font-size:13px;

    color:#6B7280;

    transition:.18s;

}

.reply-btn:hover{

    background:#F3F4F6;

}

/* LIKE */

.reply-like:hover{

    color:#2563EB;

}

/* DISLIKE */

.reply-dislike:hover{

    color:#DC2626;

}

/* REPLY */

.reply-reply:hover{

    color:#0891B2;

}

/* REPORT */

.reply-report:hover{

    color:#EA580C;

}

/* ACTIVE */

.reply-like.active{

    color:#2563EB;

    font-weight:700;

}

.reply-dislike.active{

    color:#DC2626;

    font-weight:700;

}

/* SHOW REPLIES */

.show-replies{

    margin-left:54px;

    margin-top:10px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#2563EB;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

}

.show-replies:hover{

    text-decoration:underline;

}

/* INLINE REPLY */

.reply-editor{

    margin-left:54px;

    margin-top:12px;

    display:flex;

    gap:12px;

}

.reply-editor textarea{

    min-height:42px;

    max-height:180px;

}

/* AUTHOR BADGE */

.badge-author{

    background:#111827;

    color:#fff;

}

/* ADMIN */

.badge-admin{

    background:#DC2626;

    color:#fff;

}

/* VERIFIED */

.badge-verified{

    background:#2563EB;

    color:#fff;

}

/* AI */

.badge-ai{

    background:#7C3AED;

    color:#fff;

}

/* TOP COMMENT */

.badge-top{

    background:#16A34A;

    color:#fff;

}

/* PINNED */

.comment.pinned{

    background:#FFFBEA;

}

/* OWNER */

.comment-owner{

    border-left:4px solid #2563EB;

    padding-left:14px;

}

/* ==========================================================
   STEP 5A
   RIGHT SIDEBAR WIDGET
========================================================== */

.rightbar{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* WIDGET */

.widget{

    background:#fff;

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

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

/* HEADER */

.widget-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border-bottom:1px solid var(--border-light);

}

.widget-title{

    font-size:17px;

    font-weight:700;

    color:#111827;

}

.widget-more{

    color:#2563EB;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

}

/* BODY */

.widget-body{

    padding:10px 0;

}

/* ITEM */

.widget-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    cursor:pointer;

    transition:.18s;

}

.widget-item:hover{

    background:#F8FAFC;

}

/* ICON */

.widget-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    background:#F3F4F6;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex-shrink:0;

}

/* CONTENT */

.widget-content{

    flex:1;

}

.widget-name{

    font-weight:600;

    color:#111827;

}

.widget-desc{

    margin-top:2px;

    color:#6B7280;

    font-size:13px;

}

/* VALUE */

.widget-value{

    font-weight:700;

    color:#111827;

}

/* FOOTER */

.widget-footer{

    padding:16px 18px;

    border-top:1px solid var(--border-light);

}

.widget-footer a{

    color:#2563EB;

    font-weight:600;

}

/* ==========================================================
   TRENDING
========================================================== */

.trending-item{

    padding:14px 18px;

    border-bottom:1px solid var(--border-light);

    transition:.18s;

    cursor:pointer;

}

.trending-item:last-child{

    border-bottom:none;

}

.trending-item:hover{

    background:#F8FAFC;

}

.trending-category{

    font-size:12px;

    color:#6B7280;

}

.trending-title{

    margin-top:3px;

    font-weight:700;

}

.trending-post{

    margin-top:4px;

    color:#9CA3AF;

    font-size:13px;

}

/* ==========================================================
   PEOPLE
========================================================== */

.people{

    display:flex;

    flex-direction:column;

}

.people-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

}

.people-info{

    flex:1;

}

.people-name{

    font-weight:700;

}

.people-username{

    font-size:13px;

    color:#6B7280;

}

.follow{

    border:none;

    background:#111827;

    color:#fff;

    height:36px;

    padding:0 18px;

    border-radius:999px;

    cursor:pointer;

    font-weight:700;

}

.follow:hover{

    background:#000;

}

/* ==========================================================
   INFO CARD
========================================================== */

.info-card{

    padding:18px;

}

.info-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

}

.info-row:last-child{

    margin-bottom:0;

}

.info-label{

    color:#6B7280;

}

.info-value{

    font-weight:700;

}

/* ==========================================================
   STEP 6A
   ANIMATION & MICRO INTERACTION
========================================================== */

/* ---------- GLOBAL ---------- */

*{

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

}


/* ---------- HOVER CARD ---------- */

.card:hover,
.post:hover,
.widget:hover{

    transform:translateY(-2px);

}


/* ---------- BUTTON PRESS ---------- */

.btn:active,
.action-btn:active,
.comment-btn:active,
.reply-btn:active{

    transform:scale(.95);

}


/* ---------- AVATAR ---------- */

.avatar img,
.comment-avatar img,
.reply-avatar img{

    transition:.25s;

}

.avatar:hover img,
.comment-avatar:hover img,
.reply-avatar:hover img{

    transform:scale(1.08);

}


/* ---------- IMAGE ---------- */

.post-image img,
.preview-grid img,
.post-gallery img{

    transition:.35s;

}

.post-image:hover img,
.preview-grid img:hover,
.post-gallery img:hover{

    transform:scale(1.03);

}


/* ---------- LINK ---------- */

.post-link,
.link-preview{

    transition:.2s;

}

.post-link:hover,
.link-preview:hover{

    transform:translateY(-2px);

}


/* ---------- MENU ---------- */

.menu a{

    position:relative;

    overflow:hidden;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:#111827;

    transition:.25s;

}

.menu a:hover::after{

    width:100%;

}


/* ---------- INPUT ---------- */

input:focus,
textarea:focus{

    transform:scale(1.01);

}


/* ---------- FOLLOW ---------- */

.follow,
.follow-btn{

    transition:.2s;

}

.follow:hover,
.follow-btn:hover{

    transform:translateY(-1px);

}


/* ---------- FADE ---------- */

.fade-in{

    animation:fadeIn .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ---------- SCALE ---------- */

.scale-in{

    animation:scaleIn .2s ease;

}

@keyframes scaleIn{

    from{

        transform:scale(.95);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================================
   SKELETON
========================================================== */

.skeleton{

    position:relative;

    overflow:hidden;

    background:#EEF2F7;

}

.skeleton::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    animation:skeleton 1.2s infinite;

}

@keyframes skeleton{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}

.skeleton-avatar{

    width:48px;

    height:48px;

    border-radius:50%;

}

.skeleton-title{

    height:14px;

    width:180px;

    border-radius:999px;

}

.skeleton-text{

    height:12px;

    margin-top:10px;

    border-radius:999px;

}

.skeleton-image{

    margin-top:16px;

    height:260px;

    border-radius:16px;

}

/* ==========================================================
   TOAST
========================================================== */

.toast{

    position:fixed;

    right:24px;

    bottom:24px;

    background:#111827;

    color:#fff;

    padding:14px 18px;

    border-radius:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    z-index:9999;

    animation:toast .25s ease;

}

@keyframes toast{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   FAB
========================================================== */

.fab{

    position:fixed;

    right:20px;

    bottom:90px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#111827;

    color:#fff;

    display:none;

    align-items:center;

    justify-content:center;

    font-size:28px;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    cursor:pointer;

    z-index:1000;

}

.fab:hover{

    transform:scale(1.05);

}

@media(max-width:768px){

    .fab{

        display:flex;

    }

}

/* ==========================================================
   STEP 7A
   MOBILE NATIVE
========================================================== */

@media (max-width:768px){

/* APP */

.app{

    display:block;

}

/* SIDEBAR */

.sidebar{

    display:none;

}

/* RIGHT */

.rightbar{

    display:none;

}

/* MAIN */

.main{

    width:100%;

    border:none;

    min-height:100vh;

}

/* NAVBAR */

.navbar{

    position:sticky;

    top:0;

    height:60px;

    padding:0 16px;

    background:#fff;

    z-index:999;

}

/* CONTENT */

.content{

    padding:12px;

    padding-bottom:95px;

}

/* CARD */

.card,
.post,
.composer{

    margin-bottom:12px;

    border-radius:16px;

}

/* IMAGE */

.post-image img{

    border-radius:0;

}

/* COMMENT */

.comment{

    padding:14px;

}

.reply{

    padding:12px 0;

}

}

/* ==========================================================
   MOBILE BOTTOM NAV
========================================================== */

.bottom-nav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:68px;

    background:#fff;

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

    display:none;

    justify-content:space-around;

    align-items:center;

    z-index:9999;

}

.bottom-nav a{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    color:#6B7280;

    text-decoration:none;

    font-size:11px;

    font-weight:600;

}

.bottom-nav a i{

    font-size:22px;

}

.bottom-nav a.active{

    color:#111827;

}

.bottom-nav a.active i{

    transform:scale(1.15);

}

@media(max-width:768px){

.bottom-nav{

    display:flex;

}

}

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

.mobile-post{

    position:fixed;

    right:18px;

    bottom:84px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    box-shadow:0 12px 28px rgba(0,0,0,.18);

    cursor:pointer;

    z-index:999;

}

.mobile-post:hover{

    transform:scale(1.06);

}

/* ==========================================================
   SAFE AREA
========================================================== */

@supports(padding:max(0px)){

.bottom-nav{

    padding-bottom:max(8px,env(safe-area-inset-bottom));

}

.mobile-post{

    bottom:calc(84px + env(safe-area-inset-bottom));

}

.navbar{

    padding-top:env(safe-area-inset-top);

}

}

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

@media(max-width:768px){

textarea{

    font-size:16px;

}

input{

    font-size:16px;

}

button{

    min-height:44px;

}

.action-btn{

    min-height:42px;

}

.follow{

    min-height:36px;

}

.widget{

    display:none;

}

}

/* ==========================================================
   STEP 8A
   FINAL UI POLISH
========================================================== */

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:#F8FAFC;

}

::-webkit-scrollbar-thumb{

    background:#D1D5DB;
    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#9CA3AF;

}


/* ---------- SELECTION ---------- */

::selection{

    background:#111827;
    color:#fff;

}


/* ---------- FOCUS ---------- */

:focus-visible{

    outline:3px solid rgba(37,99,235,.25);
    outline-offset:2px;

}


/* ---------- DIVIDER ---------- */

hr{

    border:none;
    border-top:1px solid var(--border-light);
    margin:20px 0;

}


/* ---------- ONLINE ---------- */

.online{

    position:relative;

}

.online::after{

    content:"";

    position:absolute;

    right:2px;
    bottom:2px;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#22C55E;

    border:2px solid #fff;

}


/* ---------- VERIFIED ---------- */

.verified{

    display:inline-flex;

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

    width:18px;
    height:18px;

    border-radius:50%;

    background:#2563EB;

    color:#fff;

    font-size:11px;

}


/* ---------- BADGE ---------- */

.badge{

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:5px 10px;

    border-radius:999px;

    background:#F3F4F6;

    font-size:12px;

    font-weight:600;

}


/* ---------- PIN ---------- */

.pinned{

    border-left:4px solid #2563EB;

}


/* ---------- HIGHLIGHT ---------- */

.highlight{

    background:#FFFBEA;

}


/* ---------- READ MORE ---------- */

.read-more{

    color:#2563EB;

    cursor:pointer;

    font-weight:600;

}

.read-more:hover{

    text-decoration:underline;

}

/* ==========================================================
   NOTIFICATION
========================================================== */

.badge-count{

    position:absolute;

    top:6px;

    right:10px;

    min-width:18px;

    height:18px;

    border-radius:999px;

    background:#EF4444;

    color:#fff;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 5px;

}

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

.empty{

    padding:60px 20px;

    text-align:center;

}

.empty-icon{

    font-size:70px;

    opacity:.35;

}

.empty-title{

    margin-top:18px;

    font-size:22px;

    font-weight:700;

}

.empty-text{

    margin-top:10px;

    color:#6B7280;

    max-width:420px;

    margin-inline:auto;

}

/* ==========================================================
   LOADER
========================================================== */

.loader{

    width:34px;

    height:34px;

    border-radius:50%;

    border:3px solid #E5E7EB;

    border-top-color:#111827;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   LIGHTBOX
========================================================== */

.lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    opacity:0;

    pointer-events:none;

    transition:.25s;

}

.lightbox.show{

    opacity:1;

    pointer-events:auto;

}

.lightbox img{

    max-width:92%;

    max-height:92%;

    border-radius:12px;

}