/* ==========================================================
   APP.CSS
   Topic Connect Application
========================================================== */

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

.app-layout{

    display:grid;

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

    min-height:100vh;

    background:var(--bg);

}

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

.main-content{

    min-width:0;

    display:flex;

    flex-direction:column;

}

.page{

    padding:48px;

    display:flex;

    flex-direction:column;

    gap:40px;

}

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

.app-header{

    position:sticky;

    top:0;

    z-index:100;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

    background:rgba(9,12,20,.82);

    backdrop-filter:blur(20px);

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

}

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

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:700;

    color:var(--text);

}

.logo span{

    color:var(--primary);

}

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

.search-box{

    position:relative;

    width:420px;

}

.search-box input{

    width:100%;

    height:46px;

    border:none;

    outline:none;

    border-radius:999px;

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

    color:var(--text);

    padding:0 22px;

    font-size:15px;

    transition:.3s;

}

.search-box input:focus{

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

    box-shadow:

        0 0 0 1px rgba(91,140,255,.35);

}

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

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

.header-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    transition:.3s;

    cursor:pointer;

}

.header-icon:hover{

    background:rgba(91,140,255,.18);

}

.user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

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

.sidebar{

    position:sticky;

    top:0;

    height:100vh;

    display:flex;

    flex-direction:column;

    padding:32px 24px;

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

    border-right:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(24px);

    overflow-y:auto;

}

.sidebar::-webkit-scrollbar{

    width:6px;

}

.sidebar::-webkit-scrollbar-thumb{

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

    border-radius:999px;

}

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

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:36px;

    font-size:24px;

    font-weight:700;

    color:var(--text);

}

