*{
margin:0;
box-sizing:border-box;
text-decoration: none;
}

: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);
}

.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;
}



/* CONTACT FORM */

.contact-intro{
color:var(--muted);
margin-bottom:20px;
}

.contact-form{
max-width:560px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:6px;
text-align:left;
}

.contact-form label{
font-weight:600;
margin-top:10px;
}

.contact-optional{
font-weight:normal;
color:var(--muted);
font-size:.9em;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:12px;
background:#0c1220;
border:1px solid rgba(255,255,255,.1);
color:white;
border-radius:10px;
font:inherit;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:2px solid #C9A227;
border-color:transparent;
}

.contact-hp{
position:absolute;
left:-9999px;
}

.contact-submit{
align-self:center;
margin-top:18px;
padding:12px 28px;
border:none;
border-radius:999px;
background:linear-gradient(135deg,#C9A227,#e6c35c);
color:#3a2a00;
font-weight:700;
font-size:1rem;
cursor:pointer;
box-shadow:0 8px 22px rgba(201,162,39,.4);
}

.contact-submit:disabled{
opacity:.6;
cursor:wait;
}

.contact-status{
text-align:center;
min-height:1.4em;
color:#e6c35c;
}

.contact-email{
margin-top:28px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.08);
color:var(--muted);
}

.contact-email-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:10px;
margin-top:10px;
}

.contact-email-row a{
color:white;
font-weight:600;
user-select:all;
word-break:break-all;
}

.contact-copy{
min-height:40px;
min-width:64px;
padding:8px 18px;
border:1px solid #C9A227;
border-radius:999px;
background:transparent;
color:#e6c35c;
font-weight:600;
cursor:pointer;
}

.contact-copy:hover{
background:rgba(201,162,39,.15);
}