:root{
  --header-height:78px;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 5%;
background:rgba(20,0,25,.95);
border-bottom:1px solid var(--p);
position:sticky;
top:0;
z-index:100000;
isolation:isolate;
}
.tabs{
display:flex;
gap:15px;
padding:25px 5%;
border-bottom:1px solid rgba(255,255,255,.08);
position:sticky;
top:var(--header-height);
backdrop-filter:blur(20px);
background:rgba(15,0,22,.9);
z-index:99999;
isolation:isolate;
}
.feed-column{position:relative;z-index:0;}
.card{position:relative;z-index:1;}
.card:hover{z-index:2;}




:root{
  --p:#7f5af0;
  --bg:#0f0016;
  --glass-border: rgba(200, 160, 255, 0.12);
}

body{
margin:0;
font-family: sans-serif;
background: linear-gradient(136deg,#14001f,#2b0057,#4b0082,#1a0033) fixed; 
color:#e6c8ff;
}


header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 5%;
    background:rgba(20,0,25,.95);
    border-bottom:1px solid var(--p);
    position:sticky;
    top:0;
    z-index:10000;
    isolation:isolate;
}

header{
    position:sticky;
    top:0;
    z-index:2147483646;
    isolation:isolate;
}

.tabs{
    position:sticky;
    top:78px;
    z-index:2147483645;
    isolation:isolate;
}

#profile-trigger{
width:45px;
height:45px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--p);
cursor:pointer;
overflow:hidden;
}

.feed-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:25px;
padding:40px 5%;
}

.card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(127,90,240,0.2);
border-radius:20px;
padding:20px;
cursor:pointer;
transition:0.3s;
}

.card{
    position:relative;
    z-index:1;
}

.card:hover{
    z-index:2;
}

.card:hover{
transform:translateY(-6px);
border-color:var(--p);
}

.user-row{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
cursor:pointer;
}

.avatar{
width:30px;
height:30px;
border-radius:50%;
object-fit:cover;
background:#222;
}

.thumb{
height:120px;
border-radius:15px;
background:rgba(0,0,0,0.4);
display:flex;
align-items:center;
justify-content:center;
margin:15px 0;
border:1px solid rgba(127,90,240,0.2);
}

.fab{
position:fixed;
bottom:30px;
right:30px;
width:70px;
height:70px;
border-radius:50%;
background:var(--p);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:none;
}

.fab:hover{
transform:rotate(180deg) scale(1.1);
}

.upload-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
backdrop-filter:blur(10px);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
animation:fadeIn .2s ease;
}

.upload-modal{
width:50%;
max-width:700px;
min-width:320px;
background:linear-gradient(136deg,#2d0a45,#46106b,#5b19a0,#2c114b);
border-radius:28px;
padding:28px;
box-shadow:0 0 40px rgba(127,90,240,.35);
border:
1px solid rgba(255,255,255,.12);
animation: popIn .25s ease;
position:relative;
}

.upload-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
}

.upload-title{
font-size:2rem;
font-weight:700;
margin:0;
color:white;
}

.upload-close{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
background:rgba(255,255,255,.08);
transition:.2s;
}

.upload-close:hover{
transform:scale(1.08);
background:rgba(255,255,255,.15);
}

.upload-input, .upload-textarea{
width:100%;
box-sizing:border-box;
background: rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:16px;
margin-top:14px;
font-size:1rem;
color:white;
outline:none;
transition:.2s;
}

.upload-input::placeholder, .upload-textarea::placeholder{
color: rgba(255,255,255,.65);
}

.upload-input:focus, .upload-textarea:focus{
border-color: #c8a8ff;
box-shadow: 0 0 18px rgba(200,168,255,.25);
background: rgba(255,255,255,.16);
}

.upload-textarea{
resize:none;
height:140px;
}

.file-picker{
margin-top: 18px;
border-radius: 20px;
padding: 35px;
border: 2px dashed rgba(255,255,255,.2);
text-align: center;
cursor: pointer;
background: rgba(255,255,255,.06);
transition:.25s;
}

.file-picker:hover{
transform:translateY(-3px);
background: rgba(255,255,255,.1);
border-color:#c8a8ff;
}

.file-picker i{
width:52px;
height:52px;
margin-bottom:10px;
}

