/* ============================================================
   关于对话框 / 关于独立页 —— 深色玻璃科技风
   ------------------------------------------------------------
   V2.6.90 重设计（用户诉求：6 个卡片精简、不要出现滚动条）
   ------------------------------------------------------------
   旧版的问题不是"不好看"，而是**排得太高**：
     · 版本胶囊 hero 一行 + 三行系统信息表 + 6 张两行高的卡片，
       全部垂直堆叠；
     · .about-body 上还写了 max-height:min(58vh,460px) + overflow-y:auto。
     两者相加的结果是：768px 高的笔记本屏上必然出现滚动条，
     而"弹窗里还要滚"给人第一印象就是这页没做完。
   本版做法（只动排版，不动视觉语言）：
     · 三行信息表 → 一行元信息条（版本 · 发布时间 · 通道）；
     · 6 张卡 → 3 列 × 2 行，每张只留「名称 + 一行要点」，去掉序号大字；
     · 卡片宽度 560 → 720（弹窗内 max-width 自适应，窄屏自动降列）；
     · **彻底去掉 .about-body 的 max-height / overflow**，
       让高度由内容决定 —— 内容本来就只有 ~340px，不需要滚动容器兜底。
   视觉资产（深色玻璃、网格底纹、扫描线、渐变标题、发光描边）全部保留。

   ⚠ 外壳（.pm-about-mask / .pm-about-box）由 pm_about.js 动态构建，
     本文件不创建外壳，只做样式；同时兼容「?fragment=1 片段模式」与
     「独立页模式」两种输出。
   ============================================================ */

/* 遮罩：略加深，衬托深色卡片 */
.pm-about-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(6, 10, 20, .58);
	z-index: 2000;
	display: flex;
	align-items: center;         /* 垂直居中 */
	justify-content: center;    /* 水平居中 */
	padding: 24px 16px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease;
	-webkit-overflow-scrolling: touch;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.pm-about-mask.pm-show { opacity: 1; visibility: visible; }

/* 模态外壳：改为透明玻璃容器，由 .about-card 自己撑起深色玻璃外观。
   V2.6.90：最大宽度 560 → 720。3 列布局需要这个宽度，
   否则每列只有 ~150px，「建档 · 派工 · WBS · 里程碑」会被挤成两行。 */
.pm-about-box {
	width: 100%;
	max-width: 720px;
	background: transparent;        /* 原 #fff —— 改为透明，交给卡片 */
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
	overflow: hidden;
	transform: translateY(-12px) scale(.985);
	opacity: 0;
	transition: transform .18s ease, opacity .18s ease;
}
.pm-about-mask.pm-show .pm-about-box { transform: none; opacity: 1; }

/* ---------- 卡片本体：深色玻璃 + 发光描边 + 网格/扫描线装饰 ---------- */
.pm-about-card {
	position: relative;
	color: #dfe7f5;
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(70, 130, 255, .20), transparent 60%),
		linear-gradient(160deg, rgba(17, 23, 40, .94), rgba(9, 13, 24, .97));
	border: 1px solid rgba(120, 160, 255, .22);
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(80, 140, 255, .10),
		0 0 30px rgba(40, 110, 255, .18),
		inset 0 1px 0 rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* 网格底纹（顶部径向渐隐，不抢内容） */
.pm-about-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(120, 160, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 160, 255, .06) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}
/* 顶部高光扫描线 */
.pm-about-card::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(130, 185, 255, .85), transparent);
}
/* 卡片内所有子元素压在装饰层之上 */
.pm-about-card > * { position: relative; z-index: 2; }

