/* ==========================================================================
   tool-common.css —— 在线工具通用组件层（Tailwind 之外的可复用视觉组件）
   --------------------------------------------------------------------------
   设计约定：
   1. 只放「跨页面重复」的组件（Hero / 选项卡 / 分段器 / 按钮 / FAQ / 正文），
      页面专有模块继续放在各自的 style.css 中。
   2. 颜色全部走 CSS 变量，默认值即全站主色（靛蓝），页面在自己的 style.css
      的 :root 中覆盖，即可保留各自的品牌色，无需复制整段规则。
   3. 依赖：无（不依赖 Tailwind，可与 Tailwind 共存）。
   4. 引入方式：在 <head> 中 h5-common.css 之后引入；与同目录 tool-common.js
      （window.TC）配套，由后者负责 FAQ 折叠按钮注入与 hash 自动展开。
   5. 与既有共享文件的分工：
        h5-common.css    → 基建重置（全站/老工具共用，勿在此新增组件）
        tool-common.css  → 本文，工具页通用组件
        tool-common.js   → 相关工具 / Tailwind 主题 / FAQ 折叠增强（window.TC）
        link-card.css    → 仅 #relatedTools 相关工具卡片（按需加载）
   ========================================================================== */

/* --------------------------------------------------------------------------
   基础
   -------------------------------------------------------------------------- */
