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

body{
    background:#050816;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

a{
    text-decoration:none;
}

.topbar{
    height:75px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.08);
    background:#08101f;
    position:sticky;
    top:0;
    z-index:999;
}

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

.brand-mark{
    width:45px;
    height:45px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:bold;
}

.brand h1{
    font-size:22px;
}

.brand span{
    color:#94a3b8;
    font-size:13px;
}

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

.topnav a{
    color:#ffffff;
}

.primary-link{
    background:transparent;
    border:1px solid rgba(255,255,255,0.12);
    color:#ffffff;
    padding:10px 16px;
    border-radius:10px;
}

.danger-link{
    color:#ef4444 !important;
}

.page-shell{
    padding:30px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:24px;
}

.hero-card,
.preview-card,
.info-card,
.auth-card,
.sidebar-card,
.content-card,
.feed-card,
.profile-card,
.empty-card{
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
}

.hero-card{
    padding:40px;
}

.hero-card h2{
    font-size:48px;
    margin:20px 0;
    line-height:1.1;
}

.hero-card p{
    color:#94a3b8;
    line-height:1.8;
}

.hero-actions{
    display:flex;
    gap:14px;
    margin-top:30px;
}

.preview-card{
    padding:24px;
}

.preview-header{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
}

.green{background:#22c55e;}
.blue{background:#3b82f6;}
.orange{background:#f97316;}

.stat-line{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.mock-feed{
    display:flex;
    gap:14px;
    margin-top:30px;
}

.mock-avatar{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

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

.info-card{
    padding:24px;
}

.info-card h3{
    margin-bottom:14px;
}

.info-card p{
    color:#94a3b8;
    line-height:1.6;
}

.btn{
    border:none;
    cursor:pointer;
    padding:14px 18px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
}

.btn-primary{
    background:#2563eb;
    color:#ffffff;
}

.btn-muted{
    background:#111827;
    color:#ffffff;
    border:1px solid rgba(255,255,255,0.08);
}

.btn-success{
    background:#16a34a;
    color:#ffffff;
}

.full{
    width:100%;
    margin-top:8px;
}

.auth-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:80vh;
}

.auth-card{
    width:420px;
    padding:35px;
}

.auth-card h2{
    font-size:34px;
    margin-bottom:10px;
}

.auth-card p{
    color:#94a3b8;
    margin-bottom:30px;
}

.auth-card label{
    display:block;
    margin-bottom:8px;
    margin-top:18px;
}

.auth-card input,
.profile-form input,
.profile-form select,
.feed-topbar select{
    width:100%;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#ffffff;
    padding:14px;
    border-radius:12px;
    margin-bottom:16px;
}

.form-link{
    margin-top:20px;
    text-align:center;
}

.form-link a{
    color:#3b82f6;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:24px;
}

.sidebar-card{
    padding:24px;
    height:fit-content;
}

.credit-box{
    margin:24px 0;
    background:#09101d;
    padding:24px;
    border-radius:18px;
    text-align:center;
}

.credit-number{
    font-size:42px;
    font-weight:bold;
}

.credit-label{
    color:#94a3b8;
}

.mini-stats{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:20px;
}

.mini-stat{
    background:#09101d;
    padding:18px;
    border-radius:14px;
}

.content-card{
    padding:24px;
}

.section-header{
    margin-bottom:24px;
}

.section-header p{
    color:#94a3b8;
    margin-top:6px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:20px;
}

.full-width{
    grid-column:1/-1;
}

.profile-form label{
    display:block;
    margin-bottom:8px;
}

.profiles-section{
    margin-top:30px;
}

.profile-list,
.feed-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px;
}

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

.profile-top,
.feed-card-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.platform-badge{
    display:inline-block;
    padding:8px 12px;
    background:#172554;
    border:1px solid #2563eb;
    border-radius:999px;
    color:#60a5fa;
    margin-bottom:16px;
    font-size:13px;
}

.muted-text,
.owner-line{
    color:#94a3b8;
    margin-top:8px;
}

.profile-meta,
.feed-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:20px 0;
}

.profile-meta span,
.feed-meta span{
    background:#09101d;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
}

.goal-box{
    background:#09101d;
    padding:16px;
    border-radius:14px;
    margin-bottom:20px;
    color:#cbd5e1;
}

.delete-btn{
    background:#7f1d1d;
    color:#ffffff;
    border:none;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
}

.feed-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.empty-card{
    padding:40px;
    text-align:center;
}

.flash-box{
    margin-bottom:20px;
}

.flash-box div{
    background:#172554;
    border:1px solid #2563eb;
    padding:14px;
    border-radius:12px;
    margin-bottom:10px;
}

.pill{
    display:inline-block;
    padding:10px 14px;
    background:#172554;
    color:#60a5fa;
    border-radius:999px;
    border:1px solid #2563eb;
}

@media(max-width:900px){

    .hero-grid,
    .dashboard-grid,
    .info-grid{
        grid-template-columns:1fr;
    }

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

    .topbar{
        flex-direction:column;
        height:auto;
        padding:20px;
        gap:20px;
    }

    .topnav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .page-shell{
        padding:20px;
    }

    .hero-card h2{
        font-size:34px;
    }

    .feed-topbar{
        flex-direction:column;
        gap:20px;
        align-items:flex-start;
    }

}

.user-welcome{
    margin-bottom:18px;
}

.user-welcome span{
    color:#94a3b8;
    font-size:13px;
}

.user-welcome h2{
    margin-top:6px;
}

.feed-layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:24px;
}

.feed-header-card,
.linkedin-feed-card,
.warning-card,
.request-card{
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    padding:22px;
}

.feed-header-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
}

.feed-card-list{
    display:grid;
    gap:20px;
}

.feed-user-row{
    display:flex;
    align-items:center;
    gap:14px;
}

.feed-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:bold;
}

.feed-user-info{
    flex:1;
}

.feed-user-info p,
.feed-small-text{
    color:#94a3b8;
}

.social-icon-link{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#2563eb;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:20px;
}

.flashing-icon{
    animation:pulseIcon 1.4s infinite;
}

@keyframes pulseIcon{
    0%{box-shadow:0 0 0 0 rgba(37,99,235,0.7);}
    70%{box-shadow:0 0 0 14px rgba(37,99,235,0);}
    100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}

.feed-post-body{
    margin:18px 0;
    color:#e5e7eb;
    line-height:1.7;
}

.feed-platform-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.feed-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.feed-sidebar{
    display:grid;
    gap:20px;
    height:fit-content;
}

.warning-card{
    border-color:#f59e0b;
    margin-bottom:20px;
}

.request-card{
    margin-top:14px;
}

.request-card p{
    color:#94a3b8;
    margin:8px 0 12px;
}

.request-card form{
    margin-top:10px;
}

.request-card input{
    width:100%;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#ffffff;
    padding:12px;
    border-radius:10px;
    margin-bottom:8px;
}

.feed-filter select{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#ffffff;
    padding:12px;
    border-radius:12px;
}

@media(max-width:1000px){
    .feed-layout{
        grid-template-columns:1fr;
    }

    .feed-header-card{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }
}

body{
    font-size:14px;
}

.brand-logo{
    width:48px;
    height:48px;
    border-radius:14px;
    object-fit:cover;
}

.topnav a{
    font-size:14px;
}

.hero-card h2{
    font-size:34px;
}

.auth-card h2,
.section-header h2,
.feed-header-card h2{
    font-size:24px;
}

.user-welcome h2{
    font-size:24px;
}

.credit-number{
    font-size:34px;
}

input,
select,
button,
.btn{
    font-size:14px !important;
}

.user-welcome small{
    color:#60a5fa;
    display:block;
    margin-top:6px;
}

.page-loader{
    position:fixed;
    inset:0;
    background:rgba(5,8,22,0.82);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.page-loader.active{
    display:flex;
}

.loader-card{
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:28px;
    width:240px;
    text-align:center;
}

.loader-card span{
    display:block;
    margin-top:8px;
    color:#94a3b8;
}

.loader-ring{
    width:46px;
    height:46px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,0.12);
    border-top-color:#2563eb;
    margin:0 auto 16px;
    animation:spinLoader 0.8s linear infinite;
}

@keyframes spinLoader{
    to{transform:rotate(360deg);}
}

.admin-table-wrap{
    overflow-x:auto;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.admin-table th,
.admin-table td{
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:left;
}

.admin-table th{
    color:#94a3b8;
    font-weight:600;
}

.admin-action-form{
    display:flex;
    gap:8px;
    align-items:center;
}

.admin-action-form input,
.admin-action-form select{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:9px;
    border-radius:8px;
    width:110px;
}

/* Professional SaaS typography override */
body{
    font-size:13px;
    line-height:1.45;
}

h1{
    font-size:22px !important;
    font-weight:600 !important;
}

h2{
    font-size:24px !important;
    font-weight:600 !important;
}

h3{
    font-size:16px !important;
    font-weight:600 !important;
}

p,
span,
label,
a,
button,
input,
select,
small{
    font-size:13px !important;
}

.topbar{
    height:66px;
}

.brand-logo{
    width:42px;
    height:42px;
    border-radius:10px;
}

.brand span{
    font-size:12px !important;
}

.topnav{
    gap:18px;
}

.primary-link{
    padding:9px 14px;
    border-radius:9px;
}

.page-shell{
    padding:24px;
}

.content-card,
.sidebar-card,
.linkedin-feed-card,
.feed-header-card{
    border-radius:16px;
}

.btn{
    padding:10px 14px;
    border-radius:9px;
    font-weight:500;
}

.credit-number{
    font-size:30px !important;
}

/* Dashboard profile rows */
.profile-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 420px));
    gap:14px;
    align-items:start;
    justify-content:start;
}

