/* Theme variables */
:root {
	--color-bg: #ffffff;
	--color-bg-alt: #f4f4f5;
	--color-surface: #ffffff;
	--color-surface-alt: #f8f9fa;
	--color-border: #e5e7eb;
	--color-border-strong: #d4d4d4;
	--color-text: #1f2937;
	--color-text-muted: #6b7280;
	--color-text-invert: #ffffff;
	--color-accent: #2563eb;
	--color-nav-bg: #27272a;
	--color-nav-bg-hover: #18181b;
	--color-pill-bg: #e4e4e7;
	--color-pill-text: #52525b;
	--color-weight-bg: #f1f5f9;
	--color-weight-text: #475569;
	--color-node-fill: #d4d4d8;
	--color-node-fill-focus: #27272a;
	--color-date-bg: #f8f9fa;
	--shadow-small: 0 1px 2px rgba(0,0,0,0.04);
	--shadow-medium: 0 2px 4px rgba(0,0,0,0.08);
	--shadow-pop: 0 6px 16px rgba(0,0,0,.18);
	--trans-fast: .15s ease;
}
html[data-theme="dark"] {
	--color-bg: #0f1115;
	--color-bg-alt: #1b1e24;
	--color-surface: #1f2329;
	--color-surface-alt: #1f2329;
	--color-border: #2c3139;
	--color-border-strong: #3a4049;
	--color-text: #e5e7eb;
	--color-text-muted: #9ca3af;
	/* In dark mode invert should be light for contrast */
	--color-text-invert: #ffffff;
	--color-accent: #3b82f6;
	--color-nav-bg: #111827;
	--color-nav-bg-hover: #1e293b;
	--color-pill-bg: #2d3239;
	--color-pill-text: #d1d5db;
	--color-weight-bg: #24303a;
	--color-weight-text: #cbd5e1;
	--color-node-fill: #374151;
	--color-node-fill-focus: #f1f5f9;
	--color-date-bg: #24303a;
}

/* Core layout */
.explorer-grid { display:flex; gap:32px; align-items:flex-start; }
.explorer-main { flex:1 1 0; max-width:min(100%, 860px); }
/* Fluid sidebar: shrinks on narrower viewports but caps at previous 380px */
.explorer-side { flex:0 1 clamp(260px, 30%, 380px); display:flex; flex-direction:column; gap:20px; background:var(--color-bg-alt); border:1px solid var(--color-border-strong); border-radius:12px; padding:16px; box-shadow:var(--shadow-small); position:relative; }
.explorer-side-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 8px; border-bottom:1px solid var(--color-border); }
.side-title { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--color-text-muted); }

@media (max-width: 1000px) {
	.explorer-grid { gap:24px; }
	.explorer-side { flex:0 1 clamp(220px, 34%, 340px); }
}
@media (max-width: 820px) {
	.explorer-grid { flex-direction:column; }
	.explorer-side { order:2; width:100%; flex:1 1 auto; }
	.explorer-main { max-width:100%; }
}
@media (max-width: 560px) {
	.explorer-grid { gap:18px; }
	.explorer-side { gap:20px; }
}