[hidden] {
	display: none !important;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   主题令牌
   - 默认（无 data-theme）为浅色；html[data-theme='dark'] 覆盖为深色
   - 主色由 html[data-accent='indigo|teal|violet|amber|graphite'] 切换
   - 约定：只使用这些令牌，不要在组件里写死颜色
   -------------------------------------------------------------------------- */
:root {
	/* 背景与表面 */
	--bg: #f5f6f8;
	--surface: #ffffff;
	--surface-2: #f3f5f8;
	--border: #e4e7ec;
	--border-strong: #d2d8e1;

	/* 文本层级 */
	--text: #18202c;
	--text-2: #4b5563;
	--text-3: #646e7b;
	--text-invert: #eff3f8;

	/* 顶栏 / 页脚（两种主题下都保持深色品牌条） */
	--chrome-bg: #1b2330;
	--chrome-line: rgba(255, 255, 255, 0.14);
	--chrome-btn-bg: rgba(255, 255, 255, 0.06);
	--chrome-btn-ink: #c8d2e0;
	/* 顶栏/页脚文字：缺失时会失效并继承正文深色，浅色主题下深色条上不可见 */
	--chrome-ink: var(--text-invert);

	/* 阴影 */
	--shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -20px rgba(16, 24, 40, 0.35);
	--shadow-2: 0 22px 54px -34px rgba(16, 24, 40, 0.55);

	/* 主色（默认靛蓝；其它色见文件末尾 data-accent 段） */
	--accent: #4f46e5;
	--accent-2: #7c3aed;
	--accent-ink: #4338ca;
	--accent-soft: #eef1ff;
	--accent-line: #dfe3fb;
	--accent-tint: #f9faff;
	--accent-shadow: rgba(79, 70, 229, 0.35);
	--accent-fg: #ffffff;

	/* 语义色 */
	--ok-ink: #047857;
	--ok-soft: #ecfdf5;
	--warn-ink: #b45309;
	--warn-soft: #fff8e6;
	--danger-ink: #b91c1c;
	--danger-soft: #fef2f2;
	--info-ink: #0369a1;
	--info-soft: #eff8ff;

	/* Hero（浅色版：淡渐变 + 细描边 + 柔光晕） */
	--hero-base-1: #fbfcff;
	--hero-base-2: #f1f4fb;
	--hero-base-3: #fbfcff;
	--hero-a: rgba(99, 102, 241, 0.16);
	--hero-b: rgba(56, 189, 248, 0.1);
	--hero-eyebrow: #4338ca;
	--hero-accent: #4338ca;
	--hero-ink: #141b26;
	--hero-muted: #4b5563;
	--hero-border: rgba(16, 24, 40, 0.08);
	--hero-shadow: 0 18px 44px -34px rgba(16, 24, 40, 0.5);
	--hero-grid: rgba(16, 24, 40, 0.05);
	--hero-code-bg: rgba(15, 23, 42, 0.06);
	--hero-code-ink: #0f766e;
	--hero-chip-bg: rgba(255, 255, 255, 0.62);
	--hero-chip-border: rgba(16, 24, 40, 0.1);
	--hero-chip-ink: #334155;
	--hero-toggle-bg: rgba(255, 255, 255, 0.66);
	--hero-toggle-ink: #475569;

	/* 兼容旧页面对 --brand* 的引用；组件内部请使用 --accent* */
	--brand: var(--accent);
	--brand-2: var(--accent-2);
	--brand-shadow: var(--accent-shadow);
	--brand-line: var(--accent-line);
	--brand-soft: var(--accent-soft);
	--brand-tint: var(--accent-tint);
	--brand-text: var(--accent-ink);
}

html[data-theme='dark'] {
	--bg: #080c13;
	--surface: #121824;
	--surface-2: #0d131d;
	--border: #242e3d;
	--border-strong: #344052;

	--text: #e7ecf3;
	--text-2: #a9b4c3;
	--text-3: #8591a3;
	--text-invert: #e7ecf3;

	--chrome-bg: #0b111a;
	--chrome-line: rgba(255, 255, 255, 0.12);
	--chrome-btn-bg: rgba(255, 255, 255, 0.05);
	--chrome-btn-ink: #aeb9c9;

	--shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 34px -26px rgba(0, 0, 0, 0.9);
	--shadow-2: 0 24px 60px -36px rgba(0, 0, 0, 0.95);

	--accent: #4f46e5;
	--accent-2: #7c3aed;
	--accent-ink: #a5b4fc;
	--accent-soft: rgba(99, 102, 241, 0.15);
	--accent-line: rgba(129, 140, 248, 0.32);
	--accent-tint: rgba(99, 102, 241, 0.06);
	--accent-shadow: rgba(79, 70, 229, 0.45);
	--accent-fg: #ffffff;

	--ok-ink: #6ee7b7;
	--ok-soft: #0d2a24;
	--warn-ink: #fcd34d;
	--warn-soft: #2a2110;
	--danger-ink: #fca5a5;
	--danger-soft: #2a1416;
	--info-ink: #7dd3fc;
	--info-soft: #0e2233;

	--hero-base-1: #0a0e1a;
	--hero-base-2: #131a2e;
	--hero-base-3: #0a0e1a;
	--hero-a: rgba(129, 140, 248, 0.34);
	--hero-b: rgba(34, 211, 238, 0.26);
	--hero-eyebrow: #a5b4fc;
	--hero-accent: #a5b4fc;
	--hero-ink: #ffffff;
	--hero-muted: #9aa7bb;
	--hero-border: rgba(148, 163, 184, 0.18);
	--hero-shadow: 0 26px 60px -42px rgba(0, 0, 0, 0.95);
	--hero-grid: rgba(148, 163, 184, 0.09);
	--hero-code-bg: rgba(2, 6, 15, 0.6);
	--hero-code-ink: #a5f3fc;
	--hero-chip-bg: rgba(2, 6, 15, 0.45);
	--hero-chip-border: rgba(148, 163, 184, 0.24);
	--hero-chip-ink: #cbd5e1;
	--hero-toggle-bg: rgba(2, 6, 15, 0.5);
	--hero-toggle-ink: #94a3b8;
}

/* 主色方案：浅色取值已通过 WCAG AA（正文/链接 ≥ 4.5:1） */
html[data-accent='teal'] {
	--accent: #0f766e;
	--accent-2: #0e7490;
	--accent-ink: #0f766e;
	--accent-soft: #e8f7f4;
	--accent-line: #c5e7e1;
	--accent-tint: #f5fdfb;
	--accent-shadow: rgba(13, 148, 136, 0.3);
	--hero-a: rgba(13, 148, 136, 0.16);
	--hero-b: rgba(8, 145, 178, 0.1);
	--hero-eyebrow: #0f766e;
	--hero-accent: #0f766e;
}

html[data-accent='violet'] {
	--accent: #6d28d9;
	--accent-2: #a21caf;
	--accent-ink: #6d28d9;
	--accent-soft: #f4edff;
	--accent-line: #e2d5f8;
	--accent-tint: #faf6ff;
	--accent-shadow: rgba(109, 40, 217, 0.3);
	--hero-a: rgba(139, 92, 246, 0.16);
	--hero-b: rgba(192, 38, 211, 0.1);
	--hero-eyebrow: #6d28d9;
	--hero-accent: #6d28d9;
}

html[data-accent='amber'] {
	--accent: #b45309;
	--accent-2: #a16207;
	--accent-ink: #92400e;
	--accent-soft: #fff6e6;
	--accent-line: #f0dcb4;
	--accent-tint: #fffbf4;
	--accent-shadow: rgba(180, 83, 9, 0.28);
	--hero-a: rgba(217, 119, 6, 0.16);
	--hero-b: rgba(202, 138, 4, 0.1);
	--hero-eyebrow: #b45309;
	--hero-accent: #b45309;
}

html[data-accent='graphite'] {
	--accent: #374151;
	--accent-2: #1f2937;
	--accent-ink: #374151;
	--accent-soft: #f1f2f4;
	--accent-line: #dadee3;
	--accent-tint: #fafbfc;
	--accent-shadow: rgba(55, 65, 81, 0.28);
	--hero-a: rgba(100, 116, 139, 0.16);
	--hero-b: rgba(71, 85, 105, 0.1);
	--hero-eyebrow: #374151;
	--hero-accent: #374151;
}

html[data-theme='dark'][data-accent='teal'] {
	--accent: #0f766e;
	--accent-2: #0e7490;
	--accent-ink: #5eead4;
	--accent-soft: rgba(13, 148, 136, 0.16);
	--accent-line: rgba(94, 234, 212, 0.3);
	--accent-tint: rgba(13, 148, 136, 0.06);
	--accent-shadow: rgba(13, 148, 136, 0.45);
	--hero-a: rgba(45, 212, 191, 0.3);
	--hero-b: rgba(56, 189, 248, 0.2);
	--hero-eyebrow: #5eead4;
	--hero-accent: #5eead4;
}

html[data-theme='dark'][data-accent='violet'] {
	--accent: #6d28d9;
	--accent-2: #a21caf;
	--accent-ink: #c4b5fd;
	--accent-soft: rgba(139, 92, 246, 0.16);
	--accent-line: rgba(167, 139, 250, 0.32);
	--accent-tint: rgba(139, 92, 246, 0.06);
	--accent-shadow: rgba(109, 40, 217, 0.45);
	--hero-a: rgba(167, 139, 250, 0.34);
	--hero-b: rgba(232, 121, 249, 0.2);
	--hero-eyebrow: #c4b5fd;
	--hero-accent: #c4b5fd;
}

html[data-theme='dark'][data-accent='amber'] {
	--accent: #b45309;
	--accent-2: #a16207;
	--accent-ink: #fcd34d;
	--accent-soft: rgba(217, 119, 6, 0.15);
	--accent-line: rgba(251, 191, 36, 0.3);
	--accent-tint: rgba(217, 119, 6, 0.07);
	--accent-shadow: rgba(180, 83, 9, 0.4);
	--hero-a: rgba(251, 191, 36, 0.24);
	--hero-b: rgba(245, 158, 11, 0.18);
	--hero-eyebrow: #fcd34d;
	--hero-accent: #fcd34d;
}

html[data-theme='dark'][data-accent='graphite'] {
	--accent: #6b7280;
	--accent-2: #4b5563;
	--accent-ink: #d1d5db;
	--accent-soft: rgba(148, 163, 184, 0.12);
	--accent-line: rgba(148, 163, 184, 0.26);
	--accent-tint: rgba(148, 163, 184, 0.06);
	--accent-shadow: rgba(0, 0, 0, 0.45);
	--hero-a: rgba(148, 163, 184, 0.26);
	--hero-b: rgba(226, 232, 240, 0.1);
	--hero-eyebrow: #cbd5e1;
	--hero-accent: #cbd5e1;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tool-hero {
	position: relative;
	overflow: hidden;
	border-radius: 1.25rem;
	border: 1px solid var(--hero-border);
	color: var(--hero-ink);
	background:
		radial-gradient(760px 360px at 6% -20%, var(--hero-a), transparent 62%),
		radial-gradient(680px 340px at 98% -12%, var(--hero-b), transparent 60%),
		linear-gradient(140deg, var(--hero-base-1) 0%, var(--hero-base-2) 56%, var(--hero-base-3) 100%);
	box-shadow: var(--hero-shadow);
}

.tool-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--hero-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(circle at 26% 6%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 26% 6%, #000 0%, transparent 72%);
	pointer-events: none;
}

.tool-hero__inner {
	position: relative;
	z-index: 1;
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.tool-hero__inner {
		padding: 2.25rem 2.5rem;
	}
}

.tool-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hero-eyebrow);
}

