/* General Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a,
a:visited {
	color: #fb5ebe;
}

/* Typography */
body,
body.mindprint {
	font-family: Arial, sans-serif;
	background-color: #000;
	color: #fff;
}

.bgtile {
	animation: background-size-animation 10s infinite alternate ease-in-out;
	background-position: center center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bgtile header {
	position: unset;
	padding: 2rem;
	border-radius: 2rem;
}


/* Layout */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    padding: 0 1rem;
    margin: 0 auto;
    max-width: 1280px;
}
.separator {
    flex-grow: 1;
}

@media (min-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
}

.grecaptcha-badge, .grecaptcha-logo, .grecaptcha-badge * {
	visibility: hidden !important;
}

.grecaptcha-badge {
	
	top: 200vmax !important;
	right: 200vmax !important;
}

/* Common Components */
/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-background);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.button:hover {
    background-color: var(--color-primary-dark);
}

.button.delete {
    background-color: #fff;
    color: #991b1b;
    border: 1px solid #991b1b;
}

.button.delete:hover {
    background-color: #e48585;
    color: #991b1b;
    border: 1px solid #991b1b;
}

.button.delete:active {
    background-color: #991b1b;
    color: #fff;
    border: 1px solid #991b1b;
}

.button.warning {
    /* Light yellow background */
    background-color: #fefce8;
    /* Darker yellow-brown text for contrast */
    color: #854d0e;
    border: 1px solid #854d0e;
}

.button.warning:hover {
    /* Slightly darker yellow background on hover */
    background-color: #fef08a; 
    color: #854d0e;
    border: 1px solid #854d0e;
}

.button.warning:active {
    /* Even darker yellow background when clicked */
    background-color: #facc15;
    /* White text for contrast when clicked */
    color: #fff;
    border: 1px solid #facc15;
}

.button.success {
    /* Light green background */
    background-color: #dcfce7;
    /* Darker green text for contrast */
    color: #166534;
    border: 1px solid #166534;
}

.button.success:hover {
    /* Slightly darker green background on hover */
    background-color: #bbf7d0;
    color: #166534;
    border: 1px solid #166534;
}

.button.success:active {
    /* Even darker green background when clicked */
    background-color: #4ade80;
    /* White text for contrast when clicked */
    color: #fff;
    border: 1px solid #4ade80;
}

.button.edit {
    /* Light blue background */
    background-color: #dbeafe;
    /* Darker blue text for contrast */
    color: #1e40af;
    border: 1px solid #1e40af;
}

.button.edit:hover {
    /* Slightly darker blue background on hover */
    background-color: #bfdbfe;
    color: #1e40af;
    border: 1px solid #1e40af;
}

.button.edit:active {
    /* Even darker blue background when clicked */
    background-color: #3b82f6;
    /* White text for contrast when clicked */
    color: #fff;
    border: 1px solid #3b82f6;
}

.section {
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-align: center;
    color: #fff;
}

.button-group {
    display: flex;
    column-gap: 0.5rem;
}

.form-group {
    width: 100%;
    margin-bottom: var(--spacing-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--color-text);
}

