*{
	box-sizing:border-box;
}
body{
	margin:0;
	font-family:Arial;
	background:#f4f6f8;
	color:#222;
}

.container{
	width:min(1100px,92%);
	margin:auto;
	padding:30px 0;
}

.site-header{
background:#111827;
padding:18px 0;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo-wrapper{
display:flex;
align-items:center;
gap:12px;
color:white;
font-size:22px;
font-weight:bold;
text-decoration:none;
}

.logo-wrapper img{
width:48px;
height:48px;
}

.nav{
display:flex;
gap:16px;
}

.nav a{
color:white;
text-decoration:none;
}

.hero{
background:linear-gradient(135deg,#2563eb,#111827);
padding:40px;
border-radius:20px;
color:white;
margin-bottom:24px;
}

.card{
background:white;
padding:24px;
border-radius:18px;
margin-bottom:24px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.topic-item{
padding:16px;
border:1px solid #ddd;
border-radius:12px;
margin-bottom:12px;
}

.form{
display:grid;
gap:12px;
}

.form input,
.form textarea
.form select {
	width:100%;
	max-width:100%;
	padding:12px;
	border-radius:10px;
	border:1px solid #ccc;
	font-size:16px;
	box-sizing:border-box;
}

.btn{
	background:#2563eb;
	color:white;
	border:none;
	padding:12px 18px;
	border-radius:10px;
	cursor:pointer;
	font-weight:bold;
	max-width:100%;
	box-sizing:border-box;
}

.post{
background:white;
padding:20px;
border-radius:14px;
margin-bottom:16px;
box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.site-footer{
background:#111827;
color:#fff;
padding:20px;
text-align:center;
}

.alert{
background:#fee2e2;
padding:12px;
border-radius:10px;
margin-bottom:14px;
}

.avatar{
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
}
.avatar-large{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-top:10px;
}

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

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

.post-date{
font-size:13px;
color:#777;
margin:0;
}
.post-content{
line-height:1.7;
}
.avatar-profile{
width:140px;
height:140px;
border-radius:50%;
object-fit:cover;
margin-bottom:16px;
}

.avatar-profile-placeholder{
width:140px;
height:140px;
border-radius:50%;
background:#2563eb;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:48px;
font-weight:bold;
margin:auto;
margin-bottom:16px;
}

.profile-bio{
line-height:1.7;
margin-top:16px;
}

.profile-bio-empty{
color:#777;
margin-top:16px;
}

.user-menu{ 
	position:relative; 
	display:flex; 
	align-items:center; 
	height:100%; 
}

.user-menu-button{ 
	display:flex; 
	align-items:center; 
	gap:10px; 
	background:none; 
	border:none; 
	color:white; 
	cursor:pointer; 
	font-size:15px; 
	padding:8px 12px; 
	border-radius:10px; 
	transition:background .2s; 
}
.navbar-avatar{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
}

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

.dropdown-menu{
	position:absolute; 
	top:100%; right:0; 
	margin-top:8px; 
	background:white; 
	border-radius:12px; 
	padding:10px; 
	min-width:220px; 
	box-shadow:0 10px 30px rgba(0,0,0,.15); 
	opacity:0; 
	visibility:hidden; 
	transform:translateY(10px); 
	transition: opacity .2s, transform .2s, visibility .2s; 
	z-index:1000;
}

.dropdown-menu a{
	display:block; 
	padding:12px; 
	border-radius:8px; 
	color:#222; 
	text-decoration:none; 
	transition:background .15s;
}

.dropdown-menu a:hover{
background:#f3f4f6;
}

.user-menu-button:hover{ 
	background:rgba(255,255,255,.08); 
}

.user-menu:hover .dropdown-menu{ 
	opacity:1; 
	visibility:visible; 
	transform:translateY(0); 
}

.search-form{
	display:flex;
	gap:12px;
	margin-bottom:20px;
	flex-wrap:wrap;
}

body{
transition:
background .3s,
color .3s;
}

.theme-toggle{
background:#2563eb;
border:none;
color:white;
padding:10px 14px;
border-radius:10px;
cursor:pointer;
font-size:16px;
}

.dark-mode{
background:#0f172a;
color:#f8fafc;
}
.dark-mode a{ 
	color:#60a5fa; 
} 
.dark-mode a:hover{ 
	color:#93c5fd; 
}
.dark-mode .card,
.dark-mode .post,
.dark-mode .dropdown-menu,
.dark-mode .topic-item{
background:#1e293b;
color:white;
border-color:#334155;
}
.dark-mode .nav a{
	color:#f8fafc;
}
.dark-mode .dropdown-menu a{
	color:#f8fafc;
}
.dark-mode .topic-item a{
	color:#93c5fd;
}
.dark-mode .topic-item h3,
.dark-mode .post strong,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3{
	color:white;
}

.dark-mode .meta,
.dark-mode .post-date,
.dark-mode .profile-bio-empty{
color:#cbd5e1;
}

.dark-mode input,
.dark-mode textarea{
background:#0f172a;
color:white;
border:1px solid #334155;
}

.dark-mode .dropdown-menu a{
color:white;
}

.dark-mode .dropdown-menu a:hover{
background:#334155;
}

.dark-mode .site-footer{
background:#020617;
}

.dark-mode .site-header{
background:#020617;
}

@media (max-width: 768px){

.container{
width:95%;
}

.header-inner{
	display:flex; 
	justify-content:space-between; 
	align-items:center; gap:12px; 
	flex-wrap:wrap; 
}
.logo-wrapper{ 
	flex:1; 
	min-width:0; 
} 
.logo-wrapper span{ 
	font-size:22px; 
}
.nav{ 
	display:flex; 
	align-items:center; 
	gap:12px; 
	flex-wrap:wrap; 
}
.hero{
padding:28px;
}

.hero h1{
	font-size:30px;
	line-height:1.1;
}

.topic-item{
flex-direction:column;
align-items:flex-start;
}

.post-user{
flex-direction:column;
align-items:flex-start;
}

.user-menu{
	position:relative;
	width:100%;
}

.dropdown-menu{
right:0;
left:auto;
width:240px;
}

.form input,
.form textarea
.form select {
	width:100%;
	max-width:100%;
	padding:12px;
	border-radius:10px;
	border:1px solid #ccc;
	font-size:16px;
	box-sizing:border-box;
}

.btn{
	background:#2563eb;
	color:white;
	border:none;
	padding:12px 18px;
	border-radius:10px;
	cursor:pointer;
	font-weight:bold;
	max-width:100%;
	box-sizing:border-box;
}
.theme-toggle{ 
	padding:10px 14px; 
	font-size:18px; 
}
.navbar-avatar,
.navbar-avatar-placeholder{ 
	width:42px; 
	height:42px; 
}
.avatar-profile,
.avatar-profile-placeholder{
width:110px;
height:110px;
}

}

.honeypot{ 
	display:none; 
}