.tool-hero h1 {
	margin-top: 0.6rem;
	font-size: clamp(1.35rem, 3.6vw, 2.15rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--hero-ink);
}

.tool-hero__desc {
	margin-top: 0.65rem;
	max-width: 48rem;
	font-size: 0.83rem;
	line-height: 1.95;
	color: var(--hero-muted);
}

.tool-hero__desc code {
	padding: 0.05rem 0.3rem;
	border-radius: 0.25rem;
	background: var(--hero-code-bg);
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 0.92em;
	color: var(--hero-code-ink);
}

.tool-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.15rem;
}

.tool-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.34rem 0.72rem;
	border-radius: 999px;
	border: 1px solid var(--hero-chip-border);
	background: var(--hero-chip-bg);
	font-size: 0.72rem;
	line-height: 1.6;
	color: var(--hero-chip-ink);
}

.tool-chip i {
	font-size: 0.68rem;
	color: var(--hero-accent);
}

/* --------------------------------------------------------------------------
   Hero 收起 / 展开（开关由 tool-common.js 注入；页面也可整段省略 Hero）
   -------------------------------------------------------------------------- */
.tool-hero__toggle {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 28px;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--hero-chip-border);
	border-radius: 999px;
	background: var(--hero-toggle-bg);
	font-size: 0.68rem;
	line-height: 1.5;
	color: var(--hero-toggle-ink);
	cursor: pointer;
	touch-action: manipulation;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.tool-hero__toggle:hover {
	color: var(--hero-ink);
	border-color: var(--border-strong);
}