.error-message {
    display: block;
    color: #dc2626;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.flash-messages {
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.flash-messages.hidden {
    display: none;
}

.flash-message {
    padding: var(--spacing-sm);
    background-color: #f5f5f5;
    color: #313131;
    text-align: left;
}

.flash-message.success {
    background-color: #d1fae5;
    color: #065f46;
}

.flash-message.info {
    background-color: #e0f2fe;
    color: #0369a1;
}

.flash-message.warning {
    background-color: #fffbeb;
    color: #92400e;
}

.flash-message.error {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Hero Section */
.hero {
    width: 100%;
    padding: 36px 0;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
}

.hero-description {
    max-width: 700px;
    color: #a0a0a0;
    margin: 0.25rem 0 0.5rem 0;
}

.form-input {
    flex: 1;
    height: 2.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;
    transition: border-color 150ms ease-in-out,
                box-shadow 150ms ease-in-out;
}

/* Responsive Hero */
@media (min-width: 640px) {
    .hero-title {
        font-size: 1.875rem;
    }
}

@media (min-width: 768px) {
    .hero {
        padding: 48px 0;
    }
    .hero-title {
        font-size: 2.25rem;
    }
    .hero-description {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 3rem;
        line-height: 1;
    }
}

.hero-form {
    display: flex;
    gap: 0.25rem;
    width: 100%;
    max-width: 24rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}



@keyframes background-size-animation {

	0%,
	100% {
		background-size: 30%;
	}

	50% {
		background-size: 60%;
	}
}

@keyframes background-size-animation-zoom {

	0%,
	100% {
		background-size: 50vmin;
	}

	50% {
		background-size: 90vmin;
	}
}

h1,
h2 {
	color: #fff;
}

/* Header */
header {
	background-color: #00000088;
	padding: 0.2rem;
	text-align: center;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-blend-mode: overlay;
	-webkit-background-blend-mode: overlay;
}

h1#title {
	font-weight: lighter;
	text-transform: lowercase;
	letter-spacing: 0.25em;
	animation: letter-spacing-animation 2s 1;
}

@keyframes letter-spacing-animation {
	0% {
		letter-spacing: 0em;
	}

	100% {
		letter-spacing: 0.25em;
	}
}


@font-face {
	font-family: 'Anonymous Pro';
	src: url('https://patterns.mindprint.ai/static/anonymouspro.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

header.mindprint-style {
	background-color: #000;
	color: #fff;
	position: relative;
}

header.mindprint-style h1 {
	font-size: 1.5rem;
}

header.mindprint-style .topnav {
	padding: 10pt;
	display: flex;
	flex-wrap: wrap;
	max-width: 1470px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	column-gap: 2rem;
}

header.mindprint-style .topnav .button-group {
	flex-wrap: wrap;
	flex-basis: max-content;
}

header.mindprint-style .topnav .button-group a {
	flex-basis: fit-content;
	flex-shrink: 1;
}

.alert {
    background-color: #222;
    color: #eee;
    padding: 1rem;
	margin: 0.5rem;
}

.alert-success {
	background-color: #133113;
	color: #afdbaf;
}

.alert-warning {
	background-color: #312913;
	color: #f7c336;
}

.alert-error {
	background-color: #311313;
	color: #ff8686;
}

.topnav a {
	color: #fff;
	size: 1.2rem;
	text-decoration: none;
	font-family: "Anonymous Pro", sans-serif;
	font-size: 14.7px;
	color: rgba(252, 252, 252, 0.75);
	padding: 4pt;
	flex: 1;
}

.topnav a.admin-button {
	font-style: italic;
}

.topnav a.logo-link {
	text-align: left;
}

@media (max-width: 750px) {
	.topnav a.logo-link {
		text-align: center;
	}
}

.topnav a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

header.mindprint-style h1 {
	padding: 2pt;
	max-width: 1470px;
	margin: 0 auto;
	color: #fff;
}

/* Main Content */
main {
	padding: 0;
}

/* Main Content */
.mindprint-style {
	max-width: 1470px;
	margin: 0 auto;
}

/* Pattern Grid */
#pattern-grid {
	display: flex;
	flex-direction: column;
	overflow-x: scroll;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #000;
	scrollbar-width: none;
	/* For Firefox */
	-ms-overflow-style: none;
	/* For Internet Explorer and Edge */
}

#pattern-grid::-webkit-scrollbar {
	/* For Chrome, Safari, and Opera */
	display: none;
}

#pattern-grid.zooming {
	zoom: 800%;
	transition: zoom 1s ease-in-out;
}

.pattern-row {
	display: flex;
	flex-direction: row;
	scrollbar-width: none;
	/* For Firefox */
	-ms-overflow-style: none;
	/* For Internet Explorer and Edge */
}

