:root {
	--bg: #14171c;
	--bg-2: #1b1f26;
	--bg-3: #222831;
	--line: #2e3641;
	--fg: #dfe5ec;
	--fg-dim: #8d99a8;
	--accent: #35c2a5;
	--accent-dim: #1e6f61;
	--warn: #e0a33a;
	--err: #e2604f;
	--sidebar: 268px;
	--detail: 292px;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display rules that set
   e.g. display:flex on a class (that previously left the empty overlay above
   the player, dimming the whole view). */
[hidden] { display: none !important; }

html, body {
	height: 100%;
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 13px/1.5 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
	overflow: hidden;
}

body {
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--detail);
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* ---------------------------------------------------------------- sidebar */

#sidebar, #detail {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--bg-2);
}

#sidebar { border-right: 1px solid var(--line); }
#detail { border-left: 1px solid var(--line); }

.pane-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }

.title { display: flex; align-items: baseline; gap: 8px; }
.title h1 { font-size: 15px; letter-spacing: .3px; }
.lang-btn { padding: 1px 7px; font-size: 10px; line-height: 1.4; }

.stat { margin-top: 3px; font-size: 11px; color: var(--fg-dim); }

.search-wrap { position: relative; margin-top: 9px; }
#search, #anim-search {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--fg);
	padding: 6px 24px 6px 8px;
	font: inherit;
	outline: none;
}
#search:focus, #anim-search:focus { border-color: var(--accent-dim); }
#search::placeholder, #anim-search::placeholder { color: #5f6b7a; }
#search-clear {
	position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
	border: 0; background: none; color: var(--fg-dim); font-size: 16px; padding: 0 5px;
}

.cats { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cat {
	background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-dim);
	border-radius: 999px; padding: 2px 9px; font-size: 11px; cursor: pointer;
}
.cat:hover { color: var(--fg); }
.cat.on { background: var(--accent-dim); border-color: var(--accent); color: #fff; }

.list-wrap { flex: 1; min-height: 0; overflow: auto; }
#list { list-style: none; margin: 0; padding: 4px 0; }
#list li {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 10px 4px 12px;
	cursor: pointer; border-left: 2px solid transparent;
}
#list li:hover { background: var(--bg-3); }
#list li.on { background: #1d3a37; border-left-color: var(--accent); }
#list .lid { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#list .lcat { font-size: 10px; color: var(--fg-dim); }
#list .badge {
	font-size: 9px; color: var(--warn); border: 1px solid #6b5423;
	border-radius: 3px; padding: 0 3px; white-space: nowrap;
}
#list .badge.dim { color: #6d7887; border-color: var(--line); }
#list .lid mark { background: #4a3c14; color: #f2d98a; border-radius: 2px; }
#list .idx { font-size: 10px; color: #55606e; min-width: 22px; text-align: right; }

.empty { padding: 16px 12px; color: var(--fg-dim); font-size: 12px; text-align: center; }

/* ------------------------------------------------------------------- main */

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar, .toolbar {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 10px; background: var(--bg-2); flex: none;
}
.topbar { border-bottom: 1px solid var(--line); }
.toolbar { border-top: 1px solid var(--line); flex-wrap: wrap; }
.spacer { flex: 1; }

.crumb { min-width: 0; }
.crumb-id {
	font-size: 13px; font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb-sub { font-size: 11px; color: var(--fg-dim); }

.icon-btn {
	background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
	border-radius: 4px; min-width: 26px; height: 26px; font-size: 13px; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.btn {
	background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-dim);
	border-radius: 4px; padding: 4px 9px; font-size: 11px; cursor: pointer;
	text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent-dim); color: var(--accent); }

.check, .field {
	display: flex; align-items: center; gap: 4px;
	font-size: 11px; color: var(--fg-dim); white-space: nowrap;
}
.check input { accent-color: var(--accent); margin: 0; }
.field select {
	background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
	border-radius: 4px; padding: 3px 4px; font: inherit; font-size: 11px;
}
.loadinfo { font-size: 11px; color: var(--fg-dim); }

/* ------------------------------------------------------------------ stage */

#stage {
	position: relative; flex: 1; min-height: 0; overflow: hidden;
	background: #000;
}

