/*!
 * HP Portal 设计系统 v1.1
 * ------------------------------------------------------------------
 * 从控制台交互原型（site/console-prototype.html）沉淀而来：配色、卡片、
 * KPI、徽章、表格、Tab、时间线、模态框、Toast、开关、进度条。
 *
 * 设计 token 与主站（主题 page-landing.php）保持一致：
 *   navy  #132246 / #1c3266 / #23407e   （深蓝：品牌与结构色）
 *   copper #f59e0b / #e8890c             （铜橙：主强调色）
 *   blue  #2da9e0                        （蓝：信息色）
 *   ok #16a34a  warn #e8890c  bad #dc2626
 *
 * 命名约定：全部以 hp- 前缀，避免与 WP 主题/插件冲突。
 * 兼容性：旧的 .hp-card/.hp-btn/.hp-tag/.hp-muted/.hp-metric/.hp-tile/.hp-grid
 *         全部保留（expert-board 等页面仍在用），只做视觉增强、不改语义。
 */

:root {
	--hp-bg: #f7f8fb;
	--hp-card: #ffffff;
	--hp-line: #e4e8f0;
	--hp-line2: #eef1f7;
	--hp-ink: #1a2437;
	--hp-muted: #5d6b85;
	--hp-faint: #8b97ad;
	--hp-navy: #132246;
	--hp-navy2: #1c3266;
	--hp-navy3: #23407e;
	--hp-copper: #e8890c;
	--hp-copper2: #f59e0b;
	--hp-blue: #2da9e0;
	--hp-ok: #16a34a;
	--hp-warn: #e8890c;
	--hp-bad: #dc2626;
	--hp-purple: #7c5cff;
	--hp-radius: 14px;
	--hp-radius-s: 10px;
	--hp-shadow: 0 10px 28px rgba(19, 34, 70, .08);
}

/* ================= 基础 ================= */
body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
	margin: 0;
	background: var(--hp-bg);
	color: var(--hp-ink);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
.hp-wrap { max-width: 960px; margin: 0 auto; padding: 24px; }
.hp-mono { font-family: "SF Mono", Consolas, "Cascadia Code", Menlo, monospace; }
.hp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.hp-muted { color: var(--hp-muted); font-size: 13px; line-height: 1.6; }
.hp-ok, .hp-up { color: var(--hp-ok); }
.hp-warn { color: var(--hp-copper); }
.hp-err, .hp-down { color: var(--hp-bad); }
.hp-hide { display: none !important; }
.hp-nowrap { white-space: nowrap; }
a { color: var(--hp-navy3); }

h1 { font-size: 26px; line-height: 1.35; margin: 0 0 6px; color: var(--hp-navy); letter-spacing: -.3px; }
h2 { font-size: 19px; margin: 0 0 10px; color: var(--hp-navy); }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--hp-navy); }
p { margin: 0 0 10px; }

/* 面包屑（控制台自身不显示） */
.hp-crumb { font-size: 12px; color: var(--hp-faint); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.hp-crumb a { color: var(--hp-faint); text-decoration: none; }
.hp-crumb a:hover { color: var(--hp-copper); }

/* 页头：标题 + 副标题 + 右侧动作 */
.hp-head-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.hp-head-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.hp-page-sub { color: var(--hp-muted); font-size: 13.5px; margin: 0; max-width: 640px; }

/* 图标（h1 内 emoji 的容器） */
.hp-ic { margin-right: 4px; }

/* ================= 卡片与面板 ================= */
.hp-card {
	background: var(--hp-card);
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	padding: 16px 18px;
	margin-bottom: 16px;
}
.hp-card.pad0 { padding: 0; overflow: hidden; }
/* 卡片头（标题 + 右侧动作）与卡身体 */
.hp-card-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--hp-line);
	font-size: 14px;
	color: var(--hp-navy);
	flex-wrap: wrap;
}
.hp-card-h strong { font-weight: 700; }
.hp-card-b { padding: 14px 16px; }
.hp-panel {
	background: var(--hp-card);
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	overflow: hidden;
	margin-bottom: 16px;
}
.hp-h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--hp-navy);
	margin: 0 0 10px;
	letter-spacing: .2px;
}