.pattern-row::-webkit-scrollbar {
	/* For Chrome, Safari, and Opera */
	display: none;
}

.pattern-item {
	min-width: 50vw;
	max-width: 50vw;
	width: 50vw;
	height: unset;
	flex: 1;
	background-size: 50vw;
	position: relative;
	margin: 0.1rem;
	aspect-ratio: 1 / 1;
}

.pattern-item .inner-pattern {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transition: top 0.2s ease-in-out, left 0.2s ease-in-out,
		bottom 0.2s ease-in-out, right 0.2s ease-in-out;
	background-size: inherit;
	background-position: 50% 50%;
	background-color: inherit;
	overflow: hidden;
}

.pattern-item.selected {
	z-index: 100;
}

.pattern-item.selected.active .inner-pattern {
	border: 2px solid #333;
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75);
	left: -40%;
	right: -40%;
	top: -40%;
	bottom: -40%;
	animation: animateX 30s ease-in-out infinite alternate,
		animateY 45s ease-in-out infinite alternate;
	background-size: 70%;
}

.pattern-item.favorite.selected.active {
	background-size: 80%;
}

.pattern-item.selected.active.favorite .inner-pattern {
	left: -40%;
	right: -40%;
	top: -40%;
	bottom: -40%;
}

.pattern-item.selected.active.zoom.zoomable {
	z-index: 700;
}

.pattern-item.selected.active.zoom.zoomable .inner-pattern {
	left: -5px;
	right: -5px;
	top: -5px;
	bottom: -5px;
	z-index: 701;
	position: fixed;
	animation: background-size-animation-zoom 50s infinite ease-in-out,
		animateX 35s ease-in-out infinite alternate,
		animateY 45s ease-in-out infinite alternate;
}

#design-tray .pattern-item.selected.active.favorite .inner-pattern {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.pattern-item.favorite .inner-pattern,
.pattern-item.favorite.selected.active .inner-pattern,
.pattern-item.favorite.selected .inner-pattern,
#design-tray .pattern-item.favorite .inner-pattern,
#design-tray .pattern-item.favorite:hover .inner-pattern,
#design-tray .pattern-item.favorite.selected .inner-pattern {
	border: 0.2rem solid #fff;
	margin: -0.2rem;
}

#design-tray .pattern-item.favorite .inner-pattern {
	border: 1px solid #000;
	margin: -1px;
}

.pattern-item.favorite .inner-pattern::after {
	content: "\2764";
	font-size: 2rem;
	color: #fff;
	text-shadow: 0px 0px 10px #000;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 0;
	font-family: monospace;
}

.pattern-item .inner-pattern .overlay {
	display: none;
	z-index: 10;
	visibility: hidden;
}

.pattern-item.selected.active .inner-pattern .overlay {
	position: absolute;
	top: 10pt;
	left: 10pt;
	right: 10pt;
	display: none;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	visibility: visible;
	animation: fadeInOut 15s ease-in-out;
	opacity: 0;
}

.pattern-item.selected.active.zoom .inner-pattern .overlay {
	bottom: 20px;
	opacity: 1;
	animation: none;
	flex-direction: column;
	top: unset;
	left: unset;
	display: flex;
}

.pattern-item.selected.active.zoom .inner-pattern .overlay .hint {
	display: none;
}

.pattern-item.selected.active.zoom .inner-pattern .overlay .emoji {
	display: inline;
}

.pattern-item.selected .inner-pattern .overlay .clickable-button {
	display: none;
}

.pattern-item.selected.active.zoom .inner-pattern .overlay .clickable-button {
	display: block;
	cursor: pointer;
}

.pattern-item .inner-pattern .overlay .button {
	text-decoration: none;
	flex-grow: 1;
}

.pattern-item.selected.active .inner-pattern .overlay .emoji {
	display: none;
}

#design-tray #favorites-container {
	flex-wrap: wrap;
}