/* Adjacency panel */
.adjacency-panel { background:var(--color-bg-alt); padding:16px; border-radius:8px; border:1px solid var(--color-border-strong); }
.adjacency-header { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.adjacency-header h2 { margin:0; font-size:1.1rem; font-weight:700; color:var(--color-text); }
.adjacency-header .adjacency-hint { font-size:11px; color:var(--color-text-muted); letter-spacing:.25px; }
.adjacency-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.adjacency-item { padding:8px 10px; border-radius:6px; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-small); }
.adjacency-item:hover { box-shadow:var(--shadow-medium); }
.adjacency-item-main { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.adj-post-link { font-weight:700; text-decoration:none; color:var(--color-text); font-size:14px; line-height:1.3; flex-grow:1; }
.adj-post-link:hover { color:var(--color-accent); }
.adj-weight { font-size:11px; background:var(--color-weight-bg); color:var(--color-weight-text); padding:2px 6px; border-radius:12px; font-weight:600; min-width:26px; text-align:center; }
.shared-tags { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; font-size:12px; }
.shared-tags .tag-clickable { text-decoration:none; background:var(--color-pill-bg); color:var(--color-pill-text); padding:2px 6px; border-radius:4px; font-weight:500; transition:background var(--trans-fast),color var(--trans-fast); }
.shared-tags .tag-clickable:hover { background:var(--color-accent); color:var(--color-text-invert); }
.shared-tags .sep { color:var(--color-text-muted); margin:0 2px; }

/* Adjacency collapse */
/* Unified side collapse */
.side-collapse-toggle { background:var(--color-pill-bg); color:var(--color-text); border:1px solid var(--color-border); padding:6px 14px; font-size:15px; line-height:1; border-radius:8px; cursor:pointer; font-weight:700; box-shadow:var(--shadow-small); }
.side-collapse-toggle:hover { background:var(--color-accent); color:var(--color-text-invert); box-shadow:var(--shadow-medium); }
.explorer-side { transition:flex-basis .25s ease,width .25s ease,padding .25s ease; }
.explorer-side[data-collapsed="true"] { flex:0 0 52px; width:52px; min-width:52px; padding:8px 6px; }
.explorer-side[data-collapsed="true"] .explorer-side-inner { display:none; }
.explorer-side[data-collapsed="true"] .side-title { display:none; }
.explorer-side[data-collapsed="true"] .explorer-side-header { border-bottom:none; justify-content:center; padding:0; height:100%; }
.explorer-side[data-collapsed="true"] .side-collapse-toggle { font-size:18px; padding:10px 12px; }

/* Mini graph */
.mini-graph { background:var(--color-surface); padding:20px; border-radius:10px; border:1px solid var(--color-border-strong); }
.mini-graph .graph-viz { width:100%; height:300px; display:block; }
.mini-graph .graph-viz .node { fill:var(--color-node-fill); stroke:var(--color-text-muted); stroke-width:1; transition:stroke var(--trans-fast), fill var(--trans-fast); cursor:pointer; }
.mini-graph .graph-viz .node.focus { fill:var(--color-node-fill-focus); stroke:var(--color-nav-bg-hover); stroke-width:2; }
.mini-graph .graph-viz .node.hl { stroke:var(--color-accent); stroke-width:2; }
.mini-graph .graph-viz text.label { font-size:10px; fill:var(--color-text); pointer-events:none; user-select:none; }
.mini-graph .graph-viz text.focus-label { font-size:12px; fill:var(--color-text-invert); font-weight:700; }
.graph-nodes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.graph-node { background:var(--color-pill-bg); padding:4px 8px; border-radius:6px; font-size:12px; }
.graph-node.focus { background:var(--color-node-fill-focus); color:var(--color-text-invert); }
.graph-edges { list-style:none; margin:0; padding:0; font-size:11px; line-height:14px; }

/* Buttons */
.button { background:var(--color-nav-bg); border-radius:4px; color:var(--color-text-invert); font-size:16px; padding:8px 20px; }
.button:hover { background:var(--color-nav-bg-hover); }

/* Post cards */
/* Universal postcard styling (used in grids & lists) */
.postcard {
	display:block;
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:12px;
	box-shadow:var(--shadow-small);
	transition:box-shadow var(--trans-fast), transform var(--trans-fast), border-color var(--trans-fast);
	overflow:hidden;
    padding:18px 20px; /* move inner padding to outer container */
}
.postcard a {
	display:block;
	text-decoration:none;
	color:inherit;
	height:100%;
	padding:0; /* padding now on .postcard */
}
.postcard aside {
	background:none;
	border:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:12px;
}
.postcard h2 { margin:0; font-size:1.15rem; line-height:1.3; font-weight:700; color:var(--color-text); }
.postcard p { margin:0; font-size:.95rem; line-height:1.45; color:var(--color-text-muted); }
.postcard .postcard_footer { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:4px; }
.postcard .p_date { margin:0; font-size:.75rem; font-weight:600; color:var(--color-text-muted); }
.postcard span { font-size:.65rem; color:var(--color-text-muted); letter-spacing:.25px; }
.postcard:hover { box-shadow:var(--shadow-medium); transform:translateY(-2px); border-color:var(--color-accent); }
.postcard a:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:10px; }

