:root {
	--bg-0: #0b0d12;
	--bg-1: #11141b;
	--bg-2: #181c25;
	--bg-3: #232836;
	--border: #2a3040;
	--fg-0: #e8eaee;
	--fg-1: #a8aebd;
	--fg-2: #6b7186;
	--accent: #4f8cff;
	--accent-hover: #6da3ff;
	--accent-soft: rgba(79, 140, 255, 0.12);
	--success: #43c777;
	--warn: #f0a039;
	--danger: #e7506e;
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	--radius: 10px;
	--radius-sm: 6px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: var(--bg-0);
	color: var(--fg-0);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font: inherit; cursor: pointer; }

/* Top bar */
.topbar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 28px;
	background: var(--bg-1);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 10;
}
.brand {
	display: flex; align-items: center; gap: 10px;
	font-weight: 700; letter-spacing: 0.02em;
	color: var(--fg-0);
	font-size: 17px;
}
.brand:hover { color: var(--fg-0); }
.brand-dot {
	width: 14px; height: 14px; border-radius: 4px;
	background: linear-gradient(135deg, var(--accent), #b34fff);
	box-shadow: 0 0 12px var(--accent);
}
.topnav { display: flex; gap: 4px; flex: 1; }
.topnav a {
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	color: var(--fg-1);
	font-weight: 500;
}
.topnav a:hover { background: var(--bg-2); color: var(--fg-0); }
.topnav a.active { background: var(--accent-soft); color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-pill {
	background: var(--bg-2);
	color: var(--fg-1);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	display: inline-flex; align-items: center; gap: 6px;
}
.badge {
	background: var(--accent);
	color: white;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
}
.logout-form { margin: 0; }
.link-button {
	background: none; border: none;
	color: var(--fg-1);
	padding: 0;
	font-size: 13px;
}
.link-button:hover { color: var(--fg-0); }

.page { padding: 28px; max-width: 1400px; margin: 0 auto; }

/* Login */
.login-shell {
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 30% 20%, rgba(79, 140, 255, 0.08), transparent 50%),
	            radial-gradient(circle at 70% 80%, rgba(179, 79, 255, 0.06), transparent 50%),
	            var(--bg-0);
}
.login-card {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 36px;
	width: 380px;
	box-shadow: var(--shadow);
}
.login-card h1 { margin: 0 0 6px; font-size: 22px; }
.login-card .sub { color: var(--fg-1); margin: 0 0 24px; font-size: 14px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { font-size: 12px; color: var(--fg-1); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; }
.login-card input {
	width: 100%;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--fg-0);
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
}
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-card .error {
	background: rgba(231, 80, 110, 0.1);
	border: 1px solid rgba(231, 80, 110, 0.3);
	color: var(--danger);
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	margin-bottom: 12px;
}
.btn-primary {
	background: var(--accent);
	border: none;
	color: white;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	margin-top: 4px;
	transition: background 120ms ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.login-hint {
	margin-top: 18px;
	color: var(--fg-2);
	font-size: 12px;
	text-align: center;
}

/* Search bar */
.toolbar {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 24px;
}
.toolbar h1 { margin: 0; font-size: 22px; flex: 1; }
.searchbox {
	flex: 0 0 auto;
	position: relative;
}
.searchbox input {
	background: var(--bg-1);
	border: 1px solid var(--border);
	color: var(--fg-0);
	padding: 9px 12px 9px 34px;
	border-radius: var(--radius-sm);
	width: 280px;
	font-size: 14px;
}
.searchbox input:focus { outline: none; border-color: var(--accent); }
.searchbox::before {
	content: "⌕";
	position: absolute;
	left: 12px; top: 50%; transform: translateY(-50%);
	color: var(--fg-2);
	font-size: 16px;
}

/* Catalog grid */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 24px;
}
.card {
	display: block;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	color: inherit;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: var(--accent);
	color: inherit;
}
.poster {
	aspect-ratio: 2 / 3;
	display: flex;
	align-items: center; justify-content: center;
	font-size: 38px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 16px;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
	position: relative;
}
.poster-img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 250ms ease;
}
.poster-img.loaded { opacity: 1; }
.poster-initials {
	position: relative; z-index: 1;
}
.card-preview-video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 2;
}
.poster .kind {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(0,0,0,0.55);
	color: white;
	padding: 3px 8px;
	border-radius: 999px;
	font-weight: 600;
}
.poster .unpublished {
	position: absolute;
	top: 10px; right: 10px;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--warn);
	color: black;
	padding: 3px 8px;
	border-radius: 999px;
	font-weight: 700;
}
.card-meta { padding: 12px 14px 14px; }
.card-meta .title {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.card-meta .sub {
	color: var(--fg-1);
	font-size: 12px;
	margin-top: 4px;
}

.empty-state {
	text-align: center;
	padding: 80px 20px;
	color: var(--fg-1);
}

/* Title detail */
.title-page {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: 36px;
	align-items: flex-start;
}
.title-page .poster {
	aspect-ratio: 2 / 3;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.title-meta h1 { margin: 0 0 6px; font-size: 30px; }
.title-meta .subtitle { color: var(--fg-1); margin-bottom: 18px; }
.title-meta .description { line-height: 1.55; color: var(--fg-0); margin-bottom: 22px; max-width: 70ch; }
.title-meta .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.title-meta .tag {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--fg-1);
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--fg-0);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
}
.btn:hover { background: var(--bg-3); }
.btn-play {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
}
.btn-play:hover { background: var(--accent-hover); }