#design-tray-header h2 {
	font-weight: lighter;
	text-transform: lowercase;
	display: none;
}

#design-tray .pattern-item {
	height: unset;
	flex: 1;
	background-size: 100%;
	min-width: 75px;
	max-width: 75px;
	width: unset;
	min-height: 75px;
	margin: 0.5rem;
	aspect-ratio: 1 / 1;
}

#design-tray .pattern-item:hover .inner-pattern,
#design-tray .pattern-item.selected .inner-pattern {
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75);
}

#design-tray .pattern-item .inner-pattern .overlay .button {
	flex-grow: unset;
}

#design-tray .pattern-item:hover .inner-pattern .overlay {
	display: none;
}

@keyframes animateX {
	0% {
		background-position-x: 50%;
	}

	100% {
		background-position-x: 400%;
	}
}

@keyframes animateY {
	0% {
		background-position-y: 50%;
	}

	100% {
		background-position-y: 400%;
	}
}

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

.section-header h2 {
	text-align: left;
}

.section-header .toolbar {
	text-align: right;
}

.toolbar a,
.toolbar a:link,
.toolbar a:visited,
.button,
a.button,
a.button:visited {
	text-decoration: none;
	color: #fff;
}


.toolbar a,
.button {
	text-decoration: none;
	display: inline-block;
	padding: 8px 15px;
	margin: 1px 10px;
	border: 1px solid #999;
	border-radius: 1.5rem;
	background-color: #222;
	box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.toolbar a:hover,
.button:hover,
a.button:hover,
a.button:visited:hover {
	background-color: #333;
	border-color: #fb5ebe;
	color: #fb5ebe;
}

.toolbar svg {
	vertical-align: bottom;
	margin: 2pt;
	height: 16px;
	width: auto;
	aspect-ratio: 1 / 1;
}

.toolbar a:hover {
	background-color: #333;
	border-color: #fff;
}

.toolbar a:active,
.button:active {
	background-color: #444;
	border-color: #fff;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	60% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Style Navigation */
#style-navigation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	overflow-x: auto;
	white-space: nowrap;
}

#style-navigation a {
	display: inline-block;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color: #333;
	border-right: 1px solid #eaeaea;
}

#style-navigation a:last-child {
	border-right: none;
}

/* Design Tray */
#design-tray {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	border-top: 1px solid #000;
	padding: 0.5rem;
	z-index: 500;
	overflow: visible;
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5);
	transition: bottom 0.75s ease-in-out;

	background-color: #00000088;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-blend-mode: overlay;
	-webkit-background-blend-mode: overlay;
}

#design-tray.hidden {
	bottom: -20vh;
	height: 0;
	display: block;
}

#favorites-container {
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
	flex-wrap: wrap;
	align-content: stretch;
	min-height: 10vh;
	max-height: 22vh;
}

/* Footer */
footer {
	background-color: #f8f8f8;
	padding: 1rem;
	text-align: center;
	border-top: 1px solid #eaeaea;
}

#pattern-list {
}

#pattern-list a {
	text-decoration: none;
}

#pattern-list .pattern-list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.5rem;
	flex-wrap: wrap;
	align-items: start;
	justify-content: center;
}

.management-collection-list .pattern-list-item {
	max-height: 200px;
	overflow: hidden;
}

.management-collection-list .pattern-list-item.expanded {
	max-height: unset;
}





#pattern-list .pattern-list-item.enabled-False {
	opacity: 0.6;
}

#pattern-list .pattern-list-item label {
	float: left;
	clear: both;
	margin-right: 10pt;
}

#pattern-list .pattern-list-item .row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

#pattern-list .pattern-list-item .col-form-label {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	margin-bottom: 0;
	font-size: inherit;
	line-height: 1.5;
	flex: 1;
	width: unset;
	min-width: 125px;
	max-width: 250px;
}

#pattern-list .pattern-list-item .form-field-area {
	flex: 3;
	width: unset;
	min-width: 200px;
}

