:root {
	--blocdash-card-bg-color: #fcfcfc;
	--blocdash-text-primary-color: #111111;
	--blocdash-text-secondary-color: #5c5c5c;
	--blocdash-border-color: #e1e1e1;
	--blocdash-shadow-color: rgba(17, 17, 17, 0.08);
	--blocdash-accent-color: #111111;
	--blocdash-card-radius: 14px;
	--blocdash-transition-speed: 0.25s;
}

body.blocdash-modal-open { overflow: hidden; }

.blocdash-dashboard-wrapper { 
	font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", Arial, sans-serif; 
	max-width: 1200px; 
	margin: 2rem auto; 
	padding: 0 1rem; 
}

.blocdash-header { 
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: space-between; 
	align-items: center; 
	padding: 1rem 1.5rem; 
	background-color: var(--blocdash-card-bg-color); 
	border: 1px solid var(--blocdash-border-color); 
	border-radius: var(--blocdash-card-radius); 
	margin-bottom: 1.5rem; 
	box-shadow: 0 4px 15px var(--blocdash-shadow-color); 
}

.blocdash-header-left, .blocdash-header-right { 
	display: flex; 
	align-items: center; 
	gap: 1rem; 
}

.blocdash-header-left { flex-shrink: 0; }
.blocdash-header-right { flex-shrink: 0; }
.blocdash-avatar img { border-radius: 50%; width: 40px; height: 40px; }
.blocdash-welcome h2 { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--blocdash-text-primary-color); }
.blocdash-welcome .blocdash-greeting { display: none; }
.blocdash-logout-link { font-size: 0.9rem; color: var(--blocdash-text-secondary-color); text-decoration: none; }
.blocdash-logout-link:hover { color: var(--blocdash-accent-color); }

.blocdash-tabs-nav { 
	list-style: none !important; 
	padding: 0 !important; 
	margin: 0 0 1.5rem 0 !important; 
	display: flex; 
	border-bottom: 2px solid var(--blocdash-border-color); 
	flex-wrap: nowrap; 
	overflow-x: auto; 
	-webkit-overflow-scrolling: touch; 
	scrollbar-width: none; 
	-ms-overflow-style: none; 
}

.blocdash-tabs-nav::-webkit-scrollbar { display: none; }
.blocdash-tabs-nav li { margin: 0 !important; padding: 0 !important; flex-shrink: 0; }

.blocdash-tabs-nav li a { 
	cursor: pointer; 
	text-decoration: none !important; 
	padding: 1em 1.75em; 
	display: block; 
	color: var(--blocdash-text-secondary-color); 
	border-bottom: 3px solid transparent; 
	margin-bottom: -2px; 
	font-weight: 600; 
	transition: all var(--blocdash-transition-speed) ease; 
}

.blocdash-tabs-nav li.active a, .blocdash-tabs-nav li a:hover { 
	color: var(--blocdash-accent-color); 
	border-bottom-color: var(--blocdash-accent-color); 
}

.blocdash-tab-pane { display: none; animation: blocdash_fade_in 0.5s ease-out; }
.blocdash-tab-pane.active { display: block; }

@keyframes blocdash_fade_in { 
	from { opacity: 0; transform: translateY(15px); } 
	to { opacity: 1; transform: translateY(0); } 
}

.blocdash-card { 
	padding: 0; 
	border-radius: var(--blocdash-card-radius); 
	background: var(--blocdash-card-bg-color); 
	border: 1px solid var(--blocdash-border-color); 
	box-shadow: 0 10px 15px -3px var(--blocdash-shadow-color), 0 4px 6px -4px var(--blocdash-shadow-color); 
	color: var(--blocdash-text-primary-color); 
	transition: opacity var(--blocdash-transition-speed) ease; 
}

.blocdash-card h3 { 
	font-size: 1.4em; 
	margin-top: 0; 
	margin-bottom: 1.5rem; 
	border-bottom: 1px solid var(--blocdash-border-color); 
	padding-bottom: 0.75rem; 
	color: var(--blocdash-text-primary-color); 
	display: flex; 
	align-items: center; 
	gap: 0.75rem; 
}

.blocdash-login-message { 
	text-align: center; 
	padding: 3rem; 
	border: 1px dashed var(--blocdash-border-color); 
	border-radius: var(--blocdash-card-radius); 
}