/* Episode list */
.episodes { margin-top: 32px; }
.episodes h2 { font-size: 18px; margin: 0 0 12px; }
.episode-row {
	display: grid;
	grid-template-columns: 96px 60px 1fr auto;
	gap: 16px;
	padding: 12px 16px;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
	align-items: center;
}
.episode-row .num { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.episode-row .ep-title { font-weight: 500; }
.episode-row .ep-desc { color: var(--fg-1); font-size: 13px; margin-top: 3px; }
.episode-row .ep-status { font-size: 12px; color: var(--fg-2); }
.episode-row-link { color: inherit; transition: border-color 100ms; }
.episode-row-link:hover { border-color: var(--accent); color: inherit; }
.episode-row-link:hover .ep-title { color: var(--accent); }

.episodes-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 12px;
}
.episodes-header h2 { margin: 0; }
.view-toggle { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.view-toggle .view-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 28px;
	color: var(--fg-2);
	border-radius: 4px;
	font-size: 14px;
	text-decoration: none;
}
.view-toggle .view-btn.active { background: var(--bg-3); color: var(--fg-0); }
.view-toggle .view-btn:hover { color: var(--fg-0); }

.ep-thumb-sm {
	width: 96px; height: 54px;
	border-radius: 4px;
	overflow: hidden; position: relative;
	background-size: cover; background-position: center;
}
.ep-thumb-sm .ep-thumb-img {
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 200ms;
}
.ep-thumb-sm .ep-thumb-img.loaded { opacity: 1; }

.episode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.episode-card {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	display: flex; flex-direction: column;
	transition: border-color 100ms, transform 80ms ease;
}
.episode-card:hover { border-color: var(--accent); }
.episode-card:hover .ep-title { color: var(--accent); }
.episode-card .ep-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.episode-card .ep-thumb-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 200ms;
}
.episode-card .ep-thumb-img.loaded { opacity: 1; }
.episode-card .ep-badge {
	position: absolute;
	left: 8px; bottom: 8px;
	background: rgba(0,0,0,0.65);
	color: white;
	padding: 2px 7px;
	font-size: 11px;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	z-index: 2;
}
.episode-card .ep-card-body { padding: 10px 12px 12px; }
.episode-card .ep-title { font-weight: 500; font-size: 14px; line-height: 1.3; }
.episode-card .sub { font-size: 12px; color: var(--fg-2); margin-top: 4px; }

/* Catalog sections + tighter playlist grid */
.catalog-section { margin-bottom: 32px; }
.catalog-section-h {
	font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--fg-1); margin: 0 0 14px; font-weight: 600;
}
.grid-tight { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.playlist-card-pub .poster { aspect-ratio: 4 / 3; }

/* Admin table */
.admin-tabs {
	display: flex; gap: 6px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 20px;
}
.admin-tabs a {
	padding: 10px 14px;
	color: var(--fg-1);
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.admin-tabs a.active { color: var(--fg-0); border-bottom-color: var(--accent); }
.admin-tabs a:hover { color: var(--fg-0); }

.table-wrap { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.media-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.media-table th, .media-table td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.media-table th {
	background: var(--bg-2);
	color: var(--fg-1);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--border);
}
.media-table tr + tr td { border-top: 1px solid var(--border); }
.media-table .poster-mini {
	width: 36px; height: 54px;
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	color: white; font-weight: 700; font-size: 14px;
	flex-shrink: 0;
}
.media-table .row-title { display: flex; align-items: center; gap: 12px; }
.media-table .row-title strong { display: block; }
.media-table .row-title .sub { color: var(--fg-2); font-size: 12px; }
.row-link { color: inherit; }
.row-link:hover { color: inherit; }
.row-link:hover strong { color: var(--accent); }
.media-table .col-actions { text-align: right; }

/* Publish toggle (HTMX target) */
.publish-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--fg-1);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background 100ms;
}
.publish-toggle.published {
	background: rgba(67, 199, 119, 0.13);
	border-color: rgba(67, 199, 119, 0.35);
	color: var(--success);
}
.publish-toggle.unpublished {
	background: rgba(240, 160, 57, 0.13);
	border-color: rgba(240, 160, 57, 0.35);
	color: var(--warn);
}
.publish-toggle:hover { filter: brightness(1.15); }
.publish-toggle .dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.85;
}