#pattern-list .pattern-list-item .list-image {
	margin: 20pt;
	margin-bottom: 0;
	flex: 1;
	min-width: 200px;
	max-width: 350px;
	position: relative;
	/* Add this */
	aspect-ratio: 1 / 1;
	/* Add this to maintain a square shape */
	overflow: hidden;
	/* Add this */
}

#pattern-list .pattern-list-item .sample-pattern-container {
	width: 100%;
	height: 100%;
	position: relative;
}

#pattern-list .pattern-list-item .sample-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensure the image covers the entire container */
	opacity: 0;
	transition: opacity 1s ease-in-out;
	animation: fadeThrough 45s infinite;
	/* 5 seconds per image, 9 images */
}

@keyframes fadeThrough {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	23% {
		opacity: 1;
	}

	25% {
		opacity: 0;
	}
}

/* Apply different animation delays to each image */
#pattern-list .pattern-list-item .sample-pattern:nth-child(1) {
	animation: none;
	z-index: -5;
	opacity: 1;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(2) {
	animation-delay: -5s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(3) {
	animation-delay: -10s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(4) {
	animation-delay: -15s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(5) {
	animation-delay: -20s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(6) {
	animation-delay: -25s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(7) {
	animation-delay: -30s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(8) {
	animation-delay: -35s;
}

#pattern-list .pattern-list-item .sample-pattern:nth-child(9) {
	animation-delay: -40s;
}

/* Remove the following styles as they're no longer needed */
#pattern-list .pattern-list-item div.list-image {
	display: block;
	/* Changed from flex */
}

#pattern-list .pattern-list-item .list-image img.small-example {
	width: 100%;
	/* Changed from 33% */
	flex: none;
	/* Remove flex */
}

#pattern-list .pattern-list-item img,
#pattern-list .pattern-list-item .list-image {
	width: 100%;
	height: auto;
	max-width: 350px;
}

#pattern-list .pattern-list-item h2 {
	margin-bottom: 10pt;
}

#pattern-list .pattern-list-item .details {
	flex: 3;
	font-size: 14pt;
	margin: 20pt;
	min-width: 300px;
	color: #fff;
}

#pattern-list .pattern-list-item .details .purchase_link {
	text-decoration: underline;
	color: #fb5ebe;
	margin-top: 10pt;
	display: block;
}

.after-list {
	margin: 20pt;
	text-align: center;
	font-size: 14pt;
}

.upload-instructions {
	display: none;
}

.upload .upload-instructions {
	display: block;
	margin-top: 10pt;
}

.upload .upload-link {
	display: none !important;
}

/* Utility Classes */
.hidden {
	display: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #888;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

#design-tray,
#design-tray * {
	display: none !important;
}

.activity-feed {
	margin-top: 1rem;
	border: 1px solid #666;
	border-radius: 1rem;
	margin: 1rem 0.25rem 0 0.25rem;
}

.activity-feed.partial-view .activity-item:nth-child(n+5) {
    display: none;
}

.activity-feed .expand-btn {
    display: none;
	cursor: pointer;
}

.activity-feed.partial-view:has(.activity-item:nth-child(5)) .expand-btn {
    display: block;
}

.expand-btn-text {
    margin-left: 64px;
	padding: 0 1rem;
	font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
	display: block;
	text-decoration: none;
}
.expand-btn:hover .expand-btn-text {
    color: #fb5ebe;
}

.activity-feed .container {
	text-align: left;
}

.activity-item {
	padding: 1rem;
	border-bottom: 1px solid #222;
}

.activity-item:last-child {
	border-bottom: none;
}

.activity-feed.partial-view:has(.activity-item:nth-child(5)) .activity-item:nth-child(4) {
    border-bottom: none;
}


.activity-timestamp {
	font-size: 0.875rem;
	color: #666;
	margin-bottom: 0.25rem;
}