.tool-hero__toggle:focus-visible {
	outline: 2px solid var(--hero-eyebrow);
	outline-offset: 2px;
}

.tool-hero__toggle i {
	font-size: 0.62rem;
}

.tool-hero.is-collapsed .tool-hero__inner {
	padding: 0.7rem 1rem;
}

.tool-hero.is-collapsed .tool-hero__eyebrow,
.tool-hero.is-collapsed .tool-hero__desc,
.tool-hero.is-collapsed .tool-hero__chips,
.tool-hero.is-collapsed .tool-hero__meta {
	display: none;
}

.tool-hero.is-collapsed h1 {
	margin-top: 0;
	padding-right: 4.2rem;
	font-size: 1.05rem;
	font-weight: 700;
}

@media (min-width: 768px) {
	.tool-hero.is-collapsed .tool-hero__inner {
		padding: 0.8rem 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   选项卡（药丸式）
   -------------------------------------------------------------------------- */
.tool-tabs {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	background: var(--surface-2);
}

.tool-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0.45rem 0.95rem;
	border: 0;
	border-radius: 0.55rem;
	background: transparent;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-3);
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	transition: all 0.2s ease;
}

.tool-tab:hover {
	color: var(--text);
}

.tool-tab.is-active,
.tool-tab[aria-selected='true'] {
	background: var(--surface);
	color: var(--accent-ink);
	box-shadow: var(--shadow-1);
}

.tool-tab:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.tool-tabs {
		display: flex;
		width: 100%;
	}

	.tool-tab {
		flex: 1;
		padding: 0.5rem 0.4rem;
	}
}

/* --------------------------------------------------------------------------
   分段选择器（单选）
   -------------------------------------------------------------------------- */
.seg {
	position: relative;
	display: inline-flex;
	gap: 0.2rem;
	padding: 0.25rem;
	border: 1px solid var(--border);
	border-radius: 0.7rem;
	background: var(--surface-2);
}

.seg input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

.seg label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0.36rem 1rem;
	border-radius: 0.55rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-3);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
}

.seg label:hover {
	color: var(--text);
}

.seg input:checked + label {
	background: var(--surface);
	color: var(--accent-ink);
	box-shadow: var(--shadow-1);
}

.seg input:focus-visible + label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (min-width: 641px) {
	.seg {
		align-self: flex-start;
	}
}

@media (max-width: 640px) {
	.seg {
		display: flex;
		width: 100%;
	}

	.seg label {
		flex: 1;
	}
}

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 42px;
	padding: 0.55rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 0.7rem;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.btn--grad {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
	color: var(--accent-fg);
	box-shadow: 0 12px 24px -14px var(--accent-shadow);
}

.btn--grad:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 16px 28px -14px var(--accent-shadow);
}

.btn--ghost {
	border-color: var(--border);
	background: var(--surface);
	color: var(--text-2);
}

.btn--ghost:hover:not(:disabled) {
	border-color: var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent-ink);
}

.btn--soft {
	border-color: var(--border);
	background: var(--surface-2);
	color: var(--text-2);
}

.btn--soft:hover:not(:disabled) {
	background: var(--border);
}