.htmx-request .publish-toggle { opacity: 0.5; pointer-events: none; }

.notice {
	padding: 14px 16px;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	color: var(--fg-1);
	margin-top: 18px;
	font-size: 13px;
}

/* Subnav (Library / Catalog) */
.admin-tabs.subnav {
	margin-bottom: 18px;
	border-bottom: 1px solid var(--border);
}
.admin-tabs.subnav a { font-size: 14px; }

/* Scan summary */
.scan-summary {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	padding: 18px 22px;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 18px;
}
.scan-summary-counts { display: flex; gap: 28px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-0); }
.stat-label { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-discovered .stat-num { color: var(--fg-1); }
.stat-probing .stat-num { color: var(--accent); }
.stat-ready .stat-num { color: var(--success); }
.stat-failed .stat-num { color: var(--danger); }
.scan-summary-progress {
	margin-left: auto;
	color: var(--fg-1);
	font-size: 13px;
	display: flex; align-items: center; gap: 8px;
}
.scan-summary-progress code {
	background: var(--bg-2);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--fg-1);
}
.pulse-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(79, 140, 255, 0.6);
	animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
	0%   { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0.6); }
	70%  { box-shadow: 0 0 0 12px rgba(79, 140, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0); }
}

/* Status / strategy / codec pills */
.status-pill, .strategy-pill, .codec-pill {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid transparent;
}
.status-discovered { background: var(--bg-2); color: var(--fg-1); border-color: var(--border); }
.status-probing    { background: var(--accent-soft); color: var(--accent); border-color: rgba(79,140,255,0.3); }
.status-ready      { background: rgba(67,199,119,0.13); color: var(--success); border-color: rgba(67,199,119,0.35); }
.status-failed     { background: rgba(231,80,110,0.13); color: var(--danger); border-color: rgba(231,80,110,0.35); }

.strat-directcopy     { background: rgba(67,199,119,0.13); color: var(--success); border-color: rgba(67,199,119,0.35); }
.strat-transcodeaudio { background: rgba(240,160,57,0.13); color: var(--warn); border-color: rgba(240,160,57,0.35); }
.strat-transcodevideo { background: rgba(240,160,57,0.13); color: var(--warn); border-color: rgba(240,160,57,0.35); }
.strat-transcodeboth  { background: rgba(231,80,110,0.13); color: var(--danger); border-color: rgba(231,80,110,0.35); }
.strat-reject         { background: var(--bg-2); color: var(--fg-1); border-color: var(--border); }
.strat-unknown        { background: var(--bg-2); color: var(--fg-2); border-color: var(--border); }

.codec-pill {
	font-size: 10px;
	padding: 2px 7px;
	margin-right: 4px;
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: 0;
}
.codec-pill.v { background: rgba(79,140,255,0.13); color: var(--accent); border-color: rgba(79,140,255,0.3); }
.codec-pill.a { background: rgba(179,79,255,0.13); color: #b988ff; border-color: rgba(179,79,255,0.3); }

.error-text { color: var(--danger); }

/* View toggle */
.view-toggle {
	display: inline-flex;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 3px;
}
.view-toggle a {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fg-1);
	border-radius: 4px;
}
.view-toggle a.active { background: var(--accent); color: white; }
.view-toggle a:hover:not(.active) { color: var(--fg-0); }

/* Library two-pane layout */
.library-layout {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 16px;
	align-items: stretch;
	min-height: calc(100vh - 280px);
}
.library-tree-pane {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 200px);
	position: sticky;
	top: 80px;
}
.tree-toolbar {
	padding: 12px;
	border-bottom: 1px solid var(--border);
}
.tree-filter {
	width: 100%;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--fg-0);
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 13px;
}
.tree-filter:focus { outline: none; border-color: var(--accent); }
.tree-scroll { overflow-y: auto; padding: 8px 6px; flex: 1; }

.tree-dir > summary {
	display: flex; align-items: center; gap: 4px;
	padding: 5px 8px;
	cursor: pointer;
	border-radius: 4px;
	user-select: none;
	font-size: 13px;
	color: var(--fg-0);
	list-style: none;
}
.tree-dir > summary::-webkit-details-marker { display: none; }
.tree-dir > summary:hover { background: var(--bg-2); }
.tree-arrow {
	display: inline-block;
	width: 0; height: 0;
	border: 4px solid transparent;
	border-left-color: var(--fg-2);
	transition: transform 100ms ease;
	margin-right: 4px;
}
.tree-dir[open] > summary .tree-arrow { transform: rotate(90deg); }
.tree-icon-dir {
	display: inline-block;
	width: 16px; height: 14px;
	background: var(--accent);
	opacity: 0.8;
	border-radius: 2px 2px 3px 3px;
	position: relative;
	flex-shrink: 0;
}
.tree-icon-dir::before {
	content: ""; position: absolute;
	top: -3px; left: 0;
	width: 7px; height: 4px;
	background: var(--accent);
	opacity: 0.8;
	border-radius: 2px 2px 0 0;
}
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count {
	color: var(--fg-2);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	background: var(--bg-2);
	padding: 1px 7px;
	border-radius: 999px;
}
.tree-children { padding-left: 18px; border-left: 1px solid var(--border); margin-left: 11px; }