.activity-content {
	color: #ddd;
}
.activity-content:first-letter {
    text-transform: capitalize;
}

.activity-content a:hover {
	text-decoration: underline;
}

/* Activity Feed Styles */
.activity-item {
    padding: 1rem;
    border-bottom: 1px solid #222;
	text-align: left;
	margin-left: 64px;
}

.activity-item.with-timestamp {
	margin-top: 1rem;
}

.activity-feed h2 {
	text-align: left;
	margin-left: 64px;
	padding: 0 1rem;
	margin-top: -1rem;
	background-color: #000;
	display: inline-block;
	vertical-align: middle;
}

.activity-timestamp {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
	margin-top: -1rem;
}

.activity-thumbnail {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-left: -64px;
	float: left;
}

.activity-item.with-timestamp .activity-thumbnail {
	margin-top: -1.5rem;
}

.activity-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-thumbnail .icon {
    font-size: 24px;
    line-height: 1;
}

.activity-thumbnail .profile-photo {
    border-radius: 50%;
}

.activity-content {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
    color: #ddd;
}

.activity-content.with-list ul,
.activity-content.with-list ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.activity-content.with-list li {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
}
.activity-content.with-list ol:not(:has(li:nth-child(2))) li,
.activity-content.with-list ul:not(:has(li:nth-child(2))) li {
	width: 96px;
	height: 96px;
}


.activity-content.with-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-content a {
    color: #fb5ebe;
    text-decoration: none;
}

.activity-buttons {
	margin-top: 0.5rem;
	margin-left: -10px;
}

.activity-content a:hover {
    text-decoration: underline;
}

.private-activity .activity-timestamp::after {
    content: " 🔒";
	opacity: 0.5;
}

.private-activity:hover .activity-timestamp::after {
    content: " 🔒 (this activity is visible only to you)";
	opacity: 1;
}

h2 a, h2 a:visited {
    color: #fff;
    text-decoration: none;
}
h2 a:hover {
    text-decoration: underline;
}

.activity-feed-options {
    margin-bottom: 1rem;
	font-size: 0.875rem;
	color: #999;
	margin-left: 64px;
    padding: 0 1rem;;
}

.activity-feed-options select {
    /* Style as a normal text link */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: #fb5ebe;
    cursor: pointer;
    text-decoration: none;
    width: auto;
	text-align: center;
	font-size: 0.875rem;
	font-family: Arial, sans-serif;
}

.activity-feed-options select:last-child {
	text-align: left;
}

.activity-feed-options select option {
    color: initial;
    background-color: initial;
	-webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
    background: initial;
    border: initial;
    padding: 0.25rem;
}


.activity-feed-options select:hover {
    text-decoration: underline;
}

/* Hide the dropdown arrow across browsers */
.activity-feed-options select::-ms-expand {
    display: none;
}

.activity-content.delete_curation .target-curation {
	pointer-events: none;
	text-decoration: none;
	color: inherit;
}

@media (max-width: 500px) {
    .activity-content.with-list ol:has(li:nth-child(7)),
    .activity-content.with-list ul:has(li:nth-child(7)) {
        gap: 0.25rem;
    }

    .activity-content.with-list ol:has(li:nth-child(7)) li,
    .activity-content.with-list ul:has(li:nth-child(7)) li {
        width: 48px;
        height: 48px;
    }

	.activity-item {
		padding: 0.5rem;
		margin-left: 48px;
	}	
	.activity-thumbnail {
		width: 32px;
		height: 32px;
		margin-left: -48px;
	}
	.activity-thumbnail .icon {
		font-size: 18px;
	}
	.activity-feed h2, .expand-btn-text {
		margin-left: 48px;
		padding-left: 0.5rem;
	}
	.activity-feed-options {
		margin-left: 48px;
		padding: 0 0.5rem;
	}
}

/* Generation Form Styles */
#generate-form {
    padding: 2rem 0;
}

.generation-form {
    margin: 0 auto;
}