/* Navbar */
.navbar { display:flex; justify-content:center; align-items:center; height:100px; background:var(--color-nav-bg); box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.navbar ul { list-style:none; padding:0; margin:0; display:flex; gap:30px; }
.navbar li { display:inline; }
.navbar a { color:var(--color-text-invert); font-size:1.2em; font-weight:700; text-decoration:none; border-radius:5px; padding:10px 20px; position:relative; overflow:hidden; transition:all .3s ease; }
.nav-user-slot { display:flex; align-items:center; margin-left:auto; }
.nav-user-chip { display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,0.1); color:var(--color-text-invert); text-decoration:none; border:1px solid rgba(255,255,255,0.2); }
.nav-user-chip:hover { background:var(--color-accent); color:var(--color-text-invert); border-color:var(--color-accent); }
.nav-user-avatar { width:36px; height:36px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; font-weight:700; }
.nav-user-initials { color:var(--color-text-invert); font-size:0.95rem; }
.nav-user-meta { display:flex; flex-direction:column; line-height:1.1; }
.nav-user-name { font-weight:700; font-size:0.95rem; }
.nav-user-email { font-size:0.75rem; color:rgba(255,255,255,0.8); }
.nav-login-btn { border:1px solid rgba(255,255,255,0.3); border-radius:999px; padding:8px 18px; color:var(--color-text-invert); text-decoration:none; font-weight:600; transition:background var(--trans-fast),color var(--trans-fast); }
.nav-login-btn:hover { background:var(--color-accent); color:var(--color-text-invert); }
/* Logout button uses same styling as login for consistency */
.nav-logout-btn {
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 999px;
	padding: 8px 18px;
	color: var(--color-text-invert);
	text-decoration: none;
	font-weight: 600;
	margin-left: 12px;
	transition: background var(--trans-fast), color var(--trans-fast);
}
.nav-logout-btn:hover {
	background: var(--color-accent);
	color: var(--color-text-invert);
}
.nav-hamburger { display:none; background:var(--color-nav-bg); color:var(--color-text-invert); border:1px solid var(--color-border-strong); padding:10px 14px; font-size:20px; border-radius:6px; cursor:pointer; }
.nav-hamburger:hover { background:var(--color-nav-bg-hover); }
.nav-hamburger:focus { outline:2px solid var(--color-accent); outline-offset:2px; }

@media (max-width: 820px) {
	.navbar { justify-content:space-between; padding:0 16px; height:64px; }
	.nav-hamburger { display:inline-flex; align-items:center; }
	.navbar ul[data-nav-list] { position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--color-nav-bg); flex-direction:column; gap:0; padding:8px 0 32px; display:none; box-shadow:0 6px 24px rgba(0,0,0,.40); z-index:900; overflow-y:auto; }
	.navbar ul[data-nav-list].open { display:flex; animation:navDrop .18s ease-out; }
	.navbar ul[data-nav-list] li { display:block; }
	.navbar ul[data-nav-list] a { width:100%; border-radius:0; padding:14px 22px; font-size:1rem; }
	.navbar ul[data-nav-list] a:hover { background:var(--color-accent); color:var(--color-text-invert); box-shadow:none; }
	.navbar ul[data-nav-list] .theme-toggle { margin:8px 16px 0; width:auto; }
	.nav-user-slot { margin:16px; }
}

@keyframes navDrop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

body.nav-open { overflow:hidden; }
.navbar a:before { content:""; background:rgba(255,255,255,0.2); position:absolute; z-index:0; top:0; left:0; width:100%; height:100%; transform:scaleX(0); transform-origin:right; transition:all .3s ease; }
.navbar a:hover:before { transform:scaleX(1); transform-origin:left; }
/* Unified hover: accent bg with inverted (contrast) text for both themes */
.navbar a:hover { color:var(--color-text-invert); background:var(--color-accent); box-shadow:0 4px 8px rgba(0,0,0,0.4); cursor:pointer; }