.blocdash-disabled-module {
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--blocdash-border-color);
	border-radius: var(--blocdash-card-radius);
	background: #f6f6f6;
	color: var(--blocdash-text-secondary-color);
	text-align: center;
	margin-bottom: 1.5rem;
}

.blocdash-announcements-grid { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 2rem; 
	align-items: start; 
}

.blocdash-announcement-card { display: flex; flex-direction: column; }

.blocdash-announcement-header { 
	display: flex; 
	align-items: center; 
	gap: 1rem; 
	padding: 1.5rem; 
}

.blocdash-announcement-header img { border-radius: 50%; width: 40px; height: 40px; }
.blocdash-announcement-author-meta { display: flex; flex-direction: column; }
.blocdash-announcement-author { font-weight: 600; color: var(--blocdash-text-primary-color); }
.blocdash-announcement-date { font-size: 0.85rem; color: var(--blocdash-text-secondary-color); }

.blocdash-announcement-content { 
	padding: 0 1.5rem 1.5rem; 
	color: var(--blocdash-text-secondary-color); 
	line-height: 1.6; 
	flex-grow: 1; 
	text-align: left; 
}

.blocdash-announcement-content p:last-child { margin-bottom: 0; }
.blocdash-announcement-content a { color: var(--blocdash-text-primary-color); text-decoration: underline; text-decoration-color: var(--blocdash-text-secondary-color); }
.blocdash-announcement-content a:hover { color: var(--blocdash-accent-color); text-decoration-color: var(--blocdash-accent-color); }

.blocdash-announcement-footer { 
	padding: 1rem 1.5rem; 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	border-top: 1px solid var(--blocdash-border-color); 
	background-color: #f4f4f4; 
	border-bottom-left-radius: var(--blocdash-card-radius); 
	border-bottom-right-radius: var(--blocdash-card-radius); 
}

.blocdash-footer-actions { display: flex; align-items: center; gap: 0.75rem; }

.blocdash-action-btn { 
	cursor: pointer; 
	background: none; 
	border: 1px solid transparent; 
	padding: 0.5rem; 
	display: flex; 
	align-items: center; 
	gap: 0.5rem; 
	color: var(--blocdash-text-secondary-color); 
	font-size: 0.9rem; 
	font-weight: 600; 
	transition: all var(--blocdash-transition-speed) ease; 
	border-radius: 6px; 
	position: relative;
}

.blocdash-action-btn:hover { color: var(--blocdash-accent-color); border-color: var(--blocdash-border-color); background-color: rgba(0, 0, 0, 0.03); }

.blocdash-action-btn .icon svg { 
	width: 22px; 
	height: 22px; 
	stroke-width: 1.5; 
	fill: currentColor; 
	transition: transform 0.2s; 
}

.blocdash-action-btn:hover .icon svg { transform: scale(1.1); }
.blocdash-action-btn.liked { color: var(--blocdash-text-primary-color); background-color: rgba(0, 0, 0, 0.05); }
.blocdash-action-btn.has-replies { color: var(--blocdash-text-primary-color); background-color: rgba(0, 0, 0, 0.05); }
.blocdash-action-btn .count.first-like-animation { animation: first_like_pop 0.6s ease-out; }

.blocdash-reply-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #111111;
	color: #ffffff;
	font-size: 0.65rem;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	line-height: 1;
}

@keyframes first_like_pop { 
	0% { transform: scale(1); } 
	50% { transform: scale(1.5) rotate(10deg); color: var(--blocdash-text-primary-color); } 
	100% { transform: scale(1) rotate(0deg); } 
}

.blocdash-likers { display: flex; align-items: center; cursor: pointer; }
.blocdash-likers img { 
	width: 24px; 
	height: 24px; 
	border-radius: 50%; 
	border: 2px solid var(--blocdash-card-bg-color); 
	transition: transform 0.2s; 
}
.blocdash-likers img:hover { transform: scale(1.2); z-index: 1; }
.blocdash-likers img:not(:first-child) { margin-left: -10px; }

.blocdash-replies-section { 
	display: none; 
	padding: 1.5rem; 
	border-top: 1px solid var(--blocdash-border-color); 
}

.blocdash-replies-list { 
	list-style: none; 
	margin: 0 0 1.5rem 0; 
	padding: 0; 
	display: flex; 
	flex-direction: column; 
	gap: 1.5rem; 
}