.file-name{
margin-top:10px;
font-size:.95rem;
opacity:.8;
word-break:break-word;
}

.upload-actions{
display:flex;
gap:14px;
margin-top:22px;
}

.upload-btn{
flex:1;
padding:15px;
border:none;
border-radius:16px;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.upload-submit{
background:#b388ff;
color:#160025;
}

.upload-submit:hover{
transform:translateY(-2px);
box-shadow:0 0 18px rgba(179,136,255,.45);
}

.upload-cancel{
background:rgba(255,255,255,.12);
color:white;
}

.upload-cancel:hover{
background:rgba(255,255,255,.2);
}

/* kay so dis is the animations, my code is big so i need to keep track */

@keyframes popIn{
from{
  opacity:0;
  transform:scale(.92);
}
to{
  opacity:1;
  transform:scale(1);
}
}

@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

/*k this in new row (or column, idk what that means) */

.tabs{
    display:flex;
    gap:15px;
    padding:25px 5%;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:sticky;
    top:78px;
    backdrop-filter:blur(20px);
    background:rgba(15,0,22,.9);
    z-index:9999;
    isolation:isolate;
}

.tab{
background:none;
border:none;
color:#c8b5ff;
font-size:1rem;
padding:10px 0;
cursor:pointer;
position:relative;
font-weight:600;
transition:0.2s;
}

.tab:hover{
color:white;
}

.tab.active{
color:white;
}

.tab.active::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:100%;
height:3px;
border-radius:999px;
background:#7f5af0;
}


.feed-column{
display:flex;
flex-direction:column;
gap:35px;
padding:40px 5%;
}


.card{
background: linear-gradient(145deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
/* border:1px solid rgba(127,90,240,0.25); */
border-radius:30px;
padding:28px;
cursor:pointer;
transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
overflow:hidden;
position:relative;
}

.card:hover{
transform:translateY(-6px);
border-color:#9f7cff;

box-shadow: 0 10px 40px rgba(127,90,240,0.25);
}

/* sombody in live told me' that i should keep track of my css cause im stupid, do i keep putting comments? i mean, theyre nice and everything, but..*/
.user-row{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
cursor:pointer;
}

.avatar{
width:52px;
height:52px;
border-radius:50%;
object-fit:cover;
background:#222;
border:2px solid rgba(255,255,255,0.08);
}

.username{
font-size:1.05rem;
font-weight:700;
color:white;
}


.project-title{
font-size:1.7rem;
font-weight:800;
margin-top:10px;
margin-bottom:15px;
color:white;
}

/* I kinda dont know why its called thumb even though its a lucide package icon, but it works so yeah */

.thumb{
height:260px;
border-radius:24px;
background: linear-gradient(136deg,#14001f,#2b0057,#4b0082,#1a0033) fixed;
display:flex;
align-items:center;
justify-content:center;
margin:20px 0;
border:1px solid rgba(127,90,240,0.25);
overflow:hidden;
}

.thumb i{
width:130px;
height:130px;
opacity:0.95;
filter: drop-shadow(0 0 25px rgba(127,90,240,0.45));
transition:0.25s;
}

.card:hover .thumb i{
transform:scale(1.08) rotate(-4deg);
}


.project-desc{
font-size:1rem;
line-height:1.7;
color:#d6c6ff;
margin-top:8px;
margin-bottom:22px;
}


.post-actions{
display:flex;
gap:12px;
margin-top:10px;
}

.action-btn{
width:48px;
height:48px;
border:none;
border-radius:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:0.2s;
}

.action-btn:hover{
transform:scale(1.08);
}

.edit-btn{
background:rgba(255,255,255,0.08);
color:white;
}

.delete-btn{
background:rgba(255,75,75,0.15);
color:#ff5a5a;
}

.search-user-card{
display:flex;
align-items:center;
gap:15px;
background:#370063;
border:1px solid rgba(127,90,240,0.25);
padding:16px;
border-radius:20px;
cursor:pointer;
transition:0.2s;
max-width:420px;
}

.search-user-card:hover{
transform:translateY(-3px);
border-color:#a78bfa;
}

.search-user-avatar{
width:55px;
height:55px;
border-radius:50%;
object-fit:cover;
background:#222;
}

.search-section-title{
font-size:1.3rem;
font-weight:700;
margin-top:10px;
margin-bottom:5px;
color:white;
}