.profile-row-card{
    width:100%;
    max-width:420px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:14px;
}

.profile-row-main{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.profile-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.profile-row-info{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.profile-row-info small,
.profile-row-goal{
    grid-column:1 / -1;
    color:#64748b;
    font-size:12px !important;
    margin-top:4px;
}

.compact-badge{
    margin-bottom:0;
    padding:6px 10px;
}

.profile-row-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.small-open-btn,
.small-delete-btn{
    border:none;
    border-radius:8px;
    padding:8px 12px;
    cursor:pointer;
    font-size:12px !important;
}

.small-open-btn{
    background:#111827;
    border:1px solid rgba(255,255,255,0.1);
    color:#ffffff;
}

.small-delete-btn{
    background:#7f1d1d;
    color:#ffffff;
}

/* Feed page professional layout */
.feed-layout{
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:22px;
}

.feed-header-card{
    padding:18px 20px;
}

.feed-header-card h2{
    margin-bottom:4px;
}

.feed-filter select{
    min-width:220px;
    padding:10px 12px;
}

.linkedin-feed-card{
    padding:18px;
}

.feed-avatar{
    width:44px;
    height:44px;
    font-size:17px;
}

.social-icon-link{
    width:38px;
    height:38px;
    font-size:15px;
}

.feed-post-body{
    margin:14px 0;
}

.feed-actions{
    justify-content:flex-start;
}

.empty-card{
    padding:28px;
    border-radius:16px;
}

@media(max-width:900px){
    .profile-row-card{
        grid-template-columns:1fr;
        align-items:flex-start;
    }

    .profile-row-actions{
        width:100%;
    }

    .small-open-btn,
    .small-delete-btn{
        flex:1;
        text-align:center;
    }
}

.admin-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 220px));
    gap:12px;
    margin-bottom:18px;
}

.admin-control-bar{
    display:grid;
    grid-template-columns:1.5fr 160px 160px 140px auto auto;
    gap:10px;
    margin-bottom:14px;
    align-items:center;
}

.admin-control-bar input,
.admin-control-bar select{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:10px 12px;
    border-radius:9px;
    width:100%;
}

.admin-bulk-bar{
    display:flex;
    justify-content:flex-end;
    margin-bottom:10px;
}

.admin-table-wrap{
    overflow-x:auto;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
}

.admin-table{
    width:100%;
    min-width:1450px;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:13px;
}

.admin-table th,
.admin-table td{
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:left;
    vertical-align:middle;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.admin-table th{
    color:#94a3b8;
    font-weight:600;
    background:#09101d;
}

.check-col{
    width:55px;
    text-align:center !important;
}

.name-col{
    width:210px;
}

.handle-col{
    width:210px;
}

.email-col{
    width:320px;
}

.action-col{
    width:440px;
}

.role-pill,
.status-pill{
    display:inline-flex;
    padding:5px 8px;
    border-radius:999px;
    background:#111827;
    border:1px solid rgba(255,255,255,0.08);
    font-size:12px !important;
}

.admin-action-form{
    display:grid;
    grid-template-columns:140px 170px 110px;
    gap:12px;
    align-items:center;
    min-width:460px;
}

.admin-action-form input,
.admin-action-form select{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:8px;
    border-radius:8px;
    width:100%;
}

.admin-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:16px;
    color:#94a3b8;
}

.empty-table-cell{
    text-align:center !important;
    color:#94a3b8;
    padding:28px !important;
}

@media(max-width:1000px){
    .admin-control-bar{
        grid-template-columns:1fr;
    }

    .admin-bulk-bar{
        justify-content:flex-start;
    }
}

.admin-table th:nth-child(5),
.admin-table th:nth-child(6),
.admin-table th:nth-child(7),
.admin-table th:nth-child(8){
    width:110px;
}

.admin-table td:nth-child(5),
.admin-table td:nth-child(6),
.admin-table td:nth-child(7),
.admin-table td:nth-child(8){
    width:110px;
}

.admin-action-form .btn{
    width:110px;
    min-width:110px;
    justify-self:start;
}

.admin-action-form input,
.admin-action-form select{
    width:100%;
    height:46px;
    box-sizing:border-box;
}

.admin-table td{
    vertical-align:middle;
}

.action-col{
    width:520px !important;
}

.admin-action-form{
    display:grid !important;
    grid-template-columns:150px 170px 115px !important;
    gap:12px !important;
    align-items:center !important;
    width:455px !important;
    min-width:455px !important;
    max-width:455px !important;
}

.admin-action-form input,
.admin-action-form select{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
}

.admin-action-form button{
    width:115px !important;
    min-width:115px !important;
    max-width:115px !important;
    height:42px !important;
}

.action-col{
    width:500px !important;
    min-width:500px !important;
}

.admin-modal-row{
    display:table-row;
}

.admin-modal-row > td{
    padding:0 !important;
    border:0 !important;
    height:0 !important;
}

.admin-user-modal{
    position:fixed;
    inset:0;
    background:rgba(5,8,22,0.82);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.admin-user-modal.active{
    display:flex;
}

.admin-user-modal-box{
    width:520px;
    max-width:94vw;
    max-height:90vh;
    overflow:auto;
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:18px;
    padding:24px;
    position:relative;
}

.admin-modal-close{
    position:absolute;
    top:14px;
    right:16px;
    background:#7f1d1d;
    color:#fff;
    border:none;
    width:34px;
    height:34px;
    border-radius:50%;
    cursor:pointer;
}

.admin-user-edit-form{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.admin-user-edit-form input,
.admin-user-edit-form select{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:11px;
    border-radius:9px;
    width:100%;
}

.nav-icon-link{
    position:relative;
    background:transparent;
    border:none;
    color:#ffffff;
    cursor:pointer;
    font-size:17px !important;
    padding:8px;
}

.nav-badge{
    position:absolute;
    top:-3px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#dc2626;
    color:#ffffff;
    font-size:11px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.nav-notify-wrap{
    position:relative;
}

.nav-notify-dropdown{
    display:none;
    position:absolute;
    top:38px;
    right:0;
    width:320px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    padding:14px;
    z-index:9999;
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
}


.nav-note-item{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav-note-item b{
    display:block;
    margin-bottom:4px;
}

.nav-note-item span,
.nav-note-empty{
    color:#94a3b8;
    font-size:12px !important;
}

.mark-read-link{
    display:block;
    margin-top:12px;
    color:#60a5fa;
}

.messages-layout{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:22px;
}

.message-compose{
    display:grid;
    gap:12px;
}

.message-compose select,
.message-compose textarea{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:12px;
    border-radius:10px;
    width:100%;
}

.message-compose textarea{
    min-height:130px;
    resize:vertical;
}

.message-list{
    display:grid;
    gap:12px;
}

.message-card{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:14px;
}

.message-card p{
    margin:8px 0;
    color:#e5e7eb;
}

.message-card small{
    color:#94a3b8;
}

@media(max-width:900px){
    .messages-layout{
        grid-template-columns:1fr;
    }
}

.message-tabs{
    display:flex;
    gap:8px;
    margin-top:14px;
}

.message-tabs a{
    padding:8px 14px;
    border-radius:999px;
    background:#09101d;
    color:#94a3b8;
    border:1px solid rgba(255,255,255,0.08);
}

.message-tabs a.active{
    background:#2563eb;
    color:#ffffff;
}

.home-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr) 320px;
    gap:18px;
}

.home-left,
.home-right{
    display:grid;
    gap:14px;
    align-content:start;
}

.home-profile-card,
.home-side-card,
.post-composer-card,
.social-feed-card{
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:16px;
}

.home-avatar,
.composer-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.home-profile-card h3{
    margin:12px 0 2px;
}

.home-profile-card p,
.home-stats span{
    color:#94a3b8;
}

.home-stats{
    display:grid;
    gap:8px;
    margin-top:14px;
}

.mini-profile-form{
    display:grid;
    gap:10px;
}

.mini-profile-form input,
.mini-profile-form select{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:10px;
    border-radius:9px;
}

.mini-profile-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.mini-profile-row span{
    display:block;
    color:#94a3b8;
}

.post-composer-card{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:14px;
}

.composer-placeholder{
    flex:1;
    text-align:left;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.1);
    color:#94a3b8;
    border-radius:999px;
    padding:12px 16px;
}

.social-feed-card{
    margin-bottom:14px;
}

.social-feed-head{
    display:flex;
    align-items:center;
    gap:12px;
}

.social-feed-head div:nth-child(2){
    flex:1;
}

.social-feed-head p{
    color:#94a3b8;
}

.social-mini-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.feed-text{
    margin:14px 0;
}

@media(max-width:1100px){
    .home-layout{
        grid-template-columns:1fr;
    }
}

body{
    font-size:12px !important;
}

.page-shell{
    max-width:1280px;
    margin:0 auto;
}

.home-layout{
    grid-template-columns:260px minmax(420px, 1fr) 300px !important;
    align-items:start;
}

.home-profile-card,
.home-side-card,
.post-composer-card,
.social-feed-card{
    background:#101827 !important;
    border-radius:12px !important;
    padding:14px !important;
}

.real-composer{
    align-items:flex-start;
}

.composer-main{
    flex:1;
    display:grid;
    gap:10px;
}

.real-composer textarea{
    width:100%;
    min-height:72px;
    resize:vertical;
    background:#09101d;
    color:#fff;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:14px;
    padding:12px;
}

.composer-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.media-upload-btn{
    color:#94a3b8;
    cursor:pointer;
}

.media-upload-btn input{
    display:none;
}

.social-feed-card{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
}

.post-media{
    width:100%;
    max-height:520px;
    object-fit:cover;
    border-radius:12px;
    margin-top:12px;
    background:#000;
}

.post-action-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid rgba(255,255,255,0.08);
    margin-top:12px;
    padding-top:8px;
}