.sidebar-logo span{

    color:var(--primary);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.sidebar-nav{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sidebar-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:16px;

    color:var(--sub);

    text-decoration:none;

    transition:all .25s ease;

    font-size:15px;

    font-weight:500;

}

.sidebar-nav a:hover{

    color:var(--text);

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

    transform:translateX(4px);

}

.sidebar-nav a.active{

    color:#fff;

    background:linear-gradient(
        135deg,
        rgba(91,140,255,.22),
        rgba(110,231,255,.12)
    );

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

}

/* ==========================================================
   NAVIGATION GROUP
========================================================== */

.nav-group{

    margin-top:28px;

}

.nav-title{

    margin-bottom:12px;

    padding:0 16px;

    color:var(--sub);

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.12em;

}

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

.sidebar-user{

    margin-top:auto;

    padding:22px;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

}

.sidebar-user-name{

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

}

.sidebar-user-level{

    color:var(--sub);

    font-size:14px;

    margin-bottom:20px;

}

/* ==========================================================
   TRUST BAR
========================================================== */

.trust-progress{

    width:100%;

    height:8px;

    border-radius:999px;

    overflow:hidden;

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

    margin-bottom:12px;

}

.trust-progress span{

    display:block;

    width:64%;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.trust-text{

    color:var(--sub);

    font-size:13px;

}

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

.sidebar-stats{

    margin-top:22px;

    display:grid;

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

    gap:12px;

}

.sidebar-stat{

    padding:14px;

    border-radius:16px;

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

    text-align:center;

}

.sidebar-stat strong{

    display:block;

    font-size:18px;

    color:#fff;

    margin-bottom:4px;

}

.sidebar-stat span{

    font-size:12px;

    color:var(--sub);

}
/* ==========================================================
   SECTION
========================================================== */

.section{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

}

.section-title{

    font-size:32px;

    font-weight:700;

    color:var(--text);

}

.section-subtitle{

    font-size:15px;

    color:var(--sub);

    line-height:1.7;

}

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

.grid{

    display:grid;

    gap:24px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/* ==========================================================
   DASHBOARD GRID
========================================================== */

.dashboard-grid{

    display:grid;

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

    gap:24px;

    align-items:start;

}

.span-3{

    grid-column:span 3;

}

.span-4{

    grid-column:span 4;

}

.span-6{

    grid-column:span 6;

}

.span-8{

    grid-column:span 8;

}

.span-9{

    grid-column:span 9;

}

.span-12{

    grid-column:1 / -1;

}

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

.card,
.dashboard-card{

    width:100%;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:30px;

    border-radius:24px;

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

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

    backdrop-filter:blur(24px);

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

}

.card:hover,
.dashboard-card:hover{

    transform:translateY(-6px);

    border-color:rgba(91,140,255,.35);

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

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.card-title{

    font-size:20px;

    font-weight:700;

    color:var(--text);

}

.card-body{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-top:auto;

}

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

.dashboard-card h2,
.card h2{

    margin:0;

    font-size:24px;

    line-height:1.4;

    color:var(--text);

}

.dashboard-card h3,
.card h3{

    margin:0;

    font-size:18px;

    line-height:1.5;

}

.dashboard-card p,
.card p{

    margin:0;

    color:var(--sub);

    line-height:1.8;

    word-break:normal;

    overflow-wrap:break-word;

}

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

.glass{

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

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

    backdrop-filter:blur(24px);

}

.glow{

    box-shadow:

        0 0 30px rgba(91,140,255,.16),

        0 0 80px rgba(91,140,255,.05);

}

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

.stat-value{

    font-size:42px;

    font-weight:700;

    color:#fff;

}

.stat-label{

    font-size:15px;

    color:var(--sub);

}

.stat-change{

    font-size:14px;

    color:var(--secondary);

}

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

.divider{

    width:100%;

    height:1px;

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

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 22px;

    border:none;

    border-radius:14px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .3s ease;

    text-decoration:none;

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(91,140,255,.28);

}

.btn-secondary{

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

    color:var(--text);

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

}

.btn-secondary:hover{

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

}

.btn-outline{

    background:transparent;

    color:var(--text);

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

}

.btn-outline:hover{

    border-color:rgba(91,140,255,.35);

    background:rgba(91,140,255,.08);

}

/* ==========================================================
   FORM
========================================================== */

.input-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.input-group label{

    color:var(--sub);

    font-size:14px;

}

.input,

textarea,

select{

    width:100%;

    padding:14px 18px;

    border-radius:14px;

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

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

    color:var(--text);

    font-size:15px;

    outline:none;

    transition:.3s;

}

.input:focus,

textarea:focus,

select:focus{

    border-color:rgba(91,140,255,.45);

    box-shadow:0 0 0 4px rgba(91,140,255,.08);

}

/* ==========================================================
   SEARCH BAR
========================================================== */

.search{

    position:relative;

}

.search input{

    width:100%;

    height:48px;

    padding:0 18px;

    border-radius:999px;

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

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

    color:var(--text);

}

.search input:focus{

    border-color:rgba(91,140,255,.35);

}

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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(91,140,255,.15);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:rgba(70,205,140,.15);

    color:#46cd8c;

}

.badge-warning{

    background:rgba(255,187,0,.15);

    color:#ffbb00;

}

.badge-danger{

    background:rgba(255,92,92,.15);

    color:#ff5c5c;

}

/* ==========================================================
   TAG
========================================================== */

.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

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

    color:var(--sub);

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

    font-size:13px;

    transition:.3s;

}

.tag:hover{

    border-color:rgba(91,140,255,.35);

    color:#fff;

}

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

.avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.avatar-lg{

    width:72px;

    height:72px;

}

.avatar-sm{

    width:36px;

    height:36px;

}

/* ==========================================================
   PROGRESS
========================================================== */

.progress{

    width:100%;

    height:8px;

    overflow:hidden;

    border-radius:999px;

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

}

.progress span{

    display:block;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.mt-16{

    margin-top:16px;

}

.mt-24{

    margin-top:24px;

}

.mt-32{

    margin-top:32px;

}

.mb-16{

    margin-bottom:16px;

}

.mb-24{

    margin-bottom:24px;

}

.hidden{

    display:none;

}
/* ==========================================================
   THREAD
========================================================== */

.thread-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.thread-card{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:28px;

    border-radius:22px;

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

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

    transition:all .3s ease;

}

.thread-card:hover{

    transform:translateY(-4px);

    border-color:rgba(91,140,255,.35);

}

.thread-meta{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--sub);

    font-size:14px;

}

.thread-actions{

    display:flex;

    gap:14px;

    margin-top:8px;

}

.thread-action{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--sub);

    cursor:pointer;

    transition:.25s;

}

.thread-action:hover{

    color:var(--primary);

}

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

.profile-header{

    display:flex;

    align-items:center;

    gap:24px;

}

.profile-info{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.profile-name{

    font-size:32px;

    font-weight:700;

}

.profile-bio{

    color:var(--sub);

    line-height:1.8;

}

.profile-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.profile-stats{

    display:grid;

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

    gap:20px;

    margin-top:30px;

}

/* ==========================================================
   PROJECT
========================================================== */

.project-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

}

.project-meta{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.project-links{

    display:grid;

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

    gap:20px;

}

.project-link{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:22px;

    border-radius:20px;

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

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

    text-decoration:none;

    color:inherit;

    transition:.3s;

}

.project-link:hover{

    border-color:rgba(91,140,255,.35);

    transform:translateY(-4px);

}

.roadmap{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.roadmap-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.roadmap-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--primary);

    margin-top:8px;

    flex-shrink:0;

}

.roadmap-content{

    flex:1;

}

.roadmap-content h4{

    margin-bottom:8px;

    color:var(--text);

}

.roadmap-content p{

    color:var(--sub);

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:6px;

    top:14px;

    bottom:14px;

    width:2px;

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

}

/* ==========================================================
   ANIMATION
========================================================== */

.fade-in{

    opacity:0;

    transform:translateY(20px);

    animation:fadeIn .7s ease forwards;

}

@keyframes fadeIn{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hover-lift{

    transition:transform .3s ease;

}

.hover-lift:hover{

    transform:translateY(-6px);

}

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

@media (max-width:1200px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .span-3,
    .span-4,
    .span-6,
    .span-8,
    .span-9,
    .span-12{

        grid-column:auto;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .project-links{

        grid-template-columns:1fr;

    }

    .profile-stats{

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

    }

}

@media (max-width:900px){

    .app-layout{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:fixed;

        left:-280px;

        width:260px;

        z-index:999;

        transition:left .3s ease;

    }

    .sidebar.open{

        left:0;

    }

    .page{

        padding:24px;

    }

    .app-header{

        padding:0 20px;

    }

    .search-box{

        display:none;

    }

}

@media (max-width:640px){

    .profile-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .profile-stats{

        grid-template-columns:1fr;

    }

    .thread-actions{

        flex-wrap:wrap;

    }

}

/* ==========================================================
   END OF APP.CSS
========================================================== */