.blocdash-reply-item { 
	display: flex; 
	gap: 1rem; 
	align-items: flex-start; 
	animation: blocdash_fade_in 0.5s; 
}

.blocdash-reply-content { flex: 1; }

.blocdash-reply-meta { 
	display: flex; 
	align-items: center; 
	gap: 0.5rem; 
	margin-bottom: 0.5rem; 
}

.blocdash-reply-meta img { border-radius: 50%; width: 32px; height: 32px; }
.blocdash-reply-author { font-weight: 600; color: var(--blocdash-text-primary-color); }
.blocdash-reply-date { font-size: 0.8rem; color: var(--blocdash-text-secondary-color); }
.blocdash-reply-date::before { content: '|'; margin: 0 0.5rem; color: var(--blocdash-border-color); }
.blocdash-reply-text { font-size: 0.95rem; line-height: 1.6; color: var(--blocdash-text-secondary-color); }

.blocdash-first-commenter-badge { 
	font-size: 0.75rem; 
	font-weight: 600; 
	color: #1b1b1b; 
	background-color: #e7e7e7; 
	padding: 2px 6px; 
	border-radius: 4px; 
}

.blocdash-reply-delete-btn {
	margin-left: auto;
	border: none;
	background: none;
	color: var(--blocdash-text-secondary-color);
	font-size: 0.75rem;
	cursor: pointer;
	padding: 0;
}

.blocdash-reply-delete-btn:hover {
	color: var(--blocdash-text-primary-color);
	text-decoration: underline;
}

.blocdash-reply-form textarea { 
	width: 100%; 
	padding: 0.75rem; 
	border: 1px solid var(--blocdash-border-color); 
	border-radius: 8px; 
	font-size: 1rem; 
	margin-bottom: 0.5rem; 
}

.blocdash-reply-form button { 
	background-color: #121212; 
	color: #fff; 
	border: none; 
	border-radius: 8px; 
	padding: 0.6rem 1.2rem; 
	font-weight: 600; 
	cursor: pointer; 
	transition: all var(--blocdash-transition-speed) ease; 
}