.post-action-row button{
    background:transparent;
    color:#94a3b8;
    border:none;
    padding:9px;
    cursor:pointer;
    border-radius:8px;
}

.post-action-row button:hover{
    background:#09101d;
    color:#fff;
}

.topnav a{
    font-size:18px !important;
}

.brand h1{
    font-size:18px !important;
}

.brand span{
    font-size:11px !important;
}

.compact-profile{
    padding:14px !important;
}

.compact-profile .home-avatar{
    width:46px;
    height:46px;
}

.left-menu-card{
    display:grid;
    gap:4px;
}

.left-menu-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    color:#e5e7eb;
    font-weight:500;
}

.left-menu-item:hover{
    background:#09101d;
}

.left-menu-item span{
    font-size:13px !important;
}

.compact-request{
    padding:12px !important;
    border-radius:12px !important;
}

.suggested-member-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.suggested-member-row span{
    display:block;
    color:#94a3b8;
    margin-top:2px;
}

.mini-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.home-right .home-side-card,
.home-left .home-side-card,
.home-profile-card{
    position:sticky;
    top:82px;
}

.btn,
.primary-link,
button{
    font-size:12px !important;
    padding:8px 12px !important;
    border-radius:9px !important;
}

textarea,
input,
select{
    font-size:12px !important;
}

.nav-icon-link{
    font-size:16px !important;
    padding:6px !important;
}

.nav-note-item{
    display:block;
    text-decoration:none;
    color:#fff;
}

.message-search-results{
    display:grid;
    gap:6px;
}

.message-result-item{
    text-align:left;
    background:#09101d;
    color:#e5e7eb;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:9px;
    padding:9px 10px !important;
    cursor:pointer;
}

.selected-receiver-box{
    background:#09101d;
    color:#94a3b8;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:9px;
    padding:10px;
}

.signout-link{
    padding:6px 10px !important;
    font-size:12px !important;
    min-width:auto !important;
    width:auto !important;
    border-radius:8px !important;
}

.nav-notify-dropdown{
    width:280px !important;
    padding:10px !important;
}

.nav-notify-dropdown strong{
    font-size:12px !important;
}

.nav-note-item{
    padding:8px 0 !important;
}

.nav-note-item b{
    font-size:12px !important;
    font-weight:600 !important;
}

.nav-note-item span{
    font-size:11px !important;
    line-height:1.35 !important;
}

.message-inbox-layout{
    grid-template-columns:420px minmax(0, 1fr) !important;
    align-items:start;
}

.message-list-panel,
.message-detail-panel{
    padding:16px !important;
}

.compact-section-header{
    margin-bottom:14px !important;
}

.compact-section-header h2{
    font-size:18px !important;
}

.message-card-link{
    display:block;
    color:#ffffff;
    cursor:pointer;
}

.message-card-link:hover,
.message-card-link.active{
    border-color:#2563eb;
    background:#0f1b31;
}

.message-card strong{
    font-size:12px !important;
}

.message-card p{
    font-size:12px !important;
    line-height:1.35 !important;
}

.message-card small{
    font-size:11px !important;
}

.message-open-card{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:14px;
    margin-bottom:16px;
}

.message-open-card h2{
    font-size:16px !important;
    margin-bottom:6px;
}

.message-open-card p{
    margin-top:12px;
    font-size:13px !important;
    line-height:1.5;
}

#messageHandleSearch{
    background:#09101d !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    padding:10px !important;
    border-radius:9px !important;
    width:100%;
}

#messageHandleSearch::placeholder{
    color:#64748b !important;
}

.message-compose label{
    font-size:12px !important;
    color:#94a3b8;
}

.message-compose textarea{
    min-height:110px !important;
}

@media(max-width:900px){
    .message-inbox-layout{
        grid-template-columns:1fr !important;
    }
}

.compose-new-btn{
    margin-top:12px;
    width:auto !important;
    display:inline-flex;
}

.post-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,0.82);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.post-modal.active{
    display:flex;
}

.post-modal-box{
    width:560px;
    max-width:94vw;
    max-height:82vh;
    overflow-y:auto;
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    padding:18px;
    position:relative;
}

.post-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    border-radius:50%;
    border:none;
    background:#7f1d1d;
    color:#fff;
    cursor:pointer;
}

.post-flow-form{
    display:grid;
    gap:12px;
}

.post-flow-form textarea{
    min-height:120px;
    background:#09101d;
    color:#fff;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:12px;
}

.post-attach-box{
    background:#09101d;
    border:1px dashed rgba(255,255,255,0.22);
    color:#94a3b8;
    border-radius:12px;
    padding:14px;
    cursor:pointer;
}

.post-attach-box input{
    display:none;
}

.post-preview-box{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:10px;
    max-height:420px;
    overflow:auto;
}

.post-preview-box img,
.post-preview-box video,
.post-preview-media{
    width:auto !important;
    max-width:100% !important;
    max-height:340px !important;
    object-fit:contain !important;
    border-radius:12px;
    background:#000;
}

.post-resize-control{
    gap:6px;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:10px;
}

.post-resize-control label{
    font-size:12px !important;
    color:#94a3b8;
}

.post-resize-control input{
    width:100%;
}

.topnav .signout-link{
    font-size:12px !important;
    padding:6px 10px !important;
    line-height:1 !important;
    min-width:0 !important;
    height:auto !important;
}

.topnav .primary-link,
.topnav .signout-link{
    font-size:12px !important;
    padding:6px 10px !important;
    border-radius:8px !important;
    min-width:0 !important;
}

.hero-card h2{
    font-size:26px !important;
    line-height:1.2 !important;
}

.hero-card p{
    font-size:13px !important;
    line-height:1.7 !important;
}

.profile-page{
    display:grid;
    gap:16px;
}

.profile-cover-card,
.profile-side-card{
    background:#101827;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    overflow:hidden;
}

.profile-cover{
    height:150px;
    background:linear-gradient(135deg,#0f172a,#1d4ed8);
}

.profile-main-row{
    display:flex;
    gap:18px;
    padding:0 18px 18px;
    margin-top:-42px;
    align-items:flex-end;
}

.profile-photo,
.profile-photo-fallback{
    width:96px;
    height:96px;
    border-radius:50%;
    border:4px solid #101827;
    object-fit:cover;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:700;
    color:#fff;
}

.profile-info-main h2{
    font-size:22px !important;
    margin-bottom:2px;
}

.profile-info-main p,
.profile-info-main small{
    color:#94a3b8;
}

.profile-tabs{
    display:flex;
    gap:8px;
    background:#101827;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:8px;
}

.profile-tabs a{
    color:#cbd5e1;
    padding:8px 12px;
    border-radius:8px;
}

.profile-tabs a:hover{
    background:#09101d;
}

.profile-grid{
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 300px;
    gap:16px;
    align-items:start;
}

.profile-side-card{
    padding:16px;
}

.profile-side-card p{
    color:#94a3b8;
    margin-top:10px;
}

.profile-edit-form{
    display:grid;
    gap:10px;
}

.profile-edit-form input,
.profile-edit-form textarea{
    width:100%;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    padding:10px;
    border-radius:9px;
}

.profile-edit-form textarea{
    min-height:90px;
    resize:vertical;
}

.profile-avatar-link{
    color:#fff;
    text-decoration:none;
}

@media(max-width:1000px){
    .profile-grid{
        grid-template-columns:1fr;
    }

    .profile-main-row{
        align-items:flex-start;
        flex-direction:column;
    }
}

.post-menu-wrap{
    position:relative;
    margin-left:auto;
}

.post-menu-btn{
    background:#1f2937 !important;
    color:#fff !important;
    border:none;
    width:32px;
    height:32px;
    border-radius:50% !important;
    cursor:pointer;
}

.post-menu-dropdown{
    display:none;
    position:absolute;
    right:0;
    top:38px;
    width:180px;
    background:#111827;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    padding:8px;
    z-index:99;
    box-shadow:0 16px 35px rgba(0,0,0,0.35);
}

.post-menu-dropdown.active{
    display:grid;
    gap:6px;
}

.post-menu-dropdown button{
    width:100%;
    text-align:left;
    background:transparent !important;
    color:#e5e7eb !important;
    border:none;
    padding:9px 10px !important;
    border-radius:8px !important;
    cursor:pointer;
}

.post-menu-dropdown button:hover{
    background:#0b1220 !important;
}

.comment-box{
    margin-top:10px;
    gap:8px;
}

.comment-box input{
    flex:1;
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    border-radius:999px;
    padding:9px 12px;
}

.post-action-row form{
    margin:0;
}

.brand h1,
.brand span{
    color:#ffffff !important;
}

.brand h1{
    font-size:20px !important;
    font-weight:700 !important;
}

.brand span{
    font-size:13px !important;
    font-weight:500 !important;
}

.post-owner-link{
    color:#ffffff;
}

.inline-follow-form{
    margin-left:auto;
}

.post-follow-btn{
    background:transparent !important;
    color:#60a5fa !important;
    border:none !important;
    font-weight:700 !important;
    cursor:pointer;
    padding:6px 10px !important;
}

.reaction-wrap{
    position:relative;
}

.reaction-menu{
    display:none;
    position:absolute;
    left:0;
    bottom:36px;
    background:#111827;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    padding:6px;
    gap:4px;
    z-index:50;
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
}

.reaction-menu form{
    margin:0;
}

.reaction-menu button{
    font-size:18px !important;
    padding:6px 8px !important;
}

.collapsible-text{
    max-height:72px;
    overflow:hidden;
}

.collapsible-text.expanded{
    max-height:none;
}

.read-more-btn{
    background:transparent !important;
    color:#60a5fa !important;
    border:none !important;
    padding:0 !important;
    margin-bottom:8px;
    cursor:pointer;
}

.share-modal,
.profile-edit-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,0.82);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.share-modal.active,
.profile-edit-modal.active{
    display:flex;
}

