/* ============ 纹样宇宙：全屏星系 ============ */
.pu-page {
	position: fixed;
	inset: 0;
	z-index: 60;
	overflow: hidden;
	background: radial-gradient(1200px 700px at 30% 25%, #101536 0%, #070a18 45%, #03040c 100%);
	color: #e8ecff;
	font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 顶栏：LOGO + 筛选（左侧） ---------- */
.pu-topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px 10px;
	background: linear-gradient(180deg, rgba(4,6,16,0.82) 0%, rgba(4,6,16,0) 100%);
	pointer-events: none;
}
.pu-topbar > * { pointer-events: auto; }
.pu-logo { width: 44px; height: 44px; object-fit: contain; background: transparent; }
.pu-head-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.pu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pu-chip {
	border: 1px solid rgba(140,170,255,0.35);
	background: rgba(18,26,54,0.6);
	color: #c6d4ff;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: all .18s;
	backdrop-filter: blur(4px);
}
.pu-chip:hover { border-color: #8fd3ff; color: #fff; }
.pu-chip.active { background: linear-gradient(90deg, #e8383d, #ff5a60); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(232,56,61,0.6); }
.pu-selects { display: flex; gap: 8px; align-items: center; }
.pu-select {
	background: rgba(18,26,54,0.75);
	border: 1px solid rgba(140,170,255,0.35);
	color: #c6d4ff;
	border-radius: 8px;
	padding: 5px 10px;
	font-size: 12px;
	backdrop-filter: blur(4px);
}
.pu-select option { background: #0c1028; color: #c6d4ff; }

/* ---------- 左侧竖排关系图例（类似右侧主导航） ---------- */
.pu-legend {
	position: absolute;
	left: 24px;
	top: 150px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 7px;
	background: rgba(8,12,30,0.72);
	border: 1px solid rgba(140,170,255,0.22);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 12px;
	color: #aab8e0;
	backdrop-filter: blur(6px);
}
.pu-leg-title { font-size: 11px; color: #6f7fa8; letter-spacing: 1px; margin: 2px 0 0; }
.pu-leg-title:first-child { margin-top: 0; }
.pu-leg { display: inline-flex; align-items: center; gap: 8px; color: #b9c6ea; }
.pu-leg-svg { flex: none; display: block; }
.pu-leg em { font-style: normal; }
.pu-eth-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex: none; }
.pu-leg-sep { display: inline-block; width: 1px; height: 14px; background: rgba(140,170,255,0.25); margin: 0 2px; }

/* ---------- 星系画布 ---------- */
.pu-stars { position: absolute; inset: 0; z-index: 1; }
.pu-chart { position: absolute; inset: 0; z-index: 2; }
.pu-hint {
	position: absolute;
	right: 28px;
	bottom: 40px;
	z-index: 5;
	font-size: 12px;
	color: #6f7fa8;
	background: rgba(8,12,30,0.6);
	padding: 6px 12px;
	border-radius: 8px;
}
.pu-error { color: #ff9d9d; text-align: center; margin-top: 40vh; font-size: 14px; }

/* ---------- 详情面板 ---------- */
.pu-panel {
	position: absolute;
	top: 90px;
	right: 24px;
	bottom: 80px;
	width: 340px;
	max-width: calc(100vw - 40px);
	z-index: 8;
	background: rgba(10,14,34,0.92);
	border: 1px solid rgba(140,170,255,0.3);
	border-radius: 14px;
	padding: 18px 18px 22px;
	overflow-y: auto;
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.6);
	animation: puSlide .22s ease-out;
}
@keyframes puSlide { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.pu-panel-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 28px;
	height: 28px;
	border: none;
	background: rgba(255,255,255,0.08);
	color: #cfd9ff;
	font-size: 18px;
	border-radius: 50%;
	cursor: pointer;
}
.pu-panel-close:hover { background: rgba(255,255,255,0.2); }
.pu-panel-head h2 { margin: 4px 0 14px; font-size: 22px; color: #fff; letter-spacing: 1px; padding-right: 26px; }
.pu-type-badge { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 999px; letter-spacing: 1px; }
.pu-type-恒星 { background: rgba(255,214,102,0.18); color: #ffd666; border: 1px solid rgba(255,214,102,0.5); }
.pu-type-行星 { background: rgba(92,201,255,0.16); color: #5cc9ff; border: 1px solid rgba(92,201,255,0.45); }
.pu-type-卫星 { background: rgba(154,165,177,0.16); color: #b8c2cc; border: 1px solid rgba(154,165,177,0.4); }
.pu-type-源流 { background: rgba(255,143,107,0.16); color: #ff8f6b; border: 1px solid rgba(255,143,107,0.5); }
.pu-meta { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.pu-meta td { padding: 6px 4px; border-bottom: 1px dashed rgba(140,170,255,0.18); vertical-align: top; }
.pu-meta td:first-child { width: 58px; color: #7f90bd; white-space: nowrap; }
.pu-meta td:last-child { color: #dbe3ff; line-height: 1.55; }
.pu-panel-img { margin: 4px 0 12px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(140,170,255,0.25); background: #0a0e22; }
.pu-panel-img img { width: 100%; max-height: 180px; object-fit: contain; display: block; }
.pu-panel-rel-title { font-size: 14px; color: #8fd3ff; margin: 14px 0 8px; letter-spacing: 1px; }
.pu-rels { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.pu-rels li { padding: 8px 10px; margin-bottom: 8px; background: rgba(255,255,255,0.04); border-radius: 8px; color: #dbe3ff; }
.pu-rel-type { font-weight: 700; }
.pu-rel-note { margin: 4px 0 0; color: #aab8e0; font-size: 12px; line-height: 1.5; }
.pu-rel-evidence { margin: 4px 0 0; color: #6f7fa8; font-size: 11px; line-height: 1.5; }
.pu-panel-more { display: inline-block; margin-top: 12px; color: #8fd3ff; font-size: 13px; text-decoration: none; }
.pu-panel-more:hover { text-decoration: underline; }
.pu-self { color: #fff; }
.pu-rel-arrow { color: #6f7fa8; margin: 0 2px; }

/* ---------- 朝代时间轴 ---------- */
.pu-timeline {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 7;
	width: min(760px, calc(100vw - 60px));
	background: rgba(8,12,30,0.78);
	border: 1px solid rgba(140,170,255,0.25);
	border-radius: 12px;
	padding: 10px 18px 16px;
	backdrop-filter: blur(8px);
}
.pu-time-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pu-time-year { color: #ffd666; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.pu-time-dynasty { color: #8fd3ff; font-size: 13px; }
.pu-time-count { color: #6f7fa8; font-size: 12px; }
.pu-time-btns { margin-left: auto; display: flex; gap: 6px; }
.pu-time-btn {
	border: 1px solid rgba(140,170,255,0.35);
	background: rgba(18,26,54,0.7);
	color: #c6d4ff;
	font-size: 11px;
	border-radius: 999px;
	padding: 3px 12px;
	cursor: pointer;
}
.pu-time-btn:hover { border-color: #8fd3ff; color: #fff; }
#puTimeRange {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #6a5cff, #4dd0e1 35%, #ffd666 70%, #ff8f6b);
	outline: none;
	cursor: pointer;
}
#puTimeRange::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 30%, #e8383d);
	border: 2px solid rgba(255,255,255,0.6);
	box-shadow: 0 0 12px rgba(232,56,61,0.8);
}
.pu-time-ticks { position: relative; height: 18px; margin-top: 2px; }
.pu-tick {
	position: absolute;
	transform: translateX(-50%);
	font-size: 10px;
	color: #5f6f99;
	white-space: nowrap;
}
.pu-tick::before { content: ''; display: block; width: 1px; height: 5px; background: #3a4670; margin: 0 auto 3px; }

/* ---------- 深色全屏页：右侧主导航强制浅色 ---------- */
body.page-template-page-templatespattern-universe-php .side-nav-link,
body.page-template-page-templatespattern-universe-php .side-area.nav-dark .side-nav-link {
	color: rgba(255, 255, 255, .85);
}
body.page-template-page-templatespattern-universe-php .side-nav-link.active,
body.page-template-page-templatespattern-universe-php .side-area.nav-dark .side-nav-link.active {
	color: #fff;
}
body.page-template-page-templatespattern-universe-php .side-nav-divider,
body.page-template-page-templatespattern-universe-php .side-area.nav-dark .side-nav-divider {
	background: rgba(255, 255, 255, .18);
}
body.page-template-page-templatespattern-universe-php .translateSelectLanguage,
body.page-template-page-templatespattern-universe-php .side-area.nav-dark .translateSelectLanguage {
	color: rgba(255, 255, 255, .85);
}

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
	.pu-topbar { padding: 14px 16px 10px; gap: 10px; }
	.pu-logo { width: 36px; height: 36px; }
	.pu-chips { justify-content: flex-start; }
	.pu-legend { left: 12px; top: 168px; gap: 6px; padding: 10px 12px; }
	.pu-hint { right: 14px; bottom: 60px; max-width: 46%; text-align: right; }
	.pu-panel { top: auto; left: 14px; right: 14px; bottom: 110px; width: auto; max-height: 46%; }
	.pu-timeline { width: calc(100vw - 28px); bottom: 70px; padding: 8px 12px 12px; }
	.pu-time-count { display: none; }
}