.icon-container {
	display: inline-block;
	padding: 5px;
	border-radius: 5px;
}

.toggle-password {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

.bg-icon {
	background-color:#52716230;
	border:1px solid gray !important;
}

.item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.item-card {
	cursor: pointer;
	background: linear-gradient(145deg, #12131499, #12181699);
	border: 1px solid #2a2a28;
	border-radius: 8px;
	padding: 14px 16px;
	transition: border-color .2s ease, transform .15s ease;
}

.item-card:hover {
	border-color: #52a37a;
	transform: translateY(-2px);
}

.item-category {
	display: inline-block;
	font-size: .7rem;
	font-weight: bold;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #9fd6b8;
	background: #1c2b22;
	border: 1px solid #2f4536;
	border-radius: 4px;
	padding: 2px 8px;
	margin-bottom: 8px;
}

.item-title {
	color: #fcf8ec;
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 6px;
}

.item-thumb {
	width: 100%;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 10px;
	background: #0d0f0e;
}

.item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.item-desc {
	color: #b7b7b7;
	font-size: .85rem;
	line-height: 1.4;
	margin-bottom: 10px;
}

.item-date {
	color: #888;
	font-size: .75rem;
	display: flex;
	align-items: center;
	gap: 6px;
}