.btn--sm {
	min-height: 34px;
	padding: 0.35rem 0.75rem;
	border-radius: 0.55rem;
	font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   FAQ 折叠列表
   -------------------------------------------------------------------------- */
.faq-item {
	margin-bottom: 0.6rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--border);
	border-radius: 0.65rem;
	background: var(--surface);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	flex: none;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1;
	color: var(--text-3);
}

.faq-item[open] summary::after {
	content: '\2212';
}

.faq-item[open] {
	border-color: var(--accent-line);
	background: var(--accent-tint);
}

.faq-item p {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.85;
	color: var(--text-2);
	word-break: break-word;
}

.faq-item code {
	padding: 0.05rem 0.3rem;
	border-radius: 0.25rem;
	background: var(--surface-2);
	font-family: ui-monospace, monospace;
	font-size: 0.92em;
	color: var(--text-2);
}

/* FAQ 标题与「全部展开 / 收起」按钮同一行：标题左对齐、按钮右对齐 */
.faq-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.faq-head > h1,
.faq-head > h2,
.faq-head > h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	overflow-wrap: anywhere;
}

.faq-head .faq-tools {
	flex: 0 0 auto;
	margin: 0;
}

.faq-list {
	margin-top: 1rem;
}

/* FAQ 全部展开 / 收起 */
.faq-tools {
	display: flex;
	justify-content: flex-end;
	margin: -0.2rem 0 0.7rem;
}

.faq-tools .btn {
	min-height: 30px;
	padding: 0.25rem 0.65rem;
	border-radius: 0.5rem;
	font-size: 0.72rem;
	font-weight: 500;
}

/* 窄屏优先缩小按钮，避免挤压 / 换行标题 */
@media (max-width: 480px) {
	.faq-head {
		gap: 0.5rem;
	}

	.faq-head .faq-tools .btn {
		min-height: 26px;
		padding: 0.18rem 0.5rem;
		font-size: 0.68rem;
	}
}

/* --------------------------------------------------------------------------
   可折叠区块（关于 / 说明）
   -------------------------------------------------------------------------- */
.tool-fold {
	display: block;
}

.tool-fold > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	list-style: none;
	cursor: pointer;
	touch-action: manipulation;
}

.tool-fold > summary::-webkit-details-marker {
	display: none;
}

.tool-fold > summary:focus-visible {
	outline: 2px solid var(--accent-line);
	outline-offset: 4px;
	border-radius: 0.4rem;
}