/* ---------- 头部：品牌标记 + 渐变标题 ---------- */
.pm-about-card .about-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(120, 160, 255, .16);
	background: linear-gradient(180deg, rgba(30, 40, 70, .45), rgba(18, 24, 42, .20));
}
/* 产品徽标：发光方块（取产品名「天枢」之「枢」，属于产品固有信息，不用 pm_brand_e） */
.pm-about-card .about-mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	font-size: 22px;
	font-weight: 800;
	color: #eaf2ff;
	background: linear-gradient(135deg, rgba(60, 120, 255, .35), rgba(120, 90, 255, .35));
	border: 1px solid rgba(140, 180, 255, .50);
	box-shadow: 0 0 18px rgba(80, 140, 255, .45), inset 0 0 12px rgba(140, 180, 255, .25);
	text-shadow: 0 0 8px rgba(180, 210, 255, .85);
}
.pm-about-card .about-head-txt { flex: 1 1 auto; min-width: 0; }
.pm-about-card .about-name {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: .5px;
	line-height: 1.3;
	background: linear-gradient(90deg, #cfe0ff, #9db8ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	word-break: break-all;
}
.pm-about-card .about-sub { margin-top: 4px; font-size: 12px; color: #8fa3c4; letter-spacing: .3px; }
.pm-about-card .about-x {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: #8fa3c4;
	cursor: pointer;
	padding: 2px 8px;
	border-radius: 8px;
	transition: color .15s, background .15s;
}
.pm-about-card .about-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- 主体 ----------
   ⚠ 这里**故意不设** max-height / overflow。
   高度交给内容（约 340px），1280×720 及以上视口连遮罩都不会溢出；
   设一个 58vh 的上限反而会在矮屏上凭空造出滚动条。 */
.pm-about-card .about-body {
	padding: 14px 22px 4px;
}

/* ---------- 元信息条：版本 + 发布时间 + 通道 ----------
   取代旧版「hero 胶囊 + 三行信息表」，把三块信息压成一行。
   版号用强对比白字 + 发光，日期弱化 —— 一眼先看到版本，需要时再读日期。 */
.pm-about-card .about-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 12px;
	padding: 8px 14px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(60, 120, 255, .16), rgba(120, 90, 255, .14));
	border: 1px solid rgba(120, 160, 255, .24);
	box-shadow: inset 0 0 18px rgba(80, 140, 255, .14);
}
.pm-about-card .about-meta__ver {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .5px;
	color: #eaf2ff;
	text-shadow: 0 0 10px rgba(120, 170, 255, .55);
}
.pm-about-card .about-meta__ver .about-meta__chan {
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #bcd0ff;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(120, 160, 255, .18);
	border: 1px solid rgba(140, 180, 255, .35);
	vertical-align: 1px;
}
.pm-about-card .about-meta__sep { color: rgba(140, 170, 220, .55); }
.pm-about-card .about-meta__rel { font-size: 12px; color: #8fa3c4; }

/* ---------- 功能模块：3 列 × 2 行紧凑卡片 ----------
   固定 3 列（auto-fit 在宽屏会排成 4~6 列、窄屏忽多忽少，弹窗里列数跳动很晃眼）。
   列数只在断点处变化：<=720 → 2 列，<=480 → 1 列。 */
.pm-about-card .about-mods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.pm-about-card .about-mod {
	position: relative;
	min-width: 0;
	padding: 10px 12px 10px 14px;
	background: linear-gradient(160deg, rgba(30, 40, 66, .60), rgba(16, 22, 40, .60));
	border: 1px solid rgba(120, 160, 255, .16);
	border-radius: 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
/* 左侧 2px 强调竖条：代替旧版的序号大字。
   序号在"精简"语境下是纯装饰，占的却是每张卡最宝贵的第一行高度。 */
.pm-about-card .about-mod::before {
	content: "";
	position: absolute;
	left: 0; top: 10px; bottom: 10px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(120, 170, 255, .85), rgba(120, 90, 255, .35));
}
.pm-about-card .about-mod:hover {
	border-color: rgba(120, 170, 255, .55);
	box-shadow: 0 0 22px rgba(70, 130, 255, .24);
}
.pm-about-card .about-mod-name {
	font-size: 13px;
	font-weight: 700;
	color: #cfe0ff;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pm-about-card .about-mod-items {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.6;
	color: #93a6c6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- 底部：版权 + 关闭 ----------
   V2.6.90：由「竖排居中」改为「左版权 / 右按钮」一行，
   省下约 30px 高度；窄屏自动换行回竖排。 */
.pm-about-card .about-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 12px 22px;
	border-top: 1px solid rgba(120, 160, 255, .16);
	background: linear-gradient(0deg, rgba(20, 28, 50, .50), rgba(14, 20, 36, .20));
}
.pm-about-card .about-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	font-size: 12px;
	line-height: 1.7;
	color: #8fa3c4;
	text-align: left;
}
.pm-about-card .about-copy a { color: #7fb0ff; text-decoration: none; }
.pm-about-card .about-copy a:hover { color: #a9ccff; text-decoration: underline; }
.pm-about-card .about-copy-sep { margin: 0 6px; color: rgba(140, 170, 220, .5); }
.pm-about-card .about-action { text-align: center; flex: 0 0 auto; }
.pm-about-card .about-action .btn-primary {
	background: linear-gradient(90deg, #3b6fff, #7a5bff);
	border: none;
	border-radius: 8px;
	padding: 6px 28px;
	box-shadow: 0 6px 18px rgba(60, 110, 255, .40);
	transition: filter .15s ease;
}
.pm-about-card .about-action .btn-primary:hover { filter: brightness(1.1); background: linear-gradient(90deg, #3b6fff, #7a5bff); }

/* ---------- 独立页模式（非弹窗） ----------
   V2.6.90：改 flex 居中。原先是「靠上 26px」，在 1366×600 / 1280×720 这类
   宽屏上卡片只占顶部三分之一，下面一大片空黑，看着像页面没加载完。
   居中后与弹窗模式的观感一致，也不会因为内容变矮而显得偏上。 */
body.about-page {
	margin: 0;
	padding: 26px 16px;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(40, 80, 160, .22), transparent 60%),
		#070b14;
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
body.about-page .about-card {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}
/* 极矮的屏（如 1366×600 再叠浏览器工具栏）不允许被 flex 压扁 ——
   卡片高度是内容撑起来的固定值，用 flex-shrink:0 保住，溢出交给页面滚动。 */
body.about-page .pm-about-card { flex: 0 0 auto; }

/* ---------- 断点 ---------- */
/* 720 以下（含弹窗在窄屏被压缩）：2 列。此时每列约 300px，
   一行要点仍然放得下；若强行留 3 列，文字会被 ellipsis 截断成「建档 · 派工 · WB…」。 */
@media (max-width: 720px) {
	.pm-about-card .about-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.pm-about-mask { padding: 12px 10px; }
	.pm-about-card .about-head { padding: 15px 15px; gap: 11px; }
	.pm-about-card .about-mark { width: 40px; height: 40px; font-size: 19px; }
	.pm-about-card .about-body { padding: 12px 15px 4px; }
	.pm-about-card .about-foot { padding: 12px 15px; justify-content: center; }
	.pm-about-card .about-copy { align-items: center; text-align: center; }
	.pm-about-card .about-mods { grid-template-columns: 1fr; }
	/* 单列时不再省略：整行要点显示完更好读 */
	.pm-about-card .about-mod-name,
	.pm-about-card .about-mod-items { white-space: normal; overflow: visible; }
}

/* ---------- 尊重「减少动态效果」系统偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
	.pm-about-card .about-mod { transition: none; }
	.pm-about-card .about-action .btn-primary { transition: none; }
}