/* ================= 栅格 ================= */
.hp-grid { display: grid; gap: 14px; }
.hp-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hp-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hp-g23 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hp-g32 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.hp-gap { gap: 14px; }

/* ================= 按钮 ================= */
.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: #fff !important;
	background: linear-gradient(135deg, var(--hp-copper2), var(--hp-copper));
	border: 1px solid transparent;
	border-radius: var(--hp-radius-s);
	padding: 10px 16px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s, box-shadow .2s, filter .2s;
	box-shadow: 0 4px 12px rgba(232, 137, 12, .22);
	white-space: nowrap;
	box-sizing: border-box;
	max-width: 100%;
}
.hp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232, 137, 12, .3); }
.hp-btn:active { transform: translateY(0); }
.hp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.hp-btn.ghost {
	color: var(--hp-navy2) !important;
	background: #fff;
	border-color: var(--hp-line);
	box-shadow: none;
}
.hp-btn.ghost:hover { border-color: var(--hp-copper2); color: var(--hp-copper) !important; box-shadow: 0 3px 10px rgba(19, 34, 70, .07); }
.hp-btn.navy {
	background: linear-gradient(135deg, var(--hp-navy3), var(--hp-navy2));
	box-shadow: 0 4px 12px rgba(19, 34, 70, .2);
}
.hp-btn.navy:hover { box-shadow: 0 6px 16px rgba(19, 34, 70, .28); }
.hp-btn.sm { font-size: 12.5px; padding: 8px 13px; }
.hp-btn.xs { font-size: 12px; padding: 6px 10px; border-radius: 8px; }