.share-modal-box,
.profile-edit-modal-box{
    width:520px;
    max-width:94vw;
    max-height:86vh;
    overflow:auto;
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    padding:18px;
    position:relative;
}

.share-modal-close,
.profile-edit-close{
    position:absolute;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    border-radius:50%;
    border:none;
    background:#7f1d1d;
    color:#fff;
    cursor:pointer;
}

.share-modal-box textarea{
    width:100%;
    min-height:100px;
    background:#09101d;
    color:#fff;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:10px;
    margin:12px 0;
}

.profile-grid{
    grid-template-columns:280px minmax(0,1fr) 280px !important;
}

.profile-cover{
    height:90px !important;
    background:#101827 !important;
}

.profile-main-row{
    align-items:center !important;
    margin-top:-30px !important;
}

.profile-info-main p{
    max-width:760px;
    line-height:1.45;
}

.topnav .signout-link,
.topnav .primary-link{
    font-size:12px !important;
    padding:6px 10px !important;
    border-radius:8px !important;
}

.feed-avatar-img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.post-comments-list{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.post-comment-item{
    background:#09101d;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:9px 11px;
}

.post-comment-item b{
    display:block;
    font-size:12px !important;
    margin-bottom:3px;
}

.post-comment-item span{
    color:#cbd5e1;
    font-size:12px !important;
}

.edit-post-modal,
.profile-follow-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,0.82);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.edit-post-modal.active,
.profile-follow-modal.active{
    display:flex;
}

.edit-post-modal-box,
.profile-follow-modal-box{
    width:520px;
    max-width:94vw;
    max-height:82vh;
    overflow:auto;
    background:#0b1220;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    padding:18px;
    position:relative;
}

.edit-post-close,
.profile-follow-close{
    position:absolute;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    border-radius:50%;
    border:none;
    background:#7f1d1d;
    color:#fff;
    cursor:pointer;
}

.edit-post-modal-box textarea{
    width:100%;
    min-height:140px;
    background:#09101d;
    color:#fff;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:12px;
    margin:14px 0;
}

.profile-header-pro{
    padding:22px !important;
}

.profile-header-pro .profile-main-row{
    margin-top:0 !important;
    padding:0 !important;
    align-items:center !important;
}

.profile-bio-card{
    max-width:760px;
}

.profile-bio-text{
    max-width:720px;
    color:#cbd5e1 !important;
    line-height:1.55;
    margin:8px 0;
}

.profile-stat-row{
    display:flex;
    gap:18px;
    align-items:center;
    margin:8px 0;
    flex-wrap:wrap;
}

.profile-stat-btn{
    background:transparent;
    color:#ffffff;
    border:none;
    cursor:pointer;
    padding:0 !important;
}

.profile-stat-btn b{
    font-size:14px !important;
}

.profile-edit-main-btn{
    margin-top:12px;
    width:auto !important;
}

.follow-list-row{
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.follow-list-row span{
    display:block;
    color:#94a3b8;
    margin-top:2px;
}

.profile-grid{
    grid-template-columns:280px minmax(0,1fr) 260px !important;
}

.profile-tabs{
    justify-content:flex-start !important;
}

.avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.feed-avatar,
.home-avatar,
.profile-photo-fallback{
    overflow:hidden;
}

.stat-modal-btn{
    background:transparent;
    border:0;
    color:#94a3b8;
    cursor:pointer;
    text-align:left;
    font:inherit;
    padding:0 !important;
}

.profile-follow-modal.active{
    display:flex !important;
}


.profile-follow-close{
    background:#7f1d1d !important;
    color:#ffffff !important;
}

.follow-list-row,
.follow-list-row b,
.follow-list-row span{
    color:#ffffff !important;
}

.follow-list-row span{
    color:#94a3b8 !important;
}

.profile-bio-card{
    max-width:720px !important;
}

.profile-bio-text{
    max-width:620px !important;
    line-height:1.45 !important;
}

.profile-info-main{
    max-width:720px !important;
}

.profile-info-main p{
    max-width:620px !important;
}

.profile-website-link{
    color:#60a5fa !important;
    text-decoration:none !important;
}

.profile-website-link:hover{
    text-decoration:underline !important;
}

.nav-notify-dropdown{
    display:none !important;
}

.nav-notify-dropdown.active{
    display:block !important;
}

.reaction-menu{
    display:none !important;
}

.reaction-menu.active{
    display:flex !important;
}

.profile-follow-modal-box{
    width:520px !important;
    max-width:92vw !important;
    padding:18px !important;
}

.profile-follow-close{
    width:34px !important;
    height:34px !important;
    border-radius:12px !important;
    background:#991b1b !important;
    color:#ffffff !important;
}

.follow-list-row b,
.follow-list-row a,
.follow-list-row span{
    color:#ffffff !important;
}

.post-visibility-select{
    width:100%;
    background:#0b1220;
    color:#ffffff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    padding:8px;
    margin:6px 0;
}

.nav-notify-dropdown{
    display:none;
}

.nav-notify-dropdown.active{
    display:block !important;
}

.reaction-menu{
    display:none;
}

.reaction-menu.active{
    display:flex !important;
}

.profile-follow-modal-box{
    width:620px !important;
    max-width:90vw !important;
    max-height:70vh !important;
    overflow-y:auto !important;
    padding:0 !important;
    border-radius:14px !important;
}

.tiktok-follow-head{
    padding:20px 34px 10px !important;
}

.tiktok-follow-head h3{
    font-size:20px !important;
    margin-bottom:14px !important;
}

.tiktok-follow-tabs button{
    font-size:13px !important;
    padding:10px 4px !important;
}

.tiktok-follow-body{
    padding:0 34px 18px !important;
}

.follow-list-row{
    grid-template-columns:40px minmax(0,1fr) 108px !important;
    gap:10px !important;
    padding:10px 0 !important;
}

.follow-list-row b{
    font-size:13px !important;
}

.follow-list-row span{
    font-size:12px !important;
}

.mini-avatar{
    width:38px !important;
    height:38px !important;
    font-size:13px !important;
}

.follow-modal-action{
    width:100px !important;
    height:34px !important;
    padding:6px 10px !important;
    font-size:12px !important;
    border-radius:8px !important;
}

.profile-follow-search{
    width:100%;
    margin:12px 0;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#0b1220;
    color:#fff;
}

.follow-list-row{
    align-items:center !important;
    gap:12px !important;
}

.follow-list-row b,
.follow-list-row span{
    color:#fff !important;
}

.side-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.side-card-head select{
    width:62px;
    padding:6px;
    border-radius:8px;
}

.mini-feature-card{
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:10px;
    margin-top:10px;
}

.mini-feature-card img{
    width:100%;
    max-height:120px;
    object-fit:cover;
    border-radius:10px;
    margin-top:8px;
}

.fixed-profile-layout{
    display:grid !important;
    grid-template-columns:280px minmax(0, 1fr) 280px !important;
    gap:18px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
}

.profile-left-column,
.profile-right-column{
    display:grid;
    gap:16px;
    align-content:start;
}

.profile-left-column #about{
    order:1;
}

.profile-left-column .profile-side-card:not(#about){
    order:2;
}

.fixed-profile-layout .profile-posts{
    grid-column:2 !important;
}

.fixed-profile-layout .profile-posts .social-feed-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

@media(max-width:1000px){
    .fixed-profile-layout{
        grid-template-columns:1fr !important;
    }

    .fixed-profile-layout .profile-posts{
        grid-column:auto !important;
    }
}

.profile-left-column,
.profile-right-column,
.fixed-profile-layout .profile-posts{
    min-width:0 !important;
}

.fixed-profile-layout .social-feed-card,
.fixed-profile-layout .post-media{
    max-width:100% !important;
}

.featured-click-card{
    display:block;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
}

.featured-click-card small{
    display:block;
    color:#9fb2cc;
    font-size:12px;
    margin-bottom:8px;
}