.tree-file {
	display: flex; align-items: stretch;
	border-radius: 4px;
	overflow: hidden;
}
.tree-file:hover { background: var(--bg-2); }
.tree-file.selected { background: var(--accent-soft); }
.tree-file.selected .tree-icon-file.status-ready { background: var(--accent); }

.tree-file-link {
	display: flex; align-items: center; gap: 6px;
	flex: 1; min-width: 0;
	padding: 5px 8px;
	font-size: 12.5px;
	color: var(--fg-1);
	text-decoration: none;
	overflow: hidden;
}
.tree-file:hover .tree-file-link { color: var(--fg-0); }
.tree-file.selected .tree-file-link { color: var(--accent); }

.tree-play {
	display: flex; align-items: center; justify-content: center;
	width: 30px;
	color: var(--fg-2);
	text-decoration: none;
	font-size: 11px;
	flex-shrink: 0;
	opacity: 0.35;
	transition: opacity 100ms, background 100ms, color 100ms;
}
.tree-file:hover .tree-play { opacity: 0.85; }
.tree-play:hover {
	background: var(--accent);
	color: white;
	opacity: 1;
}
.tree-icon-file {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--fg-2);
	flex-shrink: 0;
	margin-left: 4px;
}
.tree-icon-file.status-ready { background: var(--success); }
.tree-icon-file.status-failed { background: var(--danger); }
.tree-icon-file.status-probing { background: var(--accent); }
.tree-tag {
	font-size: 9px;
	padding: 1px 5px;
	border-radius: 999px;
	background: var(--bg-3);
	color: var(--fg-2);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.tree-tag.tag-failed { background: var(--danger); color: white; }

.library-pane {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	min-height: 400px;
	overflow: hidden;
}
.library-pane > .empty-state.pane-placeholder {
	padding: 100px 30px;
	color: var(--fg-2);
}
.placeholder-icon {
	font-size: 48px;
	opacity: 0.3;
	margin-bottom: 8px;
}
.pane-placeholder h2 { color: var(--fg-1); margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.pane-placeholder p { max-width: 380px; margin: 0 auto; font-size: 13px; }

/* When file-pane is loaded inside library-pane, remove its outer card padding */
.library-pane .file-detail-grid { padding: 24px; }
.library-pane .file-detail-main {
	background: transparent;
	border: 0;
	padding: 0;
}
.library-pane .file-detail-side .side-panel {
	background: var(--bg-2);
}

/* File detail page */
.back-link {
	color: var(--fg-1);
	font-weight: 500;
	font-size: 16px;
}
.back-link:hover { color: var(--fg-0); }

.file-detail-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	align-items: flex-start;
}
.file-detail-main {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
}
.file-detail-side { display: flex; flex-direction: column; gap: 16px; }
.side-panel {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.side-panel h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-1); }
.side-panel h4 { margin: 14px 0 8px; font-size: 13px; color: var(--fg-1); }

.file-header {
	display: flex; gap: 18px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 20px;
}
.poster-mini-lg {
	width: 64px; height: 96px;
	border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
	color: white; font-weight: 700; font-size: 22px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.file-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.filepath { margin-top: 6px; font-size: 12px; }
.filepath code {
	background: var(--bg-2);
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--fg-1);
}

.flash {
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	margin-bottom: 16px;
	font-size: 13px;
}
.flash-success {
	background: rgba(67,199,119,0.13);
	border: 1px solid rgba(67,199,119,0.35);
	color: var(--success);
}

.alert {
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	margin-bottom: 22px;
	font-size: 13px;
}
.alert-error {
	background: rgba(231,80,110,0.08);
	border: 1px solid rgba(231,80,110,0.3);
	color: var(--fg-0);
}
.alert-error strong { color: var(--danger); display: block; margin-bottom: 6px; }
.error-pre {
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 12px;
	color: var(--fg-1);
	overflow-x: auto;
	white-space: pre-wrap;
	margin: 8px 0 12px;
}
.alert-error form { display: inline; margin-right: 10px; }
.alert-error .sub { font-size: 12px; color: var(--fg-1); display: block; margin-top: 8px; }
.alert-error code { background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--fg-1); }
.alert-success {
	background: rgba(0, 184, 148, 0.08);
	border: 1px solid rgba(0, 184, 148, 0.3);
	color: var(--fg-0);
}
.alert-success code { background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

.btn-danger {
	background: rgba(231,80,110,0.12);
	border: 1px solid rgba(231,80,110,0.4);
	color: #e7506e;
}
.btn-danger:hover { background: rgba(231,80,110,0.2); }

.inline-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }

.users-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}
.users-table th, .users-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	font-size: 13px;
}
.users-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-1); font-weight: 600; }
.users-table tr:last-child td { border-bottom: none; }

.path-complete-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.path-complete-list {
	position: absolute;
	top: 100%; left: 0; right: 0;
	z-index: 50;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	max-height: 240px;
	overflow-y: auto;
	margin-top: 4px;
}
.path-complete-row {
	padding: 6px 10px;
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.path-complete-row.hl, .path-complete-row:hover { background: var(--bg-2); color: var(--accent); }

.resume-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(0,0,0,0.45);
	z-index: 2;
}
.resume-bar-fill {
	height: 100%;
	background: var(--accent, #ff8a5b);
}
.continue-card .poster .kind {
	background: rgba(0,0,0,0.6);
	color: #fff;
}

.up-next {
	position: absolute;
	right: 24px;
	bottom: 80px;
	max-width: 360px;
	z-index: 10;
	display: none;
}
.up-next.visible { display: block; }
.up-next-card {
	background: rgba(15, 17, 21, 0.92);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 14px 16px;
	color: #fff;
	box-shadow: 0 12px 32px rgba(0,0,0,0.5);
	backdrop-filter: blur(8px);
}
.up-next-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.6);
	margin-bottom: 4px;
}
.up-next-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.up-next-actions { display: flex; gap: 8px; }

.metadata-form h3 { margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-1); }
.form-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.form-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; margin-bottom: 14px; }
.form-row > .form-field { margin-bottom: 0; }
.form-field label {
	font-size: 11px; color: var(--fg-1);
	text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
	width: 100%;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--fg-0);
	padding: 9px 11px;
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 14px;
}
.form-field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-field .hint { font-size: 12px; color: var(--fg-2); }
.form-field .hint code { background: var(--bg-2); padding: 1px 6px; border-radius: 3px; }
.form-actions {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	margin-top: 16px;
}
.form-actions .inline { margin: 0; }

.probe-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.probe-list dt { color: var(--fg-2); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; padding-top: 2px; }
.probe-list dd { margin: 0; color: var(--fg-0); }
.track-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.track-list li { padding: 6px 0; border-top: 1px solid var(--border); color: var(--fg-1); }
.track-list li:first-child { border-top: 0; }
.track-list em { color: var(--fg-0); font-style: normal; }

.codec-pill.sub-text { background: rgba(67,199,119,0.13); color: var(--success); border-color: rgba(67,199,119,0.35); }
.codec-pill.sub-bitmap { background: rgba(240,160,57,0.13); color: var(--warn); border-color: rgba(240,160,57,0.35); }

.badge-soft { background: var(--bg-2); color: var(--fg-1); font-weight: 600; }
.inline { display: inline; }

@media (max-width: 1024px) {
	.file-detail-grid { grid-template-columns: 1fr; }
}

/* Categories & playlists */
.layout-narrow { max-width: 880px; margin: 0 auto; }
.inline-form {
	display: flex; gap: 10px; margin-bottom: 24px;
	background: var(--bg-1); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 14px;
}
.inline-form input[type="text"] {
	flex: 1; background: var(--bg-2); border: 1px solid var(--border);
	color: var(--fg-0); padding: 9px 12px; border-radius: var(--radius-sm); font: inherit;
}
.inline-form input:focus { outline: none; border-color: var(--accent); }

.card-form {
	background: var(--bg-1); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 22px; margin-bottom: 24px;
}
.card-form h3 { margin: 0 0 8px; font-size: 16px; }
.card-form .sub { font-size: 13px; color: var(--fg-1); margin-bottom: 14px; }
.card-form code { background: var(--bg-2); padding: 1px 6px; border-radius: 3px; font-size: 12px; }

.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.chip-card {
	background: var(--bg-1); border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px; display: flex; align-items: center; gap: 12px;
}
.chip-card .chip-meta { color: var(--fg-2); font-size: 12px; flex: 1; }