#checker { position: absolute; inset: 0; display: none; background-color: #2a2f36; }
#stage.transparent #checker {
	display: block;
	background-image:
		linear-gradient(45deg, #3a4048 25%, transparent 25%, transparent 75%, #3a4048 75%),
		linear-gradient(45deg, #3a4048 25%, transparent 25%, transparent 75%, #3a4048 75%);
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
}

#playerhost { position: absolute; inset: 0; }
#playerhost .spine-player { width: 100%; height: 100%; }

.overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(20, 23, 28, .92); padding: 24px; text-align: center; z-index: 5;
}
.overlay .msg { max-width: 560px; }
.overlay .msg h4 { margin: 0 0 8px; font-size: 14px; }
.overlay .msg p { margin: 0 0 6px; color: var(--fg-dim); font-size: 12px; }
.overlay.err h4 { color: var(--err); }
.overlay.warn h4 { color: var(--warn); }
.overlay code {
	background: var(--bg-3); padding: 1px 5px; border-radius: 3px;
	font-size: 11px; color: var(--fg); word-break: break-all;
}
.overlay .actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
.overlay .actions .btn { padding: 5px 12px; font-size: 12px; }
.overlay .actions .btn.primary { border-color: var(--accent-dim); color: var(--accent); }
.overlay .actions .btn.primary:hover { background: var(--accent-dim); color: #fff; }

.spinner {
	position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	width: 22px; height: 22px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent);
	animation: spin .8s linear infinite; z-index: 6;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }

/* ----------------------------------------------------------------- detail */

#detail { overflow: auto; }
#detail .pane-head { padding: 12px 12px 10px; }
#detail h2 { font-size: 13px; }
#detail h3 { font-size: 11px; color: var(--fg-dim); font-weight: 600; letter-spacing: .4px; }

.meta { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 8px; font-size: 11px; color: var(--fg-dim); }
.meta b { color: var(--fg); font-weight: 600; }
.meta .row { width: 100%; }
.meta .k { color: #6d7887; }

.sec { border-bottom: 1px solid var(--line); padding: 9px 12px 11px; }
/* The animation list is the only block that can be long, so it absorbs the
   leftover column height instead of leaving it dangling below the last
   section (which made the short 纹理页 block look like it owned half the
   column). */
.sec.grow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sec.grow .sec-head { flex: none; }
.sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sec-head h3 { flex: 1; }
.sec-head .count { color: #5f6b7a; font-weight: 400; }
.sec-head input {
	width: 82px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
	color: var(--fg); font: inherit; font-size: 11px; padding: 3px 6px; outline: none;
}
.sec-head input:focus { border-color: var(--accent-dim); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
/* Rows must keep their natural height: as flex items they would otherwise be
   squeezed into slivers by the column's definite max-height. */
.chips li {
	flex: 0 0 auto;
	padding: 3px 7px; border-radius: 4px; font-size: 11.5px; cursor: pointer;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg);
}
.chips li:hover { background: var(--bg-3); }
.chips li.on { background: var(--accent-dim); color: #fff; }
.chips li.empty-row { color: var(--fg-dim); cursor: default; }

/* Inside the growable animation block the list fills the section and scrolls
   on its own, rather than being capped at 340px. */
.sec.grow .chips { flex: 1 1 auto; min-height: 0; max-height: none; }

.pages { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.pages li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--fg-dim); }
.pages li span:last-child { color: #5f6b7a; white-space: nowrap; }

/* ----------------------------------------------------------------- export */

.btn.primary { border-color: var(--accent-dim); color: var(--accent); }
.btn.primary:hover { background: var(--accent-dim); color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { border-color: var(--line); color: var(--fg-dim); }

.modal {
	position: fixed; inset: 0; z-index: 20;
	display: flex; align-items: center; justify-content: center;
	background: rgba(10, 12, 15, .72);
}
.modal-box {
	width: min(520px, calc(100vw - 40px));
	background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.modal-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 13px; }
.modal-body { padding: 12px; }
.modal-foot {
	display: flex; justify-content: flex-end; gap: 8px;
	padding: 10px 12px; border-top: 1px solid var(--line);
}

.export-info { font-size: 11.5px; color: var(--fg-dim); line-height: 1.7; margin-bottom: 10px; }
.export-info b { color: var(--fg); }
.export-info .warn { color: var(--warn); }

.export-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.export-fields .field input {
	width: 66px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
	color: var(--fg); font: inherit; font-size: 11px; padding: 3px 6px; outline: none;
}
.export-fields .field select {
	background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
	border-radius: 4px; padding: 3px 4px; font: inherit; font-size: 11px;
}
.export-fields .field input:focus, .export-fields .field select:focus { border-color: var(--accent-dim); }

.export-progress { margin-top: 12px; }
.export-bar-track { height: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.export-bar { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.export-progress-text { margin-top: 5px; font-size: 11px; color: var(--fg-dim); }

.export-error {
	margin-top: 10px; padding: 7px 9px; font-size: 11.5px; line-height: 1.6;
	color: var(--err); background: rgba(226, 96, 79, .1);
	border: 1px solid rgba(226, 96, 79, .35); border-radius: 4px; word-break: break-word;
}

@media (max-width: 1100px) {
	body { grid-template-columns: 220px minmax(0, 1fr); }
	#detail { display: none; }
}