/* ================= KPI ================= */
.hp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.hp-kpi {
	background: var(--hp-card);
	border: 1px solid var(--hp-line);
	border-left: 3px solid var(--hp-line);
	border-radius: var(--hp-radius);
	padding: 13px 15px;
	box-shadow: 0 3px 10px rgba(19, 34, 70, .045);
	min-width: 0;
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
a.hp-kpi:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow); }
/* 标签行：两套命名（.hp-kpi-l 与 .lbl）都支持 */
.hp-kpi-l,
.hp-kpi > .lbl {
	display: block;
	font-size: 12px;
	color: var(--hp-muted);
	margin-bottom: 3px;
	font-weight: 500;
}
/* 数值行：两套命名（.hp-kpi-v 与 .num）都支持 */
.hp-kpi-v,
.hp-kpi .num,
.hp-kpi > b.num {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--hp-navy);
	letter-spacing: -.6px;
	word-break: break-word;
}
.hp-kpi .num em { font-size: 13px; font-style: normal; font-weight: 600; color: var(--hp-muted); margin-left: 3px; }
/* 说明行：两套命名（.hp-kpi-s 与 .dt）都支持 */
.hp-kpi-s,
.hp-kpi > .dt {
	display: block;
	font-size: 11.5px;
	color: var(--hp-faint);
	margin-top: 2px;
	font-weight: 400;
}
.hp-kpi.k-ok { border-left-color: var(--hp-ok); }
.hp-kpi.k-ok .hp-kpi-v, .hp-kpi.k-ok .num { color: var(--hp-ok); }
.hp-kpi.k-bad { border-left-color: var(--hp-bad); }
.hp-kpi.k-bad .hp-kpi-v, .hp-kpi.k-bad .num { color: var(--hp-bad); }
.hp-kpi.k-warn { border-left-color: var(--hp-warn); }
.hp-kpi.k-warn .hp-kpi-v, .hp-kpi.k-warn .num { color: var(--hp-warn); }
.hp-kpi.k-blue { border-left-color: var(--hp-blue); }
.hp-kpi.k-blue .hp-kpi-v, .hp-kpi.k-blue .num { color: #1b86b8; }
.hp-kpi.k-pur { border-left-color: var(--hp-purple); }
.hp-kpi.k-pur .hp-kpi-v, .hp-kpi.k-pur .num { color: #6247d6; }

/* ================= 徽章 / 标签 ================= */
.hp-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.6;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--hp-line2);
	color: var(--hp-muted);
	border: 1px solid var(--hp-line);
	white-space: nowrap;
}
.hp-badge.b-ok { background: #e8f8ee; color: #0f8a3d; border-color: #bfe9cf; }
.hp-badge.b-warn { background: #fef4e5; color: #b76a06; border-color: #fbe0b8; }
.hp-badge.b-bad { background: #fdeaea; color: #b91c1c; border-color: #f8cccc; }
.hp-badge.b-info { background: #e7f6fd; color: #16759c; border-color: #c3e7f7; }
.hp-badge.b-gray { background: #f1f3f8; color: #5d6b85; border-color: #e0e5ee; }
.hp-badge.b-pur { background: #efeafd; color: #6247d6; border-color: #ddd3fb; }
.hp-tag {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--hp-line2);
	color: var(--hp-muted);
	border: 1px solid var(--hp-line);
	white-space: nowrap;
}

/* 状态点 */
.hp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hp-faint); vertical-align: middle; margin-right: 5px; }
.hp-dot.ok { background: var(--hp-ok); }
.hp-dot.bad { background: var(--hp-bad); }
.hp-dot.warn { background: var(--hp-warn); }
.hp-pulse { animation: hp-pulse 1.8s ease-in-out infinite; }
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ================= 表格 ================= */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
	text-align: left;
	font-weight: 600;
	color: var(--hp-muted);
	font-size: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hp-line);
	background: var(--hp-line2);
	white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--hp-line2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcfe; }
.hp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.hp-tbl th {
	text-align: left;
	font-weight: 600;
	color: var(--hp-muted);
	font-size: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hp-line);
	background: var(--hp-line2);
	white-space: nowrap;
}
.hp-tbl td { padding: 11px 12px; border-bottom: 1px solid var(--hp-line2); vertical-align: top; }
.hp-tbl tbody tr:last-child td { border-bottom: 0; }
.hp-tbl tbody tr:hover td { background: #fbfcfe; }
.hp-tbl-wrap { overflow-x: auto; max-width: 100%; }
.hp-th-r { text-align: right; }
/* 表格容器内直接放 table 时也保证不撑破（.hp-panel 已 overflow:hidden，但裸容器需要） */
.hp-card > table, .hp-panel > table { display: block; overflow-x: auto; }
@media (min-width: 901px) {
	.hp-card > table, .hp-panel > table { display: table; overflow-x: visible; }
}

/* 数值水位条 */
.hp-bar { display: block; height: 6px; border-radius: 999px; background: var(--hp-line2); overflow: hidden; }
.hp-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--hp-blue); transition: width .3s; }
.hp-bar > i.w { background: var(--hp-copper2); }
.hp-bar > i.b { background: var(--hp-bad); }
.hp-bar > i.bl { background: var(--hp-ok); }

/* 评分 */
.hp-score { font-weight: 700; font-size: 15px; color: var(--hp-faint); }
.hp-score.s-ok { color: var(--hp-ok); }
.hp-score.s-blue { color: var(--hp-blue); }
.hp-score.s-warn { color: var(--hp-warn); }
.hp-score.s-bad { color: var(--hp-bad); }

/* ================= 指标卡（旧版兼容） ================= */
.hp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.hp-metric {
	background: var(--hp-card);
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	padding: 13px 15px;
}
.hp-metric b, .hp-metric .num { display: block; font-size: 22px; font-weight: 700; color: var(--hp-navy); line-height: 1.3; }
.hp-tile {
	background: var(--hp-card);
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	padding: 15px;
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hp-tile:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow); border-color: #d3dae8; }

/* ================= Tab ================= */
.hp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hp-line); padding: 0 14px; flex-wrap: wrap; }
.hp-tab {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--hp-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 11px 12px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
	white-space: nowrap;
}
.hp-tab b { color: var(--hp-faint); font-weight: 600; margin-left: 3px; }
.hp-tab:hover { color: var(--hp-navy2); }
.hp-tab.hp-on { color: var(--hp-copper); border-bottom-color: var(--hp-copper2); }
.hp-tab.hp-on b { color: var(--hp-copper); }