.blocdash-reply-form button:hover { background-color: #1e1e1e; }
.blocdash-reply-form button:disabled { background-color: #9c9c9c; cursor: not-allowed; }

.blocdash-load-more-replies-btn { 
	background: none; 
	border: none; 
	color: var(--blocdash-accent-color); 
	font-weight: 600; 
	cursor: pointer; 
	margin-top: 1rem; 
}

.blocdash-load-more-wrapper { text-align: center; margin-top: 2rem; }

.blocdash-load-more-btn { 
	background-color: #121212; 
	color: #fff; 
	border: none; 
	border-radius: 8px; 
	padding: 0.8rem 1.8rem; 
	font-weight: 600; 
	cursor: pointer; 
	transition: all var(--blocdash-transition-speed) ease; 
}

.blocdash-load-more-btn:hover { background-color: #1e1e1e; }
.blocdash-load-more-btn:disabled { background-color: #9c9c9c; cursor: not-allowed; }

.blocdash-modal-overlay { 
	position: fixed; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	background: rgba(0, 0, 0, 0.5); 
	backdrop-filter: blur(5px); 
	z-index: 9999; 
	display: none; 
	align-items: center; 
	justify-content: center; 
	animation: blocdash_fade_in 0.3s; 
}

.blocdash-modal { 
	background: var(--blocdash-card-bg-color); 
	border-radius: var(--blocdash-card-radius); 
	width: 90%; 
	max-width: 500px; 
	max-height: 80vh; 
	display: flex; 
	flex-direction: column; 
	box-shadow: 0 8px 28px rgba(0,0,0,0.22); 
	animation: blocdash_modal_pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

@keyframes blocdash_modal_pop { 
	from { opacity: 0; transform: scale(0.9); } 
	to { opacity: 1; transform: scale(1); } 
}

.blocdash-modal-header { 
	padding: 1rem 1.5rem; 
	border-bottom: 1px solid var(--blocdash-border-color); 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
}

.blocdash-modal-header h3 { 
	margin: 0; 
	font-size: 1.2rem; 
	color: var(--blocdash-text-primary-color); 
}

.blocdash-modal-close { 
	background: #eeeeee; 
	border: none; 
	width: 32px; 
	height: 32px; 
	border-radius: 50%; 
	font-size: 1.2rem; 
	cursor: pointer; 
	color: #2b2b2b; 
	transition: all 0.2s ease; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
}

.blocdash-modal-close:hover { 
	background-color: #dddddd; 
	transform: rotate(90deg); 
}

.blocdash-modal-content { padding: 1.5rem; overflow-y: auto; }

.blocdash-modal-liker-list, .blocdash-new-posts-list { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	display: flex; 
	flex-direction: column; 
	gap: 1rem; 
}

.blocdash-modal-liker { display: flex; align-items: center; gap: 0.75rem; }
.blocdash-modal-liker img { border-radius: 50%; width: 40px; height: 40px; }
.blocdash-modal-liker span, .blocdash-new-post-item a { 
	font-weight: 500; 
	color: var(--blocdash-text-primary-color); 
	text-decoration:none; 
}

.blocdash-first-liker-badge { 
	font-size: 0.75rem; 
	font-weight: 600; 
	color: #1b1b1b; 
	background-color: #e7e7e7; 
	padding: 2px 6px; 
	border-radius: 4px; 
	margin-left: 0.5rem; 
}

.blocdash-new-post-item a:hover { text-decoration:underline; }
.blocdash-new-post-item small { color: var(--blocdash-text-secondary-color); }

.blocdash-notification-bell { position: relative; cursor: pointer; }
.blocdash-notification-bell .icon { 
	width: 28px; 
	height: 28px; 
	color: var(--blocdash-text-secondary-color); 
	transition: color 0.2s; 
}
.blocdash-notification-bell .icon svg { width: 28px; height: 28px; display: block; }
.blocdash-notification-bell:hover .icon { color: var(--blocdash-accent-color); }

.blocdash-notification-bell .dot { 
	position: absolute; 
	top: 2px; 
	right: 2px; 
	width: 8px; 
	height: 8px; 
	background-color: var(--blocdash-accent-color); 
	border-radius: 50%; 
	border: 2px solid var(--blocdash-card-bg-color); 
}

@keyframes blocdash_shake { 
	10%, 90% { transform: rotate(-10deg); } 
	20%, 80% { transform: rotate(10deg); } 
	30%, 50%, 70% { transform: rotate(-10deg); } 
	40%, 60% { transform: rotate(10deg); } 
}

.new-notification-shake { animation: blocdash_shake 0.6s ease-in-out 3; }

.blocdash-loader { 
	width: 24px; 
	height: 24px; 
	border: 3px solid #efefef; 
	border-top: 3px solid var(--blocdash-accent-color); 
	border-radius: 50%; 
	animation: blocdash_spin 1s linear infinite; 
	margin: 2rem auto; 
}

@keyframes blocdash_spin { 
	0% { transform: rotate(0deg); } 
	100% { transform: rotate(360deg); } 
}

.blocdash-empty-state { 
	text-align: center; 
	padding: 3rem 1rem; 
	border: 2px dashed var(--blocdash-border-color); 
	border-radius: var(--blocdash-card-radius); 
	color: var(--blocdash-text-secondary-color); 
}

.blocdash-empty-state .icon { 
	width: 48px; 
	height: 48px; 
	margin: 0 auto 1rem; 
	display: block; 
	fill: currentColor; 
}

.blocdash-empty-state h4 { 
	margin: 0 0 0.5rem 0; 
	font-size: 1.2rem; 
	color: var(--blocdash-text-primary-color); 
}

[data-tooltip] { position: relative; }
[data-tooltip]::after { 
	content: attr(aria-label); 
	position: absolute; 
	bottom: 100%; 
	left: 50%; 
	transform: translateX(-50%); 
	margin-bottom: 8px; 
	background: #111; 
	color: #fff; 
	padding: 5px 10px; 
	border-radius: 6px; 
	font-size: 12px; 
	white-space: nowrap; 
	opacity: 0; 
	visibility: hidden; 
	transition: opacity 0.2s, visibility 0.2s; 
	z-index: 10; 
}
[data-tooltip]:hover::after { opacity: 1; visibility: visible; }

@media (min-width: 640px) { 
	.blocdash-welcome .blocdash-greeting { display: block; } 
}

@media (min-width: 992px) { 
	.blocdash-announcements-grid { grid-template-columns: repeat(2, 1fr); } 
}