/* Category hierarchy */
.cat-group {
	background: var(--bg-1); border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 22px;
	margin-bottom: 14px;
}
.cat-group-header {
	display: flex; align-items: baseline; gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.cat-group-header h2 { margin: 0; font-size: 18px; }
.cat-group-icon { font-size: 22px; line-height: 1; }
.cat-group-header .sub { flex: 1; margin: 0; font-size: 13px; }
.cat-group-actions { margin-left: auto; }
.cat-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.cat-card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.cat-card-summary {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.cat-card-summary::-webkit-details-marker { display: none; }
.cat-card-summary:hover { background: var(--bg-3); }
.cat-card[open] > .cat-card-summary { border-bottom: 1px solid var(--border); }
.cat-card-meta { flex: 1; font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card-edit { font-size: 11px; color: var(--fg-2); }
.cat-card[open] .cat-card-edit { color: var(--accent); }
.cat-edit { padding: 14px; }
.cat-edit textarea {
	width: 100%;
	background: var(--bg-3);
	border: 1px solid var(--border);
	color: var(--fg-0);
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	font-family: inherit; font-size: 13px;
	resize: vertical;
}
.cat-icon { display: inline-block; margin-right: 4px; }
.cat-create { padding: 14px 0 0 0; }

.category-chip {
	display: inline-block;
	color: white;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.category-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.category-toggle { cursor: pointer; }
.category-toggle input { display: none; }
.category-toggle .category-chip {
	opacity: 0.4; transition: opacity 100ms ease;
	border: 2px solid transparent;
}
.category-toggle input:checked + .category-chip {
	opacity: 1;
	border-color: rgba(255,255,255,0.7);
	box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px currentColor;
}
.category-toggle:hover .category-chip { opacity: 0.85; }

.link-button.danger { color: var(--danger); }
.link-button.danger:hover { color: #ff7591; }

/* Playlist list page */
.playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.playlist-card {
	display: flex; gap: 14px; padding: 14px;
	background: var(--bg-1); border: 1px solid var(--border);
	border-radius: var(--radius); color: inherit;
	transition: border-color 120ms, transform 120ms;
}
.playlist-card:hover {
	color: inherit;
	border-color: var(--accent);
	transform: translateY(-2px);
}
.playlist-card-poster {
	width: 56px; height: 56px; border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: white; flex-shrink: 0;
}
.playlist-card-body { flex: 1; min-width: 0; }
.playlist-card-body strong { display: block; font-size: 15px; }
.playlist-card-body p { margin: 4px 0 6px; font-size: 13px; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-card-stats { display: flex; gap: 8px; font-size: 12px; color: var(--fg-2); }

/* Playlist detail page */
.playlist-header {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 24px;
	align-items: flex-start;
	padding: 22px;
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 18px;
}
.playlist-header .poster-mini-lg { width: 96px; height: 96px; font-size: 28px; }
.playlist-meta-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.playlist-meta-form .form-row { margin-bottom: 0; }
.playlist-meta-form .form-actions { padding-top: 8px; border-top: 0; margin-top: 4px; }
.playlist-stats { display: flex; gap: 24px; align-self: center; }

/* Tree-add (playlist detail) */
.tree-help { padding: 8px 4px 0; font-size: 11px; }
.add-affordance {
	display: inline-block;
	background: var(--accent);
	color: white;
	width: 16px; height: 16px;
	line-height: 16px; text-align: center;
	border-radius: 4px;
	font-weight: 700;
	font-size: 12px;
}
.tree-add-form {
	margin: 0; margin-left: auto;
	opacity: 0.55; transition: opacity 100ms ease, transform 100ms ease;
}
.tree-dir > summary:hover .tree-add-form,
.tree-add-file:hover .tree-add-form { opacity: 1; transform: scale(1.05); }
.add-btn {
	background: var(--accent); border: 0; color: white;
	height: 22px; min-width: 22px; padding: 0 8px;
	border-radius: 5px; font-weight: 700;
	font-size: 12px; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; gap: 3px;
	letter-spacing: 0.02em;
}
.add-btn:hover { background: var(--accent-hover); }
.add-btn-soft {
	background: var(--bg-3);
	color: var(--fg-1);
	border: 1px solid var(--border);
}
.add-btn-soft:hover { background: var(--accent); color: white; border-color: var(--accent); }
.tree-action-form {
	margin: 0; margin-left: auto;
	opacity: 0.5; transition: opacity 100ms ease;
}
.tree-dir > summary:hover .tree-action-form { opacity: 1; }
.tree-add-file {
	display: flex; align-items: center; gap: 6px;
	padding: 5px 8px;
	font-size: 12.5px;
	color: var(--fg-1);
	border-radius: 4px;
}
.tree-add-file:hover { background: var(--bg-2); color: var(--fg-0); }

/* Playlist items pane */
.playlist-items { padding: 22px; }
.playlist-items h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-1); }
.playlist-items h3 .sub { color: var(--fg-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.item-list { list-style: none; padding: 0; margin: 0; }
.item-row {
	display: grid;
	grid-template-columns: 28px 28px 1fr auto;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: 6px;
	background: var(--bg-2);
	align-items: center;
}
.item-pos {
	color: var(--fg-2);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	text-align: center;
}
.item-icon {
	width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 4px; font-size: 14px;
	color: white;
}
.item-icon.item-file { background: var(--accent); }
.item-icon.item-folder { background: var(--warn); color: black; }
.item-icon.item-playlist { background: #b34fff; }
.item-body { min-width: 0; }
.item-body strong { display: block; }
.item-body code { background: var(--bg-3); padding: 1px 6px; border-radius: 3px; font-size: 11px; }

.resolved-preview { margin-top: 18px; }
.resolved-preview > summary { cursor: pointer; color: var(--fg-1); font-size: 13px; padding: 8px 0; }
.resolved-list { list-style: none; padding: 0; margin: 8px 0 0; max-height: 320px; overflow-y: auto; }
.resolved-list li { padding: 5px 0; font-size: 12px; display: flex; align-items: center; gap: 10px; color: var(--fg-1); }
.resolved-list code { background: var(--bg-2); padding: 1px 6px; border-radius: 3px; font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filter bar */
.filter-bar {
	display: flex; gap: 14px; align-items: center;
	margin-bottom: 14px;
}
.filter-bar label {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; color: var(--fg-1);
}
.filter-bar select {
	background: var(--bg-1); border: 1px solid var(--border);
	color: var(--fg-0); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 13px;
}
.filter-clear { font-size: 12px; color: var(--fg-2); }
.filter-clear:hover { color: var(--accent); }

/* Publish banner toggle (file detail / playlist detail) */
.publish-banner {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	margin-bottom: 18px;
	transition: background 200ms, border-color 200ms;
}
.publish-banner.published {
	background: rgba(67, 199, 119, 0.08);
	border-color: rgba(67, 199, 119, 0.4);
}
.publish-banner.unpublished {
	background: rgba(240, 160, 57, 0.05);
	border-color: rgba(240, 160, 57, 0.3);
}
.publish-toggle-label {
	display: flex; align-items: center; gap: 14px;
	cursor: pointer;
	user-select: none;
}
.publish-toggle-label input[type="checkbox"] { display: none; }
.publish-track {
	width: 42px; height: 24px;
	background: var(--bg-3);
	border-radius: 999px;
	position: relative;
	transition: background 150ms;
	flex-shrink: 0;
}
.publish-thumb {
	position: absolute;
	top: 3px; left: 3px;
	width: 18px; height: 18px;
	background: var(--fg-1);
	border-radius: 50%;
	transition: left 150ms ease, background 150ms;
}
input:checked + .publish-track {
	background: var(--success);
}
input:checked + .publish-track .publish-thumb {
	left: 21px;
	background: white;
}
.publish-text { display: flex; flex-direction: column; gap: 2px; }
.publish-text strong { font-size: 14px; }
.publish-text .sub { font-size: 12px; color: var(--fg-1); }
.publish-text code { background: var(--bg-2); padding: 1px 6px; border-radius: 3px; font-size: 11px; }

/* Player */
.player-shell {
	max-width: 1280px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 16px;
}
.player-topbar {
	display: flex; align-items: center; gap: 24px;
	padding-bottom: 8px;
}
.player-title strong { font-size: 18px; display: block; }
.player-title .sub { font-size: 13px; color: var(--fg-1); }
.player-stage {
	position: relative;
	background: black;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.player-stage video {
	width: 100%; height: auto;
	display: block;
	max-height: calc(100vh - 260px);
	background: black;
}
.player-status {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	pointer-events: none;
}
.player-status:empty { display: none; }
.player-status-pending { color: var(--fg-1); }
.player-status-error {
	background: rgba(231, 80, 110, 0.85);
	color: white;
}
.player-meta {
	background: var(--bg-1);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 18px;
	font-size: 13px;
	display: flex; flex-direction: column; gap: 6px;
}
.player-meta code {
	background: var(--bg-2);
	padding: 1px 6px; border-radius: 3px; font-size: 12px;
	color: var(--fg-1);
}

.btn-play-lg {
	background: var(--accent);
	color: white;
	padding: 12px 22px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 6px;
	border: 0;
	letter-spacing: 0.04em;
}
.btn-play-lg:hover { background: var(--accent-hover); color: white; }
.file-header-body { flex: 1; min-width: 0; }

/* Auto-enrich panel */
.ai-panel-wide { margin-bottom: 16px; }
.autoenrich-row {
	display: flex; align-items: center; gap: 24px;
	flex-wrap: wrap; margin-bottom: 12px;
}
.autoenrich-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.autoenrich-state { font-size: 13px; color: var(--fg-1); margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-running  { background: var(--accent); animation: aiPulse 1.5s infinite; }
.dot-yielding { background: var(--warn); animation: aiPulse 1.5s infinite; }
.dot-paused   { background: var(--warn); }
.dot-idle     { background: var(--fg-2); }
.progress-bar {
	background: var(--bg-2);
	height: 8px; border-radius: 999px;
	overflow: hidden;
	margin-bottom: 10px;
}
.progress-fill {
	background: linear-gradient(90deg, var(--accent), #b34fff);
	height: 100%;
	transition: width 400ms ease;
}
.autoenrich-current {
	font-size: 12px; color: var(--fg-1);
	margin-bottom: 10px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.autoenrich-current code {
	background: var(--bg-2); padding: 2px 8px; border-radius: 3px;
	font-size: 11px;
}
.autoenrich-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.autoenrich-buttons form { margin: 0; }

.autoenrich-action-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.autoenrich-now {
	flex: 1;
	min-width: 0;
}
.autoenrich-progress-line {
	font-size: 14px;
	margin-bottom: 4px;
}
.autoenrich-progress-line strong {
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.autoenrich-current-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	overflow: hidden;
}
.autoenrich-current-inline code {
	background: var(--bg-2);
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.autoenrich-spinner {
	display: inline-block;
	width: 12px; height: 12px;
	border: 2px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: autoenrich-spin 0.8s linear infinite;
	flex-shrink: 0;
}
@keyframes autoenrich-spin { to { transform: rotate(360deg); } }

/* AI features */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.ai-panel {
	background: var(--bg-1); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 22px;
}
.ai-panel h3 { margin: 0 0 6px; font-size: 16px; }
.ai-panel .sub { font-size: 13px; color: var(--fg-1); margin-bottom: 12px; }
.ai-panel form { display: flex; flex-direction: column; gap: 10px; }
.ai-panel textarea, .ai-panel input[type="text"] {
	width: 100%;
	background: var(--bg-2); border: 1px solid var(--border);
	color: var(--fg-0); padding: 10px 12px; border-radius: var(--radius-sm);
	font: inherit; font-family: inherit; font-size: 14px;
	resize: vertical;
}
.ai-result { margin-top: 14px; }
.ai-loading {
	color: var(--fg-2); font-style: italic; font-size: 13px;
	padding: 12px;
	background: var(--bg-2); border-radius: var(--radius-sm);
}
.ai-card {
	background: var(--bg-2); border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: 14px;
}
.ai-card h4 { margin: 0 0 6px; font-size: 15px; }
.ai-card p { margin: 4px 0; font-size: 13px; }
.ai-card .sub { color: var(--fg-2); }
.ai-id-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.ai-id-list code { background: var(--bg-3); padding: 2px 8px; border-radius: 3px; font-size: 12px; }
.ai-ep-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.ai-ep-table th, .ai-ep-table td { padding: 5px 8px; text-align: left; border-top: 1px solid var(--border); }
.ai-ep-table th { color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.ai-ep-table code { background: var(--bg-3); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.ai-suggest-row {
	display: flex; align-items: center; gap: 12px;
	margin-top: 6px; font-size: 12px;
}
.ai-btn {
	background: linear-gradient(135deg, var(--accent), #b34fff);
	border: 0; color: white;
	padding: 6px 12px; border-radius: var(--radius-sm);
	font-size: 12px; font-weight: 600;
	cursor: pointer;
}
.ai-btn:hover { filter: brightness(1.1); }
.ai-btn-lg {
	padding: 10px 16px;
	font-size: 13px;
	border-radius: var(--radius-sm);
}
.ai-enrich-row {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	background: linear-gradient(135deg, rgba(79,140,255,0.08), rgba(179,79,255,0.08));
	border: 1px solid rgba(179,79,255,0.25);
	border-radius: var(--radius-sm);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.ai-enrich-row .sub { flex: 1; min-width: 200px; font-size: 12px; }
.ai-enrich-thinking { color: var(--accent) !important; }
.ai-enrich-thinking::after {
	content: '';
	display: inline-block;
	width: 8px; height: 8px;
	background: var(--accent);
	border-radius: 50%;
	margin-left: 8px;
	animation: aiPulse 1s infinite;
	vertical-align: middle;
}

.ai-flash, .ai-flash .category-chip { animation: aiPulse 1.5s ease; }
input.ai-flash, textarea.ai-flash, select.ai-flash {
	box-shadow: 0 0 0 3px rgba(179, 79, 255, 0.4);
	border-color: #b34fff !important;
}
@keyframes aiPulse {
	0%   { box-shadow: 0 0 0 0 rgba(179, 79, 255, 0.5); }
	30%  { box-shadow: 0 0 0 6px rgba(179, 79, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(179, 79, 255, 0); }
}

/* Add to playlist (file detail aside) */
.add-to-playlist-form { display: flex; gap: 8px; }
.add-to-playlist-form select {
	flex: 1; background: var(--bg-3); border: 1px solid var(--border);
	color: var(--fg-0); padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px;
}

@media (max-width: 720px) {
	.page { padding: 18px; }
	.title-page { grid-template-columns: 1fr; }
	.title-page .poster { max-width: 240px; }
	.searchbox input { width: 180px; }
	.media-table th:nth-child(3), .media-table td:nth-child(3),
	.media-table th:nth-child(4), .media-table td:nth-child(4) { display: none; }
}