/* ================= Segmented（视图切换 / 分段选择器） ================= */
.hp-seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	background: var(--hp-line2);
	border: 1px solid var(--hp-line);
	border-radius: 999px;
}
.hp-seg button {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--hp-muted);
	background: none;
	border: 0;
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s, background .2s, box-shadow .2s;
}
.hp-seg button:hover { color: var(--hp-navy2); }
.hp-seg button.on {
	color: #fff;
	background: var(--hp-navy2);
	box-shadow: 0 2px 6px rgba(19, 34, 70, .18);
}
.hp-seg button.on:hover { color: #fff; }

/* 窄屏：页头动作区必须可收缩。.hp-head-act 是 flex-shrink:0 +
   以 max-content 计宽，窄屏下（如拓扑页的「视图切换 + 图选择 + 刷新」）
   会撑破文档造成横向溢出（实测 500px 档溢出 25px）。 */
@media (max-width: 720px) {
	.hp-head-act { flex-shrink: 1; max-width: 100%; }
	.hp-seg { flex: 0 1 auto; }
	.hp-seg button { padding: 6px 10px; }
}

/* ================= 时间线 ================= */
.hp-tl { list-style: none; margin: 0; padding: 0; }
.hp-tl li, .hp-tl-item {
	position: relative;
	padding: 0 0 13px 18px;
	border-left: 1px solid var(--hp-line);
	font-size: 13px;
}
.hp-tl li:last-child, .hp-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.hp-tl li::before, .hp-tl-item::before {
	content: "";
	position: absolute;
	left: -4.5px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hp-blue);
	border: 1px solid #fff;
}
.hp-tl li.ok::before, .hp-tl-item.ok::before { background: var(--hp-ok); }
.hp-tl li.warn::before, .hp-tl-item.warn::before { background: var(--hp-warn); }
.hp-tl li.bad::before, .hp-tl-item.bad::before { background: var(--hp-bad); }
.hp-tl li.info::before, .hp-tl-item.info::before { background: var(--hp-blue); }
.hp-tl b, .hp-tl-t { display: block; color: var(--hp-ink); font-weight: 600; }
.hp-tl span, .hp-tl-d { color: var(--hp-muted); font-size: 12.5px; line-height: 1.6; }

/* ================= 空状态 ================= */
.hp-empty {
	text-align: center;
	color: var(--hp-faint);
	font-size: 13px;
	padding: 32px 18px;
	line-height: 1.8;
}
.hp-empty .e-ic { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.hp-empty p { margin: 0; color: var(--hp-faint); }

/* ================= 骨架屏 ================= */
.hp-sk, .hp-spark {
	display: block;
	background: linear-gradient(90deg, var(--hp-line2) 25%, #f6f8fc 37%, var(--hp-line2) 63%);
	background-size: 400% 100%;
	animation: hp-sk 1.3s ease infinite;
	border-radius: 6px;
	height: 12px;
}
@keyframes hp-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ================= 图表 ================= */
.hp-chart { width: 100%; height: 260px; }
.hp-cols { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= 迷你列表 ================= */
.hp-mini { display: flex; flex-direction: column; gap: 0; }
.hp-mini-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	padding: 7px 0;
	border-bottom: 1px solid var(--hp-line2);
}
.hp-mini-row:last-child { border-bottom: 0; }
.hp-mini-row > span { color: var(--hp-muted); }
.hp-mini-row > b { color: var(--hp-ink); font-weight: 600; }
.hp-mini-row a { text-decoration: none; color: var(--hp-navy3); }
.hp-mini-row a:hover { color: var(--hp-copper); }

/* ================= 表单 ================= */
.hp-field { margin-bottom: 12px; }
.hp-field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--hp-muted); margin-bottom: 5px; }
.hp-input {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 13.5px;
	padding: 9px 11px;
	color: var(--hp-ink);
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-s);
	transition: border-color .2s, box-shadow .2s;
}
.hp-input:focus {
	outline: none;
	border-color: var(--hp-copper2);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, .15);
}
.hp-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input:not([type="checkbox"]):not([type="radio"]):not(.hp-input),
select,
textarea {
	font: inherit;
	font-size: 13.5px;
	padding: 8px 11px;
	color: var(--hp-ink);
	background: #fff;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius-s);
	box-sizing: border-box;
	max-width: 100%;
}

