/* P2Xstudio V2 — layout: container, identity, system bar, panels, content pages. */

/* ── Container ────────────────────────────────────────────────────────── */

.container {
	position: relative;
	z-index: var(--z-content);
	max-width: 920px;
	margin: 60px auto;
	padding: 25px;
	border-radius: var(--radius-xl);
	background: var(--grad-panel);
	animation: breathe 3s ease-in-out infinite;
	box-shadow:
		inset 0 0 25px var(--xeno-green-20),
		0 0 30px var(--xeno-green-30);
}

.container.playing {
	animation: none;
}

@keyframes breathe {
	0% {
		transform: scale(1);
		box-shadow:
			inset 0 0 20px var(--xeno-green-20),
			0 0 20px var(--xeno-green-30);
	}
	50% {
		transform: scale(1.03);
		box-shadow:
			inset 0 0 40px var(--xeno-green-60),
			0 0 80px var(--xeno-green-strong);
	}
	100% {
		transform: scale(1);
		box-shadow:
			inset 0 0 20px var(--xeno-green-20),
			0 0 20px var(--xeno-green-30);
	}
}

/* ── Identity ─────────────────────────────────────────────────────────── */

.title {
	text-align: center;
	margin-bottom: 20px;
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--xeno-text-bright);
	text-shadow:
		0 0 8px var(--xeno-green),
		0 0 18px var(--xeno-green-soft);
}

/* ── System bar ───────────────────────────────────────────────────────── */

.system-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	background: linear-gradient(145deg, rgba(0, 80, 30, 0.4), var(--panel-deep));
	font-size: 12px;
	letter-spacing: 2px;
	box-shadow:
		inset 0 0 10px var(--xeno-green-30),
		0 0 10px var(--xeno-green-20);
}

.sys-right {
	color: var(--xeno-green);
	text-shadow: var(--glow-text);
}

/* ── Shared panel surface (was duplicated six times in V1) ────────────── */

.memory-card,
.audio-wrapper,
.about-panel,
.network-panel,
.blog-section,
.content-panel {
	border-radius: var(--radius-lg);
	background: var(--grad-panel-dark);
	box-shadow:
		inset 0 0 20px var(--xeno-green-20),
		0 0 30px var(--xeno-green-30);
}

.memory-card,
.about-panel,
.network-panel,
.blog-section,
.content-panel {
	margin-top: 30px;
	padding: 20px;
}

.panel-title,
.memory-title {
	font-size: 12px;
	letter-spacing: 3px;
	margin-bottom: 15px;
	text-align: center;
	text-shadow:
		0 0 10px var(--xeno-green),
		0 0 20px var(--xeno-green-soft);
}

.panel-empty,
.blog-empty,
.playlist-empty {
	text-align: center;
	opacity: 0.6;
	font-size: 11px;
	letter-spacing: 2px;
}

/* ── Blog/content pages ───────────────────────────────────────────────── */

.content-panel {
	padding: 24px;
}

.post-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.post-card {
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	background: var(--grad-item);
	box-shadow: inset 0 0 10px var(--xeno-green-20);
}

.post-card-title {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: 2px;
}

.post-card-title a {
	color: var(--xeno-text);
	text-decoration: none;
}

.post-card-title a:hover,
.post-card-title a:focus {
	color: var(--xeno-ink);
	background: var(--xeno-green-60);
	border-radius: 6px;
	padding: 0 4px;
}

.post-card-meta {
	font-size: 10px;
	opacity: 0.6;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.post-card-excerpt,
.entry-content {
	font-size: 12px;
	line-height: 1.7;
	opacity: 0.85;
}

.entry-content img {
	border-radius: var(--radius-xs);
	box-shadow: var(--glow-soft);
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	font-size: 11px;
}

.post-nav a {
	color: var(--xeno-green);
	text-decoration: none;
}

.content-actions {
	margin-top: 18px;
	text-align: center;
}

.pagination {
	margin-top: 18px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* ── Footer bar ───────────────────────────────────────────────────────── */

.footer-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid var(--xeno-green-20);
	font-size: 10px;
	letter-spacing: 2px;
	opacity: 0.8;
}

.admin-link {
	color: var(--xeno-green);
	text-decoration: none;
	border: 1px solid var(--xeno-green-40);
	border-radius: 8px;
	padding: 6px 10px;
	transition: var(--transition-fast);
}

.admin-link:hover,
.admin-link:focus {
	background: var(--xeno-green);
	color: var(--xeno-ink);
	box-shadow: var(--glow-text);
}

.footer-note {
	opacity: 0.6;
}