/* Theme toggle */
.theme-toggle { background:var(--color-pill-bg); color:var(--color-text); border:1px solid var(--color-border); padding:8px 12px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.theme-toggle:hover { background:var(--color-accent); color:var(--color-text-invert); }
.theme-toggle:focus { outline:2px solid var(--color-accent); outline-offset:2px; }

/* Accessibility helpers */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Tag list */
.post-tags { margin-top:24px; font-size:14px; }
.post-tags strong { margin-right:4px; }

body.no-select { user-select:none; }

/* Floating fragment containers */
.floating-fragment {
	position:fixed;
	top:32px;
	left:32px;
	width:380px;
	height:420px;
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:10px;
	box-shadow:var(--shadow-pop);
	display:flex;
	flex-direction:column;
	resize:both;
	overflow:auto;
	z-index:1000;
}

/* Profile page */
.profile-wrapper { display:flex; flex-direction:column; gap:24px; padding:24px; max-width:900px; margin:0 auto; }
.profile-card { display:flex; gap:20px; padding:24px; background:var(--color-surface); border-radius:16px; border:1px solid var(--color-border-strong); box-shadow:var(--shadow-small); align-items:center; flex-wrap:wrap; }
.profile-avatar { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--color-border); }
.profile-avatar-fallback { background:var(--color-pill-bg); color:var(--color-text); font-size:2rem; font-weight:700; display:flex; align-items:center; justify-content:center; letter-spacing:1px; }
.profile-summary { flex:1 1 300px; }
.profile-email { margin:4px 0 12px 0; color:var(--color-text-muted); }
.profile-actions { margin-top:8px; }
.profile-logout-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border-strong); border-radius:999px; padding:6px 16px; font-weight:600; color:var(--color-nav-bg); background:var(--color-pill-bg); text-decoration:none; transition:background var(--trans-fast), color var(--trans-fast); }
.profile-logout-btn::before { content:"⇦"; font-size:0.85rem; }
.profile-logout-btn:hover { background:var(--color-accent); color:var(--color-text-invert); border-color:var(--color-accent); }
.profile-basics { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; }
.profile-basics dt { font-weight:600; color:var(--color-text-muted); }
.profile-basics dd { margin:0; }
.profile-audience { margin-top:16px; }
.profile-label { font-size:0.85rem; font-weight:600; color:var(--color-text-muted); margin-right:8px; }
.profile-chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.profile-chip { padding:4px 10px; border-radius:999px; background:var(--color-pill-bg); color:var(--color-text); font-size:0.85rem; }
.profile-metadata { display:grid; gap:20px; }
.profile-metadata section { background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:12px; padding:20px; box-shadow:var(--shadow-small); }
.profile-timeline { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; }
.profile-timeline dt { font-weight:600; color:var(--color-text-muted); }
.profile-timeline dd { margin:0; }
.profile-claims dl { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; }
.profile-claims dt { font-weight:600; color:var(--color-text-muted); }
.profile-claims dd { margin:0; word-break:break-word; }
.profile-empty { margin:0; color:var(--color-text-muted); font-style:italic; }

@media (min-width: 900px) {
	.profile-wrapper { flex-direction:row; align-items:flex-start; }
	.profile-card { flex:1 1 45%; min-width:360px; }
	.profile-metadata { flex:1 1 45%; }
}
.floating-fragment[data-collapsed="true"] .floating-fragment-body { display:none; }
.floating-fragment-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:8px 12px;
	background:var(--color-nav-bg);
	color:var(--color-text-invert);
	font-size:14px;
	font-weight:600;
	cursor:move;
	user-select:none;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	touch-action:none; /* allow custom touch dragging without browser panning */
}
.floating-fragment-header .frag-actions { display:flex; gap:6px; }
.floating-fragment-header button {
	background:var(--color-pill-bg);
	color:var(--color-text);
	border:0;
	padding:4px 8px;
	border-radius:4px;
	cursor:pointer;
	font-size:12px;
}
.floating-fragment-header button:hover { background:var(--color-accent); color:var(--color-text-invert); }
.floating-fragment-body { padding:12px; overflow:auto; font-size:14px; line-height:1.4; }
.floating-fragment-body .note-fragment { margin:0; }
.floating-fragment-body .note-fragment h2 { margin-top:0; font-size:18px; }
.floating-fragment-body .fragment-related ul { list-style:none; margin:0; padding:0; }
.floating-fragment-body .fragment-related li { margin:0 0 4px; }
.floating-fragment-body a { text-decoration:none; color:var(--color-accent); }
.floating-fragment-body a:hover { text-decoration:underline; }

/* Post actions */
.post-actions { margin-bottom:16px; }

/* Post date metadata */
.post-dates { display:flex; gap:20px; flex-wrap:wrap; margin:8px 0 16px; padding:8px 12px; background:var(--color-date-bg); border:1px solid var(--color-border); border-radius:8px; font-size:13px; }
.post-dates .date-item { display:flex; align-items:center; gap:6px; color:var(--color-text); }
.post-dates .date-item time { font-weight:600; color:var(--color-text); }
.post-dates .date-label { font-weight:500; text-transform:uppercase; letter-spacing:.5px; font-size:11px; color:var(--color-text-muted); }
.post-dates .date-item:hover time { text-decoration:underline; }
/* Posts Grid */
.posts-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
}

.posts-container h1 {
	margin-bottom: 24px;
	color: var(--color-text);
}

.posts-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin-bottom: 40px;
}

.postcard {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	transition: all var(--trans-fast);
	box-shadow: var(--shadow-small);
}

.postcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-medium);
	border-color: var(--color-accent);
}

.postcard-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.postcard-content {
	padding: 16px;
}

.postcard-title {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.3;
}