.generation-form .form-group {
    margin-bottom: 1.5rem;
}

.generation-form .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #fff;
}

.generation-form textarea.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #333;
    border-radius: 0.5rem;
    background-color: #000;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out;
    resize: vertical;
}

.generation-form textarea.form-control:focus {
    outline: none;
    border-color: #fb5ebe;
    box-shadow: 0 0 0 2px rgba(251, 94, 190, 0.2);
}

/* Syntax Help Section */
.syntax-help {
    background-color: #000;
    border: 1px solid #333;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.syntax-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

.syntax-help-header h5 {
    color: #fff;
    margin: 0;
    font-size: 1rem;
}

.toggle-syntax {
    background: none;
    border: none;
    color: #fb5ebe;
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

.toggle-syntax .expand-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}

.syntax-help.collapsed .expand-icon {
    transform: rotate(-90deg);
}

.syntax-help-content {
    padding: 0 1rem 1rem;
    max-height: 500px;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.syntax-help.collapsed .syntax-help-content {
    max-height: 0;
    padding: 0 1rem;
    overflow: hidden;
}

.syntax-help ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.syntax-help li {
    color: #999;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.syntax-help li:last-child {
    margin-bottom: 0;
}

.syntax-help li strong {
    color: #fb5ebe;
}

.form-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 2 1 300px;
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.form-check-label {
    color: #fff;
    font-size: 0.875rem;
}

.number-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 200px;
}

.number-input label {
    color: #fff;
    font-size: 0.875rem;
    white-space: nowrap;
}

.number-input .form-control {
    width: 5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid #333;
    border-radius: 0.25rem;
    background-color: #000;
    color: #fff;
    font-size: 0.875rem;
}

.generation-form .btn-primary {
    background-color: #fb5ebe;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.generation-form .btn-primary:hover {
    background-color: #fa3eb4;
}

@media (max-width: 768px) {
    .form-options {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .form-check, .number-input {
        flex: 1 1 auto;
    }
    
    .generation-form .btn-primary {
        width: 100%;
    }
}

/* Generation Section Styles */
.generation-section {
    overflow: hidden;
    border-radius: 0.5rem;
}

.generation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease-in-out;
}

.generation-section.collapsed .generation-header {
    background-color: #1a1a1a;
    border: 1px solid #333;
}

.generation-section.collapsed .generation-header:hover {
    background-color: #2a2a2a;
}

.generation-header h2 {
    margin: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.generation-section.collapsed .generation-header h2::before {
    content: "+";
    color: #fb5ebe;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1;
}

.toggle-generation {
    background: none;
    border: none;
    color: #fb5ebe;
    cursor: pointer;
    padding: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

.toggle-generation .expand-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}

.generation-section.collapsed .expand-icon {
    transform: rotate(-90deg);
}

.generation-section.collapsed .generation-form {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}

.generation-form {
    margin: 0 auto;
    max-height: 2000px;
    opacity: 1;
    padding: 1rem;
	padding-top: 0;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: max-height 0.5s ease-in-out, 
                opacity 0.3s ease-in-out,
                padding 0.3s ease-in-out;
}

.generation-section:not(.collapsed) .generation-header {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Metadata Table Styles */
.metadata-table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
	background-color: #111;
	border-radius: 0.5rem;
	overflow: hidden;
}

.metadata-table tbody tr:last-child th,
.metadata-table tbody tr:last-child td {
	border-bottom: none;
}

.metadata-table th,
.metadata-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid #333;
	font-size: 0.875rem;
}

.metadata-table th {
	width: 30%;
	color: #999;
	font-weight: normal;
	background-color: #0a0a0a;
}

.metadata-table td {
	color: #fff;
}

/* Make table responsive on small screens */
@media (max-width: 500px) {
	.metadata-table th,
	.metadata-table td {
		padding: 0.5rem;
		font-size: 0.75rem;
	}
	
	.metadata-table th {
		width: 40%;
	}
}