/* 筹码选择器 */
.hp-chipset { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-chip {
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1px solid var(--hp-line);
	background: #fff;
	color: var(--hp-muted);
	cursor: pointer;
	transition: all .18s;
}
.hp-chip:hover { border-color: var(--hp-copper2); color: var(--hp-copper); }
.hp-chip.hp-on {
	background: linear-gradient(135deg, var(--hp-copper2), var(--hp-copper));
	border-color: transparent;
	color: #fff;
}

/* 开关 */
.hp-sw {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 23px;
	border-radius: 999px;
	background: #ccd4e0;
	cursor: pointer;
	transition: background .2s;
	border: 0;
	padding: 0;
	flex-shrink: 0;
}
.hp-sw::after {
	content: "";
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: transform .2s;
}
.hp-sw.hp-on { background: var(--hp-ok); }
.hp-sw.hp-on::after { transform: translateX(19px); }

/* ================= 代码 ================= */
code {
	font-family: "SF Mono", Consolas, "Cascadia Code", Menlo, monospace;
	font-size: 12px;
	background: var(--hp-line2);
	border: 1px solid var(--hp-line);
	border-radius: 6px;
	padding: 1px 5px;
	color: var(--hp-navy2);
}
.hp-code {
	font-family: "SF Mono", Consolas, "Cascadia Code", Menlo, monospace;
	font-size: 12px;
	background: var(--hp-line2);
	border: 1px solid var(--hp-line);
	border-radius: 6px;
	padding: 2px 6px;
	color: var(--hp-navy2);
}
pre {
	font-family: "SF Mono", Consolas, "Cascadia Code", Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	background: #0e1830;
	color: #cfe3ff;
	padding: 12px 14px;
	border-radius: var(--hp-radius-s);
	overflow: auto;
	margin: 0 0 10px;
}
.hp-pre {
	font-family: "SF Mono", Consolas, "Cascadia Code", Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	background: #0e1830;
	color: #cfe3ff;
	padding: 12px 14px;
	border-radius: var(--hp-radius-s);
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-all;
	margin: 0 0 10px;
}

/* ================= 模态框 ================= */
.hp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .5);
	backdrop-filter: blur(2px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9998;
	padding: 20px;
}
/* 显示开关：hp-portal.js 的 hp.openModal() 加的是 .hp-on；.hp-open 为历史写法（导航折叠复用），两者都认。
   🚨 只写 .hp-open 会让所有弹窗「点不动」——2026-09-28 线上故障（发起巡检无反应）。 */
.hp-overlay.hp-on,
.hp-overlay.hp-open { display: flex; }
.hp-modal {
	background: #fff;
	border-radius: var(--hp-radius);
	box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: hp-in .22s ease;
}
@keyframes hp-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.hp-modal-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 18px;
	border-bottom: 1px solid var(--hp-line);
	font-size: 15px;
	color: var(--hp-navy);
	flex-shrink: 0;
}
.hp-modal-h { padding: 15px 18px; border-bottom: 1px solid var(--hp-line); font-size: 15px; }
.hp-modal-x {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--hp-faint);
	cursor: pointer;
	padding: 0 4px;
}
.hp-modal-x:hover { color: var(--hp-bad); }
.hp-modal-bd, .hp-modal-b { padding: 16px 18px; overflow: auto; }
.hp-modal-ft, .hp-modal-f {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 13px 18px;
	border-top: 1px solid var(--hp-line);
	background: #fbfcfe;
	flex-shrink: 0;
}