.postcard-description {
	margin: 0 0 12px 0;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.postcard-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: var(--color-text-muted);
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}

.postcard-meta time {
	font-weight: 500;
}

.postcard-tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.postcard-tags .tag {
	background: var(--color-pill-bg);
	color: var(--color-pill-text);
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
}

.empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--color-text-muted);
}

.loading-indicator,
.end-message {
	text-align: center;
	padding: 24px;
	color: var(--color-text-muted);
}

#infinite-sentinel {
	height: 1px;
	margin: 20px 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

@media (max-width: 768px) {
	.posts-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


/* Admin Table */
.admin-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px;
}

.admin-upload-section {
	margin-bottom: 32px;
	padding: 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.admin-posts-section {
	padding: 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.admin-posts-section h2 {
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--color-text);
}

.admin-posts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.admin-posts-table thead {
	background: var(--color-bg-alt);
	border-bottom: 2px solid var(--color-border-strong);
}

.admin-posts-table th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	user-select: none;
	transition: background var(--trans-fast);
	position: relative;
}

.admin-posts-table th:hover {
	background: var(--color-border);
}

.admin-posts-table th[aria-sort="ascending"]::after {
	content: " ▲";
	color: var(--color-accent);
	font-size: 10px;
	margin-left: 4px;
}

.admin-posts-table th[aria-sort="descending"]::after {
	content: " ▼";
	color: var(--color-accent);
	font-size: 10px;
	margin-left: 4px;
}

.admin-posts-table tbody tr {
	border-bottom: 1px solid var(--color-border);
	transition: background var(--trans-fast);
	background: var(--color-surface);
}

/* Removed distracting row hover background */

.admin-posts-table .actions-cell {
	white-space: nowrap;
}
.action-btn {
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	color: var(--color-text);
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
	margin-right: 6px;
	transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.action-btn.edit { }
.action-btn.delete { color: #b00020; }
html[data-theme="dark"] .action-btn.delete { color: #ff6b6b; }
.action-btn:hover, .action-btn:focus {
	background: var(--color-border);
	outline: none;
}
.action-btn.delete:hover, .action-btn.delete:focus {
	background: #ffe5e9;
}
html[data-theme="dark"] .action-btn.delete:hover, html[data-theme="dark"] .action-btn.delete:focus {
	background: rgba(255,0,0,0.15);
}

.post-editor {
	width: 100%;
	font-family: monospace;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 12px;
	background: var(--color-surface);
	color: var(--color-text);
	resize: vertical;
}
.edit-actions { margin-top: 12px; }
.edit-actions { display:flex; gap:12px; align-items:center; }
.action-btn.review { background:var(--color-pill-bg); color:var(--color-text); border:1px solid var(--color-border); }
.action-btn.review:hover { background:var(--color-accent); color:var(--color-text-invert); }
.diff-panel { margin-top:20px; background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:8px; padding:12px; box-shadow:var(--shadow-small); }
.diff-panel .diff-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:var(--color-text); }
.monaco-wrapper { height:600px; }
.monaco-diff-wrapper { height:600px; }
.monaco-wrapper {
	width: 100%;
	height: 600px;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
	background: var(--color-surface);
}
@media (max-width: 1024px) {
	.monaco-wrapper { height: 480px; }
}

.admin-posts-table td {
	padding: 12px 16px;
	color: var(--color-text);
}

.admin-posts-table td a {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
	font-weight: 600;
	transition: color var(--trans-fast), background var(--trans-fast);
}

.admin-posts-table td a:hover,
.admin-posts-table td a:focus {
	color: var(--color-accent);
	background: rgba(0,0,0,0.05);
	outline: none;
}

html[data-theme="dark"] .admin-posts-table td a:hover,
html[data-theme="dark"] .admin-posts-table td a:focus {
	background: rgba(255,255,255,0.08);
}

.slug-cell {
	font-family: monospace;
	font-size: 12px;
	color: var(--color-text-muted);
}

.badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.badge-published {
	background: #dcfce7;
	color: #166534;
}

html[data-theme="dark"] .badge-published {
	background: #166534;
	color: #dcfce7;
}

.badge-draft {
	background: #fef3c7;
	color: #92400e;
}

html[data-theme="dark"] .badge-draft {
	background: #92400e;
	color: #fef3c7;
}

@media (max-width: 1024px) {
	.admin-posts-table {
		font-size: 12px;
	}

	.admin-posts-table th,
	.admin-posts-table td {
		padding: 8px 12px;
	}
}