.featured-card-stats{
    display:flex;
    gap:10px;
    align-items:center;
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#9fb2cc;
    font-size:13px;
}

.mini-feature-card:hover{
    border-color:rgba(59,130,246,.65);
    background:#111827;
}

.profile-open-btn,
.profile-open-btn:visited,
.profile-open-btn:active{
    color:#ffffff !important;
    background:#2563eb !important;
    border:1px solid rgba(255,255,255,.12);
    padding:8px 14px;
    border-radius:9px;
    font-weight:700;
    text-decoration:none !important;
}

.profile-open-btn:hover{
    background:#3b82f6 !important;
    color:#ffffff !important;
}

.suggested-card{
    padding:16px !important;
}

.suggested-pro-row{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
}

.suggested-avatar-link{
    width:44px;
    height:44px;
    border-radius:50%;
    overflow:hidden;
    display:block;
}

.suggested-avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.suggested-user-info{
    color:#ffffff !important;
    min-width:0;
}

.suggested-user-info b{
    display:block;
    color:#ffffff !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.suggested-user-info span{
    display:block;
    color:#94a3b8 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.suggested-follow-btn{
    background:transparent !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.35) !important;
    border-radius:999px !important;
    font-weight:700 !important;
    padding:7px 12px !important;
    cursor:pointer;
}

.suggested-follow-btn:hover{
    background:#1f2937 !important;
}

/* FINAL FIX: profile page static 3-column layout */
.profile-page{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

.fixed-profile-layout{
    display:grid !important;
    grid-template-columns:280px minmax(0, 1fr) 280px !important;
    gap:20px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

.profile-left-column,
.profile-right-column,
.profile-posts{
    min-width:0 !important;
    max-width:100% !important;
}

.profile-left-column{
    grid-column:1 !important;
}

.profile-posts{
    grid-column:2 !important;
}

.profile-right-column{
    grid-column:3 !important;
}

.profile-posts .social-feed-card,
.profile-posts .post-media{
    max-width:100% !important;
}

/* force social profile Open button white */
.profile-open-btn,
.profile-open-btn:visited,
.profile-open-btn:active,
.profile-open-btn:hover{
    color:#ffffff !important;
}

/* profile composer */
.profile-composer-card{
    margin-bottom:16px !important;
}

/* suggested users professional row */
.suggested-pro-row{
    grid-template-columns:44px minmax(0,1fr) auto !important;
}

.suggested-avatar-link,
.suggested-avatar-img{
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
}

.suggested-follow-btn[disabled]{
    opacity:.7;
    cursor:not-allowed;
}

/* followers modal DP */
.follow-avatar-img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

@media(max-width:1000px){
    .fixed-profile-layout{
        grid-template-columns:1fr !important;
    }

    .profile-left-column,
    .profile-posts,
    .profile-right-column{
        grid-column:auto !important;
    }
}

.follow-request-menu-item{
    position:relative;
}

.left-menu-badge{
    margin-left:auto;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#dc2626;
    color:#ffffff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px !important;
    font-weight:700;
}

.follow-list-row{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center !important;
    gap:14px !important;
}

.follow-user-main{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
}

.follow-modal-action{
    border:0;
    border-radius:12px;
    padding:9px 16px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}

.followback-action{
    background:#ff2d55;
    color:#ffffff;
}

.following-action{
    background:#1f2937;
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
}

.social-follow-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    z-index:99999;
    align-items:center;
    justify-content:center;
}

.social-follow-modal.active{
    display:flex;
}

.social-follow-box{
    width:min(420px,92vw);
    background:#0f172a;
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    padding:22px;
}

.social-follow-close{
    float:right;
    background:#991b1b;
    color:#fff;
    border:0;
    border-radius:12px;
    width:42px;
    height:42px;
    font-size:20px;
    cursor:pointer;
}

.social-follow-link{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
    text-decoration:none;
}

.tiktok-follow-head{
    text-align:center;
    padding:28px 54px 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.tiktok-follow-head h3{
    font-size:24px !important;
    margin-bottom:22px;
}

.tiktok-follow-tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}

.tiktok-follow-tabs button{
    background:transparent !important;
    border:0 !important;
    color:#94a3b8 !important;
    font-weight:700 !important;
    padding:12px 6px !important;
    border-radius:0 !important;
}

.tiktok-follow-tabs button.active{
    color:#ffffff !important;
    border-bottom:2px solid #ffffff !important;
}

.tiktok-follow-body{
    padding:0 54px 24px;
}

.profile-follow-search{
    margin:16px 0 !important;
}

.follow-list-row{
    grid-template-columns:56px minmax(0,1fr) 150px !important;
    padding:12px 0 !important;
}

.mini-avatar{
    width:48px !important;
    height:48px !important;
}

.follow-modal-action{
    width:132px !important;
    height:44px !important;
    border-radius:8px !important;
    font-size:14px !important;
}

.follow-list-row .mini-avatar{
    overflow:hidden !important;
}

.follow-list-row .mini-avatar img,
.follow-avatar-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
}

.follow-modal-action{
    width:82px !important;
    min-width:82px !important;
    height:30px !important;
    padding:4px 8px !important;
    font-size:11px !important;
    border-radius:7px !important;
}

.followback-action{
    width:92px !important;
    min-width:92px !important;
}

.follow-avatar-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
    display:block !important;
}

.follow-list-row .mini-avatar{
    overflow:hidden !important;
}

.follow-avatar-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
    display:block !important;
}

.follow-list-row .mini-avatar{
    overflow:hidden !important;
}

.nav-notify-dropdown{
    display:none !important;
}

.nav-notify-dropdown.active{
    display:block !important;
}

.reaction-menu{
    display:none !important;
}

.reaction-menu.active{
    display:flex !important;
}

.pill{
    color:#ffffff !important;
    font-weight:400 !important;
}

.hero-card h2{
    font-weight:400 !important;
}

.hero-actions .btn{
    min-width:96px !important;
    width:auto !important;
    height:38px !important;
    padding:8px 14px !important;
}

