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

:root{
--bg:#080b14;
--panel:#131a28;
--accent:#00e1ff;
--accent2:#8b5cf6;
--text:#ffffff;
--muted:#9ca3af;
}

body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background:linear-gradient(135deg,#05070d,#111827,#090f1f);
padding:30px;
color:var(--text);
}

.layout{
display:grid;
grid-template-columns:260px 1fr 280px;
gap:20px;
padding:20px;
}

.panel{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.05);
border-radius:20px;
padding:20px;
text-align: center;
}

.profile-card{
text-align:center;
}

h2 {
	margin-bottom: 15px;
}

.avatar{
width:120px;
height:120px;
margin:auto;
border-radius:50%;
background:linear-gradient(45deg,var(--accent),var(--accent2));
margin-bottom:15px;
}

.stat{
margin-top:10px;
color:var(--muted);
letter-spacing: 2px;
font-weight: lighter;
}

.stat:hover {
font-weight: bold;
}

.feed-column{
display:flex;
flex-direction:column;
gap:20px;
}

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

.action-btn{
background:#1c2436;
color:white;
}

.comment-box{
width:100%;
margin-top:15px;
padding:12px;
background:#0c1220;
border:none;
color:white;
border-radius:10px;
}

.comment{
background:#0c1220;
margin-top:8px;
padding:10px;
border-radius:10px;
}

.trend{
background:#0c1220;
border-radius:12px;
padding:12px;
margin-bottom:10px;
}

.loader{
text-align:center;
color:var(--muted);
padding:25px;
font-size: larger;
}


/* SIDEBAR */
.sidebar {
width: 250px;
background: #1f2937;
padding: 1rem;
}

.sidebar h2 {
margin-bottom: 1rem;
font-size: 1rem;
color: #93c5fd;
}

.sidebar a {
display: block;
color: #e5e7eb;
text-decoration: none;
padding: 10px;
margin-bottom: 8px;
background: #111827;
border-radius: 6px;
transition: 0.2s;
}

.sidebar a:hover {
background: #2563eb;
}




/*
@keyframes fadeIn{
from{
 opacity:0;
 transform:translate Y(20px);
}
to{
 opacity:1;
 transform:translate Y(0);
}
}

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