/* about 页面专用样式 - app 风格 */
.about-wrap { max-width: 720px; margin: 48px auto; padding: 20px; display:flex; flex-direction:column; align-items:center; position: relative; }
.about-card { width:100%; border-radius:16px; padding: 28px; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); background:#fff; }

/* 使 about-card 成为定位容器，便于在右上角放置主题开关 */
.about-card { position: relative; }
.about-logo { width:120px; height:120px; border-radius:20px; overflow:hidden; border: 4px solid rgba(25,118,210,0.12); display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 20px rgba(25,118,210,0.08); margin-top: 0; }
.about-logo img { width:100%; height:100%; object-fit:cover; }
.about-author { font-size:18px; font-weight:800; color:#222; }
.about-author.large { font-size:26px; }
.about-sub { color:#666; font-size:14px; text-align:center; max-width:640px; }

.terms-footer { margin-top: 18px; }

/* changelog heading styles (replaces inline styles) */
.changelog-heading { font-size: x-large; font-weight: bold; text-align: left; width: 100%; }
.changelog-sub { font-size: medium; font-weight: 300; }

/* small utility width helper used for icons previously inline-styled */
.w45 { width: 45px; }

/* 版本号样式 */
.about-version { font-size:12px; color:#666; margin-top:4px; }

.about-changelog { width:100%; margin-top:8px; }
.ch-section { margin-top:12px; }
.ch-section h4 { margin:6px 0 8px 0; font-size:15px; }
.ch-entry { display:flex; gap:10px; padding:8px 10px; border-radius:10px; align-items:center; background:#f7fbff; margin-bottom:8px; }
.ch-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	min-width: 45px; /* 保证最小宽度，能容纳短中文字 */
	min-height: 28px;
	padding: 4px 8px; /* 允许一些横向内边距，用于放置文字 */
	border-radius: 6px;
	white-space: nowrap; /* 防止文字换行 */
}
.ch-text { color:#222; font-size:14px; }
.ch-entry .meta { font-size:12px; color:#666; margin-top:0; }

/* 颜色约定：新增 - 蓝，修复 - 绿，移除 - 红 */
.ch-icon.add { background: #1976d2; }
.ch-icon.fix { background: #2e7d32; }
.ch-icon.remove { background: #c62828; }
/* 改进类（橙色） */
.ch-icon.improve { background: #f57c00; }

/* 整体日志卡片样式 */
.changelog-card {
	width: 100%;
	background: #fff;
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 8px 28px rgba(15,30,60,0.06);
	margin-top: 18px;
	border: 1px solid rgba(0,0,0,0.04);
}
.changelog-card .version-block { margin-top: 8px; background: transparent; border: none; }
.changelog-card .version-header { background: rgba(0,0,0,0.02); border-radius:8px; }
.changelog-card .version-body { background: transparent; padding-left: 6px; }

/* 夜间模式下的日志卡片 */
body.dark .changelog-card {
	background: #131618;
	border-color: rgba(255,255,255,0.03);
	box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}

/* admin tweaks */
.admin-area { display:block; }
body.dark .changelog-card .version-header { background: rgba(255,255,255,0.02); }
body.dark .ch-entry { background: #0f1a1c; }
body.dark .ch-text { color: #dbe9f8; }

@media (prefers-reduced-motion: reduce){ .about-card, .ch-entry { transition:none !important; } }

/* 夜间模式 */
body.dark .about-card { background:#1f262a; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
body.dark .about-author { color:#e3f2fd; }
body.dark .about-sub { color:#b0bec5; }
body.dark .ch-entry { background: #152226; }
body.dark .ch-text { color:#dbe9f8; }
.about-wrap {
	max-width: 920px;
	/* 减小整体顶部间距，使条款页内容靠近导航 */
		margin: 4px auto 12px auto;
		padding: 6px 20px 14px 20px;
}

.about-card {
	background: #fff;
	border-radius: 12px;
	/* 减少卡片内顶边距以整体上移内容 */
		padding: 4px 20px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* 专用于条款页的左对齐布局与页首（不影响 about 页） */
.terms-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-start;
	margin-bottom: 2px;
	/* 为固定在左上的返回按钮预留空间，使 logo 与标题不被覆盖 */
	padding-left: 96px;
}

.terms-card .about-body {
	text-align: left;
	max-width: 900px;
	margin: 0 auto;
	padding-top: 4px;
}

.terms-header .about-logo { width: 64px; height: 64px; border-radius: 8px; border-width: 2px; }

/* 将条款页 logo 固定到视口左上角（仅作用于条款页） */
.terms-header .about-logo {
	/* 在条款页内向上移动（靠近导航），但不固定到视口左上 */
	position: relative;
	width: 56px;
	height: 56px;
	margin: 0 12px 0 0;
	/* 取消上移，改为与标题垂直居中显示 */
	margin-top: 0;
	border-radius: 8px;
	align-self: flex-start;
	z-index: 10005;
	/* 微调：再上移一点，使 logo 与标题和卡片整体更靠近导航 */
		margin-top: -12px;
}

/* 在条款页中，避免返回按钮与 logo 重叠 */
/* 在条款页中，调整返回按钮与夜间切换按钮位置，使其位于导航栏内垂直居中 */
body.terms-page { padding-top: calc(var(--nav-height) + 12px); }
body.terms-page .back-button {
	position: fixed;
	top: 12px; /* 置顶，靠近视口左上 */
	left: 12px; /* 页面左上角 */
	z-index: 10003;
}

body.terms-page #darkToggle {
	position: fixed;
	top: calc(var(--nav-height) / 2 - 18px + 6px);
	right: 12px;
	z-index: 10003;
}

@media (max-width: 600px) {
	body.terms-page .back-button { left: 8px; top: 10px; }
	body.terms-page #darkToggle { right: 8px; }
	/* 小屏幕时减少 header 左侧内边距并调整 logo 上移量 */
	.terms-header { padding-left: 64px; }
	.terms-header .about-logo { margin-top: 0; }
}

/* 取消条款页标题的渐变效果并放大加粗以显得更正式 */
.terms-header .about-author {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	-webkit-text-fill-color: unset;
	font-size: 36px;
	font-weight: 900;
}

/* 适配浅色与深色主题下的标题颜色 */
body:not(.dark) .terms-header .about-author { color: #111; }
body.dark .terms-header .about-author { color: #e6eef8; }

/* 深色主题下条款正文可读性调整 */
body.dark .terms-card .about-body,
body.dark .terms-card .about-body p,
body.dark .terms-card .about-body li,
body.dark .terms-card .about-body h3 {
	color: #cfd8dc;
}

body.dark .terms-header .about-version { color: #aab6bf; }
.about-title {
	font-size: 20px;
	font-weight: 800;
	color: #222;
	margin-bottom: 8px;
}

.about-body {
	color: #444;
	line-height: 1.6;
	font-size: 14px;
}

/* contact page specific spacing: ensure the logo and card have generous vertical space */
.contact-page .about-card {
	padding-top: 28px; /* more top space inside the card */
	padding-bottom: 28px; /* more bottom space inside the card */
}
.contact-page .about-logo { margin-top: 12px; margin-bottom: 12px; }

/* 小型法律/版权链接样式（关于页底部） */
.about-sub-legal { margin-top: 6px; }
.about-sub-legal a:link,
.about-sub-legal a:visited {
	color: #1976d2 !important;
	text-decoration: none;
	font-size: 12px;
}
body.dark .about-sub-legal a:link,
body.dark .about-sub-legal a:visited {
	color: #90caf9 !important;
}

/* 强制类：在所有伪类上强制保持指定颜色（覆盖浏览器 visited 默认样式） */
.force-blue,
.force-blue:link,
.force-blue:visited,
.force-blue:hover,
.force-blue:active,
.force-blue:focus {
	color: #1976d2 !important;
	-webkit-text-fill-color: #1976d2 !important; /* 有些 UA 使用 text-fill-color 控制 visited 显示 */
	text-decoration: none !important;
}
body.dark .force-blue,
body.dark .force-blue:link,
body.dark .force-blue:visited,
body.dark .force-blue:hover,
body.dark .force-blue:active,
body.dark .force-blue:focus {
	color: #90caf9 !important;
	-webkit-text-fill-color: #90caf9 !important;
}

/* 联系方式页样式 */
.contact-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.contact-card {
	background: #fff;
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.contact-card:hover { transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.08); }
.contact-icon { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f5f7fb; }
.contact-icon img { width:42px; height:42px; object-fit:contain; display:block; }
.contact-label { font-size:13px; color:#333; }
body.dark .contact-card { background:#141819; box-shadow: 0 8px 30px rgba(0,0,0,0.28); }

/* QR 模态样式 */
.qr-modal { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms; }
.qr-modal .qr-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 220ms ease; pointer-events: none; }
.qr-modal .qr-panel { position: relative; width: 320px; max-width: 92%; background: #fff; border-radius: 14px; padding: 18px; transform: scale(0.96) translateY(8px); opacity: 0; transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease; box-shadow: 0 18px 40px rgba(0,0,0,0.24); pointer-events: auto; }
.qr-modal .qr-content { display:flex; flex-direction:column; align-items:center; gap:12px; }
.qr-modal .qr-content img { width: 220px; height: 220px; object-fit:contain; border-radius:8px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.qr-modal .qr-label { font-weight:700; color:#222; }
.qr-modal .qr-close { position:absolute; top:8px; right:8px; background:transparent; border:none; font-size:18px; cursor:pointer; }
.qr-modal.open { pointer-events: auto; opacity: 1; visibility: visible; }
.qr-modal.open .qr-backdrop { opacity: 1; pointer-events: auto; }
.qr-modal.open .qr-panel { transform: scale(1) translateY(0); opacity: 1; }
body.dark .qr-modal .qr-panel { background:#111316; color:#dce6ef; box-shadow: 0 18px 40px rgba(0,0,0,0.56); }
body.dark .qr-modal .qr-label { color:#e6eef8; }
body.dark .qr-modal .qr-close { color:#cfdff0; }

.about-meta {
	margin-top: 14px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.meta-item {
	background: #f3f6fb;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	color: #333;
}

.about-actions {
	margin-top: 18px;
	display: flex;
	gap: 10px;
}

.btn {
	background: #1976d2;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-block;
}

.btn.secondary {
	background: #eee;
	color: #222;
}

@media (prefers-reduced-motion: reduce) {
	.about-card, .btn {
		transition: none !important;
	}
}

body.dark .about-card {
	background: #22272b;
	color: #d0d7dc;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

body.dark .meta-item {
	background: #263238;
	color: #cfd8dc;
}

.back-small {
	position: absolute;
	top: 18px;
	left: 18px;
	background: #fff;
	color: #1976d2;
	padding: 8px 10px;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap:8px;
}

body.dark .back-small { background:#1f2a31; color:#90caf9; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

/* 折叠面板 */
.version-block { width:100%; margin-top:12px; border-radius:10px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); }
.version-header { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background: rgba(0,0,0,0.02); cursor:pointer; }
.version-title { font-weight:700; }
/* 注意：不要使用 display:none，会阻止 CSS max-height 过渡生效。通过 .collapsed 控制 max-height。 */
.version-body { padding:10px 12px; max-height: none; overflow: hidden; transition: max-height 360ms cubic-bezier(.2,.9,.3,1), padding 260ms ease; }
.version-body.collapsed { max-height: 0; padding-top:0; padding-bottom:0; }

/* 夜间切换按钮：页面右上角（使用固定定位，以免被局部容器覆盖） */
#darkToggle {
	position: fixed;
	top: calc(var(--nav-height, 60px) + 18px);
	right: 20px;
	z-index: 9999;
	background: #1976d2;
	color: #fff;
	border: none;
	padding: 6px 10px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 280ms ease, color 280ms ease, transform 160ms ease;
}
#darkToggle:hover { transform: scale(1.05); }
#darkToggle:active { transform: scale(0.95); }
#darkToggle[aria-pressed="true"] { background: #fff; color: #1976d2; }
body.dark #darkToggle { background: #424242; color: #fff; }

/* 更高优先级的类选择器，确保在不同 CSS 文件或渐变背景下也能生效 */
#darkToggle.is-dark { background: #424242 !important; color: #fff !important; }
#darkToggle.is-dark[aria-pressed="true"] { background: #fff !important; color: #1976d2 !important; }

body.dark .version-header { background: rgba(255,255,255,0.02); }