.mock-avatar{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    overflow:hidden !important;
    background:transparent !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.mock-avatar-logo{
    width:42px !important;
    height:42px !important;
    object-fit:contain !important;
    border-radius:10px !important;
    display:block !important;
}

@media(max-width:700px){
    .hero-actions{
        align-items:center !important;
        gap:12px !important;
        flex-wrap:wrap !important;
    }

    .hero-card h2{
        font-size:32px !important;
        line-height:1.22 !important;
    }

    .pill{
        display:inline-flex !important;
        width:auto !important;
        max-width:100% !important;
        line-height:1.45 !important;
    }
}

/* mobile index page professional fix */
@media(max-width:700px){

    .topbar{
        height:auto !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        padding:10px 14px !important;
    }

    .brand{
        justify-content:flex-start !important;
        gap:8px !important;
        flex:1 !important;
        min-width:0 !important;
    }

    .brand-logo{
        width:36px !important;
        height:36px !important;
        border-radius:8px !important;
        flex-shrink:0 !important;
    }

    .brand h1{
        font-size:17px !important;
        line-height:1.05 !important;
    }

    .brand span{
        font-size:11px !important;
        line-height:1.1 !important;
    }

    .topnav{
        width:auto !important;
        display:flex !important;
        justify-content:flex-end !important;
        align-items:center !important;
        gap:6px !important;
        flex-wrap:nowrap !important;
        flex-shrink:0 !important;
    }

    .topnav a,
    .topnav .primary-link{
        width:auto !important;
        min-width:54px !important;
        max-width:70px !important;
        height:30px !important;
        padding:4px 8px !important;
        font-size:11px !important;
        border-radius:8px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        line-height:1 !important;
    }

    .hero-card{
        margin-top:14px !important;
        padding:24px 20px !important;
    }

    .hero-actions{
        display:flex !important;
        gap:10px !important;
        flex-wrap:nowrap !important;
    }

    .hero-actions .btn{
        width:96px !important;
        min-width:96px !important;
        max-width:96px !important;
        height:36px !important;
        padding:5px 10px !important;
        font-size:12px !important;
        border-radius:8px !important;
    }

    .hero-card h2{
        font-size:25px !important;
        line-height:1.28 !important;
    }

    .hero-card p{
        font-size:13px !important;
        line-height:1.65 !important;
    }

    .mock-feed{
        align-items:center !important;
        gap:12px !important;
    }
}

.hero-actions .btn-primary{
    background:#2563eb !important;
    color:#ffffff !important;
    border:none !important;
}

/* TRUE PHONE VIEW RESET */
@media(max-width:700px){

    .topbar{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
        padding:10px 12px !important;
        height:auto !important;
    }

    .brand{
        display:grid !important;
        grid-template-columns:42px 1fr !important;
        align-items:center !important;
        gap:10px !important;
        width:100% !important;
    }

    .brand-logo{
        width:42px !important;
        height:42px !important;
        object-fit:cover !important;
    }

    .brand h1{
        font-size:18px !important;
        line-height:1.1 !important;
    }

    .brand span{
        font-size:11px !important;
        line-height:1.2 !important;
    }

    .topnav{
        width:100% !important;
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        gap:6px !important;
        overflow-x:auto !important;
    }

    .topnav a,
    .topnav button,
    .topnav .primary-link,
    .topnav .signout-link{
        min-width:auto !important;
        width:auto !important;
        max-width:none !important;
        height:32px !important;
        padding:5px 8px !important;
        font-size:11px !important;
        white-space:nowrap !important;
    }

    .page-shell{
        padding:12px !important;
    }

    .profile-cover-card,
    .profile-side-card,
    .social-feed-card,
    .post-composer-card{
        padding:14px !important;
        border-radius:14px !important;
    }

    .profile-photo,
    .profile-photo-fallback{
        width:72px !important;
        height:72px !important;
        margin:0 auto !important;
    }

    .profile-info-main{
        width:100% !important;
        text-align:left !important;
    }

    .profile-info-main h2{
        font-size:22px !important;
    }

    .profile-stat-row{
        gap:14px !important;
        flex-wrap:wrap !important;
    }

    .fixed-profile-layout,
    .profile-grid,
    .home-layout,
    .message-inbox-layout,
    .feed-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .profile-left-column,
    .profile-posts,
    .profile-right-column,
    .home-left,
    .home-feed,
    .home-right{
        grid-column:auto !important;
        width:100% !important;
        max-width:100% !important;
    }

    .mini-feature-card{
        padding:14px !important;
        display:block !important;
    }

    .mini-feature-card img{
        width:180px !important;
        max-width:100% !important;
        height:auto !important;
        display:block !important;
        margin:12px auto !important;
        object-fit:contain !important;
    }

    .featured-card-stats{
        justify-content:flex-start !important;
        gap:14px !important;
        flex-wrap:wrap !important;
    }

    .social-feed-head{
        display:grid !important;
        grid-template-columns:44px 1fr auto !important;
        align-items:center !important;
        gap:10px !important;
    }

    .feed-avatar,
    .composer-avatar,
    .home-avatar{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
    }

    .post-media{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        object-fit:contain !important;
    }

    .post-action-row{
        grid-template-columns:1fr 1fr 1fr !important;
    }
}

/* LINKEDIN STYLE INSTANT MESSENGER */
.messenger-layout{
    display:grid;
    grid-template-columns:360px minmax(0, 1fr);
    min-height:calc(100vh - 120px);
    background:#0b1220;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    overflow:hidden;
}

.messenger-sidebar{
    border-right:1px solid rgba(255,255,255,.08);
    background:#08101f;
}

.messenger-head{
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.messenger-head input{
    width:100%;
    background:#111827;
    color:#fff;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    padding:10px;
}

.conversation-list{
    display:grid;
    max-height:calc(100vh - 210px);
    overflow:auto;
}

.conversation-row{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    gap:10px;
    padding:12px 14px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.conversation-row.active,
.conversation-row:hover{
    background:#1f2937;
}

.conversation-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    font-weight:700;
}

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

.conversation-info{
    min-width:0;
}

.conversation-info strong,
.conversation-info span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.conversation-info span,
.conversation-meta small{
    color:#94a3b8;
}

.conversation-meta{
    display:grid;
    justify-items:end;
    gap:6px;
}

.conversation-meta b{
    min-width:20px;
    height:20px;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px !important;
}

.messenger-chat{
    display:grid;
    grid-template-rows:auto 1fr auto;
    min-width:0;
    background:#0b1220;
}

.chat-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.chat-header span{
    color:#34d399;
}

.chat-thread{
    padding:18px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:calc(100vh - 260px);
}

.chat-bubble{
    max-width:70%;
    padding:10px 12px;
    border-radius:14px;
}

.chat-bubble.mine{
    align-self:flex-end;
    background:#2563eb;
    color:#fff;
    border-bottom-right-radius:4px;
}

.chat-bubble.theirs{
    align-self:flex-start;
    background:#111827;
    color:#fff;
    border-bottom-left-radius:4px;
}

.chat-bubble p{
    margin:0 0 5px;
    line-height:1.45;
}

.chat-bubble small{
    opacity:.75;
    font-size:10px !important;
}

.chat-compose{
    display:grid;
    grid-template-columns:auto auto auto minmax(0,1fr) auto;
    gap:8px;
    padding:14px;
    border-top:1px solid rgba(255,255,255,.08);
    background:#08101f;
}

.chat-compose textarea{
    width:100%;
    min-height:44px;
    max-height:120px;
    resize:vertical;
    background:#111827;
    color:#fff;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    padding:10px;
}

.emoji-btn{
    background:#111827 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.1) !important;
    border-radius:10px !important;
    padding:8px !important;
}

.messenger-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#94a3b8;
}

@media(max-width:700px){
    .messenger-layout{
        grid-template-columns:1fr !important;
    }

    .messenger-sidebar{
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .conversation-list{
        max-height:260px !important;
    }

    .chat-thread{
        max-height:420px !important;
        padding:12px !important;
    }

    .chat-bubble{
        max-width:88% !important;
    }

    .chat-compose{
        grid-template-columns:auto auto auto 1fr !important;
    }

    .chat-compose .btn{
        grid-column:1 / -1;
        width:100%;
    }
}

/* FINAL MOBILE RESPONSIVE FIX - ALL PAGES */
@media(max-width:700px){

    body{
        width:100% !important;
        overflow-x:hidden !important;
    }

    .page-shell{
        width:100% !important;
        max-width:100% !important;
        padding:14px !important;
        overflow-x:hidden !important;
    }

    .topbar{
        position:sticky !important;
        top:0 !important;
        width:100% !important;
    }

    .hero-grid,
    .info-grid,
    .dashboard-grid,
    .feed-layout,
    .home-layout,
    .messages-layout,
    .message-inbox-layout,
    .profile-grid,
    .fixed-profile-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        max-width:100% !important;
        gap:14px !important;
        overflow-x:hidden !important;
    }

    .home-left,
    .home-feed,
    .home-right,
    .feed-main,
    .feed-sidebar,
    .profile-left-column,
    .profile-posts,
    .profile-right-column,
    .message-list-panel,
    .message-detail-panel{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        position:static !important;
        grid-column:auto !important;
    }

    .home-right .home-side-card,
    .home-left .home-side-card,
    .home-profile-card{
        position:static !important;
        top:auto !important;
    }

    .hero-card,
    .preview-card,
    .info-card,
    .auth-card,
    .content-card,
    .sidebar-card,
    .home-profile-card,
    .home-side-card,
    .post-composer-card,
    .social-feed-card,
    .linkedin-feed-card,
    .feed-header-card,
    .warning-card,
    .request-card,
    .profile-cover-card,
    .profile-side-card{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        padding:16px !important;
        border-radius:14px !important;
    }

    .auth-wrap{
        min-height:auto !important;
        padding:22px 0 !important;
        align-items:flex-start !important;
    }

    .auth-card{
        width:100% !important;
        max-width:100% !important;
    }

    .auth-card h2{
        font-size:26px !important;
    }

    .feed-header-card{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:12px !important;
    }

    .feed-filter,
    .feed-filter select{
        width:100% !important;
        min-width:0 !important;
    }

    .feed-user-row,
    .social-feed-head{
        align-items:flex-start !important;
        gap:10px !important;
    }

    .feed-user-info,
    .social-feed-head div:nth-child(2){
        min-width:0 !important;
    }

    .post-media,
    .post-preview-media,
    .mini-feature-card img{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        object-fit:contain !important;
    }

    .post-action-row{
        grid-template-columns:1fr 1fr 1fr !important;
        gap:4px !important;
    }

    .post-action-row button{
        font-size:11px !important;
        padding:8px 4px !important;
    }

    .composer-placeholder{
        width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        border-radius:14px !important;
    }

    .real-composer{
        align-items:center !important;
    }

    .composer-main{
        width:100% !important;
        min-width:0 !important;
    }

    .mini-profile-form input,
    .mini-profile-form select,
    .auth-card input,
    .auth-card select,
    textarea,
    input,
    select{
        max-width:100% !important;
    }

    .profile-main-row{
        flex-direction:column !important;
        align-items:flex-start !important;
        margin-top:0 !important;
        padding:0 !important;
        gap:12px !important;
    }

    .profile-photo,
    .profile-photo-fallback{
        width:78px !important;
        height:78px !important;
    }

    .profile-tabs{
        overflow-x:auto !important;
        white-space:nowrap !important;
    }

    .message-tabs{
        flex-wrap:wrap !important;
    }

    .message-card,
    .message-open-card{
        word-break:break-word !important;
    }

    .profile-follow-modal-box,
    .post-modal-box,
    .share-modal-box,
    .edit-post-modal-box,
    .profile-edit-modal-box{
        width:94vw !important;
        max-width:94vw !important;
        max-height:82vh !important;
        overflow:auto !important;
    }

    .tiktok-follow-head{
        padding:18px 14px 10px !important;
    }

    .tiktok-follow-tabs{
        grid-template-columns:repeat(4, minmax(70px, 1fr)) !important;
        overflow-x:auto !important;
    }

    .tiktok-follow-body{
        padding:0 14px 16px !important;
    }

    .follow-list-row{
        grid-template-columns:38px minmax(0,1fr) 88px !important;
        gap:8px !important;
    }

    .follow-modal-action{
        width:82px !important;
        min-width:82px !important;
        font-size:11px !important;
    }

    .nav-notify-dropdown{
        position:fixed !important;
        top:72px !important;
        left:12px !important;
        right:12px !important;
        width:auto !important;
        max-width:none !important;
    }

    .admin-table-wrap{
        overflow-x:auto !important;
    }
}

.online-status,
.offline-status{
    display:block;
    font-style:normal;
    font-size:11px !important;
    margin-top:2px;
}

.online-status{
    color:#34d399 !important;
}

.offline-status{
    color:#94a3b8 !important;
}

.mobile-bottom-nav{
    display:none;
}

.desktop-chat-mini{
    position:fixed;
    right:22px;
    bottom:18px;
    width:250px;
    height:54px;
    background:#111827;
    color:#ffffff;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px 14px 0 0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 16px;
    z-index:9998;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.desktop-chat-mini b{
    margin-left:auto;
    background:#dc2626;
    color:#fff;
    min-width:20px;
    height:20px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px !important;
}

.flash-chat{
    animation:chatFlash 1s infinite;
}

@keyframes chatFlash{
    0%{border-color:#f97316; box-shadow:0 0 0 rgba(249,115,22,0);}
    50%{border-color:#f97316; box-shadow:0 0 18px rgba(249,115,22,.85);}
    100%{border-color:#f97316; box-shadow:0 0 0 rgba(249,115,22,0);}
}

.chat-toast{
    display:none;
    position:fixed;
    right:22px;
    bottom:84px;
    width:280px;
    background:#111827;
    border-left:4px solid #f97316;
    color:#fff;
    border-radius:12px;
    padding:12px;
    z-index:9999;
    box-shadow:0 16px 35px rgba(0,0,0,.4);
}

.chat-toast.active{
    display:grid;
    gap:5px;
}

.chat-toast span{
    color:#cbd5e1;
}

@media(max-width:700px){
    .desktop-chat-mini{
        display:none !important;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        height:58px;
        background:#111827;
        border-top:1px solid rgba(255,255,255,.12);
        display:grid;
        grid-template-columns:repeat(4,1fr);
        align-items:center;
        z-index:9999;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button{
        background:transparent !important;
        border:0 !important;
        color:#fff !important;
        height:58px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:22px !important;
        position:relative;
        padding:0 !important;
    }

    .mobile-bottom-nav b{
        position:absolute;
        top:6px;
        right:22px;
        min-width:18px;
        height:18px;
        border-radius:999px;
        background:#dc2626;
        color:#fff;
        font-size:10px !important;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    body{
        padding-bottom:60px !important;
    }

    .chat-toast{
        left:12px;
        right:12px;
        bottom:72px;
        width:auto;
    }
}

/* FINAL LINKEDIN-LIKE CHAT + MOBILE NAV FIX */
@media(max-width:700px){
    .desktop-only-nav{
        display:none !important;
    }

    .topbar{
        grid-template-columns:1fr auto !important;
        padding:10px 12px !important;
    }

    .topnav{
        display:flex !important;
        justify-content:flex-end !important;
    }

    .topnav .signout-link{
        display:inline-flex !important;
    }

    .mobile-bottom-nav{
        grid-template-columns:repeat(5,1fr) !important;
    }
}

.messenger-layout{
    max-width:1180px !important;
    margin:0 auto !important;
    grid-template-columns:340px 620px !important;
    min-height:620px !important;
    font-size:12px !important;
}

.messenger-head h2{
    font-size:20px !important;
}

.messenger-head input{
    height:36px !important;
    font-size:12px !important;
}

.conversation-row{
    grid-template-columns:42px minmax(0,1fr) auto !important;
    padding:10px 12px !important;
}

.conversation-avatar{
    width:42px !important;
    height:42px !important;
}

.conversation-info strong{
    font-size:13px !important;
}

.conversation-info span{
    font-size:12px !important;
}

.chat-header{
    padding:12px 16px !important;
}

.chat-header h3{
    font-size:16px !important;
}

.chat-thread{
    max-height:390px !important;
    padding:16px !important;
}

.chat-bubble{
    max-width:62% !important;
    padding:9px 11px !important;
}

.chat-bubble p{
    font-size:12px !important;
}

.chat-compose{
    padding:12px !important;
}

.chat-compose textarea{
    min-height:38px !important;
    font-size:12px !important;
}

.emoji-btn{
    width:38px !important;
    height:38px !important;
}

.desktop-chat-mini{
    right:22px !important;
    bottom:0 !important;
    width:330px !important;
    height:58px !important;
    padding:0 !important;
    border-radius:12px 12px 0 0 !important;
}

.desktop-chat-mini-main{
    flex:1;
    height:100%;
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    padding:0 14px;
}

.desktop-chat-mini-main img{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
}

.desktop-chat-toggle{
    width:46px;
    height:100%;
    background:transparent !important;
    color:#fff !important;
    border:0 !important;
    font-size:18px !important;
}

@media(max-width:700px){
    .messenger-layout{
        max-width:100% !important;
        grid-template-columns:1fr !important;
        min-height:auto !important;
    }

    .desktop-chat-mini{
        display:none !important;
    }
}

.desktop-chat-mini-list{
    display:none;
    position:fixed;
    right:22px;
    bottom:58px;
    width:330px;
    max-height:360px;
    overflow:auto;
    background:#111827;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px 12px 0 0;
    z-index:9998;
}

.desktop-chat-mini-list.active{
    display:block;
}

.desktop-mini-user{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:10px 12px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.mini-user-avatar,
.mini-user-avatar img{
    width:38px;
    height:38px;
    border-radius:50%;
}

.mini-user-avatar{
    background:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.mini-user-avatar img{
    object-fit:cover;
}

.mini-user-info{
    min-width:0;
}

.mini-user-info strong,
.mini-user-info small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mini-user-info small{
    color:#94a3b8;
}

.desktop-mini-user b{
    background:#dc2626;
    color:#fff;
    min-width:18px;
    height:18px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px !important;
}

.mobile-notify-dropdown{
    display:none;
}

@media(max-width:700px){
    .mobile-notify-dropdown.active{
        display:block;
        position:fixed;
        left:12px;
        right:12px;
        bottom:70px;
        background:#111827;
        border:1px solid rgba(255,255,255,.14);
        border-radius:14px;
        padding:12px;
        z-index:10000;
    }

    .desktop-chat-mini-list{
        display:none !important;
    }
}

/* FINAL DESKTOP 3-PANEL MESSENGER FIX */
@media(min-width:701px){
    .page-shell{
        max-width:100% !important;
        padding:18px 24px !important;
    }

    .messenger-layout{
        width:1180px !important;
        max-width:1180px !important;
        margin:0 !important;
        display:grid !important;
        grid-template-columns:320px 520px 320px !important;
        min-height:560px !important;
        height:560px !important;
        overflow:hidden !important;
        border-radius:14px !important;
    }

    .messenger-sidebar{
        width:320px !important;
        max-width:320px !important;
        min-width:320px !important;
        overflow:hidden !important;
    }

    .messenger-chat{
        width:520px !important;
        max-width:520px !important;
        min-width:520px !important;
        overflow:hidden !important;
        border-right:1px solid rgba(255,255,255,.08);
    }

    .messenger-right-panel{
        width:320px !important;
        max-width:320px !important;
        min-width:320px !important;
        background:#0b1220 !important;
    }

    .conversation-list{
        max-height:470px !important;
    }

    .chat-thread{
        height:390px !important;
        max-height:390px !important;
        overflow-y:auto !important;
        padding:14px !important;
    }

    .chat-compose{
        grid-template-columns:38px 38px 38px minmax(0,1fr) 72px !important;
        padding:10px !important;
    }

    .chat-compose textarea{
        min-height:38px !important;
        height:38px !important;
    }

    .chat-bubble{
        max-width:70% !important;
    }
}

/* DESKTOP MESSAGE PANEL FINAL POSITION FIX */
@media(min-width:701px){
    .messenger-layout{
        width:1040px !important;
        max-width:1040px !important;
        margin-left:0 !important;
        margin-right:auto !important;
        grid-template-columns:260px 520px 260px !important;
        height:560px !important;
        min-height:560px !important;
    }

    .messenger-sidebar{
        width:260px !important;
        min-width:260px !important;
        max-width:260px !important;
    }

    .messenger-chat{
        width:520px !important;
        min-width:520px !important;
        max-width:520px !important;
    }

    .messenger-right-panel{
        width:260px !important;
        min-width:260px !important;
        max-width:260px !important;
    }

    .desktop-chat-mini{
        width:260px !important;
        right:18px !important;
        bottom:0 !important;
        z-index:9000 !important;
    }

    .chat-compose{
        grid-template-columns:34px 34px 34px minmax(0,1fr) 64px !important;
        gap:6px !important;
    }

    .chat-compose textarea{
        min-width:0 !important;
        width:100% !important;
    }

    .chat-compose .btn{
        width:64px !important;
        min-width:64px !important;
        padding:0 !important;
    }
}

/* ABSOLUTE FINAL MESSAGE PAGE WIDTH FIX */
@media(min-width:701px){

    body:has(.messenger-layout) .page-shell{
        width:1120px !important;
        max-width:1120px !important;
        margin:0 !important;
        padding:18px 0 18px 24px !important;
        overflow:hidden !important;
    }

    body:has(.messenger-layout) .messenger-layout{
        width:1080px !important;
        max-width:1080px !important;
        min-width:1080px !important;
        height:560px !important;
        min-height:560px !important;
        display:grid !important;
        grid-template-columns:240px 500px 340px !important;
        margin:0 !important;
        overflow:hidden !important;
    }

    body:has(.messenger-layout) .messenger-sidebar{
        width:240px !important;
        min-width:240px !important;
        max-width:240px !important;
    }

    body:has(.messenger-layout) .messenger-chat{
        width:500px !important;
        min-width:500px !important;
        max-width:500px !important;
        overflow:hidden !important;
    }

    body:has(.messenger-layout) .messenger-right-panel{
        width:340px !important;
        min-width:340px !important;
        max-width:340px !important;
        background:#0b1220 !important;
        border-left:1px solid rgba(255,255,255,.08) !important;
    }

    body:has(.messenger-layout) .chat-thread{
        height:382px !important;
        max-height:382px !important;
        overflow-y:auto !important;
    }

    body:has(.messenger-layout) .chat-compose{
        grid-template-columns:34px 34px 34px 1fr 58px !important;
        gap:6px !important;
        padding:10px !important;
    }

    body:has(.messenger-layout) .chat-compose textarea{
        width:100% !important;
        min-width:0 !important;
        height:36px !important;
        min-height:36px !important;
    }

    body:has(.messenger-layout) .chat-compose .btn{
        width:58px !important;
        min-width:58px !important;
        height:36px !important;
        padding:0 !important;
    }

    body:has(.messenger-layout) .desktop-chat-mini{
        width:300px !important;
        right:36px !important;
        bottom:0 !important;
        z-index:8000 !important;
    }

    body:has(.messenger-layout) .desktop-chat-mini-list{
        width:300px !important;
        right:36px !important;
        bottom:58px !important;
        z-index:8000 !important;
    }
}

/* FINAL: keep middle chat clear and move mini messenger fully right */
@media(min-width:701px){

    body:has(.messenger-layout) .page-shell{
        width:100% !important;
        max-width:100% !important;
        padding:18px 24px !important;
        overflow:hidden !important;
    }

    body:has(.messenger-layout) .messenger-layout{
        width:920px !important;
        max-width:920px !important;
        min-width:920px !important;
        grid-template-columns:220px 460px 240px !important;
        margin-left:0 !important;
        margin-right:auto !important;
    }

    body:has(.messenger-layout) .messenger-sidebar{
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
    }

    body:has(.messenger-layout) .messenger-chat{
        width:460px !important;
        min-width:460px !important;
        max-width:460px !important;
    }

    body:has(.messenger-layout) .messenger-right-panel{
        width:240px !important;
        min-width:240px !important;
        max-width:240px !important;
    }

    body:has(.messenger-layout) .chat-compose{
        grid-template-columns:32px 32px 32px 1fr 54px !important;
    }

    body:has(.messenger-layout) .chat-compose .btn{
        width:54px !important;
        min-width:54px !important;
    }

    body:has(.messenger-layout) .desktop-chat-mini{
        width:250px !important;
        right:10px !important;
        bottom:0 !important;
        z-index:7000 !important;
    }

    body:has(.messenger-layout) .desktop-chat-mini-list{
        width:250px !important;
        right:10px !important;
        bottom:58px !important;
        z-index:7000 !important;
    }
}

/* FINAL FIX: dark messenger scrollbar */
body:has(.messenger-layout) .chat-thread{
    background:#0b1220 !important;
    scrollbar-color:#2a3653 #0b1220 !important;
}

body:has(.messenger-layout) .chat-thread::-webkit-scrollbar{
    width:12px !important;
}

body:has(.messenger-layout) .chat-thread::-webkit-scrollbar-track{
    background:#0b1220 !important;
}

body:has(.messenger-layout) .chat-thread::-webkit-scrollbar-thumb{
    background:#2a3653 !important;
    border-radius:10px !important;
    border:2px solid #0b1220 !important;
}

body:has(.messenger-layout) .chat-thread::-webkit-scrollbar-corner{
    background:#0b1220 !important;
}

/* FINAL: notification dropdown 5 rows visible + dark scroll */
.nav-notify-dropdown,
.mobile-notify-dropdown{
    max-height:405px !important;
    overflow-y:auto !important;
    scrollbar-color:#2a3653 #0b1220 !important;
}

.nav-note-item{
    min-height:76px !important;
}

.nav-notify-dropdown::-webkit-scrollbar,
.mobile-notify-dropdown::-webkit-scrollbar{
    width:10px !important;
}

.nav-notify-dropdown::-webkit-scrollbar-track,
.mobile-notify-dropdown::-webkit-scrollbar-track{
    background:#0b1220 !important;
}

.nav-notify-dropdown::-webkit-scrollbar-thumb,
.mobile-notify-dropdown::-webkit-scrollbar-thumb{
    background:#2a3653 !important;
    border-radius:10px !important;
    border:2px solid #0b1220 !important;
}

/* FINAL: desktop mini chat align on dashboard/home */
@media(min-width:701px){
    body:not(:has(.messenger-layout)) .desktop-chat-mini{
        width:300px !important;
        right:18px !important;
        bottom:0 !important;
    }

    body:not(:has(.messenger-layout)) .desktop-chat-mini-list{
        width:300px !important;
        right:18px !important;
        bottom:58px !important;
        max-height:260px !important;
        overflow-y:auto !important;
    }
}

/* FINAL MOBILE CLEANUP + DESKTOP CHAT CONTROLS */
.desktop-chat-minimize,
.desktop-chat-close,
.desktop-chat-toggle{
    width:34px !important;
    height:100% !important;
    background:transparent !important;
    border:0 !important;
    color:#ffffff !important;
    font-size:18px !important;
    cursor:pointer !important;
}

.desktop-chat-close{
    color:#fca5a5 !important;
}

@media(max-width:700px){
    .topnav .desktop-only-nav,
    .left-menu-card,
    .home-left .home-side-card{
        display:none !important;
    }

    .topnav{
        display:flex !important;
        justify-content:flex-end !important;
    }

    .home-profile-card{
        display:grid !important;
        grid-template-columns:58px 1fr !important;
        align-items:center !important;
        gap:12px !important;
    }

    .home-profile-card .home-avatar{
        grid-row:1 / 3 !important;
        width:58px !important;
        height:58px !important;
    }

    .home-profile-card h3,
    .home-profile-card p{
        margin:0 !important;
    }

    .home-stats{
        grid-column:1 / -1 !important;
        display:flex !important;
        gap:14px !important;
        margin-top:10px !important;
        flex-wrap:wrap !important;
    }

    .home-stats span{
        font-size:12px !important;
    }
}

/* FINAL: middle chat window controls */
.chat-header{
    position:relative !important;
}

.chat-window-controls{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    z-index:20 !important;
}

.chat-window-minimize,
.chat-window-close{
    width:28px !important;
    height:28px !important;
    border-radius:8px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:#111827 !important;
    color:#ffffff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:18px !important;
    line-height:1 !important;
    cursor:pointer !important;
    text-decoration:none !important;
}

.chat-window-close{
    color:#fca5a5 !important;
}

.messenger-chat.chat-minimized .chat-thread,
.messenger-chat.chat-minimized .chat-compose{
    display:none !important;
}

.messenger-chat.chat-minimized{
    height:auto !important;
}

/* MOBILE: hide Add Social Profile card until bottom icon opens it */
@media(max-width:700px){
    .mobile-social-profile-card{
        display:none !important;
    }

    .mobile-social-profile-card:target{
        display:block !important;
        position:fixed !important;
        left:14px !important;
        right:14px !important;
        top:90px !important;
        max-height:75vh !important;
        overflow-y:auto !important;
        z-index:10001 !important;
        background:#111827 !important;
        border:1px solid rgba(255,255,255,.14) !important;
        box-shadow:0 20px 50px rgba(0,0,0,.55) !important;
    }

    .mobile-card-close{
        position:absolute !important;
        top:10px !important;
        right:14px !important;
        color:#fff !important;
        font-size:24px !important;
        text-decoration:none !important;
    }
}

@media(max-width:700px){

    #network{
        display:none !important;
    }

    #myprofiles{
        display:none !important;
    }

    #addSocialProfile:target{
        display:block !important;
        position:fixed !important;
        left:10px !important;
        right:10px !important;
        top:90px !important;
        bottom:90px !important;
        overflow-y:auto !important;
        z-index:99999 !important;
        background:#0b1220 !important;
    }

    .mobile-card-close{
        position:absolute;
        top:10px;
        right:15px;
        font-size:28px;
        color:#fff;
        text-decoration:none;
    }
}

@media(max-width:700px){

    .left-menu-card,
    #followback,
    .post-comments-list{
        display:none !important;
    }

    #addSocialProfile{
        display:none !important;
    }

    #addSocialProfile:target{
        display:block !important;
        position:fixed !important;
        left:12px !important;
        right:12px !important;
        top:92px !important;
        bottom:76px !important;
        overflow-y:auto !important;
        z-index:99999 !important;
        background:#101827 !important;
        border:1px solid rgba(255,255,255,.14) !important;
        border-radius:18px !important;
        padding:20px !important;
    }

    .mobile-card-close{
        display:flex !important;
        position:absolute !important;
        top:10px !important;
        right:12px !important;
        width:34px !important;
        height:34px !important;
        align-items:center !important;
        justify-content:center !important;
        background:#7f1d1d !important;
        color:#fff !important;
        border-radius:10px !important;
        font-size:22px !important;
        text-decoration:none !important;
    }
}