* { box-sizing: border-box; margin: 0; padding: 0; }
/* body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} */
header {
	/* background: white; border-bottom: 1px solid #e0e0e0; */
	background: linear-gradient(45deg, #001f3f, #003f3f);
	padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	margin-top: 5rem;
	width: 90%;
	left: 5%;
	position: relative;
	padding: 8px 12px;
	border-radius: 0px 20px 0px 20px;
	border: solid 2px #00ffff;
}
h1 { font-size: 1.35rem; margin-bottom: 0.85rem; text-align: center; }
.url-form { display: flex; gap: 0.5rem; }
input[type="url"] {
	flex: 1; padding: 0.7rem 0.9rem; border: 1px solid #F7A8B8;
	border-radius: 8px; font-size: 0.95rem; font-family: inherit;
	color: #55CDFC
}
input[type="url"]:focus { outline: 2px solid #6A853A; outline-offset: -1px; }
button {
	padding: 0.7rem 1.25rem; background: #F7A8B8; color: #400040;
	border: none; border-radius: 8px; font-size: 0.95rem;
	font-weight: 500; cursor: pointer; transition: background 0.15s;
	font-family: inherit;
}
button:hover { background: #55CDFC; }
button:disabled { background: #FFF; cursor: not-allowed; }
.note { font-size: 0.78rem; color: #777; margin-top: 0.6rem; }

main { padding: 1.5rem; width: 100%; margin: 0 auto; }

.stats {
	display: flex; gap: 0.5rem; margin-bottom: 1rem;
	font-size: 0.9rem; color: #ff7fbf; flex-wrap: wrap;
}
.stats span { padding: 0.25rem 0.6rem; background: #400040; border-radius: 4px; }

.download-archive-bar {
	display: none;
	justify-content: center;
	margin-top: 0.5rem;
}
.download-archive-btn {
	padding: 0.55rem 1.1rem; background: #55CDFC; color: #400040;
	border: none; border-radius: 8px; font-size: 0.9rem;
	font-weight: 600; cursor: pointer; transition: background 0.15s;
	font-family: inherit;
}
.download-archive-btn:hover { background: #F7A8B8; }

.filters { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filter-btn {
	padding: 0.45rem 0.9rem; background: #400040; color: #bf7fff;
	border: 1px solid #800080; border-radius: 6px; font-size: 0.85rem;
	cursor: pointer; font-family: inherit;
}
.filter-btn:hover { background: #800080; }
.filter-btn.active { background: #bf7fff; color: #400040; border-color: #800080; }

.gallery {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.1rem;
}
.card {
	border-radius: 12px; overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
	display: flex; flex-direction: column;
	transition: transform 0.1s, box-shadow 0.1s;
	background: linear-gradient(45deg, #3f3f3fc0, #5f5f5fc0);
	border: solid 1px #ff7fbf;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.media-preview {
	aspect-ratio: 1; background: #000000c0;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.media-preview img, .media-preview video {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-preview audio { width: 88%; }
.file-icon { font-size: 3rem; opacity: 0.5; }
.card-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.filename {
	font-weight: 500; font-size: 0.9rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filesize { font-size: 0.8rem; color: #777; }
.badge {
	display: inline-block; padding: 0.08rem 0.38rem; background: #200020;
	color: #bf7fff; border-radius: 3px; font-size: 0.7rem;
	font-weight: 600; margin-left: 0.2rem; text-transform: uppercase;
}
.download-btn {
	display: block; text-align: center; padding: 0.5rem;
	background: #55CDFC; color: #400040; border-radius: 6px;
	font-size: 0.85rem; font-weight: 500; text-decoration: none;
	margin-top: 0.2rem; transition: background 0.15s;
}
.download-btn:hover { background: #F7A8B8; }

.loader { display: none; text-align: center; padding: 3rem; color: #666; }
.loader.active { display: block; }
.spinner {
	width: 40px; height: 40px; border: 3px solid #e0e0e0;
	border-top-color: #ff7fbf; border-radius: 50%;
	animation: spin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error {
	background: #fef2f2; color: #b91c1c; padding: 1rem;
	border-radius: 8px; margin: 1rem 0; border: 1px solid #fecaca;
	white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 0.85rem;
}

/* ---------- lightbox ---------- */
.lightbox {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(0,0,0,0.88);
	display: none; align-items: center; justify-content: center;
	flex-direction: column;
}
.lightbox.open { display: flex; }
.lightbox-backdrop {
	position: absolute; inset: 0; cursor: pointer;
}
.lightbox-stage {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	max-width: 95vw; max-height: 90vh;
}
.lightbox-stage img {
	max-width: 95vw; max-height: 90vh; object-fit: contain;
	border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.lightbox-stage video {
	max-width: 95vw; max-height: 90vh; border-radius: 6px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.5); outline: none;
}
.lightbox-stage audio {
	width: min(480px, 80vw);
}
.lightbox-stage .file-icon-big {
	font-size: 6rem; color: #aaa;
}
.lightbox-close {
	position: fixed; top: 1rem; right: 1.25rem; z-index: 1002;
	background: rgba(255,255,255,0.12); color: #fff;
	border: none; border-radius: 50%; width: 42px; height: 42px;
	font-size: 1.4rem; cursor: pointer; display: flex;
	align-items: center; justify-content: center;
	transition: background 0.15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav {
	position: fixed; top: 50%; z-index: 1002;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.10); color: #fff;
	border: none; border-radius: 50%; width: 48px; height: 48px;
	font-size: 1.5rem; cursor: pointer; display: flex;
	align-items: center; justify-content: center;
	transition: background 0.15s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }
.lightbox-nav:disabled { opacity: 0.25; cursor: default; }
.lightbox-info {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 1002;
	background: linear-gradient(transparent, rgba(0,0,0,0.7));
	color: #ddd; padding: 0.5rem; text-align: center;
	font-size: 0.88rem; pointer-events: none;
}
.lightbox-info .lb-filename {
	font-weight: 600; color: #fff; font-size: 0.95rem;
	word-break: break-all;
}
.lightbox-info .lb-meta { opacity: 0.7; margin-top: 0; font-size: 0.8rem; }
.lightbox-counter {
	position: fixed; top: 1.1rem; left: 1.25rem; z-index: 1002;
	color: rgba(255,255,255,0.6); font-size: 0.82rem;
}