.tool-fold__body {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   正文（说明区块）
   -------------------------------------------------------------------------- */
.prose-block h3 {
	margin: 1.3rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
}

.prose-block h3:first-child {
	margin-top: 0;
}

.prose-block p,
.prose-block li {
	font-size: 0.9rem;
	line-height: 1.9;
	color: var(--text-2);
}

.prose-block strong {
	font-weight: 700;
	color: var(--text);
}

.prose-block ul,
.prose-block ol {
	margin: 0.5rem 0;
	padding-left: 1.3rem;
}

.prose-block ul {
	list-style: disc;
}

.prose-block ol {
	list-style: decimal;
}

.prose-block li {
	margin: 0.15rem 0;
}

.prose-block code,
.prose-block .mono {
	padding: 0.05rem 0.32rem;
	border-radius: 0.25rem;
	background: var(--surface-2);
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 0.9em;
	color: var(--text-2);
	word-break: break-all;
}

.prose-block a {
	color: var(--accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   模块通用折叠（[data-collapsible]，由 tool-common.js 注入）
   - .faq-head 直接复用为 header 行；普通标题则被包进 .module-head
   - .module-body 包裹 header 之后的所有内容，height 过渡由脚本控制
   -------------------------------------------------------------------------- */
.module-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	user-select: none;
}

.module-head:not(.faq-head) {
	padding-bottom: 0.6rem;
}

.module-head > h1,
.module-head > h2,
.module-head > h3,
.module-head > h4 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	overflow-wrap: anywhere;
}

.module-head:focus-visible {
	outline: 2px solid var(--accent-line);
	outline-offset: 3px;
	border-radius: 0.4rem;
}

.module-body {
	overflow: hidden;
}

/* 折叠箭头：通用模块标题行与 details.tool-fold 共用同一套视觉（纯 CSS，无需 JS 注入） */
.module-head::after,
.tool-fold > summary::after {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin: -2px 0.35rem 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	color: var(--text-3);
	transform: rotate(45deg);
	transition: transform 0.28s ease, border-color 0.2s ease;
}

.module-head[aria-expanded="true"]::after,
.tool-fold[open] > summary::after {
	transform: rotate(225deg);
}

.module-head:hover::after,
.tool-fold > summary:hover::after {
	border-color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
	.module-head::after,
	.tool-fold > summary::after {
		transition: none;
	}
}

/* ==========================================================================
   主题基础设施
   1) 页面级 Tailwind 工具类覆盖（让存量页面无需逐个改 HTML 即随主题翻转）
   2) 原生表单控件兜底（针对页面 style.css 里写死的浅色输入框）
   3) 页面顶栏 / 页脚（两套主题下均保持深色品牌条）
   4) 主题切换器（由 tool-common.js 注入）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tailwind 工具类 → 主题令牌
   -------------------------------------------------------------------------- */
html[data-theme] body {
	background-color: var(--bg);
	color: var(--text);
}

/* 表面 */
html[data-theme] .bg-white {
	background-color: var(--surface);
}

html[data-theme] .bg-gray-50 {
	background-color: var(--bg);
}

html[data-theme] .bg-gray-100 {
	background-color: var(--surface-2);
}

html[data-theme] .bg-neutral {
	background-color: var(--chrome-bg);
}

html[data-theme] .bg-primary {
	background-color: var(--accent);
}

html[data-theme] .bg-primary\/5 {
	background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}

html[data-theme] .bg-primary\/10 {
	background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

html[data-theme] .bg-primary\/20 {
	background-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

html[data-theme] .bg-accent\/20 {
	background-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

html[data-theme] .bg-amber-50 {
	background-color: var(--warn-soft);
}

html[data-theme] .bg-emerald-50 {
	background-color: var(--ok-soft);
}

html[data-theme] .bg-rose-50 {
	background-color: var(--danger-soft);
}

/* 文本层级 */
html[data-theme] .text-neutral {
	color: var(--text);
}

html[data-theme] .text-neutral\/30 {
	color: color-mix(in srgb, var(--text) 30%, transparent);
}

html[data-theme] .text-neutral\/40 {
	color: color-mix(in srgb, var(--text) 40%, transparent);
}

html[data-theme] .text-neutral\/45 {
	color: color-mix(in srgb, var(--text) 45%, transparent);
}

html[data-theme] .text-neutral\/50 {
	color: color-mix(in srgb, var(--text) 50%, transparent);
}

html[data-theme] .text-neutral\/60 {
	color: color-mix(in srgb, var(--text) 60%, transparent);
}

html[data-theme] .text-neutral\/70 {
	color: color-mix(in srgb, var(--text) 70%, transparent);
}

html[data-theme] .text-neutral\/80 {
	color: color-mix(in srgb, var(--text) 80%, transparent);
}

html[data-theme] .text-gray-300,
html[data-theme] .text-gray-400,
html[data-theme] .text-gray-500,
html[data-theme] .text-slate-400 {
	color: var(--text-3);
}

html[data-theme] .text-gray-600,
html[data-theme] .text-gray-700 {
	color: var(--text-2);
}

html[data-theme] .text-primary,
html[data-theme] .text-accent {
	color: var(--accent-ink);
}

html[data-theme] .text-secondary,
html[data-theme] .text-green-600,
html[data-theme] .text-emerald-700 {
	color: var(--ok-ink);
}

html[data-theme] .text-red-500,
html[data-theme] .text-red-600,
html[data-theme] .text-rose-600 {
	color: var(--danger-ink);
}

html[data-theme] .text-amber-800 {
	color: var(--warn-ink);
}

html[data-theme] .text-sky-400 {
	color: var(--info-ink);
}

html[data-theme] .text-white {
	color: var(--text-invert);
}

html[data-theme] .text-white\/70 {
	color: color-mix(in srgb, var(--text-invert) 70%, transparent);
}

html[data-theme] .text-white\/80 {
	color: color-mix(in srgb, var(--text-invert) 80%, transparent);
}

/* 边框与描边 */
html[data-theme] .border-gray-100,
html[data-theme] .border-gray-200,
html[data-theme] .border-black\/10 {
	border-color: var(--border);
}

html[data-theme] .border-gray-300 {
	border-color: var(--border-strong);
}

html[data-theme] .border-primary {
	border-color: var(--accent);
}

html[data-theme] .border-white {
	border-color: var(--border-strong);
}

html[data-theme] .ring-primary {
	--tw-ring-color: var(--accent);
}

html[data-theme] .ring-gray-300 {
	--tw-ring-color: var(--border-strong);
}

/* 悬停 / 聚焦变体 */
html[data-theme] .hover\:bg-primary:hover {
	background-color: var(--accent);
}

html[data-theme] .hover\:bg-primary\/5:hover {
	background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}

html[data-theme] .hover\:bg-primary\/20:hover {
	background-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

html[data-theme] .hover\:border-primary:hover {
	border-color: var(--accent);
}

html[data-theme] .hover\:text-primary:hover {
	color: var(--accent-ink);
}

html[data-theme] .hover\:text-secondary:hover {
	color: var(--ok-ink);
}

html[data-theme] .hover\:text-white:hover {
	color: var(--text-invert);
}

html[data-theme] .focus\:border-primary:focus {
	border-color: var(--accent);
}

html[data-theme] .focus\:ring-primary:focus {
	--tw-ring-color: var(--accent);
}

html[data-theme] .from-indigo-500.to-violet-500 {
	background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}

html[data-theme] .shadow-soft {
	box-shadow: var(--shadow-1);
}

html[data-theme] input[type='file']::file-selector-button {
	background-color: var(--accent-soft);
	color: var(--accent-ink);
}

/* 顶栏 / 页脚：始终深色，但文字与链接需要浅色强调，不能跟随浅色主题变暗 */
html[data-theme] header.bg-neutral,
html[data-theme] footer.bg-neutral {
	color: var(--chrome-ink);
}

html[data-theme] header.bg-neutral {
	border-bottom: 1px solid var(--chrome-line);
}

html[data-theme] footer.bg-neutral {
	border-top: 1px solid var(--chrome-line);
}

html[data-theme] header .text-primary,
html[data-theme] footer .text-primary {
	color: color-mix(in srgb, var(--accent) 55%, #fff);
}

html[data-theme] header .text-gray-300,
html[data-theme] header .text-gray-400,
html[data-theme] header .text-gray-500,
html[data-theme] footer .text-gray-300,
html[data-theme] footer .text-gray-400,
html[data-theme] footer .text-gray-500 {
	color: #a7b3c4;
}

html[data-theme] header .text-neutral,
html[data-theme] footer .text-neutral {
	color: var(--chrome-ink);
}

/* --------------------------------------------------------------------------
   2. 原生表单控件：只对深色做兜底，避免改变浅色下已有的页面设计
   -------------------------------------------------------------------------- */
html[data-theme='dark'] textarea,
html[data-theme='dark'] select,
html[data-theme='dark'] input:not([type]),
html[data-theme='dark'] input[type='text'],
html[data-theme='dark'] input[type='search'],
html[data-theme='dark'] input[type='url'],
html[data-theme='dark'] input[type='number'],
html[data-theme='dark'] input[type='email'],
html[data-theme='dark'] input[type='password'],
html[data-theme='dark'] input[type='tel'],
html[data-theme='dark'] input[type='date'],
html[data-theme='dark'] input[type='time'],
html[data-theme='dark'] input[type='datetime-local'] {
	background-color: var(--surface-2);
	color: var(--text);
	border-color: var(--border);
}

html[data-theme='dark'] textarea:focus,
html[data-theme='dark'] select:focus,
html[data-theme='dark'] input:not([type]):focus,
html[data-theme='dark'] input[type='text']:focus,
html[data-theme='dark'] input[type='search']:focus,
html[data-theme='dark'] input[type='url']:focus,
html[data-theme='dark'] input[type='number']:focus,
html[data-theme='dark'] input[type='email']:focus,
html[data-theme='dark'] input[type='password']:focus,
html[data-theme='dark'] input[type='tel']:focus,
html[data-theme='dark'] input[type='date']:focus,
html[data-theme='dark'] input[type='time']:focus,
html[data-theme='dark'] input[type='datetime-local']:focus {
	border-color: var(--accent);
}

html[data-theme] textarea::placeholder,
html[data-theme] input::placeholder {
	color: var(--text-3);
	opacity: 1;
}

html[data-theme='light'] {
	color-scheme: light;
}

html[data-theme='dark'] {
	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. 主题切换器（.theme-switch，由 tool-common.js 注入到页头）
   -------------------------------------------------------------------------- */
/* 页头导航：容纳切换按钮，窄屏允许换行，避免横向溢出 */
html[data-theme] header nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.theme-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 0.35rem;
}

.theme-switch__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--chrome-line);
	border-radius: 999px;
	background: var(--chrome-btn-bg);
	font-size: 0.72rem;
	color: var(--chrome-btn-ink);
	cursor: pointer;
	touch-action: manipulation;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-switch__trigger:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.34);
}

.theme-switch__trigger:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
	outline-offset: 2px;
}

.theme-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	width: 196px;
	padding: 0.45rem;
	border: 1px solid var(--border);
	border-radius: 0.8rem;
	background: var(--surface);
	box-shadow: var(--shadow-2);
	animation: theme-panel-in 0.16s ease-out;
}

@keyframes theme-panel-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.theme-panel {
		animation: none;
	}
}