/* ================= Toast ================= */
#hp-toast {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	pointer-events: none;
}
.hp-toast {
	background: #1a2437;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 17px;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(15, 23, 42, .3);
	animation: hp-toast-in .24s ease;
	max-width: 90vw;
}
.hp-toast.t-ok { background: #0f8a3d; }
.hp-toast.t-warn { background: #b76a06; }
.hp-toast.t-bad { background: #b91c1c; }
@keyframes hp-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ================= 拓扑容器 ================= */
.hp-topo { width: 100%; height: 620px; }

/* ================= 文章行（我的专栏文章） ================= */
.hp-art {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 14px;
	border-bottom: 1px solid var(--hp-line2);
}
.hp-art:last-child { border-bottom: 0; }
.hp-art:hover { background: #fbfcfe; }
.hp-art-main { min-width: 0; }
.hp-art-title { font-size: 15px; font-weight: 600; color: var(--hp-ink); margin-bottom: 4px; }
.hp-art-ex {
	font-size: 12.5px;
	color: var(--hp-muted);
	line-height: 1.65;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hp-art-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.hp-art-act { display: flex; gap: 6px; flex-shrink: 0; }

/* ================= Credit 余额区 ================= */
.hp-bal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 20px;
	align-items: center;
}
.hp-bal-main { text-align: center; padding: 6px 0; }
.hp-bal-l { font-size: 12.5px; color: var(--hp-muted); }
.hp-bal-v {
	font-size: 46px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -1px;
	background: linear-gradient(135deg, var(--hp-navy2), var(--hp-copper2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hp-bal-u { font-size: 12px; color: var(--hp-faint); letter-spacing: 2px; }
.hp-bal-side { border-left: 1px solid var(--hp-line); padding-left: 20px; }

/* ================= 页脚 ================= */
.hp-foot {
	margin-top: 28px;
	padding: 18px 0 6px;
	border-top: 1px solid var(--hp-line);
	color: var(--hp-faint);
	font-size: 12px;
	text-align: center;
	line-height: 1.9;
}
.hp-foot a { color: var(--hp-faint); text-decoration: none; }
.hp-foot a:hover { color: var(--hp-copper); }

/* ================= 通栏菜单（navbar） ================= */
.hp-navbar { background: #212529; margin: 0 0 20px; }
.hp-navbar-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.hp-navbar-brand {
	color: #fff !important;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	margin-right: 12px;
	white-space: nowrap;
}
.hp-navbar-brand:hover { color: #fff !important; }
.hp-navbar-collapse {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
}
.hp-navbar-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hp-navbar-nav a, .hp-nav-link {
	display: block;
	color: rgba(255, 255, 255, .55) !important;
	text-decoration: none;
	font-size: 14px;
	padding: 7px 11px;
	border-radius: 6px;
	white-space: nowrap;
	transition: color .18s, background .18s;
}
.hp-navbar-nav a:hover, .hp-nav-link:hover { color: rgba(255, 255, 255, .9) !important; }
.hp-navbar-nav a.hp-active, .hp-nav-link.hp-active {
	color: #fff !important;
	background: rgba(255, 255, 255, .14);
}
.hp-navbar-right { display: flex; align-items: center; gap: 2px; }
.hp-navbar-right a {
	display: block;
	color: rgba(255, 255, 255, .55) !important;
	text-decoration: none;
	font-size: 13px;
	padding: 7px 10px;
	border-radius: 6px;
	white-space: nowrap;
}
.hp-navbar-right a:hover { color: rgba(255, 255, 255, .9) !important; }
.hp-navbar-toggle {
	display: none;
	background: none;
	border: 1px solid rgba(255, 255, 255, .3);
	color: rgba(255, 255, 255, .85);
	font: inherit;
	font-size: 13px;
	padding: 5px 11px;
	border-radius: 6px;
	cursor: pointer;
	margin-left: auto;
}

/* ================= 用户区（头像 + 下拉菜单）=================
   控制台 navbar（深色底）与门户主页头部（浅色底）共用同一套结构，
   靠 .hp-user-dark 区分配色。无头像图片：用显示名首字做字母头像。
   注：.hp-navbar-right 内的 a 有通用浅色样式，菜单内链接需更高优先级覆盖。 */
.hp-user { position: relative; display: inline-block; }
.hp-user-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: none; border: 1px solid transparent; cursor: pointer;
	font: inherit; font-size: 13px; color: var(--hp-navy);
	padding: 4px 8px 4px 4px; border-radius: 999px;
	transition: background .18s, border-color .18s;
}
.hp-user-btn:hover { background: var(--hp-line2); border-color: var(--hp-line); }
.hp-user-caret { font-size: 10px; opacity: .7; }
.hp-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: linear-gradient(135deg, var(--hp-copper), #f0a83c);
	color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
	flex: 0 0 auto; box-shadow: 0 1px 3px rgba(19, 34, 70, .18);
}
.hp-avatar.lg { width: 38px; height: 38px; font-size: 17px; }
.hp-avatar.xl { width: 60px; height: 60px; font-size: 26px; }

.hp-user-menu {
	position: absolute; right: 0; top: calc(100% + 8px);
	min-width: 236px; z-index: 60;
	background: #fff; border: 1px solid var(--hp-line);
	border-radius: 12px; box-shadow: 0 12px 32px rgba(19, 34, 70, .16);
	padding: 6px; display: none;
}
.hp-user.open .hp-user-menu { display: block; }
.hp-user-hd {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px 10px; border-bottom: 1px solid var(--hp-line2); margin-bottom: 5px;
}
.hp-user-hd b { display: block; font-size: 13px; color: var(--hp-navy); }
/* ⚠️ 只给 .hp-user-sub 加样式：头部左侧的字母头像也是 <span class="hp-avatar">，
   用 `.hp-user-hd span` 会把它一起命中（font-size 被压小、颜色被改）。 */
.hp-user-hd .hp-user-sub { display: block; font-size: 11px; color: var(--hp-faint); margin-top: 2px; font-family: var(--hp-mono, monospace); word-break: break-all; }
.hp-user-menu a {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 10px; border-radius: 8px;
	color: var(--hp-navy) !important; font-size: 13px; text-decoration: none;
	transition: background .16s;
}
.hp-user-menu a:hover { background: var(--hp-line2); color: var(--hp-navy) !important; }
.hp-user-menu a > span:first-child { width: 18px; text-align: center; font-size: 14px; }
.hp-user-menu .hp-user-sep { height: 1px; background: var(--hp-line2); margin: 5px 4px; }
.hp-user-menu a em {
	margin-left: auto; font-style: normal; font-size: 11px; color: var(--hp-copper);
	font-weight: 600; font-family: var(--hp-mono, monospace);
}
.hp-user-menu a.danger { color: var(--hp-bad) !important; }
.hp-user-menu a.danger:hover { background: #fef2f2; color: var(--hp-bad) !important; }

/* 深色底（navbar 内）：按钮文字与边框换成浅色 */
.hp-user-dark .hp-user-btn { color: rgba(255, 255, 255, .82); }
.hp-user-dark .hp-user-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.hp-user-dark .hp-avatar { color: #fff; }

/* ================= AI / 知识库视觉标记 ================= */
/* 徽章：紫色系 = 大模型 / AI 相关能力 */
.hp-ai-badge {
	margin-left: 8px; vertical-align: middle;
	background: linear-gradient(135deg, #7c5cff, #a78bfa) !important;
	color: #fff !important; border: 0 !important;
}
.hp-ai-card { border-left: 3px solid #7c5cff; }
.hp-ai-tl li.pur::before { background: #7c5cff; }
.hp-ai-pill {
	display: inline-flex; align-items: center; gap: 5px;
	background: #f3f0ff; color: #6d4bd8;
	border: 1px solid #e0d8ff; border-radius: 999px;
	padding: 2px 9px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.hp-ai-note {
	display: flex; gap: 9px; align-items: flex-start;
	background: #f8f6ff; border: 1px solid #eae4ff; border-radius: 10px;
	padding: 10px 12px; margin-top: 12px;
}
.hp-ai-note .i { font-size: 15px; line-height: 1.4; }
.hp-ai-note p { margin: 0; font-size: 12px; color: var(--hp-sub); line-height: 1.7; }

/* ================= 实时巡检：链路指示 ================= */
/* 每行右侧的迷你链路点：下发 → 认领 → 采集 → AI → 结论 */
.li-flow { display: flex; align-items: center; gap: 4px; }
.li-flow i {
	display: block; width: 9px; height: 9px; border-radius: 50%;
	background: var(--hp-line); flex: 0 0 auto;
	transition: background .2s, transform .2s;
}
.li-flow i.on { background: var(--hp-ok); }
.li-flow i.on.ai { background: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .16); }
.li-flow i.cur { background: var(--hp-copper); animation: hpFlowPulse 1.4s ease-in-out infinite; }
@keyframes hpFlowPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.45); opacity: .6; }
}

/* 详情弹窗里的采集摘要（保留换行，比 <pre> 更柔和） */
.hp-pre-sum {
	white-space: pre-wrap; word-break: break-word;
	font-family: var(--hp-mono, monospace); font-size: 12px; line-height: 1.75;
	background: var(--hp-line2); border: 1px solid var(--hp-line);
	border-radius: 10px; padding: 11px 13px; margin: 0;
	max-height: 240px; overflow: auto; color: var(--hp-text);
}

/* ================= 我的账户 ================= */
.hp-id-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hp-id-main { display: flex; align-items: center; gap: 16px; }
.hp-id-main h2 { margin: 0; font-size: 20px; color: var(--hp-navy); }
.hp-id-bal {
	display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
	padding-left: 20px; border-left: 1px solid var(--hp-line);
}
.hp-id-bal .lbl { font-size: 12px; color: var(--hp-sub); }
.hp-id-bal .num { font-size: 26px; font-weight: 700; color: var(--hp-navy); line-height: 1; }
.hp-id-bal .num em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--hp-sub); margin-left: 3px; }

/* ================= 响应式 ================= */
@media (max-width: 900px) {
	.hp-g2, .hp-g3, .hp-g23, .hp-g32 { grid-template-columns: 1fr; }
	.hp-frow { grid-template-columns: 1fr; }
	.hp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp-bal { grid-template-columns: 1fr; gap: 12px; }
	.hp-bal-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hp-line); padding-top: 12px; }
}
@media (max-width: 860px) {
	.hp-navbar-toggle { display: block; }
	.hp-navbar-collapse { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 6px; }
	.hp-navbar-collapse.hp-open { display: flex; }
	.hp-navbar-nav { flex-direction: column; width: 100%; }
	.hp-navbar-nav a, .hp-nav-link { width: 100%; box-sizing: border-box; }
	.hp-navbar-right { width: 100%; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 4px; }
	/* 窄屏折叠时：用户区占满整行、按钮靠左，下拉菜单相对整行定位并从右缘展开。
	   ⚠️ 不能让 .hp-user 保持 inline-block + margin-left:auto —— 绝对定位的菜单
	   以收缩后的 inline-block 为包含块，宽度会算成 0（实测 w=0），看起来「菜单打不开」。 */
	.hp-navbar-right .hp-user { display: block; width: 100%; margin: 0; }
	.hp-user-btn { width: 100%; justify-content: flex-start; }
	.hp-user-menu { left: 0; right: auto; min-width: 0; width: 100%; }
	.hp-id-card { flex-direction: column; align-items: flex-start; }
	.hp-id-bal { padding-left: 0; border-left: 0; border-top: 1px solid var(--hp-line); padding-top: 12px; align-items: flex-start; width: 100%; }
}
@media (max-width: 600px) {
	.hp-wrap { padding: 18px 16px 40px; }
	h1 { font-size: 20px; }
	.hp-kpi-v, .hp-kpi .num { font-size: 22px; }
	.hp-head-row { align-items: flex-start; }
	.hp-kpis { grid-template-columns: 1fr; }
	.hp-art { flex-direction: column; }
	.hp-art-act { align-self: flex-end; }
	.hp-topo { height: 460px; }
}

/* ===== HP-7 链路追踪（实时巡检·任务详情弹窗内）===== */
.hp-trace { max-height: 260px; overflow-y: auto; }
.hp-trace-row { border-bottom: 1px dashed var(--hp-line2); padding: 7px 0; }
.hp-trace-row:last-child { border-bottom: 0; }
.hp-trace-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.hp-trace-t {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px; color: var(--hp-faint);
}
.hp-trace-pre {
	max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all;
	margin: 6px 0 0; font-size: 12px;
}
@media (max-width: 600px) {
	.hp-trace { max-height: 200px; }
	.hp-trace-pre { max-height: 180px; }
}