.theme-panel__row {
	display: flex;
	gap: 0.25rem;
}

.theme-panel__row + .theme-panel__row {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--border);
}

.theme-panel__seg {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 30px;
	padding: 0.2rem 0.35rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: transparent;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--text-2);
	cursor: pointer;
	touch-action: manipulation;
}

.theme-panel__seg:hover {
	background: var(--surface-2);
	color: var(--text);
}

.theme-panel__seg[aria-pressed='true'] {
	border-color: var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent-ink);
}

.theme-panel__seg:focus-visible,
.theme-dot:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.theme-panel__accents {
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.1rem 0.05rem;
}

.theme-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.theme-dot > span {
	display: block;
	width: 13px;
	height: 13px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.theme-dot:hover {
	border-color: var(--border);
}

.theme-dot[aria-pressed='true'] {
	border-color: var(--accent-line);
	background: var(--accent-soft);
}

.theme-dot[data-accent-set='indigo'] > span {
	background: #4f46e5;
}

.theme-dot[data-accent-set='teal'] > span {
	background: #0f766e;
}

.theme-dot[data-accent-set='violet'] > span {
	background: #6d28d9;
}

.theme-dot[data-accent-set='amber'] > span {
	background: #b45309;
}

.theme-dot[data-accent-set='graphite'] > span {
	background: #374151;
}

/* --------------------------------------------------------------------------
   4. 无障碍与降级
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
	.tool-hero,
	.tool-chip,
	.tool-tabs,
	.seg,
	.faq-item,
	.btn,
	.theme-switch__trigger,
	.theme-panel {
		border-color: CanvasText;
	}

	.theme-dot > span {
		border: 1px solid CanvasText;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html[data-theme] body,
	html[data-theme] .bg-white,
	html[data-theme] .bg-gray-50,
	html[data-theme] .tool-hero {
		transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	}
}

/* --------------------------------------------------------------------------
   5. 存量页面的通用模板类
      部分页面自带 style.css 且加载顺序在共享库之后，把通用组件的颜色写死了。
      这里统一用 [data-theme] 前缀提高特异性，让它们回到主题令牌；
      只处理通用组件，不涉及页面专有模块。
   -------------------------------------------------------------------------- */
html[data-theme] .seg {
	border-color: var(--border);
	background: var(--surface-2);
}

html[data-theme] .seg label {
	color: var(--text-2);
}

html[data-theme] .seg label:hover {
	color: var(--text);
}

html[data-theme] .seg input:checked + label {
	background: var(--surface);
	color: var(--accent-ink);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}

html[data-theme='dark'] .seg input:checked + label {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

html[data-theme] .btn--ghost {
	border-color: var(--border);
	background: var(--surface);
	color: var(--text-2);
}

html[data-theme] .btn--ghost:hover:not(:disabled) {
	border-color: var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent-ink);
}

html[data-theme] .btn--soft {
	border-color: var(--border);
	background: var(--surface-2);
	color: var(--text-2);
}

html[data-theme] .btn--soft:hover:not(:disabled) {
	background: var(--border);
}

html[data-theme] .faq-item {
	border-color: var(--border);
	background: var(--surface);
}

html[data-theme] .faq-item summary {
	color: var(--text);
}

html[data-theme] .faq-item summary::after {
	color: var(--text-3);
}

html[data-theme] .faq-item[open] {
	border-color: var(--accent-line);
	background: var(--surface-2);
}

html[data-theme] .faq-item p {
	color: var(--text-2);
}

html[data-theme] .faq-item code,
html[data-theme] .prose-block code,
html[data-theme] .prose-block .mono {
	background: var(--surface-2);
	color: var(--text);
}

html[data-theme] .prose-block h3 {
	color: var(--text);
}

html[data-theme] .prose-block p,
html[data-theme] .prose-block li {
	color: var(--text-2);
}

html[data-theme] .prose-block a {
	color: var(--accent-ink);
}

html[data-theme] .prose-block a:hover {
	color: var(--accent);
}