/* ZTab v2 — 空白画布 + 组件库 + 自由布局 */

:root {
	--zt-text: #1f2329;
	--zt-text-2: rgba(255, 255, 255, .85);
	--zt-text-3: rgba(255, 255, 255, .55);
	--zt-card: rgba(255, 255, 255, .66);
	--zt-card-hover: rgba(255, 255, 255, .85);
	--zt-border: rgba(255, 255, 255, .55);
	--zt-shadow: 0 8px 32px rgba(0, 0, 0, .10);
	--zt-accent: #4f7cff;
	--zt-danger: #e5484d;
	--zt-radius: 16px;
	--zt-font: "DingTalk JinBuTi", "MiSans", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

html.dark {
	--zt-text: #e8eaed;
	--zt-text-2: rgba(232, 234, 237, .85);
	--zt-text-3: rgba(232, 234, 237, .5);
	--zt-card: rgba(32, 36, 42, .62);
	--zt-card-hover: rgba(44, 49, 56, .78);
	--zt-border: rgba(255, 255, 255, .12);
	--zt-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	height: 100%;
	overflow: hidden;
	font-family: var(--zt-font);
	color: var(--zt-text);
	-webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* hidden 属性优先级最高（否则会被 display:flex 覆盖） */
[hidden] { display: none !important; }

/* ---------- 壁纸 ---------- */
.zt-wallpaper {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, #667eea, #764ba2);
	background-size: cover;
	background-position: center;
	transition: opacity .5s;
}
.zt-wallpaper.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .12);
}
html.dark .zt-wallpaper.has-image::after { background: rgba(0, 0, 0, .35); }

/* ---------- 顶栏已移除：设置入口在左侧边栏底部，编辑/主题走右键菜单 ---------- */

.zt-iconbtn {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--zt-border);
	border-radius: 12px;
	background: var(--zt-card);
	color: var(--zt-text);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: background .2s, transform .15s;
}
.zt-iconbtn:hover { background: var(--zt-card-hover); }
.zt-iconbtn:active { transform: scale(.94); }
.zt-iconbtn svg { width: 18px; height: 18px; fill: currentColor; }
.zt-iconbtn.active { color: var(--zt-accent); border-color: var(--zt-accent); }
.zt-iconbtn.zt-sm { width: 30px; height: 30px; border: none; background: transparent; }
.zt-iconbtn.zt-sm svg { width: 16px; height: 16px; }

/* ---------- 组件舞台（内容超出屏幕时可上下滚动） ---------- */
.zt-stage {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.zt-stage::-webkit-scrollbar { width: 6px; }
.zt-stage::-webkit-scrollbar-track { background: transparent; }
.zt-stage::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 6px; }
.zt-stage::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); }

/* 顶部固定层：时钟 + 搜索框（不随内容滚动） */
.zt-layer-top {
	position: fixed;
	top: 20px;
	left: 0; right: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	pointer-events: none;
}
/* 底部固定层：Dock 栏（不随内容滚动；上移给一言让出屏幕底边）
 * z-index 高于弹窗遮罩(110)：存在弹窗时 Dock 仍显示在最上层（macOS 行为） */
.zt-layer-bottom {
	position: fixed;
	left: 0; right: 0;
	bottom: 48px;
	z-index: 115;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.zt-layer-top .zt-comp,
.zt-layer-bottom .zt-comp {
	position: static;
	transform: none;
	pointer-events: auto;
}

.zt-comp {
	position: absolute;
	transform: translate(-50%, -50%);
	max-width: 96vw;
}

/* 布局编辑模式下的组件轮廓 */
body.edit-mode .zt-comp {
	outline: 1.5px dashed color-mix(in srgb, var(--zt-accent) 70%, transparent);
	outline-offset: 8px;
	border-radius: 12px;
	cursor: move;
	user-select: none;
}
/* 位置锁定的组件（时钟 / 搜索框）：不可拖动 */
body.edit-mode .zt-comp.zt-comp-locked { cursor: default; }
body.edit-mode .zt-comp.zt-comp-locked .zt-widget { pointer-events: auto; }
body.edit-mode .zt-comp .zt-comp-close { display: flex; }
.zt-comp-close {
	display: none;
	position: absolute;
	top: -12px; right: -12px;
	width: 24px; height: 24px;
	border: none;
	border-radius: 50%;
	background: var(--zt-danger);
	color: #fff;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	z-index: 5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* ---------- 网格组件基座（实底卡片，不透明、不随壁纸） ---------- */
/* 实底卡片内的文字变量：与页面玻璃文字体系（白色系）解耦 */
.zt-widget {
	--w-text: #1f2329;
	--w-text-2: rgba(31, 35, 41, .78);
	--w-text-3: rgba(31, 35, 41, .48);
	--w-line: rgba(31, 35, 41, .10);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
	overflow: hidden;
	color: var(--w-text);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
html.dark .zt-widget {
	--w-text: #e8eaed;
	--w-text-2: rgba(232, 234, 237, .78);
	--w-text-3: rgba(232, 234, 237, .5);
	--w-line: rgba(255, 255, 255, .10);
	background: rgba(38, 43, 51, .92);
	border-color: rgba(255, 255, 255, .08);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
}

/* 卡片下方的组件名（参考 mTab）：挂在卡片外部下方，卡片占满整个规格（与图标卡片同大） */
.zt-comp-has-cap .zt-widget { height: 100%; }
.zt-comp-cap {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	margin-top: 1px;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--zt-text-2);
	text-shadow: 0 1px 5px rgba(0, 0, 0, .35);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.edit-mode .zt-comp-cap { color: var(--zt-accent); }

/* ---------- 组件独立配色（对齐 mTab 设计参数） ---------- */
/* 天气：mTab weather-app.light 的三色渐变，暗色用其窗口深蓝渐变 */
.zt-w-weather {
	--w-text: #1a1b1c;
	--w-text-2: rgba(26, 27, 28, .75);
	--w-text-3: rgba(26, 27, 28, .52);
	--w-line: rgba(26, 27, 28, .12);
	color: var(--w-text);
	background: linear-gradient(to right top, #C5E5FE, #F7EEDA, #FBDBD9);
	border: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
html.dark .zt-w-weather {
	--w-text: #fff;
	--w-text-2: rgba(255, 255, 255, .85);
	--w-text-3: rgba(255, 255, 255, .6);
	--w-line: rgba(255, 255, 255, .18);
	background: linear-gradient(to right top, #1d7db9, #3c7fc4, #1d548c);
}
/* 大图标用 mTab 的暖阳渐变色 */
.zt-wx-bigicon { color: #FF9E28; }

/* 日历 / 待办 / 记事本：白底（深色模式自动跟随 .zt-widget） */
.zt-w-calendar { --w-dot: #6366f1; }
.zt-w-todo { --w-dot: #22c55e; }
.zt-w-notepad { --w-dot: #f59e0b; }

/* 倒计时：深色玻璃卡（参考 mTab 的倒计时卡） */
.zt-w-countdown {
	--w-text: #fff;
	--w-text-2: rgba(255, 255, 255, .92);
	--w-text-3: rgba(255, 255, 255, .7);
	--w-line: rgba(255, 255, 255, .25);
	color: #fff;
	background: linear-gradient(140deg, rgba(38, 42, 52, .92), rgba(58, 48, 78, .92));
	border-color: rgba(255, 255, 255, .10);
}
html.dark .zt-w-countdown {
	background: linear-gradient(140deg, rgba(26, 29, 36, .94), rgba(43, 35, 58, .94));
}

/* 纪念日：倒计时的暖色镜像（同一套布局，底色换成赭石 / 珊瑚调） */
.zt-w-anniversary {
	--w-text: #fff;
	--w-text-2: rgba(255, 246, 240, .92);
	--w-text-3: rgba(255, 240, 230, .70);
	--w-line: rgba(255, 255, 255, .22);
	color: #fff;
	background: linear-gradient(140deg, rgba(46, 38, 36, .92), rgba(88, 50, 40, .92));
	border-color: rgba(255, 255, 255, .10);
}
html.dark .zt-w-anniversary {
	background: linear-gradient(140deg, rgba(32, 26, 25, .94), rgba(62, 34, 28, .94));
}

/* 热榜：深色玻璃卡 + 页签 */
.zt-w-hot {
	--w-text: rgba(255, 255, 255, .95);
	--w-text-2: rgba(255, 255, 255, .8);
	--w-text-3: rgba(255, 255, 255, .5);
	--w-line: rgba(255, 255, 255, .12);
	color: var(--w-text);
	background: linear-gradient(150deg, rgba(34, 38, 48, .9), rgba(24, 27, 34, .92));
	border-color: rgba(255, 255, 255, .10);
}
html.dark .zt-w-hot {
	background: linear-gradient(150deg, rgba(24, 27, 34, .94), rgba(16, 18, 23, .96));
}

/* ---------- 图标形状规格 ---------- */
.zt-link-icon.shape-squircle { border-radius: 14px; }
.zt-link-icon.shape-circle   { border-radius: 50%; }
.zt-link-icon.shape-square   { border-radius: 4px; }

/* Dock 设置入口 —— 仿苹果系统设置图标（银灰渐变磁贴 + 深色齿轮） */
.zt-gear-icon {
	background: linear-gradient(145deg, #f5f6f8, #c3c6cc);
	border: 1px solid rgba(255, 255, 255, .65);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(0, 0, 0, .18);
}
.zt-gear-icon svg.zt-gear { width: 22px; height: 22px; fill: #5d6167; }
html.dark .zt-gear-icon {
	background: linear-gradient(145deg, #5a5e66, #31343a);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .4);
}
html.dark .zt-gear-icon svg.zt-gear { fill: #d9dce1; }
.zt-dock-gear:hover .zt-gear-icon svg.zt-gear { fill: var(--zt-accent); }

/* ---------- 天气（暖粉→天蓝渐变卡 + 5 日预报） ---------- */
.zt-wx { gap: 4px; }
.zt-wx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	flex-shrink: 0;
}
.zt-wx-city {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: calc(100% - 24px);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--w-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	overflow: hidden;
}
.zt-wx-city > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-wx-caret { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }
.zt-wx-refresh {
	border: none;
	background: transparent;
	color: var(--w-text-3);
	font-size: 13px;
	line-height: 1;
	padding: 2px 3px;
	flex-shrink: 0;
}
.zt-wx-refresh:hover { color: var(--w-text); }

.zt-wx-bigicon { width: 30px; height: 30px; flex-shrink: 0; opacity: .8; }
.zt-wx-bigicon svg { width: 100%; height: 100%; display: block; }
.zt-wx-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	flex: 1;
	min-height: 0;
}
.zt-wx-temp {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
}
.zt-wx-deg { font-size: .6em; font-weight: 500; margin-left: 1px; }
.zt-wx-meta { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.zt-wx-text { font-size: 11.5px; color: var(--w-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.zt-wx-sub { font-size: 11px; color: var(--w-text-3); white-space: nowrap; }

.zt-wx-days {
	display: flex;
	gap: 3px;
	flex-shrink: 0;
}
.zt-wx-day {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 1px 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, .42);
}
html.dark .zt-wx-day { background: rgba(255, 255, 255, .12); }
.zt-wx-day .zt-wx-ico { width: 15px; height: 15px; opacity: .9; }
.zt-wx-daylabel { font-size: 9.5px; color: var(--w-text-2); white-space: nowrap; }
.zt-wx-daytemp { font-size: 9.5px; color: var(--w-text); white-space: nowrap; }
.zt-wx-daytemp em {
	font-style: normal;
	opacity: .62;
	margin-left: 4px;
}
.zt-wx-empty { font-size: 12.5px; color: var(--w-text-3); margin: auto; text-align: center; }

/* 窄卡（2×1 以下）：省掉预报与次要信息 */
.zt-wx-narrow .zt-wx-days { display: none; }
.zt-wx-narrow .zt-wx-sub { display: none; }
.zt-wx-narrow .zt-wx-temp { font-size: 32px; }

/* ---------- 日历（参考 mTab：红色月份条 + 大字日期；4×2 附 mini 月历） ---------- */
.zt-cal { gap: 6px; }
.zt-cal-chip {
	height: 34px;
	margin: -14px -16px 0;
	border-radius: 18px 18px 0 0;
	background: #fe5668;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.zt-cal-day-big {
	font-size: 52px;
	line-height: 56px;
	font-weight: 800;
	letter-spacing: -2px;
	color: var(--w-text);
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.zt-cal-sub { font-size: 10.5px; color: var(--w-text-3); text-align: center; white-space: nowrap; }
.zt-cal-sub2 { font-size: 11px; color: var(--w-text-2); text-align: center; font-weight: 600; white-space: nowrap; }
.zt-cal-dot { margin: 0 4px; opacity: .6; }

/* 4×2：左侧信息 + 右侧 mini 月历 */
.zt-cal-mini-wrap { flex: 1; min-height: 0; display: flex; gap: 12px; }
.zt-cal-mini-left { width: 36%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.zt-cal-mini-left .zt-cal-day-big { font-size: 46px; line-height: 50px; }
.zt-cal-mini-left .zt-cal-sub2 { font-size: 10.5px; }
.zt-cal-mini-cal { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.zt-cal-week, .zt-cal-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	text-align: center;
}
.zt-cal-week { font-size: 9.5px; color: var(--w-text-3); margin-bottom: 2px; flex-shrink: 0; }
.zt-cal-week .red { color: #ef4444; opacity: .85; }
.zt-cal-days { font-size: 10px; flex: 1; min-height: 0; }
.zt-cal-cell {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border-radius: 5px;
	overflow: hidden;
}
.zt-cal-cell .d { position: relative; color: var(--w-text-2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.zt-cal-cell .l {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 8.5px;
	color: var(--w-text-3);
	line-height: 1.2;
}
.zt-cal-cell.weekend .d { color: #ef4444; opacity: .85; }
.zt-cal-cell.holiday { background: rgba(244, 63, 94, .09); }
.zt-cal-cell.workday { background: rgba(100, 116, 139, .10); }
.zt-cal-cell .l b { color: #ef4444; font-style: normal; font-weight: 600; }
.zt-cal-cell.today .l b { color: #fff; }
.zt-cal-cell.sel .l b { color: #fff; }
.zt-cal-cell.out .d { opacity: .35; }
.zt-cal-cell.out .l { opacity: .4; }
.zt-cal-cell.today { background: #ef4444; }
.zt-cal-cell.today .d, .zt-cal-cell.today .l { color: #fff; }
.zt-cal-cell.today .l { opacity: .9; }
.zt-cal-cell.sel { background: #3b82f6; }
.zt-cal-cell.sel .d, .zt-cal-cell.sel .l { color: #fff; }
.zt-cal-mark {
	position: absolute;
	top: 0; right: 0;
	z-index: 2;
	font-style: normal;
	font-size: 8px;
	line-height: 1.1;
	padding: 2px 5px;
	border-radius: 0 0 0 7px;
	color: #fff;
	font-weight: 700;
	pointer-events: none;
}
.zt-cal-mark.rest { background: #f43f5e; }
.zt-cal-mark.work { background: #64748b; }

/* ---------- 待办（对齐 mTab todo-card：浅蓝底 + 进度条 + 行卡） ---------- */
.zt-w-todo {
	background: #E6EFFE;
	box-shadow: 0 4px 20px rgba(50, 127, 252, .15);
}
html.dark .zt-w-todo { background: #1d2733; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.zt-todo-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-bottom: 8px;
}
.zt-todo-title { font-size: 17px; font-weight: 700; color: #1e293b; }
html.dark .zt-todo-title { color: #e8eaed; }
.zt-todo-stats {
	margin-left: auto;
	font-size: 11px;
	color: #64748b;
	background: rgba(50, 127, 252, .1);
	padding: 3px 10px;
	border-radius: 12px;
	font-variant-numeric: tabular-nums;
}
html.dark .zt-todo-stats { color: #9fb3cc; background: rgba(50, 127, 252, .18); }
.zt-todo-progress { margin-bottom: 8px; flex-shrink: 0; }
.zt-todo-bar {
	height: 6px;
	background: rgba(50, 127, 252, .15);
	border-radius: 3px;
	overflow: hidden;
}
.zt-todo-fill {
	height: 100%;
	background: linear-gradient(90deg, #327ffc, #3b82f6);
	border-radius: 3px;
	transition: width .3s ease;
}
.zt-todo-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(50, 127, 252, .25) transparent;
}
.zt-todo-list::-webkit-scrollbar { width: 4px; }
.zt-todo-list::-webkit-scrollbar-thumb { background: rgba(50, 127, 252, .2); border-radius: 4px; }
.zt-todo-empty {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zt-todo-empty-pill {
	padding: 8px 14px;
	border: 1px dashed rgba(50, 127, 252, .22);
	border-radius: 999px;
	font-size: 13px;
	color: #94a3b8;
	background: rgba(255, 255, 255, .34);
}
html.dark .zt-todo-empty-pill { background: rgba(255, 255, 255, .06); color: #7d8ea3; }
.zt-todo-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	font-size: 13.5px;
	background: rgba(255, 255, 255, .7);
	border: 1px solid rgba(50, 127, 252, .1);
	border-radius: 8px;
	margin-bottom: 7px;
	transition: background .2s, border-color .2s;
}
.zt-todo-item:last-child { margin-bottom: 0; }
.zt-todo-item:hover { background: rgba(255, 255, 255, .92); border-color: rgba(50, 127, 252, .2); }
html.dark .zt-todo-item { background: rgba(255, 255, 255, .07); border-color: rgba(50, 127, 252, .16); }
html.dark .zt-todo-item:hover { background: rgba(255, 255, 255, .12); }
.zt-todo-dot {
	width: 4px;
	height: 18px;
	border-radius: 4px;
	flex-shrink: 0;
	opacity: .85;
}
.zt-todo-check {
	width: 19px; height: 19px;
	flex-shrink: 0;
	border: 2px solid rgba(50, 127, 252, .3);
	border-radius: 5px;
	background: rgba(255, 255, 255, .8);
	color: #327ffc;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s, border-color .2s;
}
.zt-todo-check:hover { border-color: #327ffc; background: rgba(50, 127, 252, .1); }
.zt-todo-item.done .zt-todo-check {
	background: #327ffc;
	border-color: #327ffc;
	color: #fff;
}
.zt-todo-item.done .zt-todo-text { text-decoration: line-through; color: #94a3b8; }
.zt-todo-text {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #334155;
	font-weight: 500;
}
html.dark .zt-todo-text { color: #d7dee7; }
.zt-todo-del {
	border: none; background: transparent;
	color: var(--w-text-3); font-size: 14px;
	display: none; padding: 0 2px;
}
.zt-todo-item:hover .zt-todo-del { display: block; }
.zt-todo-del:hover { color: var(--zt-danger); }
.zt-todo-inputrow { flex-shrink: 0; padding-top: 8px; }
.zt-todo-inputrow input {
	width: 100%;
	padding: 7px 10px;
	border-radius: 9px;
	border: 1px solid var(--w-line);
	background: rgba(0, 0, 0, .04);
	color: var(--w-text);
	font-size: 12px;
	outline: none;
}
html.dark .zt-todo-inputrow input { background: rgba(255, 255, 255, .06); }
.zt-todo-inputrow input:focus { border-color: #22c55e; }
.zt-todo-inputrow input::placeholder { color: var(--w-text-3); }

/* ---------- 倒计时（对齐 mTab countdownEvent：标题 / 计数 / 日期右对齐） ---------- */
.zt-cd { justify-content: space-between; gap: 0; cursor: default; }
.zt-cd-empty {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 100%;
}
.zt-cd-empty-ico { font-size: 20px; opacity: .8; }
.zt-cd-empty-t { font-size: 13px; font-weight: 600; }
.zt-cd-empty .zt-cd-tip { font-size: 11.5px; color: var(--w-text-3); font-weight: 400; }
.zt-cd-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--w-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-cd-date { font-size: 12px; color: var(--w-text-3); flex-shrink: 0; text-align: right; }
.zt-btn.zt-xs { padding: 4px 12px; font-size: 12px; }

/* ---------- 热榜（对齐 mTab topSearch：暗色渐变底 + 金色标题 + 胶囊页签） ---------- */
.zt-hot { gap: 6px; }
.zt-w-hot {
	/* 不能写 url(none)：CSS 内相对 URL 会按本文件目录解析，
	   浏览器会真的请求 /assets/css/none 导致 404 */
	background: linear-gradient(160deg, #0d0d12 0%, #16140e 55%, #241a08 100%);
}
.zt-hot-tabsbar {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}
.zt-hot-scroll {
	width: 16px;
	height: 22px;
	flex-shrink: 0;
	display: none;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
	line-height: 1;
	padding: 0;
}
.zt-hot-tabsbar.has-overflow .zt-hot-scroll { display: flex; }
.zt-hot-scroll:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.zt-hot-scroll:disabled { opacity: .25; cursor: default; }
.zt-hot-tabs {
	display: flex;
	gap: 8px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	padding-bottom: 2px;
}
.zt-hot-tabs::-webkit-scrollbar { display: none; }
.zt-hot-tab {
	flex-shrink: 0;
	padding: 3px 10px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	color: #8a8f9c;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	transition: background-color .25s, color .25s, border-color .25s;
}
.zt-hot-tab:hover { color: #dde1e9; background: rgba(255, 255, 255, .08); }
.zt-hot-tab.active {
	color: #3a2a00;
	background: linear-gradient(135deg, #ffd76a 0%, #e8a825 100%);
	border-color: transparent;
	font-weight: 600;
}
.zt-hot-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	/* 细滚动条（不再用默认宽条占位） */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
	padding-right: 2px;
}
.zt-hot-list::-webkit-scrollbar { width: 4px; }
.zt-hot-list::-webkit-scrollbar-track { background: transparent; }
.zt-hot-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .22);
	border-radius: 4px;
}
.zt-hot-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); }
.zt-hot-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 2px;
	border: none;
	background: transparent;
	border-radius: 7px;
	font-size: 12px;
	color: rgba(255, 255, 255, .9);
	text-align: left;
}
.zt-hot-item:hover { background: rgba(255, 255, 255, .08); }
.zt-hot-rank {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .08);
	font-variant-numeric: tabular-nums;
}
/* mTab 前三名渐变徽标 */
.zt-hot-rank.rank-0 { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%); color: #fff; }
.zt-hot-rank.rank-1 { background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%); color: #fff; }
.zt-hot-rank.rank-2 { background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%); color: #8b6914; }
.zt-hot-word { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-hot-num {
	font-size: 10.5px;
	color: rgba(255, 208, 122, .72);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.zt-hot-empty {
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
	text-align: center;
	padding: 14px 0;
}
/* 展开入口常驻：左右箭头只在页签溢出时出现，入口不能跟着一起藏 */
.zt-hot-expand {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-left: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, .42);
	padding: 0;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.zt-hot-expand svg { width: 12px; height: 12px; fill: currentColor; }
.zt-hot-expand:hover { background: rgba(255, 255, 255, .12); color: #ffd76a; }
.zt-hot-none { font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.zt-hot-setup {
	margin-left: 8px;
	padding: 2px 9px;
	border: 1px solid rgba(255, 215, 106, .45);
	border-radius: 999px;
	background: rgba(255, 215, 106, .12);
	color: #ffd76a;
	font-size: 11.5px;
	cursor: pointer;
}
.zt-hot-setup:hover { background: rgba(255, 215, 106, .24); }

/* ---------- 热榜大窗口（页签 / 榜单 / 数据源面板） ---------- */
.zt-hotw {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.zt-hotw-bar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.zt-hotw-tabs {
	display: flex;
	gap: 8px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.zt-hotw-tabs::-webkit-scrollbar { display: none; }
.zt-hotw-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--zt-border);
	border-radius: 9px;
	background: var(--zt-card);
	color: var(--zt-text-2);
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.zt-hotw-tab img { width: 15px; height: 15px; border-radius: 3px; object-fit: contain; }
.zt-hotw-tab:hover { background: var(--zt-card-hover); color: var(--zt-text); }
.zt-hotw-tab.active {
	color: #b8790a;
	background: rgba(255, 199, 88, .18);
	border-color: rgba(232, 168, 37, .5);
	font-weight: 600;
}
html.dark .zt-hotw-tab.active { color: #ffcf6b; background: rgba(255, 199, 88, .12); }

.zt-hotw-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.zt-hotw-tool {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--zt-border);
	border-radius: 9px;
	background: var(--zt-card);
	color: var(--zt-text-2);
	font-size: 12.5px;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.zt-hotw-tool svg { width: 13px; height: 13px; fill: currentColor; }
.zt-hotw-tool:hover { background: var(--zt-card-hover); color: var(--zt-text); }
.zt-hotw-tool.on {
	color: #b8790a;
	border-color: rgba(232, 168, 37, .5);
	background: rgba(255, 199, 88, .16);
}
html.dark .zt-hotw-tool.on { color: #ffcf6b; }

.zt-hotw-panel {
	flex-shrink: 0;
	padding: 12px 12px 10px;
	border: 1px solid var(--zt-border);
	border-radius: 12px;
	background: var(--zt-card);
}
.zt-hotw-panel[hidden] { display: none; }
.zt-hotw-phead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--zt-text-3);
}
.zt-hotw-pacts { display: flex; gap: 4px; flex-shrink: 0; }
.zt-hotw-pact {
	padding: 3px 9px;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 12px;
	cursor: pointer;
}
.zt-hotw-pact:hover { background: var(--zt-card-hover); color: var(--zt-text); }
.zt-hotw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 150px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.zt-hotw-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--zt-border);
	border-radius: 999px;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 12.5px;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.zt-hotw-chip img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
.zt-hotw-chip i { font-style: normal; font-size: 11px; opacity: .5; }
.zt-hotw-chip:hover { background: var(--zt-card-hover); color: var(--zt-text); }
.zt-hotw-chip.on {
	color: #b8790a;
	border-color: rgba(232, 168, 37, .5);
	background: rgba(255, 199, 88, .16);
	font-weight: 600;
}
.zt-hotw-chip.on i { opacity: 1; }
html.dark .zt-hotw-chip.on { color: #ffcf6b; }
.zt-hotw-hint { margin-top: 8px; font-size: 11.5px; color: var(--zt-text-3); }

.zt-hotw-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0 -6px;
	padding: 0 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .18) transparent;
}
html.dark .zt-hotw-list { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.zt-hotw-list::-webkit-scrollbar { width: 5px; }
.zt-hotw-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); border-radius: 5px; }
html.dark .zt-hotw-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); }

.zt-hotw-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: 9px;
	background: transparent;
	color: var(--zt-text);
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s;
}
.zt-hotw-row:hover { background: var(--zt-card-hover); }
.zt-hotw-rank {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--zt-card);
	color: var(--zt-text-3);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.zt-hotw-rank.rank-0 { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%); color: #fff; }
.zt-hotw-rank.rank-1 { background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%); color: #fff; }
.zt-hotw-rank.rank-2 { background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%); color: #8b6914; }
.zt-hotw-word { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zt-hotw-num {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-size: 12px;
	color: #d08a1a;
	font-variant-numeric: tabular-nums;
}
html.dark .zt-hotw-num { color: #ffb84d; }
.zt-hotw-flame { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; opacity: .9; }
.zt-hotw-go {
	flex-shrink: 0;
	width: 18px;
	text-align: center;
	font-size: 12px;
	color: var(--zt-text-3);
	opacity: 0;
	transition: opacity .2s;
}
.zt-hotw-row:hover .zt-hotw-go { opacity: 1; }
.zt-hotw-empty { padding: 26px 0; font-size: 12.5px; color: var(--zt-text-3); text-align: center; }
.zt-hotw-none { font-size: 12.5px; color: var(--zt-text-3); }

/* ---------- 时钟组件（字号随网格盒自适应） ---------- */
.zt-clock {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
	white-space: nowrap;
}
.zt-time {
	font-size: var(--zt-clock-fs, 64px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 2px;
	font-variant-numeric: tabular-nums;
}
.zt-seconds { font-size: 1em; opacity: .8; }
.zt-date { margin-top: 6px; font-size: calc(var(--zt-clock-fs, 64px) * .24); opacity: .92; color: var(--zt-text-2); }
/* 单行高时钟（顶部固定）：日期行随主字号缩放，秒数与主时间同字号 */
.zt-clock-compact .zt-time { line-height: 1; letter-spacing: 1px; }
.zt-clock-compact .zt-date {
	margin-top: 3px;
	font-size: clamp(12px, calc(var(--zt-clock-fs, 64px) * .30), 15px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ---------- 搜索组件 ---------- */
.zt-search {
	position: relative;
	display: flex;
	align-items: center;
	height: 54px;
	width: min(620px, 92vw);
	padding: 0 16px;
	border-radius: 27px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: var(--zt-shadow);
	transition: box-shadow .2s, border-color .2s;
	z-index: 40;
}
.zt-search:focus-within {
	z-index: 50;
	border-color: var(--zt-accent);
	box-shadow: 0 8px 36px rgba(0,0,0,.16), 0 0 0 3px color-mix(in srgb, var(--zt-accent) 25%, transparent);
}

.zt-engine-btn {
	width: 32px; height: 32px;
	border: none;
	background: transparent;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.zt-engine-btn:hover { background: rgba(0, 0, 0, .06); }
html.dark .zt-engine-btn:hover { background: rgba(255, 255, 255, .1); }

.zt-engine-badge {
	width: 28px; height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--zt-accent);
	overflow: hidden;
}
/* 图标模式：白底 + 图标居中留白。favicon 多是透明或浅色 PNG，
 * 垫品牌色会糊成一团（必应就是典型），白底在深浅色下都稳。 */
.zt-engine-badge[data-imgs] {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.zt-engine-badge img {
	width: 72%; height: 72%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

#search-input {
	flex: 1;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-size: 16px;
	color: var(--zt-text);
	padding: 0 12px;
	min-width: 0;
}
#search-input::placeholder { color: var(--zt-text-3); }

.zt-search-kbd {
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 6px;
	border: 1px solid var(--zt-border);
	color: var(--zt-text-3);
	background: rgba(255, 255, 255, .25);
	user-select: none;
	flex-shrink: 0;
}
html.dark .zt-search-kbd { background: rgba(0, 0, 0, .2); }

/* 引擎菜单 */
.zt-engine-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 150px;
	padding: 6px;
	border-radius: 14px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: var(--zt-shadow);
	display: none;
	z-index: 50;
}
.zt-engine-menu.open { display: block; }
.zt-engine-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: none;
	background: transparent;
	border-radius: 9px;
	font-size: 14px;
	color: var(--zt-text);
	text-align: left;
}
.zt-engine-item:hover { background: rgba(0, 0, 0, .06); }
html.dark .zt-engine-item:hover { background: rgba(255, 255, 255, .08); }
.zt-engine-item.current { color: var(--zt-accent); font-weight: 600; }
.zt-engine-item .zt-engine-badge { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }

/* 搜索联想（高于页面所有组件） */
.zt-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0; right: 0;
	padding: 6px;
	border-radius: 14px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: var(--zt-shadow);
	display: none;
	z-index: 50;
	overflow: hidden;
}
.zt-suggest.open { display: block; }
.zt-suggest-item {
	display: block;
	width: 100%;
	padding: 9px 14px;
	border: none;
	background: transparent;
	border-radius: 9px;
	font-size: 14px;
	color: var(--zt-text);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-suggest-item:hover, .zt-suggest-item.hl { background: rgba(0, 0, 0, .06); }
html.dark .zt-suggest-item:hover, html.dark .zt-suggest-item.hl { background: rgba(255, 255, 255, .08); }

/* ---------- 网址图标（基础层：每址一格，支持规格） ----------
 * .zt-cell = 透明定位壳（网格占位 = 规格），内部：
 *   .zt-cell-body = 白色实底卡片，铺满整个规格（与组件同规格等大）
 *   .zt-link-name = 名称，绝对定位在卡片外部下方（不占占位）
 */
.zt-cell {
	position: absolute;
	border-radius: 14px;
	border: 1px solid transparent;
	background: transparent;
	text-decoration: none;
	color: var(--zt-text);
	cursor: pointer;
	box-sizing: border-box;
}
.zt-cell-body {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
	box-sizing: border-box;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
html.dark .zt-cell-body {
	background: #262b33;
	border-color: rgba(255, 255, 255, .08);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.zt-cell:hover .zt-cell-body {
	border-color: rgba(0, 0, 0, .12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
html.dark .zt-cell:hover .zt-cell-body { border-color: rgba(255, 255, 255, .14); }
.zt-cell.dragging { opacity: .4; z-index: 5; }

.zt-link-icon {
	width: 48px; height: 48px;
	border-radius: 14px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	box-sizing: border-box;
}
.zt-link-icon img { width: 26px; height: 26px; object-fit: contain; }
.zt-link-name {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 1px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--zt-text-2);
	max-width: 200%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .15);
	pointer-events: none;
}

/* 单元格删除角标（编辑模式） */
.zt-cell-del {
	position: absolute;
	top: -2px; right: 6px;
	z-index: 6;   /* 高于 .zt-cell-body（绝对定位铺满卡片），避免被压在图标底层无法点击 */
	width: 18px; height: 18px;
	border: none;
	border-radius: 50%;
	background: var(--zt-danger);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}
body.edit-mode .zt-cell-del { display: flex; }
body.edit-mode .zt-cell { cursor: grab; }
body.edit-mode .zt-cell:hover { outline: 1.5px dashed color-mix(in srgb, var(--zt-accent) 70%, transparent); }

/* 大规格图标格：图标居中放大，名称统一在卡片底部（与 1×1 同构） */
.zt-cell-2x1 .zt-link-icon,
.zt-cell-4x2 .zt-link-icon { width: 56px; height: 56px; border-radius: 16px; }
.zt-cell-2x1 .zt-link-icon img,
.zt-cell-4x2 .zt-link-icon img { width: 34px; height: 34px; }
.zt-cell-2x1 .zt-link-icon.zt-icon-text,
.zt-cell-4x2 .zt-link-icon.zt-icon-text { font-size: 20px; }
.zt-cell-2x2 .zt-link-icon { width: 96px; height: 96px; border-radius: 22px; }
.zt-cell-2x2 .zt-link-icon img { width: 52px; height: 52px; }
.zt-cell-2x2 .zt-link-icon.zt-icon-text { font-size: 28px; }
.zt-cell-2x1 .zt-link-name,
.zt-cell-2x2 .zt-link-name,
.zt-cell-4x2 .zt-link-name { max-width: calc(100% - 8px); }

/* 图片图标平铺模式（卡片内）：磁贴透明铺满卡片，图片按规格等比放大 */
.zt-link-icon.zt-icon-bare {
	background: transparent;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 14px;
	overflow: hidden;
}
.zt-link-icon.zt-icon-bare img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

/* 自定义背景色：色块铺满卡片主体，名称颜色由 JS 按亮度内联 */
.zt-cell-tinted { border-color: transparent; }

/* 内嵌窗口标记：图标左上角小徽标 */
.zt-embed-badge {
	position: absolute;
	top: 5px; left: 7px;
	width: 17px; height: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(20, 22, 26, .55);
	color: #fff;
	pointer-events: none;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.zt-embed-badge svg { width: 10px; height: 10px; fill: #fff; }
.zt-folder-child .zt-embed-badge { top: 3px; left: 4px; width: 14px; height: 14px; }
.zt-folder-child .zt-embed-badge svg { width: 8px; height: 8px; }

/* 内嵌窗口大弹窗（复用组件详情窗口） */
.zt-detail-head-btns { display: flex; align-items: center; gap: 10px; }
.zt-embed-frame-wrap {
	flex: 1;
	min-height: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--zt-border);
}
html.dark .zt-embed-frame-wrap { background: #1e2126; }
.zt-embed-frame { width: 100%; height: 100%; border: none; display: block; }

/* 文字图标（1-5 字符）磁贴 */
.zt-link-icon.zt-icon-text {
	font-size: 15px;
	letter-spacing: .5px;
	line-height: 1;
}
/* 纯符号 / emoji：字号按磁贴放大，否则 15px 缩成一个小点 */
.zt-link-icon.zt-icon-emoji {
	font-size: 26px;
	letter-spacing: 0;
}
.zt-dock-item .zt-link-icon.zt-icon-emoji,
.zt-folder-child .zt-link-icon.zt-icon-emoji {
	font-size: 22px;
}

/* 空态虚线格 */
.zt-cell-ghost {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 1.5px dashed;
	border-color: var(--zt-text-3);
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--zt-text-3);
	font-size: 12.5px;
}
.zt-cell-ghost:hover { border-color: var(--zt-accent); color: var(--zt-accent); }
.zt-cell-ghost .zt-link-icon {
	border: none;
	background: transparent;
	color: var(--zt-text-3);
	font-size: 24px;
}
.zt-cell-ghost:hover .zt-link-icon { color: var(--zt-accent); }

/* 文件夹：可调大小的网格容器，子图标固定 1×1 平铺、可滚动 */
.zt-cell-folder {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px;
	background: #ffffff;
	border-color: rgba(0, 0, 0, .06);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	cursor: default;
}
html.dark .zt-cell-folder {
	background: #262b33;
	border-color: rgba(255, 255, 255, .08);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.zt-folder-head {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	min-width: 0;
}
.zt-folder-head-glyph svg.zt-folder-glyph {
	width: 15px; height: 15px;
	fill: var(--zt-accent);
	flex-shrink: 0;
}
.zt-folder-head-name {
	flex: 1;
	font-size: 12px;
	font-weight: 600;
	color: var(--zt-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-folder-count {
	flex-shrink: 0;
	padding: 0 6px;
	border-radius: 8px;
	background: var(--zt-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
}
.zt-folder-grid {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), 1fr);
	gap: 4px;
	align-content: start;
	padding: 2px;
}
.zt-folder-blank {
	grid-column: 1 / -1;
	font-size: 11px;
	color: var(--zt-text-3);
	text-align: center;
	padding: 10px 0;
}
.zt-folder-child {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 0;
	border-radius: 9px;
	cursor: pointer;
	min-width: 0;
}
.zt-folder-child:hover { background: rgba(0, 0, 0, .06); }
html.dark .zt-folder-child:hover { background: rgba(255, 255, 255, .08); }
.zt-folder-child .zt-link-icon { width: 36px; height: 36px; }
.zt-folder-child .zt-link-icon img { width: 20px; height: 20px; }
.zt-folder-child-name {
	font-size: 10px;
	color: var(--zt-text-2);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-lib-fav {
	width: 24px; height: 24px;
	flex-shrink: 0;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

/* ---------- Dock 组件 ---------- */
.zt-dock {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 22px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	box-shadow: var(--zt-shadow);
	max-width: 96vw;
}

.zt-dock-item {
	position: relative;
	width: 46px; height: 46px;
	flex-shrink: 0;
	border: none;
	border-radius: 13px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: bottom center;
	transition: transform .12s ease-out;
	text-decoration: none;
}
.zt-dock-item .zt-link-icon { width: 44px; height: 44px; border-radius: 12px; }
.zt-dock-item .zt-link-icon img { width: 26px; height: 26px; }

.zt-dock-tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(20, 22, 26, .85);
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
.zt-dock-item:hover .zt-dock-tip { opacity: 1; }

/* 可点击进详情的卡片 */
.zt-wx-clickable { cursor: pointer; }

/* ---------- 组件详情大窗口 ---------- */
.zt-modal.zt-modal-xl {
	width: min(860px, 94vw);
	height: min(660px, 88vh);
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}
#detail-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 22px 20px;
	overflow: hidden;
}
.zt-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	margin-bottom: 14px;
}
.zt-detail-head h3 { font-size: 16px; font-weight: 600; margin: 0; }

/* ---------- 天气位置设置弹窗 ---------- */
.zt-loc-now {
	font-size: 12.5px;
	color: var(--zt-text-3);
	margin: -8px 0 12px;
}
.zt-loc-btns { display: flex; gap: 8px; margin-bottom: 12px; }
.zt-loc-search { display: flex; gap: 8px; }
.zt-loc-search .zt-input { flex: 1; min-width: 0; }
.zt-loc-list {
	max-height: 190px;
	overflow-y: auto;
	margin-top: 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 128, 128, .3) transparent;
}
.zt-loc-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--zt-text);
	text-align: left;
	cursor: pointer;
}
.zt-loc-item:hover { background: var(--zt-card-hover); }
.zt-loc-name { font-size: 13.5px; font-weight: 600; flex-shrink: 0; }
.zt-loc-admin {
	font-size: 11.5px;
	color: var(--zt-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 天气详情 */
.zt-wd-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	border-radius: 16px;
	background: linear-gradient(112deg, #fbe3cf 0%, #f6ece3 34%, #dbe9f6 70%, #b9d6ee 100%);
	color: #33322e;
	flex-shrink: 0;
}
html.dark .zt-wd-hero { background: linear-gradient(112deg, #5d4a3d, #4d5361 46%, #33475e); color: #f2f5f8; }
.zt-wd-hero-icon { width: 56px; height: 56px; flex-shrink: 0; opacity: .9; }
.zt-wd-hero-icon svg { width: 100%; height: 100%; }
.zt-wd-hero-main { min-width: 120px; }
.zt-wd-temp { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -1px; }
.zt-wd-temp i { font-style: normal; font-size: .5em; margin-left: 2px; }
.zt-wd-text { font-size: 13.5px; margin-top: 6px; font-weight: 600; }
.zt-wd-range { font-size: 12px; opacity: .72; margin-top: 2px; }
.zt-wd-stats {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 14px;
	min-width: 0;
}
.zt-wd-stat { display: flex; flex-direction: column; gap: 2px; }
.zt-wd-stat span { font-size: 11px; opacity: .62; }
.zt-wd-stat b { font-size: 13px; font-weight: 600; }

.zt-wd-section { margin-top: 16px; min-height: 0; display: flex; flex-direction: column; }
.zt-wd-section h4 {
	font-size: 12px;
	font-weight: 600;
	color: var(--zt-text-3);
	margin-bottom: 8px;
	letter-spacing: .5px;
}
.zt-wd-hours {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	flex-shrink: 0;
}
.zt-wd-hour {
	flex: 0 0 auto;
	width: 54px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	border-radius: 12px;
	background: rgba(128, 128, 128, .10);
}
.zt-wd-hour.now { background: color-mix(in srgb, var(--zt-accent) 16%, transparent); }
.zt-wd-hour .h { font-size: 10.5px; color: var(--zt-text-3); }
.zt-wd-hour svg { width: 18px; height: 18px; }
.zt-wd-hour .t { font-size: 12px; font-weight: 600; }
.zt-wd-days { flex: 1; overflow-y: auto; min-height: 0; }
.zt-wd-day {
	display: grid;
	grid-template-columns: 56px 52px 24px 1fr 92px;
	align-items: center;
	gap: 8px;
	padding: 8px 6px;
	border-radius: 10px;
	font-size: 12.5px;
}
.zt-wd-day:nth-child(odd) { background: rgba(128, 128, 128, .07); }
.zt-wd-day .dl { font-weight: 600; }
.zt-wd-day .dd { color: var(--zt-text-3); font-size: 11px; }
.zt-wd-day svg { width: 18px; height: 18px; }
.zt-wd-day .dt { color: var(--zt-text-2); }
.zt-wd-day .dtn { text-align: right; font-variant-numeric: tabular-nums; }
.zt-wd-day .dtn em { font-style: normal; color: var(--zt-text-3); margin-left: 6px; }

/* 日历详情（参考 mTab：左侧大月历 + 月份水印 + 右侧信息栏） */
.zt-cd3 { display: flex; gap: 18px; flex: 1; min-height: 0; }
.zt-cd3-main {
	flex: 1.45;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.zt-cd3-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
.zt-cd3-select {
	padding: 4px 8px;
	border: 1px solid var(--zt-border);
	border-radius: 8px;
	background: transparent;
	color: var(--zt-text);
	font-size: 13px;
	outline: none;
}
.zt-cd3-navbtn {
	width: 26px; height: 26px;
	border: 1px solid var(--zt-border);
	border-radius: 8px;
	background: transparent;
	color: var(--zt-text);
	font-size: 15px;
	line-height: 1;
}
.zt-cd3-navbtn:hover { background: var(--zt-card-hover); }
.zt-cd3-today {
	width: 26px; height: 26px;
	border: 1px solid var(--zt-border);
	border-radius: 8px;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 12px;
}
.zt-cd3-today:hover { background: var(--zt-card-hover); }
.zt-cd3-toggle {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--zt-text-2);
	cursor: pointer;
}
.zt-cd3-toggle input { display: none; }
.zt-cd3-toggle i {
	width: 32px; height: 18px;
	border-radius: 9px;
	background: rgba(128, 128, 128, .35);
	position: relative;
	transition: background .15s;
}
.zt-cd3-toggle i::after {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: left .15s;
}
.zt-cd3-toggle input:checked + i { background: #3b82f6; }
.zt-cd3-toggle input:checked + i::after { left: 16px; }
.zt-cd3-week, .zt-cd3-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	text-align: center;
}
.zt-cd3-week { font-size: 12px; color: var(--zt-text-3); margin-bottom: 4px; flex-shrink: 0; }
.zt-cd3-week .red { color: #ef4444; }
.zt-cd3-grid { flex: 1; grid-auto-rows: 1fr; min-height: 0; position: relative; z-index: 1; overflow-y: auto; }
/* 节假日调休整格底色：休=淡红、班=淡灰蓝 */
.zt-cd3-grid .zt-cal-cell.holiday { background: rgba(244, 63, 94, .10); }
.zt-cd3-grid .zt-cal-cell.workday { background: rgba(100, 116, 139, .12); }
.zt-cd3-grid .zt-cal-cell.holiday.today { background: #ef4444; }
.zt-cd3-grid .zt-cal-cell.workday.today { background: #ef4444; }
.zt-cd3-grid .zt-cal-cell.holiday.sel { background: #3b82f6; }
.zt-cd3-grid .zt-cal-cell.workday.sel { background: #3b82f6; }
.zt-cd3-grid .zt-cal-cell { border-radius: 8px; cursor: pointer; }
.zt-cd3-grid .zt-cal-cell.clickable:hover { background: var(--zt-card-hover); }
.zt-cd3-grid .zt-cal-cell .d { font-size: 14px; font-weight: 600; }
.zt-cd3-grid .zt-cal-cell .l { font-size: 9.5px; }
.zt-cd3-grid .zt-cal-cell.today .d { font-weight: 800; }
.zt-cd3-grid .zt-cal-cell.sel { background: #3b82f6; }
.zt-cd3-grid .zt-cal-cell.today { background: #ef4444; }
.zt-cd3-grid .zt-cal-cell.today.sel { background: #ef4444; }
.zt-cd3-grid .zt-cal-cell.out .d { opacity: .3; }
.zt-cd3-grid .zt-cal-cell.out .l { opacity: .35; }
.zt-cd3-grid .zt-cal-cell .l b { font-style: normal; color: #ef4444; font-weight: 600; }
.zt-cd3-grid.no-lunar .zt-cal-cell .l { display: none; }
.zt-cd3-wm {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-size: 200px;
	line-height: 1;
	font-weight: 800;
	color: rgba(128, 128, 128, .07);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.zt-cd3-side {
	flex: 0 0 250px;
	min-width: 0;
	padding: 16px;
	border-radius: 14px;
	background: rgba(128, 128, 128, .09);
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}
.zt-cd3-date { font-size: 13.5px; font-weight: 600; text-align: center; }
.zt-cd3-block {
	width: 74px; height: 74px;
	margin: 2px auto 4px;
	border-radius: 14px;
	background: #3b82f6;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	font-weight: 800;
	box-shadow: 0 6px 16px rgba(59, 130, 246, .35);
}
.zt-cd3-lunar {
	text-align: center;
	font-size: 12px;
	line-height: 1.9;
	color: var(--zt-text-2);
}
.zt-cd3-tags { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.zt-cd3-tag {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--zt-text-2);
}
.zt-cd3-tag b {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	padding: 1px 8px;
	border-radius: 7px;
	line-height: 1.5;
}
.zt-cd3-tag span { min-width: 0; }
.zt-cd3-tag em { font-style: normal; color: var(--zt-text-3); }
.zt-cd3-tag.t-purple b { background: #8b5cf6; }
.zt-cd3-tag.t-pink b { background: #ec4899; }
.zt-cd3-tag.t-green b { background: #16a34a; }
.zt-cd3-tag.t-gray b { background: #64748b; }
.zt-cd3-dirs { font-size: 11.5px; line-height: 1.9; color: var(--zt-text-2); border-top: 1px dashed var(--zt-border); padding-top: 8px; }
.zt-cd3-dirs span { color: var(--zt-text-3); }
.zt-al-note { margin-top: auto; padding-top: 8px; font-size: 11px; opacity: .7; }

/* 待办详情 */
.zt-td-bar { flex-shrink: 0; }
.zt-td-bar .zt-lib-search { margin-bottom: 10px; }
.zt-td-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.zt-td-tab {
	padding: 5px 12px;
	border: 1px solid var(--zt-border);
	border-radius: 999px;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 12.5px;
}
.zt-td-tab i { font-style: normal; opacity: .55; margin-left: 5px; font-size: 11px; }
.zt-td-tab.active { background: var(--zt-accent); border-color: var(--zt-accent); color: #fff; }
.zt-td-tab.active i { opacity: .85; }
.zt-td-add { display: flex; gap: 8px; flex-shrink: 0; margin-bottom: 12px; }
.zt-td-add input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 13px;
	outline: none;
}
.zt-td-add input:focus { border-color: var(--zt-accent); }
.zt-td-list { flex: 1; overflow-y: auto; min-height: 0; }
.zt-td-empty { text-align: center; color: var(--zt-text-3); font-size: 13px; padding: 40px 0; }
.zt-td-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 8px;
	border-bottom: 1px solid var(--zt-border);
	font-size: 13px;
}
.zt-td-item:hover { background: rgba(128, 128, 128, .07); }
.zt-td-item.done .zt-td-text { text-decoration: line-through; color: var(--zt-text-3); }
.zt-td-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-td-date { font-size: 11px; color: var(--zt-text-3); flex-shrink: 0; }
.zt-td-star {
	border: none;
	background: transparent;
	color: var(--zt-text-3);
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
	flex-shrink: 0;
	opacity: .5;
}
.zt-td-star.on { color: #f59e0b; opacity: 1; }
.zt-td-del {
	border: none;
	background: transparent;
	color: var(--zt-text-3);
	font-size: 15px;
	line-height: 1;
	padding: 0 2px;
	flex-shrink: 0;
}
.zt-td-del:hover { color: var(--zt-danger); }
.zt-td-foot { flex-shrink: 0; padding-top: 10px; font-size: 11.5px; color: var(--zt-text-3); }

/* ---------- 记事本（对齐 mTab note：蓝色渐变头 + 白色正文） ---------- */
.zt-w-notepad {
	gap: 0;
	padding: 0;
	background: #fff;
}
html.dark .zt-w-notepad { background: #262b33; }
.zt-np-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-shrink: 0;
	height: 38px;
	padding: 0 12px;
	background: linear-gradient(135deg, #4C91FF, #65A1FD);
	border-radius: 17px 17px 0 0;
}
html.dark .zt-np-head { background: linear-gradient(135deg, #2f5cab, #3d6dc0); }
.zt-np-name {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-np-more { font-size: 11px; color: rgba(255, 255, 255, .85); flex-shrink: 0; }
.zt-np-more { font-size: 10.5px; color: var(--w-text-3); flex-shrink: 0; }

/* 记事本大窗口 */
.zt-np2 { display: flex; gap: 16px; flex: 1; min-height: 0; }
.zt-np2-side { flex: 0 0 200px; display: flex; flex-direction: column; min-height: 0; }
.zt-np2-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 128, 128, .35) transparent;
}
.zt-np2-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px;
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--zt-text-2);
	cursor: pointer;
}
.zt-np2-item:hover { background: rgba(128, 128, 128, .1); }
.zt-np2-item.active { background: rgba(245, 158, 11, .16); color: var(--zt-text); }
.zt-np2-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-np2-item-date { font-size: 10.5px; color: var(--zt-text-3); flex-shrink: 0; }
.zt-np2-item .zt-td-del { display: none; }
.zt-np2-item:hover .zt-td-del { display: block; }
.zt-np2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#np-ta {
	flex: 1;
	min-height: 0;
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 13.5px;
	line-height: 1.8;
	resize: none;
	outline: none;
	font-family: inherit;
}
#np-ta:focus { border-color: var(--zt-accent); }
.zt-np2-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: var(--zt-text-3);
	flex-shrink: 0;
}
/* 参考图：侧栏搜索 + 蓝色新建按钮 */
.zt-np2-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.zt-np2-search {
	flex: 1; min-width: 0;
	padding: 8px 12px;
	border-radius: 18px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card-hover);
	color: var(--zt-text);
	font-size: 12.5px;
	outline: none;
}
.zt-np2-search:focus { border-color: var(--zt-accent); }
.zt-np2-new { flex-shrink: 0; border-radius: 18px; white-space: nowrap; }
.zt-np2-item { align-items: flex-start; }
.zt-np2-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zt-np2-item-date { display: flex; align-items: center; }
.zt-np2-empty { font-size: 12px; color: var(--zt-text-3); padding: 14px 4px; text-align: center; }
/* 笔记颜色色板（参考图底部） */
.zt-np-colors { display: flex; align-items: center; gap: 8px; }
.zt-np-color {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.zt-np-color.active { border-color: var(--zt-accent); }
.zt-np2-foot-right { display: flex; align-items: center; gap: 10px; }
/* 卡片：蓝头下仅显示当前笔记标题，标题逐行落在横线纸上.
   行高必须与渐变周期一致（22px），且 padding-top 为其整数倍（0 即第一格），否则文字会逐行偏离横线 */
.zt-np-card-title {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0 16px 0;
	font-size: 15px;
	font-weight: 600;
	color: #334155;
	text-align: center;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	line-height: 22px;
	word-break: break-word;
	background-image: repeating-linear-gradient(0deg, transparent 0, transparent 21px, rgba(100, 116, 139, .16) 21px, rgba(100, 116, 139, .16) 22px);
	background-position: 0 0;
	background-origin: border-box;
	background-clip: border-box;
}
html.dark .zt-np-card-title { color: #c9d3de; }

/* 记事本富文本工具栏 + 编辑器 */
.zt-np-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	padding: 4px 6px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	flex-shrink: 0;
}
/* 插入图片二选一小菜单（允许上传时出现；层级需盖过详情弹窗 z-index:110） */
.zt-np-img-menu {
	position: fixed;
	z-index: 130;
	min-width: 136px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.zt-np-img-menu button {
	border: none;
	background: transparent;
	text-align: left;
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 12.5px;
	color: var(--zt-text);
	cursor: pointer;
	white-space: nowrap;
}
.zt-np-img-menu button:hover { background: var(--zt-card-hover); }

.zt-np-tb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 5px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--w-text, var(--zt-text));
	font-size: 13px;
	cursor: pointer;
}
.zt-np-tb:hover { background: rgba(128, 128, 128, .16); }
.zt-np-tb svg { width: 15px; height: 15px; fill: currentColor; }
.zt-tb-b { font-weight: 700; }
.zt-tb-u { text-decoration: underline; }
.zt-tb-i { font-style: italic; font-family: Georgia, serif; }
.zt-tb-s { text-decoration: line-through; }
.zt-tb-ol { font-size: 11.5px; font-weight: 600; }
.zt-tb-clear { font-size: 11px; font-weight: 600; }
.zt-tb-color { position: relative; font-weight: 700; overflow: hidden; }
.zt-tb-color input[type=color] {
	position: absolute;
	inset: -4px;
	opacity: 0;
	cursor: pointer;
}
.zt-tb-hl { background: rgba(253, 230, 138, .55); border-radius: 6px; }
.zt-tb-select {
	height: 26px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font-size: 12px;
	cursor: pointer;
}
.zt-np-tb-sep { width: 1px; height: 16px; background: var(--zt-border); margin: 0 4px; flex-shrink: 0; }
.zt-np-editor {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--w-text, var(--zt-text));
	font-size: 14px;
	line-height: 1.8;
	outline: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 128, 128, .35) transparent;
}
.zt-np-editor:focus { border-color: var(--zt-accent); }
.zt-np-editor ul, .zt-np-editor ol { padding-left: 22px; margin: 4px 0; }
.zt-np-editor blockquote {
	margin: 6px 0;
	padding: 2px 12px;
	border-left: 3px solid var(--zt-accent);
	color: var(--w-text-2, var(--zt-text-2));
}
.zt-np-editor img { max-width: 100%; border-radius: 8px; }
.zt-np-editor a { color: var(--zt-accent); }
.zt-np-editor h1 { font-size: 1.6em; font-weight: 700; margin: .5em 0 .35em; }
.zt-np-editor h2 { font-size: 1.35em; font-weight: 700; margin: .5em 0 .3em; }
.zt-np-editor h3 { font-size: 1.15em; font-weight: 700; margin: .45em 0 .25em; }
/* 笔记标题输入框（未设置时派生：一级标题 > 首行内容） */
.zt-np-title {
	width: 100%;
	padding: 0 2px;
	margin-bottom: 6px;
	border: none;
	border-bottom: 1px solid transparent;
	outline: none;
	background: transparent;
	color: var(--w-text, var(--zt-text));
	font-size: 20px;
	font-weight: 700;
	flex-shrink: 0;
}
.zt-np-title:focus { border-bottom-color: var(--zt-border); }
.zt-np-title::placeholder { color: var(--w-text-3, var(--zt-text-3)); font-weight: 500; }
.zt-np-head-icon { display: flex; flex-shrink: 0; }
.zt-np-head-icon svg { width: 15px; height: 15px; fill: #fff; }

/* 倒计时大窗口 */
.zt-cd2-add { display: flex; gap: 8px; flex-shrink: 0; margin-bottom: 14px; }
.zt-cd2-add input {
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 13px;
	outline: none;
}
.zt-cd2-add input#cd-label,
.zt-cd2-add input#an-label { flex: 1; min-width: 0; }
.zt-cd2-add input:focus { border-color: var(--zt-accent); }
.zt-cd2-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 128, 128, .35) transparent;
}
.zt-cd2-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px;
	border-bottom: 1px solid var(--zt-border);
}
.zt-cd2-item.active { background: rgba(139, 92, 246, .10); border-radius: 10px; }
/* 纪念日大窗口：选中行用暖色高亮，与冷色的倒计时区分 */
.zt-an2-list .zt-cd2-item.active { background: rgba(255, 138, 76, .12); }

/* ---------- 倒计时重设计：整句式「距离{标题}还有X天」 ---------- */
.zt-cd { position: relative; justify-content: center; }
.zt-cd-sentence {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	text-align: center;
	padding: 0 10px;
	line-height: 1.15;
	row-gap: 2px;
}
.zt-cd-pre { font-size: 15px; color: var(--w-text-2); }
.zt-cd-label { font-size: 18px; font-weight: 700; color: var(--w-text); margin: 0 7px; }
.zt-cd-num {
	font-size: 56px;
	font-weight: 800;
	font-style: normal;
	margin: 0 5px;
	background: linear-gradient(135deg, #4a8cff, #8b5cf6);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #4a8cff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -1px;
}
html.dark .zt-cd-num {
	background: linear-gradient(135deg, #6ea8ff, #a78bfa);
	-webkit-background-clip: text;
	background-clip: text;
}
.zt-cd-unit { font-size: 15px; color: var(--w-text-2); }
/* 数字 + 单位打包：天数常为四位数，避免「天」被挤到下一行单独成行 */
.zt-cd-tail { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
/* 纪念日数字：只换渐变（暖色），尺寸规则仍由 .zt-cd-num 决定 */
.zt-an-num {
	background: linear-gradient(135deg, #ffb056, #ff5f6d);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #ff8a4c;
}
html.dark .zt-an-num {
	background: linear-gradient(135deg, #ffc078, #ff8190);
	-webkit-background-clip: text;
	background-clip: text;
}
/* 4×2 横幅：单行紧凑 */
.zt-cd-wide .zt-cd-num { font-size: 40px; }
.zt-cd-wide .zt-cd-label { font-size: 17px; }
.zt-cd-wide .zt-cd-pre, .zt-cd-wide .zt-cd-unit { font-size: 14px; }
.zt-cd-badge {
	position: absolute;
	top: 10px; right: 12px;
	font-size: 10.5px;
	color: var(--w-text-3);
	border: 1px solid var(--w-line);
	border-radius: 10px;
	padding: 1px 8px;
}
.zt-cd-date {
	text-align: center;
	font-size: 11px;
	color: var(--w-text-3);
	margin: 0 0 10px;
	flex-shrink: 0;
}
/* 弹窗列表行：同一句式 */
.zt-cd2-item { border-radius: 10px; }
.zt-cd2-sentence {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	line-height: 1.15;
}
.zt-cd2-sentence .zt-cd-pre { font-size: 13px; }
.zt-cd2-sentence .zt-cd-label { font-size: 15px; margin: 0 6px; }
.zt-cd2-sentence .zt-cd-num { font-size: 26px; margin: 0 4px; }
.zt-cd2-sentence .zt-cd-unit { font-size: 13px; }
.zt-cd2-item-date { font-size: 11px; color: var(--zt-text-3); flex-shrink: 0; }

/* ---------- 右键菜单 ---------- */
.zt-ctx {
	position: fixed;
	z-index: 100;
	min-width: 160px;
	padding: 6px;
	border-radius: 14px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	box-shadow: var(--zt-shadow);
	animation: zt-fade .12s ease;
	font-size: 13.5px;
}
.zt-ctx-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 8px 12px;
	border: none;
	background: transparent;
	border-radius: 9px;
	color: var(--zt-text);
	text-align: left;
	white-space: nowrap;
}
.zt-ctx-item:hover { background: rgba(0, 0, 0, .06); }
html.dark .zt-ctx-item:hover { background: rgba(255, 255, 255, .08); }
.zt-ctx-item .zt-check { color: var(--zt-accent); font-weight: 700; }
.zt-ctx-item .zt-arrow { opacity: .5; font-size: 11px; }
.zt-ctx-divider { height: 1px; margin: 5px 8px; background: var(--zt-border); }

/* 二级菜单（紧贴父项 + 透明过渡桥，防止 hover 断层） */
.zt-ctx-sub {
	position: absolute;
	left: 100%;
	top: -6px;
	min-width: 140px;
	padding: 6px;
	border-radius: 14px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	box-shadow: var(--zt-shadow);
	display: none;
}
.zt-ctx-sub::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 0;
	width: 10px;
	height: 100%;
}
.zt-ctx-item.has-sub:hover > .zt-ctx-sub { display: block; }
/* 菜单贴近右缘时，子菜单向左展开 */
.zt-ctx.flip .zt-ctx-sub { left: auto; right: 100%; }
.zt-ctx.flip .zt-ctx-sub::before { left: auto; right: -10px; }

/* ---------- 设置弹窗（居中、实底、Tab 切换，尺寸按视口比例） ---------- */
.zt-settings {
	width: min(720px, 92vw);
	height: min(580px, 84vh);
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, .07);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
	overflow: hidden;
	animation: zt-pop .2s ease;
	/* 实底卡片专属变量：覆盖页面玻璃体系的白色系文字 */
	--zt-text-2: rgba(31, 35, 41, .75);
	--zt-text-3: rgba(31, 35, 41, .48);
	--zt-border: rgba(31, 35, 41, .12);
	--zt-card: rgba(31, 35, 41, .05);
	--zt-card-hover: rgba(31, 35, 41, .10);
}
html.dark .zt-settings {
	--zt-text-2: rgba(232, 234, 237, .75);
	--zt-text-3: rgba(232, 234, 237, .5);
	--zt-border: rgba(255, 255, 255, .12);
	--zt-card: rgba(255, 255, 255, .06);
	--zt-card-hover: rgba(255, 255, 255, .12);
	background: #262b33;
	border-color: rgba(255, 255, 255, .08);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
@keyframes zt-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zt-fade { from { opacity: 0; } to { opacity: 1; } }

.zt-settings-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 14px 14px 20px;
	font-size: 16px;
	font-weight: 600;
	flex-shrink: 0;
}
.zt-settings-tabs { margin: 0 20px 4px; flex-shrink: 0; }
.zt-settings-body { flex: 1; overflow-y: auto; padding: 10px 20px 24px; min-height: 0; }
.zt-tab-panel { display: none; }
.zt-tab-panel.active { display: block; }

/* 搜索引擎管理 */
.zt-engine-row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	border-radius: 9px;
	font-size: 13px;
	margin-bottom: 4px;
	background: var(--zt-card);
}
.zt-engine-row .zt-engine-badge { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; flex-shrink: 0; }
.zt-engine-name { font-weight: 600; flex-shrink: 0; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-engine-url {
	flex: 1;
	min-width: 0;
	font-size: 11.5px;
	color: var(--zt-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-engine-row button {
	border: none;
	background: transparent;
	color: var(--zt-text-3);
	font-size: 13px;
	padding: 2px 5px;
	flex-shrink: 0;
}
.zt-engine-row button:hover { color: var(--zt-accent); }
.zt-engine-row .zt-engine-del:hover { color: var(--zt-danger); }
.zt-engine-form { margin-top: 10px; padding: 12px; border: 1px solid var(--zt-border); border-radius: 12px; }
.zt-engine-form .zt-field { margin-bottom: 10px; }
.zt-engine-form .zt-row { justify-content: flex-end; margin-bottom: 0; }
.zt-engine-menu { max-height: 260px; overflow-y: auto; }

.zt-group { padding: 16px 0; border-bottom: 1px solid var(--zt-border); }
.zt-group:last-child { border-bottom: none; }
.zt-group h3 {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zt-text-3);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
}
.zt-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 14px;
}
.zt-row:last-child { margin-bottom: 0; }
.zt-row label { color: var(--zt-text-2); }
/* 从属开关行（如极简模式的子选项），缩进 + 字号降一档 */
.zt-row.zt-sub-row { padding-left: 14px; margin-top: -6px; font-size: 13px; }
.zt-row.zt-sub-row label { color: var(--zt-text-3); }
.zt-row.zt-comp-row label { color: var(--zt-text); }

.zt-seg {
	display: flex;
	border: 1px solid var(--zt-border);
	border-radius: 10px;
	overflow: hidden;
}
.zt-seg button {
	padding: 6px 12px;
	border: none;
	background: transparent;
	font-size: 12.5px;
	color: var(--zt-text-2);
	border-right: 1px solid var(--zt-border);
}
.zt-seg button:last-child { border-right: none; }
.zt-seg button.active { background: var(--zt-accent); color: #fff; }

.zt-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.zt-switch input { opacity: 0; width: 0; height: 0; }
.zt-switch span {
	position: absolute;
	inset: 0;
	border-radius: 11px;
	background: rgba(128, 128, 128, .4);
	transition: background .2s;
	cursor: pointer;
}
.zt-switch span::after {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s;
}
.zt-switch input:checked + span { background: var(--zt-accent); }
.zt-switch input:checked + span::after { transform: translateX(18px); }

.zt-gradients { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.zt-gradient {
	width: 44px; height: 30px;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s;
}
.zt-gradient:hover { transform: scale(1.08); }
.zt-gradient.active { border-color: var(--zt-accent); }

/* 内置壁纸库 */
.zt-wall-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}
.zt-wall-item {
	height: 52px;
	border-radius: 10px;
	border: 2px solid transparent;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	padding: 0;
	transition: transform .15s, border-color .15s;
}
.zt-wall-item:hover { transform: translateY(-1px); }
.zt-wall-item.active {
	border-color: var(--zt-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 22%, transparent);
}

.zt-btn {
	padding: 7px 16px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 13px;
	transition: all .2s;
}
.zt-btn:hover { background: var(--zt-card-hover); }
.zt-btn.zt-primary { background: var(--zt-accent); border-color: var(--zt-accent); color: #fff; }
.zt-btn.zt-primary:hover { filter: brightness(1.08); }
.zt-btn.zt-danger { color: var(--zt-danger); border-color: var(--zt-danger); }

.zt-hint { font-size: 12px; color: var(--zt-text-3); line-height: 1.6; }

select#opt-engine {
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 13px;
	outline: none;
}

/* ---------- 底部一言（非组件，开关控制；位于 Dock 下方、屏幕最底边） ---------- */
.zt-footer {
	position: fixed;
	left: 0; right: 0;
	bottom: 12px;
	text-align: center;
	z-index: 46;
	pointer-events: none;
}
.zt-hitokoto-line {
	display: inline-block;
	max-width: 80vw;
	font-size: 13.5px;
	color: var(--zt-text-2);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .18);
	cursor: pointer;
	user-select: none;
	pointer-events: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-hitokoto-line .zt-from { opacity: .65; margin-left: 8px; font-size: 12px; }

/* ---------- 设置输入框 ---------- */
.zt-input {
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card-hover);
	color: var(--zt-text);
	font-size: 12.5px;
	outline: none;
	width: 170px;
}
.zt-input:focus { border-color: var(--zt-accent); }

/* ---------- 弹窗 ---------- */
.zt-modal-mask {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: zt-fade .2s ease;
}

.zt-modal {
	width: min(360px, 90vw);
	padding: 34px 22px 22px;
	border-radius: 18px;
	/* 实底方案（与设置面板一致），弹窗内局部重定义变量保证对比度 */
	background: #ffffff;
	color: #1f2329;
	--zt-text: #1f2329;
	--zt-text-2: rgba(31, 35, 41, .72);
	--zt-text-3: rgba(31, 35, 41, .5);
	--zt-border: rgba(0, 0, 0, .10);
	--zt-card: rgba(0, 0, 0, .045);
	--zt-card-hover: rgba(0, 0, 0, .08);
	border: 1px solid rgba(0, 0, 0, .07);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
html.dark .zt-modal {
	background: #262b33;
	color: #e8eaed;
	--zt-text: #e8eaed;
	--zt-text-2: rgba(232, 234, 237, .75);
	--zt-text-3: rgba(232, 234, 237, .5);
	--zt-border: rgba(255, 255, 255, .12);
	--zt-card: rgba(255, 255, 255, .06);
	--zt-card-hover: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .08);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.zt-modal.zt-modal-lg { width: min(640px, 94vw); }
.zt-modal h3 { font-size: 16px; margin-bottom: 16px; }

/* ---------- 苹果风窗口（红黄绿灯 + 居中标题 + 大圆角） ---------- */
.zt-modal {
	position: relative;
	border-radius: 14px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .12);
}
.zt-modal::before,
.zt-settings::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 16px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
	z-index: 3;
	pointer-events: none;
}
.zt-modal h3 { text-align: center; }
.zt-settings { position: relative; border-radius: 16px; }
.zt-settings-head { padding-left: 78px; }
/* 大窗口：标题栏自带红绿灯，正文区自行留白 */
.zt-modal.zt-modal-xl { padding: 0; border-radius: 14px; }
/* 大窗口：真实红绿灯（关闭 / 最小化 / 全屏），装饰性伪元素点不再渲染 */
.zt-modal.zt-modal-xl::before { content: none; }
.zt-modal-xl .zt-detail-head {
	height: 46px;
	padding: 0 16px;
	gap: 12px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--zt-border);
}
.zt-modal-xl .zt-detail-head h3 {
	flex: 1;
	min-width: 0;
	text-align: left;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-win-dots { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.zt-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; position: relative; }
/* 符号：离线内置 SVG（关闭/最小化/全屏/还原），悬停显示，无网络可用 */
.zt-dot svg {
	position: absolute;
	inset: 3px;
	width: 8px; height: 8px;
	fill: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity .15s;
	pointer-events: none;
}
.zt-win-dots:hover .zt-dot svg { opacity: 1; }
.zt-dot-close { background: #ff5f57; }
.zt-dot-min { background: #febc2e; }
.zt-dot-fs { background: #28c840; }
/* 绿点全屏：铺满可视区域 */
#detail-modal.zt-window-fs .zt-modal.zt-modal-xl {
	position: fixed;
	inset: 12px;
	width: auto;
	height: auto;
	max-width: none;
	transition: inset .2s ease;
}
/* 最小化窗口在 Dock 栏内的还原入口：与固定图标同尺寸（46px 格 / 44px 图标）+ 底部指示点 */
.zt-min-chip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
	width: 46px; height: 50px;
	flex-shrink: 0;
	padding: 1px 0 0;
	border: none;
	background: transparent;
	color: var(--zt-text);
	cursor: pointer;
	pointer-events: auto;
	border-radius: 13px;
}
.zt-min-chip:hover { background: rgba(128, 128, 128, .18); }
.zt-min-chip-icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.zt-min-chip-icon svg { width: 22px; height: 22px; fill: #fff; display: block; }
.zt-min-chip-ind {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--zt-accent);
}
/* 最小化状态：指示点变暗 */
.zt-min-chip-min .zt-min-chip-ind { background: var(--zt-text-3); }
/* Dock 内：最小化窗口与固定图标之间的分隔线 */
.zt-dock-sep {
	width: 1px;
	height: 34px;
	align-self: center;
	background: var(--zt-border);
	flex-shrink: 0;
}

/* 弹窗选项卡 */
.zt-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
	padding: 4px;
	border-radius: 12px;
	background: rgba(128, 128, 128, .14);
}
.zt-tabs button {
	flex: 1;
	padding: 7px 0;
	border: none;
	border-radius: 9px;
	background: transparent;
	font-size: 13.5px;
	color: var(--zt-text-2);
	transition: all .15s;
}
.zt-tabs button.active { background: var(--zt-card-hover); color: var(--zt-text); font-weight: 600; }

/* 网址库：左分类 + 右网址 + 全局搜索 */
.zt-lib-search {
	width: 100%;
	padding: 8px 12px;
	margin-bottom: 10px;
	border: 1px solid var(--zt-border);
	border-radius: 10px;
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 13px;
	outline: none;
}
.zt-lib-search:focus { border-color: var(--zt-accent); }
.zt-lib-search::placeholder { color: var(--zt-text-3); }

.zt-lib-layout {
	display: flex;
	gap: 10px;
	/* 自适应窗口：与设置面板同方案（min(比例vh, 上限px)） */
	height: min(56vh, 520px);
	min-height: 240px;
}
.zt-lib-cats {
	width: 104px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
}
.zt-lib-cat-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 10px;
	border: none;
	border-radius: 9px;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 13px;
	text-align: left;
	transition: background .15s;
}
.zt-lib-cat-btn:hover { background: var(--zt-card-hover); }
.zt-lib-cat-btn.active { background: var(--zt-accent); color: #fff; font-weight: 600; }
.zt-lib-cat-n { font-size: 11px; opacity: .65; }

.zt-lib-main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	padding-right: 2px;
}
.zt-lib-empty {
	text-align: center;
	color: var(--zt-text-3);
	font-size: 13px;
	padding: 40px 0;
}
.zt-lib-catname {
	font-size: 10px;
	color: var(--zt-text-3);
	background: rgba(128, 128, 128, .14);
	padding: 1px 6px;
	border-radius: 6px;
	flex-shrink: 0;
	white-space: nowrap;
}

.zt-lib-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-content: start;
}
.zt-lib-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border: 1px solid var(--zt-border);
	border-radius: 11px;
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 12.5px;
	text-align: left;
	transition: all .15s;
	overflow: hidden;
}
.zt-lib-item:hover { background: var(--zt-card-hover); transform: translateY(-1px); }
.zt-lib-item.added { opacity: .55; border-style: dashed; }
.zt-lib-fav {
	width: 22px; height: 22px;
	flex-shrink: 0;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.zt-lib-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-lib-mark { color: var(--zt-text-3); font-size: 13px; flex-shrink: 0; }
.zt-lib-item.added .zt-lib-mark { color: var(--zt-accent); }

/* 组件库 */
.zt-comp-lib {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	max-height: 60vh;
	overflow-y: auto;
}
.zt-comp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 14px;
	border: 1px solid var(--zt-border);
	border-radius: 14px;
	background: var(--zt-card);
	color: var(--zt-text);
	text-align: left;
	transition: all .15s;
}
.zt-comp-card:hover { background: var(--zt-card-hover); transform: translateY(-1px); }
.zt-comp-card.added { opacity: .6; border-style: dashed; }
.zt-comp-badge {
	width: 34px; height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 3px;
}
.zt-comp-name { font-size: 14px; font-weight: 600; }
.zt-comp-desc { font-size: 12px; color: var(--zt-text-3); line-height: 1.5; }
.zt-comp-spec { font-size: 11.5px; color: var(--zt-accent); opacity: .85; }
.zt-comp-state {
	position: absolute;
	top: 12px; right: 12px;
	font-size: 12px;
	color: var(--zt-accent);
	font-weight: 600;
}
.zt-field { display: block; font-size: 13px; color: var(--zt-text-2); margin-bottom: 14px; }
.zt-field input {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card-hover);
	color: var(--zt-text);
	font-size: 14px;
	outline: none;
}
.zt-field input:focus { border-color: var(--zt-accent); }
.zt-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Toast ---------- */
.zt-toast {
	position: fixed;
	left: 50%;
	bottom: 70px;
	transform: translateX(-50%);
	padding: 9px 18px;
	border-radius: 20px;
	background: rgba(20, 22, 26, .85);
	color: #fff;
	font-size: 13px;
	z-index: 120;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: zt-fade .2s ease;
}

/* ---------- 响应式 ---------- */
@media (max-width: 600px) {
	.zt-search-kbd { display: none; }
	.zt-search { height: 48px; }
}

/* ---------- 云端同步（共用主站账户） ---------- */
.zt-sync-box { display: flex; flex-direction: column; gap: 8px; }
.zt-sync-user { display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.zt-sync-user:hover { background: var(--zt-hover, rgba(127, 127, 127, 0.12)); }
.zt-sync-avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--zt-border);
	object-fit: cover;
	flex-shrink: 0;
}
.zt-sync-name { font-size: 13.5px; font-weight: 600; }
.zt-sync-login { text-align: center; text-decoration: none; display: block; }

/* 网址库图标（远程站点自带 icon） */
.zt-lib-fav { overflow: hidden; }
.zt-lib-fav img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- 页面栏（多标签页，左侧竖排，通屏高度；底部为设置入口） ---------- */
.zt-rail {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 6px;
	border-radius: 0;
	background: var(--zt-card);
	border: none;
	border-right: 1px solid var(--zt-border);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: none;
	z-index: 55;
	opacity: .92;
	transition: opacity .2s;
}
.zt-rail:hover { opacity: 1; }
/* 顶部：主站入口（固定）；中间：页面图标（从中间区域顶部开始，超出可滚动） */
.zt-rail-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	flex-shrink: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--zt-border);
}
.zt-rail-pages {
	flex: 1;
	min-height: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.zt-rail-pages::-webkit-scrollbar { display: none; }
.zt-rail-bottom {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--zt-border);
	align-self: stretch;
}
.zt-rail-gear svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.zt-rail-bell svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.zt-rail-user svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.zt-rail-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }
.zt-rail-badge {
	position: absolute;
	top: 1px; right: 1px;
	min-width: 15px; height: 15px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--zt-danger, #e5484d);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	pointer-events: none;
}

/* 消息中心（公告） */
.zt-notice-meta { font-size: 12px; color: var(--zt-text-3); margin: -6px 0 10px; }
.zt-notice-content {
	flex: 1;
	min-height: 0;
	overflow: auto;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--zt-text);
	white-space: normal;
	padding: 14px;
	border-radius: 10px;
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
}
.zt-notice-empty { color: var(--zt-text-3); font-size: 13px; padding: 30px 0; text-align: center; }
.zt-notice-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.zt-notice-item {
	position: relative;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	cursor: pointer;
	overflow: hidden;
}
.zt-notice-item:hover { border-color: color-mix(in srgb, var(--zt-accent) 55%, transparent); }
.zt-notice-item.unread { border-color: color-mix(in srgb, var(--zt-accent) 60%, transparent); }
.zt-notice-item-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.zt-notice-item-top b { font-size: 13.5px; }
.zt-notice-item-time { font-size: 11.5px; color: var(--zt-text-3); margin-left: auto; flex-shrink: 0; }
.zt-notice-item-txt {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--zt-text-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.zt-notice-dot {
	position: absolute;
	top: 10px; right: 12px;
	font-size: 10px;
	font-weight: 700;
	color: var(--zt-accent);
	background: color-mix(in srgb, var(--zt-accent) 16%, transparent);
	border-radius: 8px;
	padding: 1px 7px;
}
.zt-notice-item-top { padding-right: 44px; }
.zt-rail-item {
	position: relative;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 17px;
	font-weight: 700;
	transition: transform .15s, background .15s, border-color .15s;
}
.zt-rail-item:hover { background: var(--zt-card-hover); transform: scale(1.06); }
.zt-rail-glyph {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(128, 128, 128, .3);
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.zt-rail-glyph img { width: 22px; height: 22px; object-fit: contain; }
.zt-rail-item.active {
	border-color: var(--zt-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 22%, transparent);
}
.zt-rail-item.active::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	border-radius: 2px;
	background: var(--zt-accent);
}
.zt-rail-add {
	font-size: 18px;
	color: var(--zt-accent);
	background: color-mix(in srgb, var(--zt-accent) 14%, transparent);
	border: 1px dashed color-mix(in srgb, var(--zt-accent) 55%, transparent);
}
.zt-rail-add:hover { background: color-mix(in srgb, var(--zt-accent) 26%, transparent); }

/* 主站入口：比页面图标大一号，明确区分「回主站」与「切页面」 */
.zt-rail-home {
	width: 42px;
	height: 42px;
	text-decoration: none;
}
.zt-rail-home .zt-rail-glyph {
	width: 34px;
	height: 34px;
	border-radius: 11px;
}
.zt-rail-home .zt-rail-glyph img { width: 26px; height: 26px; }
.zt-rail-home:hover .zt-rail-glyph { box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 20%, transparent); }
.zt-rail-glyph-fill {
	background: color-mix(in srgb, var(--zt-accent) 85%, transparent);
	font-size: 15px;
}

/* ---------- 图标选择器 ---------- */
.zt-icon-panel { min-height: 208px; }
.zt-icon-preview { display: flex; justify-content: center; padding: 14px 0 6px; }
/* 图标展示槽：只做居中与浅底，里面放真实的 .zt-link-icon */
.zt-icon-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 14px;
	background: rgba(128, 128, 128, .12);
}
.zt-icon-slot .zt-link-icon { width: 44px; height: 44px; }
.zt-icon-slot .zt-link-icon img { width: 24px; height: 24px; }
.zt-icon-slot-lg { width: 80px; height: 80px; border-radius: 20px; }
.zt-icon-slot-lg .zt-link-icon { width: 64px; height: 64px; border-radius: 18px; }
.zt-icon-slot-lg .zt-link-icon img { width: 34px; height: 34px; }
.zt-icon-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.zt-icon-row-info { flex: 1; min-width: 0; }
.zt-icon-state { font-size: 12px; color: var(--zt-text-3); }
.zt-icon-row-btns { display: flex; gap: 8px; margin-top: 6px; }

/* 添加链接弹窗：图片图标地址行 + 背景色板 */
.zt-icon-url-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.zt-icon-url-row input {
	flex: 1; min-width: 0;
	margin-top: 0;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card-hover);
	color: var(--zt-text);
	font-size: 14px;
	outline: none;
}
.zt-icon-url-row input:focus { border-color: var(--zt-accent); }
.zt-icon-url-row .zt-btn { flex-shrink: 0; }
.zt-iconify-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 8px;
	max-height: min(40vh, 280px);
	overflow-y: auto;
	padding: 4px 2px;
	margin-top: 10px;
}
.zt-iconify-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
}
.zt-iconify-item:hover { background: var(--zt-card-hover); }
.zt-iconify-item.active { border-color: var(--zt-accent); background: var(--zt-card-hover); }
.zt-iconify-item .zt-link-icon { width: 34px; height: 34px; border-radius: 10px; }
.zt-iconify-item .zt-link-icon img { width: 20px; height: 20px; }
.zt-iconify-tip { grid-column: 1 / -1; padding: 24px 0; text-align: center; }

/* 内置图标组（emoji 网格） */
.zt-preset-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 8px;
	max-height: min(46vh, 320px);
	overflow-y: auto;
	padding: 4px 2px;
}
.zt-preset-item {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--zt-card);
	font-size: 22px;
	line-height: 1;
	transition: transform .12s, background .15s, border-color .15s;
}
.zt-preset-item:hover { background: var(--zt-card-hover); transform: scale(1.08); }
.zt-preset-item.active { border-color: var(--zt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 20%, transparent); }

/* 页面栏 emoji 图标 */
.zt-rail-glyph-emoji { background: transparent !important; font-size: 21px; }
.zt-link-icon.zt-icon-vector { border-color: rgba(255, 255, 255, .35); }/* ---------- 极简模式（默认只留右上角图标，可关图标 / 开半透明搜索框） ---------- */

body.zt-minimal .zt-footer{ display: none !important; }

/* 极简搜索框：半透明深色玻璃 + 浅色字，任何壁纸下都能看清，且尽量露出背景 */
body.zt-minimal .zt-search {
	background: rgba(24, 28, 34, .26);
	border-color: rgba(255, 255, 255, .26);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}
body.zt-minimal .zt-search:focus-within {
	background: rgba(24, 28, 34, .40);
	border-color: var(--zt-accent);
	box-shadow: 0 10px 32px rgba(0, 0, 0, .20), 0 0 0 3px color-mix(in srgb, var(--zt-accent) 24%, transparent);
}
/* 输入区文字随玻璃变浅（下拉/菜单仍是浅底深字，故只覆盖内部元素） */
body.zt-minimal .zt-search #search-input { color: #fff; }
body.zt-minimal .zt-search #search-input::placeholder { color: rgba(255, 255, 255, .6); }
body.zt-minimal .zt-search .zt-engine-btn:hover { background: rgba(255, 255, 255, .14); }
body.zt-minimal .zt-search .zt-search-kbd {
	color: rgba(255, 255, 255, .7);
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .12);
}
html.dark body.zt-minimal .zt-search {
	background: rgba(18, 21, 26, .32);
	border-color: rgba(255, 255, 255, .16);
}
html.dark body.zt-minimal .zt-search:focus-within {
	background: rgba(18, 21, 26, .48);
	border-color: var(--zt-accent);
}

/* ================= 无障碍（键盘 / 动效偏好） ================= */

/* 只在键盘导航时显示焦点环：鼠标点击不出现多余的圈，键盘用户始终可见当前位置 */
:focus-visible {
	outline: 2px solid var(--zt-accent, #4c8dff);
	outline-offset: 2px;
}

/* ================= 组件：番茄钟 ================= */

/* 墨色三档：卡片与窗口共用，暗色模式整体反转 */
.zt-pomo,
.zt-pomo-dlg {
	--zp-ink: #1f2329;
	--zp-ink-2: rgba(31, 35, 41, .55);
	--zp-ink-3: rgba(31, 35, 41, .3);
	--zp-orange: #f4643c;
	--zp-green: #33b27b;
}
html.dark .zt-pomo,
html.dark .zt-pomo-dlg {
	--zp-ink: #e8eaed;
	--zp-ink-2: rgba(232, 234, 237, .6);
	--zp-ink-3: rgba(232, 234, 237, .32);
	--zp-orange: #ff7a52;
	--zp-green: #46c48d;
}

/* ---------- 卡片 ---------- */
.zt-pomo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	overflow: hidden;
	color: var(--zp-ink);
}
.zt-pomo-wide {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
}

.zt-pomo-dial {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	cursor: pointer;
}
.zt-pomo-dial-sm { width: 112px; height: 112px; }
.zt-pomo-dial-md { width: 124px; height: 124px; }
.zt-pomo-dial-md .zt-pomo-center { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.zt-pomo-sub {
	font-size: 10px;
	letter-spacing: .04em;
	color: var(--zp-ink-3);
}
.zt-pomo-dial:focus-visible { outline: 2px solid var(--zp-orange); outline-offset: 3px; border-radius: 50%; }

.zt-pomo-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.zt-pomo-track,
.zt-pomo-arc {
	fill: none;
	stroke-width: 5.5;
	transform: rotate(-90deg);
	transform-box: fill-box;
	transform-origin: 50% 50%;
}
.zt-pomo-track { stroke: color-mix(in srgb, var(--zp-orange) 12%, transparent); }
.zt-pomo-big .zt-pomo-track { stroke: color-mix(in srgb, var(--zp-orange) 9%, transparent); }
.zt-pomo-arc {
	stroke: var(--zp-orange);
	stroke-linecap: round;
	transition: stroke-dashoffset .3s linear;
}
.zt-pomo.is-rest .zt-pomo-arc { stroke: var(--zp-green); }
.zt-pomo.is-rest .zt-pomo-track { stroke: color-mix(in srgb, var(--zp-green) 16%, transparent); }
.zt-pomo-ticks { stroke: color-mix(in srgb, var(--zp-ink) 13%, transparent); stroke-width: .8; fill: none; }
.zt-pomo-big .zt-pomo-ticks { stroke: color-mix(in srgb, var(--zp-ink) 11%, transparent); }

.zt-pomo-time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}
.zt-pomo-dial-sm .zt-pomo-time { font-size: 18px; }
.zt-pomo-dial-md .zt-pomo-time { font-size: 23px; }

.zt-pomo-state {
	font-size: 13px;
	font-weight: 600;
	color: var(--zp-ink);
}
.zt-pomo-hint {
	padding: 3px 11px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--zp-ink) 8%, transparent);
	font-size: 11px;
	font-weight: 500;
	color: var(--zp-ink-2);
	cursor: pointer;
	transition: background .18s, color .18s;
}
.zt-pomo.is-running .zt-pomo-hint {
	background: color-mix(in srgb, var(--zp-orange) 11%, transparent);
	color: var(--zp-orange);
}
.zt-pomo.is-rest.is-running .zt-pomo-hint {
	background: color-mix(in srgb, var(--zp-green) 13%, transparent);
	color: var(--zp-green);
}
.zt-pomo-hint:hover { background: color-mix(in srgb, var(--zp-orange) 16%, transparent); color: var(--zp-orange); }

/* 4×2 左侧信息块 */
.zt-pomo-left {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	padding-left: 4px;
}
.zt-pomo-count {
	display: flex;
	align-items: baseline;
	gap: 5px;
}
.zt-pomo-count b {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--zp-orange);
	font-variant-numeric: tabular-nums;
}
.zt-pomo-count span { font-size: 12px; color: var(--zp-ink-2); }

.zt-pomo-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 9px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--zp-ink) 7%, transparent);
	font-size: 11.5px;
	color: var(--zp-ink-2);
	white-space: nowrap;
}
.zt-pomo.is-running .zt-pomo-pill {
	background: color-mix(in srgb, var(--zp-orange) 12%, transparent);
	color: var(--zp-orange);
}
.zt-pomo.is-rest.is-running .zt-pomo-pill {
	background: color-mix(in srgb, var(--zp-green) 14%, transparent);
	color: var(--zp-green);
}
.zt-pomo-pill i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--zp-ink-3);
}
.zt-pomo.is-running .zt-pomo-pill i {
	background: var(--zp-orange);
	animation: zt-pomo-pulse 1.6s ease-in-out infinite;
}
.zt-pomo.is-rest.is-running .zt-pomo-pill i { background: var(--zp-green); }
@keyframes zt-pomo-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.8); }
}

.zt-pomo-brand {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--zp-ink-3);
	text-transform: uppercase;
	white-space: nowrap;
}

.zt-pomo-panel {
	flex: 0 0 auto;
	width: 146px;
	height: 100%;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: color-mix(in srgb, var(--zp-ink) 4%, transparent);
}

/* ---------- 大窗口：整体 ---------- */
.zt-pomo-dlg {
	display: flex;
	gap: 14px;
	flex: 1;
	min-height: 0;
	padding: 14px;
	border-radius: 18px;
	background: #f2f4f7;
	color: var(--zp-ink);
}
html.dark .zt-pomo-dlg { background: #1b1f25; }

.zt-pomo-stage {
	position: relative;
	flex: 0 0 46%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
html.dark .zt-pomo-stage { background: #23282f; box-shadow: none; }

.zt-pomo-big {
	position: relative;
	width: 100%;
	max-width: 336px;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}
.zt-pomo-big .zt-pomo-track,
.zt-pomo-big .zt-pomo-arc { stroke-width: 3.2; }
.zt-pomo-big .zt-pomo-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	z-index: 1;
}
.zt-pomo-tomato { font-size: 21px; line-height: 1; }
.zt-pomo-cap { font-size: 11.5px; color: var(--zp-ink-3); }
.zt-pomo-status { font-size: 17px; font-weight: 700; color: var(--zp-ink); }
.zt-pomo-time-lg {
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -.03em;
	margin: 2px 0 8px;
}
.zt-pomo.is-rest .zt-pomo-time-lg { color: var(--zp-green); }

.zt-pomo-cta {
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff8b62, var(--zp-orange));
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: 0 8px 18px -8px rgba(244, 100, 60, .8);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.zt-pomo-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(244, 100, 60, .9); }
.zt-pomo-cta:active { transform: translateY(0) scale(.98); filter: brightness(.96); }
.zt-pomo.is-rest .zt-pomo-cta {
	background: linear-gradient(135deg, #5fd3a0, var(--zp-green));
	box-shadow: 0 8px 18px -8px rgba(51, 178, 123, .8);
}
.zt-pomo.is-rest .zt-pomo-cta:hover { box-shadow: 0 12px 22px -10px rgba(51, 178, 123, .9); }

.zt-pomo-reset {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 6px 14px;
	border: 1px solid color-mix(in srgb, var(--zp-ink) 12%, transparent);
	border-radius: 999px;
	background: #fff;
	color: var(--zp-ink-2);
	font-size: 11.5px;
	transition: color .15s, border-color .15s;
}
.zt-pomo-reset:hover { color: var(--zp-orange); border-color: color-mix(in srgb, var(--zp-orange) 45%, transparent); }
html.dark .zt-pomo-reset { background: #2b313a; }

/* ---------- 大窗口：右侧面板 ---------- */
.zt-pomo-side {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	overflow-y: auto;
	padding-right: 2px;
}
.zt-pomo-side::-webkit-scrollbar { width: 6px; }
.zt-pomo-side::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--zp-ink) 16%, transparent);
	border-radius: 3px;
}

.zt-pomo-box {
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
html.dark .zt-pomo-box { background: #23282f; box-shadow: none; }
.zt-pomo-box h4 {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--zp-ink);
}

.zt-pomo-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.zt-pomo-stat {
	padding: 10px 4px;
	border-radius: 10px;
	text-align: center;
	background: color-mix(in srgb, var(--zp-ink) 5%, transparent);
}
.zt-pomo-stat b {
	display: block;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--zp-ink);
	font-variant-numeric: tabular-nums;
}
.zt-pomo-stat b em {
	margin-left: 1px;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	color: var(--zp-ink-2);
}
.zt-pomo-stat span { font-size: 11px; color: var(--zp-ink-2); }
.zt-pomo-stat.is-orange { background: #feece4; }
.zt-pomo-stat.is-blue { background: #e9eefb; }
.zt-pomo-stat.is-green { background: #e5f6ec; }
html.dark .zt-pomo-stat.is-orange { background: rgba(244, 100, 60, .16); }
html.dark .zt-pomo-stat.is-blue { background: rgba(90, 130, 235, .18); }
html.dark .zt-pomo-stat.is-green { background: rgba(51, 178, 123, .18); }

.zt-pomo-bar {
	height: 6px;
	margin: 11px 0 8px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--zp-ink) 8%, transparent);
	overflow: hidden;
}
.zt-pomo-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, #ffa07a, var(--zp-orange));
	transition: width .35s ease;
}
.zt-pomo-bartip {
	text-align: center;
	font-size: 11px;
	color: var(--zp-ink-2);
}

.zt-pomo-cells {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.zt-pomo-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 9px 8px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--zp-ink) 5%, transparent);
}
.zt-pomo-cell.is-orange { background: #feece4; }
.zt-pomo-cell.is-blue { background: #e9eefb; }
.zt-pomo-cell.is-green { background: #e5f6ec; }
.zt-pomo-cell.is-purple { background: #f1edfd; }
html.dark .zt-pomo-cell.is-orange { background: rgba(244, 100, 60, .14); }
html.dark .zt-pomo-cell.is-blue { background: rgba(90, 130, 235, .16); }
html.dark .zt-pomo-cell.is-green { background: rgba(51, 178, 123, .16); }
html.dark .zt-pomo-cell.is-purple { background: rgba(124, 92, 226, .18); }

.zt-pomo-cell-label { font-size: 11px; color: color-mix(in srgb, var(--zp-ink) 72%, transparent); }

.zt-pomo-step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 5px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
html.dark .zt-pomo-step { background: #2f353e; box-shadow: none; }
.zt-pomo-step button {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 5px;
	background: color-mix(in srgb, var(--zp-ink) 6%, transparent);
	color: var(--zp-ink-2);
	font-size: 13px;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: background .15s, color .15s;
}
.zt-pomo-step button:hover { background: color-mix(in srgb, var(--zp-orange) 16%, transparent); color: var(--zp-orange); }
.zt-pomo-step b {
	min-width: 42px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--zp-ink);
	font-variant-numeric: tabular-nums;
}
.zt-pomo-step b em {
	margin-left: 2px;
	font-size: 9px;
	font-style: normal;
	font-weight: 600;
	color: var(--zp-ink-3);
}
.zt-pomo-step-sm b { min-width: 26px; }

.zt-pomo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
}
.zt-pomo-row + .zt-pomo-row { border-top: 1px solid color-mix(in srgb, var(--zp-ink) 7%, transparent); }
.zt-pomo-row:last-child { padding-bottom: 0; }
.zt-pomo-row-text { min-width: 0; }
.zt-pomo-row-text b {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zp-ink);
}
.zt-pomo-row-text span { font-size: 10.5px; color: var(--zp-ink-3); }

.zt-pomo-switch {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	border: 0;
	border-radius: 11px;
	background: color-mix(in srgb, var(--zp-ink) 16%, transparent);
	transition: background .2s;
}
.zt-pomo-switch i {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
	transition: transform .2s;
}
.zt-pomo-switch.on { background: var(--zp-orange); }
.zt-pomo-switch.on i { transform: translateX(18px); }

/* 窄屏：左右分栏改上下 */
@media (max-width: 760px) {
	.zt-pomo-dlg { flex-direction: column; overflow-y: auto; }
	.zt-pomo-stage { flex: 0 0 auto; }
	.zt-pomo-big { max-width: 212px; }
	.zt-pomo-time-lg { font-size: 36px; }
	/* 窄屏整体滚动，避免右侧设置区被压成独立滚动条 */
	.zt-pomo-side { flex: 0 0 auto; overflow: visible; min-height: 0; }
}

/* ==========================================================================
   摸鱼倒计时（4×2 图片卡 + 两栏设置窗口）
   ========================================================================== */
.zt-moyu {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* 与 .zt-widget 一致；写死数值而非 inherit（父级 .zt-comp 没有圆角） */
	border-radius: 18px;
	color: #fff;
	container-type: size;
}
.zt-moyu-bg {
	position: absolute;
	inset: 0;
	background: url(../images/moyu/illus.jpg) center / cover no-repeat;
	transform: scale(1.01);
}
.zt-moyu-bg[data-mode="off"],
.zt-moyu-bg[data-mode="after"] {
	background-image: url(../images/moyu/after.jpg);
}
/* 暗色压角：横向偏左压暗（文字区）+ 纵向上下压角，保证白字在亮插图上也可读 */
.zt-moyu::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(8, 14, 24, .58) 0%, rgba(8, 14, 24, .34) 58%, rgba(8, 14, 24, .22) 100%),
		linear-gradient(180deg, rgba(8, 14, 24, .30) 0%, rgba(8, 14, 24, .12) 44%, rgba(6, 10, 18, .74) 100%);
}
.zt-moyu-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 13px 15px 0;
}
.zt-moyu-ico {
	font-size: 12px;
	line-height: 1;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
}
.zt-moyu-name {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.zt-moyu-status {
	position: relative;
	z-index: 1;
	padding: 2px 15px 0;
	font-size: 10.5px;
	color: rgba(255, 255, 255, .76);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.zt-moyu-clock {
	position: relative;
	z-index: 1;
	margin-top: 12px;
	padding: 0 15px;
	font-size: clamp(18px, 9.4cqw, 46px);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.zt-moyu-progress {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 0 15px;
}
.zt-moyu-track {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .26);
	overflow: hidden;
}
.zt-moyu-track i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .92);
	transition: width .45s ease;
}
.zt-moyu-pct {
	flex: 0 0 auto;
	font-size: 10px;
	color: rgba(255, 255, 255, .8);
	font-variant-numeric: tabular-nums;
}
.zt-moyu-earn {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 0 15px 13px;
	font-size: 10.5px;
	color: rgba(255, 255, 255, .78);
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.zt-moyu-earn b {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .2px;
	font-variant-numeric: tabular-nums;
}

/* ---------- 摸鱼设置窗口 ---------- */
.zt-moyu-win {
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 0 -22px -20px;
	display: flex;
	overflow: hidden;
	border-radius: 0 0 16px 16px;
	background: #cfe8fb;
}
.zt-moyu-winbg {
	position: absolute;
	inset: 0;
	background: url(../images/moyu/bg.jpg) center / cover no-repeat;
}
.zt-moyu-winbg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .58));
}
.zt-moyu-cols {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 14px;
	width: 100%;
	padding: 12px 16px 14px;
	min-height: 0;
}
.zt-moyu-col-l {
	flex: 0 0 330px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-height: 0;
}
.zt-moyu-glass {
	position: relative;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 14px;
	padding: 11px 14px 12px;
	box-shadow: 0 6px 18px rgba(38, 72, 120, .10);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.zt-moyu-gl-h {
	font-size: 11.5px;
	color: #43678c;
	letter-spacing: .2px;
}
.zt-moyu-gl-clock {
	margin-top: 3px;
	font-size: 33px;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .05em;
	color: #0e2c49;
	font-variant-numeric: tabular-nums;
}
.zt-moyu-gl-bar {
	position: relative;
	height: 4px;
	margin-top: 9px;
	border-radius: 2px;
	background: rgba(118, 158, 200, .32);
	overflow: hidden;
}
.zt-moyu-gl-bar i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 2px;
	background: linear-gradient(90deg, #63b3ff, #2f80ed);
	transition: width .45s ease;
}
.zt-moyu-gl-pct {
	margin-top: 4px;
	text-align: right;
	font-size: 10.5px;
	color: #557a9e;
	font-variant-numeric: tabular-nums;
}
.zt-moyu-earn-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 1px;
}
.zt-moyu-earn-row b {
	font-size: 25px;
	font-weight: 600;
	color: #0e2c49;
	font-variant-numeric: tabular-nums;
}
.zt-moyu-earn-row em {
	font-style: normal;
	font-size: 10.5px;
	color: #5f80a1;
}
.zt-moyu-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.zt-moyu-stat {
	background: rgba(255, 255, 255, .74);
	border-radius: 12px;
	padding: 8px 12px 9px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	box-shadow: 0 4px 12px rgba(38, 72, 120, .07);
}
.zt-moyu-stat b {
	font-size: 15px;
	font-weight: 600;
	color: #0e2c49;
	font-variant-numeric: tabular-nums;
}
.zt-moyu-stat span {
	font-size: 10px;
	color: #6d8cac;
}
.zt-moyu-illus {
	flex: 1;
	min-height: 84px;
	border-radius: 14px;
	background: url(../images/moyu/illus.jpg) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 18px rgba(38, 72, 120, .12);
}

.zt-moyu-col-r {
	flex: 1;
	min-width: 0;
	display: flex;
	min-height: 0;
}
.zt-moyu-panel {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .88);
	border-radius: 16px;
	padding: 15px 16px 14px;
	box-shadow: 0 10px 30px rgba(38, 72, 120, .14);
}
.zt-moyu-panel-h {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 15px;
	font-weight: 600;
	color: #123252;
}
.zt-moyu-panel-h span {
	font-size: 10.5px;
	font-weight: 400;
	color: #7e9ab6;
}
.zt-moyu-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 6px -6px 0;
	padding: 0 6px;
	scrollbar-width: thin;
}
.zt-moyu-scroll::-webkit-scrollbar { width: 5px; }
.zt-moyu-scroll::-webkit-scrollbar-thumb { background: rgba(120, 150, 180, .4); border-radius: 3px; }
.zt-moyu-sec {
	padding: 9px 0 6px;
	border-top: 1px solid rgba(120, 150, 180, .18);
}
.zt-moyu-sec:first-child { border-top: 0; padding-top: 2px; }
.zt-moyu-sec-t {
	margin-bottom: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: #2c4d6e;
}
.zt-moyu-field {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 6px;
}
.zt-moyu-field > label {
	flex: 0 0 60px;
	font-size: 11.5px;
	color: #5f80a1;
}
.zt-moyu-field .zt-input {
	flex: 1;
	width: auto;
	min-width: 0;
	height: 31px;
	padding: 0 9px;
	font-size: 12px;
	color: #123252;
	background: #fff;
	border: 1px solid rgba(140, 170, 200, .45);
	border-radius: 8px;
	box-sizing: border-box;
}
.zt-moyu-field .zt-input:focus {
	border-color: #2f80ed;
	box-shadow: 0 0 0 3px rgba(47, 128, 237, .12);
}
.zt-moyu-field select.zt-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 26px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236d8cac'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
}
.zt-moyu-suffix {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 10.5px;
	color: #82a0bb;
}
.zt-moyu-hint {
	margin-top: 5px;
	padding-left: 69px;
	font-size: 10px;
	color: #92a9be;
	line-height: 1.5;
}
.zt-moyu-switch input:checked + span { background: #2f80ed; }
.zt-moyu-weeks { align-items: flex-start; }
.zt-moyu-weeks > label { padding-top: 7px; }
.zt-moyu-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	flex: 1;
}
.zt-moyu-chip {
	padding: 5px 9px;
	border-radius: 8px;
	background: #eef4fa;
	color: #55789a;
	font-size: 11px;
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s;
}
.zt-moyu-chip input { display: none; }
.zt-moyu-chip.on {
	background: #2f80ed;
	color: #fff;
	box-shadow: 0 3px 10px rgba(47, 128, 237, .28);
}
.zt-moyu-save {
	margin-top: 10px;
	width: 100%;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #4a9bf0, #2f80ed);
	color: #fff;
	font-size: 12.5px;
	letter-spacing: .3px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(47, 128, 237, .3);
}
.zt-moyu-save:hover { filter: brightness(1.06); }
.zt-moyu-save:active { transform: translateY(1px); }

/* 窄屏：两栏改上下，隐藏插图 */
@media (max-width: 780px) {
	.zt-moyu-cols {
		flex-direction: column;
		overflow-y: auto;
		gap: 10px;
	}
	.zt-moyu-col-l { flex: 0 0 auto; }
	.zt-moyu-illus { display: none; }
	.zt-moyu-panel { min-height: 360px; }
	.zt-moyu-gl-clock { font-size: 28px; }
}

/* ===========================================================================
   工具类组件公共层（金额转换 / JSON / 颜色 / 开发工具箱 等共用）
   =========================================================================== */
.zt-tl-win {
	margin: 0 -22px -20px;
	padding: 16px 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	min-height: 0;
}
.zt-tl-head { display: flex; align-items: flex-end; gap: 10px; }
.zt-tl-title { font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.zt-tl-sub { font-size: 12px; color: var(--zt-text-3); padding-bottom: 2px; }
.zt-tl-body { display: flex; gap: 12px; flex: 1; min-height: 0; }
.zt-tl-card {
	background: var(--zt-card);
	border: 1px solid var(--zt-border);
	border-radius: 14px;
	padding: 14px;
	min-height: 0;
}
.zt-tl-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.zt-tl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zt-tl-label { font-size: 12px; color: var(--zt-text-3); letter-spacing: .04em; }
.zt-tl-btn {
	padding: 7px 14px;
	border-radius: 9px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 12.5px;
	transition: all .18s;
}
.zt-tl-btn:hover { background: var(--zt-card-hover); border-color: color-mix(in srgb, var(--zt-accent) 40%, var(--zt-border)); }
.zt-tl-btn.primary {
	background: var(--zt-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--zt-accent) 32%, transparent);
}
.zt-tl-btn.primary:hover { filter: brightness(1.06); }
.zt-tl-btn[disabled] { opacity: .5; cursor: not-allowed; }
.zt-tl-input,
.zt-tl-area,
.zt-tl-select {
	width: 100%;
	border: 1px solid var(--zt-border);
	background: var(--zt-card-hover);
	border-radius: 10px;
	padding: 8px 11px;
	color: var(--zt-text);
	font-size: 13px;
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.zt-tl-area {
	resize: none;
	flex: 1;
	min-height: 0;
	font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
	font-size: 12.5px;
	line-height: 1.65;
	white-space: pre;
	overflow: auto;
}
.zt-tl-input:focus,
.zt-tl-area:focus,
.zt-tl-select:focus {
	border-color: var(--zt-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 16%, transparent);
}
.zt-tl-chip {
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid var(--zt-border);
	background: transparent;
	color: var(--zt-text-2);
	font-size: 12px;
	transition: all .18s;
}
.zt-tl-chip:hover { border-color: var(--zt-accent); color: var(--zt-accent); }
.zt-tl-chip.on { background: var(--zt-accent); border-color: transparent; color: #fff; }
.zt-tl-scroll { overflow: auto; min-height: 0; }

/* ---------- 金额转换：卡片 ---------- */
.zt-w-money {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: row;
	padding: 0;
	overflow: hidden;
	color: #17253f;
	background: radial-gradient(130% 120% at 0% 0%, #f4f8ff 0%, #e8f1ff 46%, #dbe8ff 100%);
}
html.dark .zt-w-money {
	color: #e6ecf8;
	background: radial-gradient(130% 120% at 0% 0%, #1c2431 0%, #161d28 52%, #111721 100%);
}
.zt-mny-left {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(12px, 3.4cqw, 18px) clamp(12px, 3.8cqw, 20px);
}
.zt-mny-top { display: flex; align-items: center; gap: clamp(6px, 1.8cqw, 10px); }
.zt-mny-badge {
	width: clamp(20px, 6.4cqw, 32px);
	height: clamp(20px, 6.4cqw, 32px);
	border-radius: clamp(6px, 1.8cqw, 10px);
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(140deg, #6f9bff, #3f6fe6);
	box-shadow: 0 5px 14px rgba(63, 111, 230, .32);
	flex: none;
}
.zt-mny-badge svg { width: 62%; height: 62%; fill: currentColor; }
.zt-mny-label { font-size: clamp(12px, 3.2cqw, 15px); font-weight: 700; letter-spacing: .04em; }
.zt-mny-code {
	margin-left: auto;
	font-size: clamp(9px, 2.1cqw, 11px);
	letter-spacing: .16em;
	color: #7d90b3;
}
html.dark .zt-mny-code { color: #74839b; }
.zt-mny-kicker { margin-top: clamp(4px, 1.2cqw, 7px); font-size: clamp(9px, 2.3cqw, 11.5px); color: #7d90b3; letter-spacing: .06em; }
html.dark .zt-mny-kicker { color: #74839b; }
.zt-mny-preview {
	margin-top: clamp(6px, 1.8cqw, 10px);
	font-size: clamp(17px, 5.4cqw, 27px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	color: #1a2f57;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html.dark .zt-mny-preview { color: #eef3ff; }
.zt-mny-ch {
	margin-top: clamp(5px, 1.4cqw, 8px);
	font-size: clamp(10px, 2.7cqw, 13.5px);
	font-weight: 600;
	letter-spacing: .03em;
	color: #3b5f9e;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
html.dark .zt-mny-ch { color: #9db8e8; }
.zt-mny-ch-sm {
	margin-top: clamp(4px, 1cqw, 6px);
	font-size: clamp(9.5px, 2.7cqw, 12px);
	color: #3b5f9e;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
html.dark .zt-mny-ch-sm { color: #9db8e8; }
.zt-mny-foot {
	margin-top: auto;
	padding-top: clamp(4px, 1.2cqw, 8px);
	font-size: clamp(8px, 1.9cqw, 10px);
	letter-spacing: .22em;
	color: #8fa3c4;
}
html.dark .zt-mny-foot { color: #6c7a92; }
.zt-mny-right {
	flex: 0 0 40%;
	display: grid;
	place-items: center;
	padding: clamp(8px, 2.2cqw, 14px);
	background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12));
	border-left: 1px solid rgba(120, 150, 210, .16);
}
html.dark .zt-mny-right {
	background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
	border-left-color: rgba(255, 255, 255, .06);
}
.zt-mny-calc {
	width: 100%;
	padding: clamp(6px, 1.8cqw, 10px);
	border-radius: clamp(8px, 2.2cqw, 13px);
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 10px 26px rgba(60, 100, 180, .16);
}
html.dark .zt-mny-calc { background: rgba(255, 255, 255, .07); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.zt-mny-calc-d {
	padding: clamp(3px, 1cqw, 6px) clamp(4px, 1.2cqw, 8px);
	margin-bottom: clamp(4px, 1.2cqw, 8px);
	border-radius: 6px;
	background: rgba(120, 150, 210, .12);
	font-size: clamp(9px, 2.4cqw, 12px);
	font-weight: 700;
	color: #2c4c86;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html.dark .zt-mny-calc-d { color: #b8ccef; background: rgba(255, 255, 255, .07); }
.zt-mny-keys {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(3px, .9cqw, 5px);
}
.zt-mny-keys i {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / .82;
	border-radius: clamp(4px, 1.2cqw, 7px);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 5px rgba(60, 100, 180, .12);
	font-style: normal;
	font-size: clamp(8px, 2.1cqw, 11px);
	font-weight: 700;
	color: #33507f;
}
html.dark .zt-mny-keys i { background: rgba(255, 255, 255, .09); color: #c4d4ee; box-shadow: none; }
.zt-mny-keys i.op { background: rgba(111, 155, 255, .18); color: #3560b8; }
html.dark .zt-mny-keys i.op { background: rgba(111, 155, 255, .22); color: #a9c2f5; }
.zt-mny-keys i.zero { grid-column: span 1; }

/* 2×2 紧凑版 */
.zt-w-money[data-size="sm"] { flex-direction: column; }
.zt-w-money[data-size="sm"] .zt-mny-right { display: none; }
.zt-w-money[data-size="sm"] .zt-mny-preview { font-size: clamp(15px, 8cqw, 21px); margin-top: 6px; }
.zt-w-money[data-size="sm"] .zt-mny-label { font-size: clamp(12px, 6cqw, 14px); }
.zt-w-money[data-size="sm"] .zt-mny-ch-sm { font-size: clamp(9.5px, 4.6cqw, 11.5px); -webkit-line-clamp: 3; }
.zt-w-money[data-size="sm"] .zt-mny-kicker { display: none; }
.zt-w-money[data-size="sm"] .zt-mny-badge { width: clamp(20px, 11cqw, 26px); height: clamp(20px, 11cqw, 26px); border-radius: 7px; }
.zt-w-money[data-size="sm"] .zt-mny-code { font-size: 9px; }

/* ---------- 金额转换：窗口 ---------- */
.zt-mny-win {
	margin: 0 -22px -20px;
	padding: 16px 22px 18px;
	display: flex;
	gap: 14px;
	flex: 1;
	min-height: 0;
}
.zt-mny-main { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.zt-mny-cap { font-size: 12px; color: var(--zt-text-3); letter-spacing: .04em; }
.zt-mny-input {
	width: 100%;
	height: 48px;
	border-radius: 12px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card-hover);
	padding: 0 14px;
	font-size: 22px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--zt-text);
	outline: none;
}
.zt-mny-input:focus {
	border-color: var(--zt-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 16%, transparent);
}
.zt-mny-state { min-height: 15px; font-size: 12px; color: var(--zt-text-3); }
.zt-mny-state.is-bad { color: var(--zt-danger); }
.zt-mny-prev { font-size: 13px; color: var(--zt-text-3); font-variant-numeric: tabular-nums; }
.zt-mny-result {
	flex: 1;
	min-height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid rgba(120, 150, 210, .2);
	background: linear-gradient(140deg, #eef4ff, #e0ebff);
	color: #1a2f57;
	font-size: clamp(17px, 2vw, 24px);
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.55;
	text-align: center;
	word-break: break-all;
}
html.dark .zt-mny-result {
	background: linear-gradient(140deg, #1d2634, #172030);
	border-color: rgba(255, 255, 255, .07);
	color: #eaf1ff;
}
.zt-mny-result.is-bad {
	color: var(--zt-danger);
	background: color-mix(in srgb, var(--zt-danger) 10%, transparent);
	border-color: color-mix(in srgb, var(--zt-danger) 30%, transparent);
}
.zt-mny-actions { display: flex; gap: 8px; }
.zt-mny-btn {
	padding: 9px 18px;
	border-radius: 10px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 12.5px;
	transition: all .18s;
}
.zt-mny-btn:hover { background: var(--zt-card-hover); }
.zt-mny-btn.primary {
	background: var(--zt-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--zt-accent) 30%, transparent);
}
.zt-mny-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zt-mny-samples-t { font-size: 11.5px; color: var(--zt-text-3); margin-right: 2px; }
.zt-mny-samples button {
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid var(--zt-border);
	background: transparent;
	color: var(--zt-text-2);
	font-size: 11.5px;
	transition: all .18s;
}
.zt-mny-samples button:hover { border-color: var(--zt-accent); color: var(--zt-accent); }
.zt-mny-side {
	flex: 0 0 264px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--zt-border);
	background: var(--zt-card);
	overflow: auto;
}
.zt-mny-side h4 { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--zt-text-3); }
.zt-mny-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.zt-mny-chips span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 7px 0;
	border-radius: 9px;
	background: var(--zt-card-hover);
	font-size: 13px;
	font-weight: 700;
}
.zt-mny-chips b { font-size: 9px; font-weight: 500; color: var(--zt-text-3); }
.zt-mny-rules {
	margin: 0;
	padding-left: 15px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--zt-text-2);
}

/* ---------- 电子木鱼：卡片 ---------- */
.zt-w-muyu {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(8px, 2.6cqw, 18px);
	padding: clamp(10px, 3.2cqw, 18px);
	overflow: hidden;
	color: #4a3418;
	background: radial-gradient(130% 130% at 6% 0%, #fffaef 0%, #fbeed3 46%, #f2ddb2 100%);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
html.dark .zt-w-muyu {
	color: #f2e2c6;
	background: radial-gradient(130% 130% at 6% 0%, #2b2318 0%, #221b13 50%, #191309 100%);
}
.zt-my-fish-wrap {
	position: relative;
	flex: 0 0 42%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.zt-my-halo {
	position: absolute;
	height: 108%;
	width: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 205, 120, .5) 0%, rgba(255, 205, 120, 0) 68%);
	pointer-events: none;
}
html.dark .zt-my-halo {
	background: radial-gradient(circle, rgba(255, 186, 92, .26) 0%, rgba(255, 186, 92, 0) 68%);
}
.zt-my-fish {
	position: relative;
	height: 92%;
	width: auto;
	max-width: 100%;
	transform-origin: 50% 62%;
	filter: drop-shadow(0 10px 16px rgba(140, 86, 24, .28));
	pointer-events: none;
}
html.dark .zt-my-fish { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); }
.zt-my-stick {
	position: absolute;
	top: 3%;
	right: 1%;
	width: 44%;
	height: 9%;
	border-radius: 999px;
	background: linear-gradient(180deg, #e3b781, #b4763a 60%, #8b5523);
	box-shadow: 0 3px 7px rgba(120, 72, 20, .32);
	transform-origin: 100% 50%;
	transform: rotate(-26deg);
	pointer-events: none;
}
.zt-w-muyu.is-hit .zt-my-fish { animation: zt-my-knock .34s cubic-bezier(.34, 1.4, .64, 1); }
.zt-w-muyu.is-hit .zt-my-stick { animation: zt-my-swing .34s ease-out; }
@keyframes zt-my-knock {
	0% { transform: scale(1) rotate(0); }
	35% { transform: scale(.93, .97) rotate(-3deg); }
	70% { transform: scale(1.03, .99) rotate(2deg); }
	100% { transform: scale(1) rotate(0); }
}
@keyframes zt-my-swing {
	0% { transform: rotate(-26deg); }
	32% { transform: rotate(-2deg); }
	100% { transform: rotate(-26deg); }
}
.zt-my-info {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2px, .8cqw, 6px);
}
.zt-my-title {
	font-size: clamp(10px, 2.8cqw, 13px);
	font-weight: 700;
	letter-spacing: .18em;
	color: #a97c3c;
}
html.dark .zt-my-title { color: #c9a877; }
.zt-my-count {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-variant-numeric: tabular-nums;
}
.zt-my-count b {
	font-size: clamp(24px, 12.5cqw, 44px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	background: linear-gradient(180deg, #d99b45, #9d5c15);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
html.dark .zt-my-count b {
	background: linear-gradient(180deg, #ffd79a, #d2903f);
	-webkit-background-clip: text;
	background-clip: text;
}
.zt-my-count i {
	font-style: normal;
	font-size: clamp(10px, 2.6cqw, 13px);
	color: #b08a55;
}
.zt-my-today {
	font-size: clamp(10px, 2.7cqw, 12.5px);
	color: #a5834f;
}
.zt-my-today b { font-weight: 700; color: #8a5a1c; }
html.dark .zt-my-today { color: #a98d63; }
html.dark .zt-my-today b { color: #e0b477; }
.zt-my-tip {
	margin-top: auto;
	font-size: clamp(9px, 2.3cqw, 11px);
	letter-spacing: .12em;
	color: #bda275;
}
.zt-my-open {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(180, 132, 58, .32);
	background: rgba(255, 255, 255, .62);
	color: #a3722c;
	opacity: .55;
	transition: opacity .18s, background .18s, transform .18s;
	cursor: pointer;
	z-index: 3;
}
.zt-my-open svg { width: 13px; height: 13px; fill: currentColor; }
.zt-w-muyu:hover .zt-my-open { opacity: 1; }
.zt-my-open:hover { background: #fff; transform: scale(1.06); }
html.dark .zt-my-open {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .14);
	color: #e6c489;
}
.zt-my-floats,
.zt-my-ripples {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.zt-my-float {
	position: absolute;
	bottom: 44%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: clamp(11px, 3.6cqw, 15px);
	font-weight: 700;
	color: #b4711f;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
	animation: zt-my-rise 1.1s cubic-bezier(.22, .72, .3, 1) forwards;
}
html.dark .zt-my-float {
	color: #ffcf8a;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
@keyframes zt-my-rise {
	0% { opacity: 0; transform: translate(-50%, 8px) scale(.86) rotate(0); }
	20% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(var(--tilt, 0deg)); }
	100% { opacity: 0; transform: translate(-50%, -56px) scale(1.02) rotate(var(--tilt, 0deg)); }
}
.zt-my-ripple {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border-radius: 50%;
	border: 2px solid rgba(196, 132, 55, .55);
	animation: zt-my-ripple .66s ease-out forwards;
}
@keyframes zt-my-ripple {
	0% { opacity: .85; transform: scale(.5); }
	100% { opacity: 0; transform: scale(2.7); }
}
/* 2×2 紧凑档 */
.zt-w-muyu[data-size="sm"] {
	flex-direction: column;
	justify-content: center;
	gap: 0;
	padding: 8px 8px 10px;
}
.zt-w-muyu[data-size="sm"] .zt-my-fish-wrap {
	flex: 0 0 auto;
	width: 100%;
	height: 62%;
}
.zt-w-muyu[data-size="sm"] .zt-my-info {
	flex: 0 0 auto;
	align-items: center;
	text-align: center;
	gap: 1px;
}
.zt-w-muyu[data-size="sm"] .zt-my-today,
.zt-w-muyu[data-size="sm"] .zt-my-tip { display: none; }
.zt-w-muyu[data-size="sm"] .zt-my-title { font-size: 9.5px; letter-spacing: .2em; }
.zt-w-muyu[data-size="sm"] .zt-my-count b { font-size: clamp(20px, 13.5cqw, 32px); }
.zt-w-muyu[data-size="sm"] .zt-my-count i { font-size: 9.5px; }
.zt-w-muyu[data-size="sm"] .zt-my-open { width: 21px; height: 21px; top: 6px; right: 6px; opacity: .5; }
.zt-w-muyu[data-size="sm"] .zt-my-open svg { width: 11px; height: 11px; }

/* ---------- 电子木鱼：窗口 ---------- */
.zt-my-win-body { gap: 12px; }
.zt-my-stage {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	background: radial-gradient(120% 120% at 50% 6%, #fffaef 0%, #fbeed3 52%, #f3dfb8 100%);
	border-color: rgba(190, 150, 80, .28);
}
html.dark .zt-my-stage {
	background: radial-gradient(120% 120% at 50% 6%, #2c2418 0%, #221b12 55%, #191309 100%);
	border-color: rgba(255, 255, 255, .07);
}
.zt-my-stage .zt-my-halo.is-big { height: 76%; width: auto; }
.zt-my-fish-hit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.zt-my-fish-hit .zt-my-fish { height: 84%; max-height: 300px; }
.zt-my-stage.is-hit .zt-my-fish { animation: zt-my-knock .34s cubic-bezier(.34, 1.4, .64, 1); }
.zt-my-stage-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 18px 14px;
	display: flex;
	align-items: baseline;
	gap: 12px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 250, 239, 0) 0%, rgba(255, 248, 233, .94) 62%);
}
html.dark .zt-my-stage-foot {
	background: linear-gradient(180deg, rgba(25, 19, 9, 0) 0%, rgba(25, 19, 9, .94) 62%);
}
.zt-my-win-count { display: flex; align-items: baseline; gap: 6px; }
.zt-my-win-count b {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, #d99b45, #9d5c15);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
html.dark .zt-my-win-count b {
	background: linear-gradient(180deg, #ffd79a, #d2903f);
	-webkit-background-clip: text;
	background-clip: text;
}
.zt-my-win-count span { font-size: 12px; letter-spacing: .1em; color: #a5834f; }
html.dark .zt-my-win-count span { color: #a98d63; }
.zt-my-win-sub { margin-left: auto; font-size: 12px; color: #a5834f; }
.zt-my-win-sub b { font-weight: 700; color: #8a5a1c; }
html.dark .zt-my-win-sub { color: #a98d63; }
html.dark .zt-my-win-sub b { color: #e0b477; }
.zt-my-win-r {
	flex: 0 0 292px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: auto;
}
.zt-my-sec-t {
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--zt-text-3);
}
.zt-my-actions { display: flex; gap: 8px; }
.zt-my-actions .zt-tl-btn { flex: 1; }
.zt-my-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.zt-my-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.zt-my-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.zt-my-track {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--zt-border);
	transition: background .18s;
}
.zt-my-track i {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
	transition: transform .18s;
}
.zt-my-switch input:checked + .zt-my-track { background: var(--zt-accent); }
.zt-my-switch input:checked + .zt-my-track i { transform: translateX(16px); }
.zt-my-switch em { font-style: normal; font-size: 12.5px; color: var(--zt-text-2); }
.zt-my-rules {
	margin: 0;
	padding-left: 15px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--zt-text-2);
}
@media (max-width: 780px) {
	.zt-my-win-body { flex-direction: column; overflow-y: auto; }
	.zt-my-stage { min-height: 280px; flex: 0 0 auto; }
	.zt-my-win-r { flex: 0 0 auto; overflow: visible; }
}

/* ---------- 今天吃什么：卡片 ---------- */
.zt-w-food {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(6px, 2.2cqw, 14px);
	padding: clamp(10px, 3cqw, 16px);
	overflow: hidden;
	color: #3d2a17;
	background: radial-gradient(130% 130% at 4% 0%, #fff8f0 0%, #ffeedd 48%, #ffe0c2 100%);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
html.dark .zt-w-food {
	color: #f6e6d4;
	background: radial-gradient(130% 130% at 4% 0%, #2e2419 0%, #261d14 52%, #1c150d 100%);
}
.zt-fd-art {
	position: relative;
	flex: 0 0 36%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.zt-fd-bowl {
	height: 94%;
	width: auto;
	max-width: 100%;
	filter: drop-shadow(0 8px 12px rgba(180, 100, 40, .22));
}
.zt-fd-main {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(3px, .9cqw, 7px);
}
.zt-fd-cap {
	font-size: clamp(10px, 2.7cqw, 12.5px);
	letter-spacing: .16em;
	color: #b5824a;
}
.zt-fd-cap.is-picked { color: #c26a26; }
html.dark .zt-fd-cap { color: #b58f61; }
html.dark .zt-fd-cap.is-picked { color: #e2a061; }
.zt-fd-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: clamp(17px, 6.4cqw, 30px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: .01em;
	color: #3a2510;
	word-break: break-word;
}
html.dark .zt-fd-name { color: #fbe9d3; }
.zt-fd-name.is-empty { color: #c2a382; font-weight: 600; }
.zt-fd-meta {
	font-size: clamp(9.5px, 2.4cqw, 11.5px);
	color: #b08a5c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html.dark .zt-fd-meta { color: #a98a63; }
.zt-fd-btn {
	align-self: flex-start;
	margin-top: auto;
	padding: 0 clamp(10px, 3cqw, 16px);
	height: clamp(22px, 6.6cqw, 30px);
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff9a4d, #ef6a2d);
	color: #fff;
	font-size: clamp(11px, 2.9cqw, 13px);
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(228, 108, 45, .3);
	transition: transform .15s, box-shadow .15s, opacity .15s;
}
.zt-fd-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(228, 108, 45, .38); }
.zt-fd-btn:disabled { opacity: .6; cursor: default; transform: none; }
.zt-fd-open {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(200, 140, 70, .3);
	background: rgba(255, 255, 255, .62);
	color: #b36f2c;
	opacity: .5;
	transition: opacity .18s, transform .18s;
	cursor: pointer;
	z-index: 3;
}
.zt-fd-open svg { width: 13px; height: 13px; fill: currentColor; }
.zt-w-food:hover .zt-fd-open { opacity: 1; }
.zt-fd-open:hover { transform: scale(1.06); }
html.dark .zt-fd-open {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .14);
	color: #e6b884;
}
.zt-w-food.is-rolling .zt-fd-name { opacity: .72; }
.zt-w-food.is-done .zt-fd-name { animation: zt-fd-pop .44s cubic-bezier(.3, 1.5, .6, 1); }
@keyframes zt-fd-pop {
	0% { transform: scale(.86); opacity: .4; }
	60% { transform: scale(1.04); }
	100% { transform: scale(1); opacity: 1; }
}
.zt-w-food[data-size="sm"] {
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding: 10px 10px 12px;
	text-align: center;
}
.zt-w-food[data-size="sm"] .zt-fd-art { display: none; }
.zt-w-food[data-size="sm"] .zt-fd-main {
	flex: 0 1 auto;
	align-items: center;
	gap: 4px;
}
.zt-w-food[data-size="sm"] .zt-fd-cap { font-size: 9.5px; letter-spacing: .18em; }
.zt-w-food[data-size="sm"] .zt-fd-name {
	font-size: clamp(15px, 8.4cqw, 24px);
	-webkit-line-clamp: 3;
	text-align: center;
}
.zt-w-food[data-size="sm"] .zt-fd-meta { font-size: 9.5px; }
.zt-w-food[data-size="sm"] .zt-fd-btn {
	align-self: center;
	height: 24px;
	padding: 0 13px;
	font-size: 11px;
	margin-top: 2px;
}
.zt-w-food[data-size="sm"] .zt-fd-open { top: 6px; right: 6px; width: 21px; height: 21px; }
.zt-w-food[data-size="sm"] .zt-fd-open svg { width: 11px; height: 11px; }

/* ---------- 今天吃什么：窗口 ---------- */
.zt-fd-win-body { gap: 12px; }
.zt-fd-stage {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	padding: 16px;
	text-align: center;
	background: radial-gradient(120% 120% at 50% 0%, #fff8f0 0%, #ffeedd 52%, #ffe1c4 100%);
	border-color: rgba(220, 160, 90, .28);
}
html.dark .zt-fd-stage {
	background: radial-gradient(120% 120% at 50% 0%, #302519 0%, #261d14 56%, #1b140c 100%);
	border-color: rgba(255, 255, 255, .07);
}
.zt-fd-stage-art { height: 132px; display: flex; align-items: center; justify-content: center; }
.zt-fd-stage-art .zt-fd-bowl { height: 100%; }
.zt-fd-pick {
	max-width: 100%;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .01em;
	color: #33200d;
	word-break: break-word;
	padding: 0 6px;
}
html.dark .zt-fd-pick { color: #fbe9d3; }
.zt-fd-sub { font-size: 12px; color: #a8814f; }
html.dark .zt-fd-sub { color: #a98a63; }
.zt-fd-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.zt-fd-draw {
	margin-top: 4px;
	min-width: 132px;
	height: 40px;
	font-size: 14px;
}
.zt-fd-stage.is-done .zt-fd-pick { animation: zt-fd-pop .5s cubic-bezier(.3, 1.5, .6, 1); }
.zt-fd-win-r {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: auto;
}
.zt-fd-sec {
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--zt-text-3);
}
.zt-fd-sec i { font-style: normal; opacity: .7; }
.zt-fd-area {
	min-height: 118px;
	resize: vertical;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}
.zt-fd-history { display: flex; flex-direction: column; gap: 4px; }
.zt-fd-his {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 9px;
	border: 1px solid var(--zt-border);
	border-radius: 9px;
	background: var(--zt-card);
	color: var(--zt-text);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.zt-fd-his:hover { background: var(--zt-card-hover); border-color: var(--zt-accent); }
.zt-fd-his i {
	flex: none;
	width: 17px;
	height: 17px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--zt-border);
	color: var(--zt-text-3);
	font-style: normal;
	font-size: 10px;
}
.zt-fd-his span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-fd-empty {
	padding: 10px;
	border: 1px dashed var(--zt-border);
	border-radius: 9px;
	font-size: 12px;
	color: var(--zt-text-3);
	text-align: center;
}
.zt-fd-rules {
	margin: 0;
	padding-left: 15px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--zt-text-2);
}
@media (max-width: 780px) {
	.zt-fd-win-body { flex-direction: column; overflow-y: auto; }
	.zt-fd-stage { flex: 0 0 auto; min-height: 320px; }
	.zt-fd-pick { font-size: 30px; }
	.zt-fd-win-r { flex: 0 0 auto; overflow: visible; }
}

/* ---------- 每日诗词：卡片 ---------- */
.zt-w-poetry {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: clamp(8px, 2.4cqw, 16px);
	padding: clamp(10px, 3cqw, 16px);
	overflow: hidden;
	color: #3b3227;
	background: linear-gradient(160deg, #fdfaf1 0%, #f7f0e0 60%, #f2e8d3 100%);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
}
html.dark .zt-w-poetry {
	color: #ece2d0;
	background: linear-gradient(160deg, #26221a 0%, #201c15 58%, #19150f 100%);
}
.zt-pt-meta {
	position: relative;
	flex: 0 0 38%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(3px, 1cqw, 7px);
}
.zt-pt-dyn {
	padding: 1px 6px;
	border: 1px solid rgba(168, 62, 40, .5);
	border-radius: 3px;
	font-size: clamp(9px, 2.2cqw, 11px);
	line-height: 1.5;
	color: #a83e28;
	letter-spacing: .1em;
}
html.dark .zt-pt-dyn { border-color: rgba(224, 128, 100, .45); color: #e08a72; }
.zt-pt-title {
	font-size: clamp(15px, 5.4cqw, 27px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	color: #2f2a20;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
html.dark .zt-pt-title { color: #f5eddd; }
.zt-pt-author {
	font-size: clamp(10px, 2.6cqw, 12.5px);
	color: #9a8b74;
	letter-spacing: .06em;
}
html.dark .zt-pt-author { color: #a2957f; }
.zt-pt-acts { margin-top: clamp(2px, 1cqw, 6px); }
.zt-pt-btn {
	height: clamp(20px, 5.6cqw, 26px);
	padding: 0 clamp(8px, 2.6cqw, 13px);
	border: 1px solid rgba(120, 95, 60, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	color: #7a6449;
	font-family: inherit;
	font-size: clamp(10px, 2.6cqw, 12px);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.zt-pt-btn:hover { background: #fff; border-color: rgba(120, 95, 60, .5); color: #5a4630; }
html.dark .zt-pt-btn {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .14);
	color: #c6b79c;
}
.zt-pt-paper {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(6px, 2cqw, 12px) clamp(8px, 2.4cqw, 16px);
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
	box-shadow: inset 0 0 0 1px rgba(150, 120, 80, .14), 0 2px 10px rgba(150, 110, 60, .08);
}
html.dark .zt-pt-paper {
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.zt-pt-paper::after {
	content: '诗';
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 17px;
	height: 17px;
	display: grid;
	place-items: center;
	border-radius: 3px;
	background: #b23c26;
	color: #fff;
	font-size: 10px;
	opacity: .82;
}
.zt-pt-lines {
	writing-mode: vertical-rl;
	text-orientation: upright;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
	font-size: clamp(11px, 3.5cqw, 15.5px);
	line-height: 1.32;
	letter-spacing: .1em;
	color: #463b2c;
}
html.dark .zt-pt-lines { color: #ded2bd; }
.zt-pt-line { white-space: nowrap; }
.zt-pt-open {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	padding: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(150, 120, 80, .25);
	background: rgba(255, 255, 255, .7);
	color: #8b6f4d;
	opacity: .45;
	transition: opacity .18s, transform .18s;
	cursor: pointer;
	z-index: 3;
}
.zt-pt-open svg { width: 12px; height: 12px; fill: currentColor; }
.zt-w-poetry:hover .zt-pt-open { opacity: 1; }
.zt-pt-open:hover { transform: scale(1.06); }
html.dark .zt-pt-open {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .12);
	color: #cbb894;
}
.zt-w-poetry[data-size="sm"] {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 9px 9px 10px;
}
.zt-w-poetry[data-size="sm"] .zt-pt-paper { flex: 1; }
.zt-w-poetry[data-size="sm"] .zt-pt-lines { font-size: clamp(10px, 3.4cqw, 13px); letter-spacing: .06em; }
.zt-w-poetry[data-size="sm"] .zt-pt-meta {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
}
.zt-w-poetry[data-size="sm"] .zt-pt-dyn { display: none; }
.zt-w-poetry[data-size="sm"] .zt-pt-title { font-size: 11.5px; -webkit-line-clamp: 1; }
.zt-w-poetry[data-size="sm"] .zt-pt-author { font-size: 10px; }
.zt-w-poetry[data-size="sm"] .zt-pt-acts { margin: 0; }
.zt-w-poetry[data-size="sm"] .zt-pt-btn { height: 19px; padding: 0 8px; font-size: 10px; }
.zt-w-poetry[data-size="sm"] .zt-pt-paper::after { width: 14px; height: 14px; font-size: 8px; }
.zt-w-poetry[data-size="sm"] .zt-pt-open { top: 6px; right: 6px; width: 20px; height: 20px; }

/* ---------- 每日诗词：窗口 ---------- */
.zt-pt-win-body { gap: 12px; }
.zt-pt-stage {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}
.zt-pt-paper-big {
	flex: 1;
	min-height: 0;
	padding: 22px;
	border-radius: 12px;
	background: linear-gradient(180deg, #fffdf7, #f8f1e2);
	box-shadow: inset 0 0 0 1px rgba(150, 120, 80, .16), 0 8px 24px rgba(150, 110, 60, .1);
}
html.dark .zt-pt-paper-big {
	background: linear-gradient(180deg, #2a251d, #221e17);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.zt-pt-paper-big::after { width: 24px; height: 24px; font-size: 13px; right: 12px; bottom: 12px; }
.zt-pt-paper-big .zt-pt-lines {
	font-size: clamp(18px, 2.6vw, 27px);
	line-height: 1.45;
	letter-spacing: .14em;
}
.zt-pt-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.zt-pt-foot-l { min-width: 0; flex: 1; }
.zt-pt-ftitle {
	font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--zt-text);
}
.zt-pt-fauthor {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--zt-text-3);
	letter-spacing: .06em;
}
.zt-pt-foot-r { display: flex; gap: 8px; flex: 0 0 auto; }
.zt-pt-foot-r .zt-tl-btn.on { border-color: var(--zt-accent); color: var(--zt-accent); }
.zt-pt-win-r {
	flex: 0 0 276px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: auto;
}
.zt-pt-sec {
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--zt-text-3);
}
.zt-pt-sec i { font-style: normal; opacity: .7; }
.zt-pt-favs { display: flex; flex-direction: column; gap: 5px; }
.zt-pt-fav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 9px;
	border: 1px solid var(--zt-border);
	border-radius: 9px;
	background: var(--zt-card);
	color: var(--zt-text);
	font-family: "Songti SC", "STSong", "SimSun", serif;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.zt-pt-fav:hover { background: var(--zt-card-hover); border-color: var(--zt-accent); }
.zt-pt-fav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-pt-fav i {
	flex: none;
	width: 16px;
	height: 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--zt-border);
	color: var(--zt-text-3);
	font-style: normal;
	font-size: 11px;
	line-height: 1;
}
.zt-pt-fav i:hover { background: var(--zt-danger); color: #fff; }
.zt-pt-empty {
	padding: 10px;
	border: 1px dashed var(--zt-border);
	border-radius: 9px;
	font-size: 12px;
	color: var(--zt-text-3);
	text-align: center;
}
.zt-pt-rules {
	margin: 0;
	padding-left: 15px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--zt-text-2);
}
@media (max-width: 780px) {
	.zt-pt-win-body { flex-direction: column; overflow-y: auto; }
	.zt-pt-paper-big { min-height: 340px; }
	.zt-pt-win-r { flex: 0 0 auto; overflow: visible; }
}

/* ===========================================================================
   记事本：置顶 / 回收站 / 导入导出 / 卡片摘要（扩展 mtab 能力）
   =========================================================================== */
.zt-np2-list.is-trash { background: color-mix(in srgb, var(--zt-danger) 5%, transparent); border-radius: 10px; }
.zt-np2-item.is-trash .zt-np2-item-name { color: var(--zt-text-3); text-decoration: line-through; }
.zt-np2-item.is-trash .zt-np2-item-date { color: var(--zt-text-3); }
.zt-np2-pin {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--zt-text-3);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s, color .15s, transform .15s;
}
.zt-np2-pin svg { width: 12px; height: 12px; fill: currentColor; }
.zt-np2-item:hover .zt-np2-pin,
.zt-np2-pin.is-on,
.zt-np2-pin.zt-np2-restore { opacity: 1; }
.zt-np2-pin:hover { color: var(--zt-accent); }
.zt-np2-pin.is-on { color: var(--zt-accent); transform: rotate(-18deg); }
.zt-np2-pin.zt-np2-restore {
	font-size: 12px;
	line-height: 1;
	color: var(--zt-accent);
	border: 1px solid color-mix(in srgb, var(--zt-accent) 34%, transparent);
	border-radius: 6px;
}
.zt-np2-pin.zt-np2-restore:hover { background: color-mix(in srgb, var(--zt-accent) 14%, transparent); }
.zt-np2-pinned {
	margin-right: 5px;
	padding: 0 4px;
	border-radius: 4px;
	font-style: normal;
	font-size: 9.5px;
	line-height: 15px;
	vertical-align: 1px;
	color: #fff;
	background: var(--zt-accent);
}
.zt-np2-side-foot {
	flex: 0 0 auto;
	margin-top: 8px;
	padding-top: 8px;
	display: flex;
	gap: 6px;
	border-top: 1px solid var(--zt-border);
}
.zt-np2-footbtn {
	flex: 1;
	min-width: 0;
	padding: 5px 6px;
	border: 1px solid var(--zt-border);
	border-radius: 7px;
	background: var(--zt-card);
	color: var(--zt-text-2);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.zt-np2-footbtn:hover { background: var(--zt-card-hover); border-color: var(--zt-accent); color: var(--zt-accent); }
.zt-np2-footbtn.is-on { background: color-mix(in srgb, var(--zt-danger) 12%, transparent); border-color: color-mix(in srgb, var(--zt-danger) 40%, transparent); color: var(--zt-danger); }
/* 卡片：2×2 与 4×2 都只显示标题，尺寸差异只体现在字号与行数 */
.zt-w-notepad[data-size="lg"] .zt-np-card-title {
	font-size: 16px;
	-webkit-line-clamp: 5;
	padding-left: 20px;
	padding-right: 20px;
}
.zt-w-notepad[data-size="sm"] .zt-np-card-title {
	font-size: 14.5px;
	-webkit-line-clamp: 4;
	padding-left: 12px;
	padding-right: 12px;
}

/* ===========================================================================
   JSON 格式化
   =========================================================================== */
.zt-w-json {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.3cqw, 9px);
	padding: clamp(10px, 3cqw, 16px);
	overflow: hidden;
	color: #17253f;
	background: radial-gradient(130% 120% at 0% 0%, #f7faff 0%, #eaf1ff 46%, #dfeaff 100%);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
html.dark .zt-w-json {
	color: #e6ecf8;
	background: radial-gradient(130% 120% at 0% 0%, #1c2431 0%, #161d28 52%, #111721 100%);
}
.zt-json-top { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(5px, 1.6cqw, 9px); }
.zt-json-badge {
	width: clamp(20px, 6.2cqw, 30px);
	height: clamp(20px, 6.2cqw, 30px);
	flex: none;
	display: grid;
	place-items: center;
	border-radius: clamp(6px, 1.8cqw, 10px);
	color: #fff;
	background: linear-gradient(140deg, #6f9bff, #3f6fe6);
	box-shadow: 0 5px 14px rgba(63, 111, 230, .3);
}
.zt-json-badge svg { width: 62%; height: 62%; fill: currentColor; }
.zt-json-name {
	flex: 1;
	min-width: 0;
	font-size: clamp(12px, 3.2cqw, 15px);
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-json-state {
	flex: none;
	padding: 2px clamp(6px, 2cqw, 9px);
	border-radius: 999px;
	font-size: clamp(9.5px, 2.4cqw, 11px);
	line-height: 1.6;
	letter-spacing: .04em;
	color: #64748b;
	background: rgba(100, 116, 139, .12);
}
.zt-json-state.is-ok { color: #15803d; background: rgba(34, 197, 94, .14); }
.zt-json-state.is-bad { color: #b91c1c; background: rgba(239, 68, 68, .14); }
html.dark .zt-json-state { color: #94a3b8; background: rgba(148, 163, 184, .16); }
html.dark .zt-json-state.is-ok { color: #6ee7a0; background: rgba(34, 197, 94, .18); }
html.dark .zt-json-state.is-bad { color: #fca5a5; background: rgba(239, 68, 68, .18); }
.zt-json-card-body { flex: 1; min-height: 0; display: flex; gap: clamp(8px, 2.4cqw, 14px); }
.zt-json-stats {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(4px, 1.4cqw, 8px);
	align-content: start;
}
.zt-json-stat {
	min-width: clamp(46px, 13cqw, 66px);
	padding: clamp(4px, 1.4cqw, 8px) clamp(6px, 2cqw, 10px);
	border-radius: 10px;
	background: rgba(255, 255, 255, .62);
	box-shadow: inset 0 0 0 1px rgba(63, 111, 230, .12);
	text-align: center;
}
html.dark .zt-json-stat { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.zt-json-stat b { display: block; font-size: clamp(12px, 3.6cqw, 17px); font-weight: 800; line-height: 1.2; color: #2a4a8a; }
html.dark .zt-json-stat b { color: #a9c4ff; }
.zt-json-stat i { display: block; margin-top: 1px; font-style: normal; font-size: clamp(8.5px, 2.1cqw, 10px); letter-spacing: .1em; color: #7d8ba3; }
html.dark .zt-json-stat i { color: #8b98ab; }
.zt-json-peek-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.zt-json-peek-cap { flex: 0 0 auto; font-size: clamp(9px, 2.2cqw, 10.5px); letter-spacing: .1em; color: #7d8ba3; }
html.dark .zt-json-peek-cap { color: #8b98ab; }
.zt-json-peek {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: clamp(6px, 2cqw, 10px) clamp(7px, 2.4cqw, 12px);
	overflow: hidden auto;
	border-radius: 10px;
	background: rgba(255, 255, 255, .72);
	box-shadow: inset 0 0 0 1px rgba(63, 111, 230, .12);
	font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
	font-size: clamp(9px, 2.5cqw, 11.5px);
	line-height: 1.62;
	color: #475569;
	white-space: pre;
}
html.dark .zt-json-peek { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #9fb0c6; }
.zt-json-peek-err { color: #b91c1c; white-space: pre-wrap; }
html.dark .zt-json-peek-err { color: #fca5a5; }
.zt-jt-k { color: #1c00cf; }
.zt-jt-s { color: #c41a16; }
.zt-jt-n { color: #1c00cf; }
.zt-jt-l { color: #0f766e; }
html.dark .zt-jt-k { color: #9cdcfe; }
html.dark .zt-jt-s { color: #ce9178; }
html.dark .zt-jt-n { color: #b5cea8; }
html.dark .zt-jt-l { color: #c586c0; }
.zt-json-sm-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.zt-json-sm-big { font-size: clamp(22px, 13cqw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #2a4a8a; }
html.dark .zt-json-sm-big { color: #a9c4ff; }
.zt-json-sm-cap { font-size: clamp(9px, 3cqw, 11px); letter-spacing: .18em; color: #7d8ba3; }
html.dark .zt-json-sm-cap { color: #8b98ab; }
.zt-json-sm-meta {
	margin-top: 2px;
	max-width: 100%;
	overflow: hidden;
	font-size: clamp(9px, 2.8cqw, 10.5px);
	line-height: 1.5;
	color: #64748b;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-word;
}
html.dark .zt-json-sm-meta { color: #8b98ab; }

/* ---------- JSON 格式化：窗口 ---------- */
.zt-json-tools-right { margin-left: auto; display: flex; gap: 8px; }
.zt-json-indent { width: auto; min-width: 92px; padding: 6px 10px; }
.zt-json-body { gap: 12px; }
.zt-json-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.zt-json-col-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; letter-spacing: .08em; color: var(--zt-text-3); }
.zt-json-out { margin: 0; padding: 10px 12px; background: var(--zt-card); overflow: auto; }
.zt-json-foot { flex: 0 0 auto; font-size: 11.5px; color: var(--zt-text-3); word-break: break-all; }
@media (max-width: 780px) {
	.zt-json-body { flex-direction: column; }
	.zt-json-col { flex: 1 1 46%; }
}

/* ===========================================================================
   开发者工具箱
   =========================================================================== */
.zt-w-devtools {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.3cqw, 9px);
	padding: clamp(10px, 3cqw, 16px);
	overflow: hidden;
	color: #1f2a3d;
	background: radial-gradient(130% 120% at 2% 0%, #f8f9fc 0%, #eceff7 48%, #e0e6f3 100%);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
html.dark .zt-w-devtools {
	color: #e7ecf5;
	background: radial-gradient(130% 120% at 2% 0%, #1d222b 0%, #171b23 52%, #12151c 100%);
}
.zt-dev-top { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(5px, 1.6cqw, 9px); }
.zt-dev-badge {
	width: clamp(20px, 6.2cqw, 30px);
	height: clamp(20px, 6.2cqw, 30px);
	flex: none;
	display: grid;
	place-items: center;
	border-radius: clamp(6px, 1.8cqw, 10px);
	color: #fff;
	background: linear-gradient(140deg, #64748b, #334155);
	box-shadow: 0 5px 14px rgba(51, 65, 85, .3);
}
.zt-dev-badge svg { width: 62%; height: 62%; fill: currentColor; }
.zt-dev-name {
	flex: 1;
	min-width: 0;
	font-size: clamp(12px, 3.2cqw, 15px);
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-dev-count {
	flex: none;
	padding: 2px clamp(6px, 2cqw, 9px);
	border-radius: 999px;
	font-size: clamp(9.5px, 2.4cqw, 11px);
	color: #475569;
	background: rgba(100, 116, 139, .14);
}
html.dark .zt-dev-count { color: #b6c2d4; background: rgba(148, 163, 184, .16); }
.zt-dev-card-body { flex: 1; min-height: 0; display: flex; gap: clamp(8px, 2.4cqw, 14px); }
.zt-dev-card-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(3px, 1cqw, 6px); }
.zt-dev-card-desc {
	font-size: clamp(11px, 3cqw, 14px);
	font-weight: 600;
	line-height: 1.5;
	color: #27374f;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
html.dark .zt-dev-card-desc { color: #d3dced; }
.zt-dev-card-meta {
	font-size: clamp(9.5px, 2.5cqw, 11.5px);
	line-height: 1.55;
	color: #7a8699;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
html.dark .zt-dev-card-meta { color: #8d99ab; }
.zt-dev-card-last { margin-top: auto; font-size: clamp(9.5px, 2.5cqw, 11.5px); color: #506080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .zt-dev-card-last { color: #9aabc4; }
.zt-dev-chips {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(3px, 1.2cqw, 7px);
	align-content: center;
}
.zt-dev-chip {
	padding: clamp(3px, 1.2cqw, 6px) clamp(6px, 1.8cqw, 10px);
	border: 1px solid rgba(71, 85, 105, .18);
	border-radius: 8px;
	background: rgba(255, 255, 255, .68);
	color: #3b4a63;
	font-size: clamp(9.5px, 2.6cqw, 11.5px);
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.zt-dev-chip:hover { border-color: var(--zt-accent); color: var(--zt-accent); background: #fff; }
html.dark .zt-dev-chip { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: #c3cee0; }
html.dark .zt-dev-chip:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.zt-dev-sm-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.zt-dev-sm-big { font-size: clamp(22px, 13cqw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #27374f; }
html.dark .zt-dev-sm-big { color: #dbe4f2; }
.zt-dev-sm-cap { font-size: clamp(9px, 3cqw, 11px); letter-spacing: .16em; color: #7a8699; }
html.dark .zt-dev-sm-cap { color: #8d99ab; }
.zt-dev-sm-meta { margin-top: 3px; max-width: 100%; overflow: hidden; font-size: clamp(9px, 2.8cqw, 10.5px); line-height: 1.5; color: #64748b; white-space: nowrap; text-overflow: ellipsis; }
html.dark .zt-dev-sm-meta { color: #8d99ab; }

/* ---------- 开发者工具箱：窗口 ---------- */
.zt-dev-body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.zt-dev-list {
	flex: 0 0 170px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
	padding-right: 2px;
	scrollbar-width: thin;
}
.zt-dev-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.zt-dev-item b { font-size: 12.5px; font-weight: 600; color: var(--zt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-dev-item span { font-size: 10.5px; color: var(--zt-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-dev-item:hover { background: var(--zt-card-hover); }
.zt-dev-item.is-on {
	background: color-mix(in srgb, var(--zt-accent) 13%, transparent);
	border-color: color-mix(in srgb, var(--zt-accent) 36%, transparent);
}
.zt-dev-item.is-on b { color: var(--zt-accent); }
.zt-dev-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.zt-dev-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.zt-dev-pane-h { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zt-dev-pane-h b { font-size: 15px; font-weight: 700; }
.zt-dev-pane-h span { font-size: 11.5px; color: var(--zt-text-3); }
.zt-dev-bar { flex: 0 0 auto; gap: 8px; }
.zt-dev-bar-right { margin-left: auto; display: flex; gap: 8px; }
.zt-dev-split { display: flex; gap: 10px; flex: 1; min-height: 0; }
.zt-dev-split > * { flex: 1; min-width: 0; }
.zt-dev-note { flex: 0 0 auto; font-size: 11.5px; line-height: 1.62; color: var(--zt-text-3); }
.zt-dev-note b { color: var(--zt-text-2); }
.zt-dev-dim { font-size: 12px; color: var(--zt-text-3); }
.zt-dev-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.zt-dev-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 9px;
	border-radius: 8px;
	background: var(--zt-card-hover);
	font-size: 12px;
}
.zt-dev-row b { flex: 0 0 auto; min-width: 74px; font-weight: 600; color: var(--zt-text-2); }
.zt-dev-row code {
	flex: 1;
	min-width: 0;
	font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
	font-size: 12px;
	word-break: break-all;
	color: var(--zt-text);
}
.zt-dev-row.is-ok code { color: #15803d; }
.zt-dev-row.is-bad code { color: var(--zt-danger); }
.zt-dev-inline { font-size: 11.5px; color: var(--zt-text-3); }
.zt-dev-check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid var(--zt-border);
	border-radius: 999px;
	background: var(--zt-card);
	font-size: 12px;
	color: var(--zt-text-2);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.zt-dev-check:hover { border-color: var(--zt-accent); color: var(--zt-accent); }
.zt-dev-check input { margin: 0; accent-color: var(--zt-accent); }
.zt-dev-pwd {
	padding: 12px 14px;
	border: 1px solid var(--zt-border);
	border-radius: 10px;
	background: var(--zt-card);
	font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
	font-size: 15px;
	letter-spacing: .05em;
	line-height: 1.6;
	word-break: break-all;
	user-select: all;
}
.zt-dev-swatch {
	width: 22px;
	height: 22px;
	flex: none;
	display: inline-block;
	border-radius: 6px;
	border: 1px solid var(--zt-border);
	background: #fff;
}
.zt-dev-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zt-dev-block-h { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--zt-text-3); }
.zt-dev-json {
	margin: 0;
	padding: 10px 12px;
	max-height: 320px;
	overflow: auto;
	border: 1px solid var(--zt-border);
	border-radius: 10px;
	background: var(--zt-card);
	font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.62;
	white-space: pre-wrap;
	word-break: break-all;
}
@media (max-width: 780px) {
	.zt-dev-body { flex-direction: column; }
	.zt-dev-list { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 0 2px; }
	.zt-dev-item { flex: 0 0 auto; }
	.zt-dev-item span { display: none; }
	.zt-dev-pane { overflow-y: visible; }
}

/* ===========================================================================
   图片格式转换
   =========================================================================== */
.zt-w-imgc {
	container-type: size;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.3cqw, 9px);
	padding: clamp(10px, 3cqw, 16px);
	overflow: hidden;
	color: #17303a;
	background: radial-gradient(130% 120% at 2% 0%, #f4fdfb 0%, #e6f7f4 48%, #d5efea 100%);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
html.dark .zt-w-imgc {
	color: #e2f2ef;
	background: radial-gradient(130% 120% at 2% 0%, #17262a 0%, #122024 52%, #0d191c 100%);
}
.zt-imgc-top { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(5px, 1.6cqw, 9px); }
.zt-imgc-badge {
	width: clamp(20px, 6.2cqw, 30px);
	height: clamp(20px, 6.2cqw, 30px);
	flex: none;
	display: grid;
	place-items: center;
	border-radius: clamp(6px, 1.8cqw, 10px);
	color: #fff;
	background: linear-gradient(140deg, #4fd1c5, #14a08f);
	box-shadow: 0 5px 14px rgba(20, 160, 143, .3);
}
.zt-imgc-badge svg { width: 62%; height: 62%; fill: currentColor; }
.zt-imgc-name {
	flex: 1;
	min-width: 0;
	font-size: clamp(12px, 3.2cqw, 15px);
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zt-imgc-tag {
	flex: none;
	padding: 2px clamp(6px, 2cqw, 9px);
	border-radius: 999px;
	font-size: clamp(9.5px, 2.4cqw, 11px);
	color: #0f766e;
	background: rgba(20, 160, 143, .14);
}
html.dark .zt-imgc-tag { color: #6ee7d7; background: rgba(20, 160, 143, .22); }
.zt-imgc-card-body { flex: 1; min-height: 0; display: flex; gap: clamp(8px, 2.4cqw, 14px); }
.zt-imgc-card-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(3px, 1cqw, 6px); }
.zt-imgc-desc {
	font-size: clamp(11px, 3cqw, 14px);
	font-weight: 600;
	line-height: 1.5;
	color: #164e46;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
html.dark .zt-imgc-desc { color: #cdeee7; }
.zt-imgc-meta { font-size: clamp(9.5px, 2.5cqw, 11.5px); line-height: 1.55; color: #5b8a84; }
html.dark .zt-imgc-meta { color: #86a9a3; }
.zt-imgc-last { margin-top: auto; font-size: clamp(9.5px, 2.5cqw, 11.5px); color: #3f6f68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .zt-imgc-last { color: #9ac3bc; }
.zt-imgc-chips { flex: 0 0 auto; display: flex; flex-direction: column; gap: clamp(3px, 1.2cqw, 7px); align-content: center; justify-content: center; }
.zt-imgc-chips span {
	padding: clamp(3px, 1.2cqw, 6px) clamp(8px, 2.4cqw, 12px);
	border: 1px solid rgba(20, 160, 143, .2);
	border-radius: 8px;
	background: rgba(255, 255, 255, .68);
	color: #127468;
	font-size: clamp(9.5px, 2.6cqw, 11.5px);
	font-weight: 600;
	letter-spacing: .04em;
	text-align: center;
	white-space: nowrap;
}
html.dark .zt-imgc-chips span { border-color: rgba(110, 231, 215, .18); background: rgba(255, 255, 255, .06); color: #7fded2; }
.zt-imgc-sm-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.zt-imgc-sm-fmt { font-size: clamp(13px, 6.4cqw, 20px); font-weight: 800; letter-spacing: .02em; color: #127468; }
html.dark .zt-imgc-sm-fmt { color: #7fded2; }
.zt-imgc-sm-meta { margin-top: 2px; max-width: 100%; overflow: hidden; font-size: clamp(9px, 2.8cqw, 10.5px); line-height: 1.5; color: #5b8a84; text-overflow: ellipsis; white-space: nowrap; }
html.dark .zt-imgc-sm-meta { color: #86a9a3; }

/* ---------- 图片格式转换：窗口 ---------- */
.zt-imgc-tools { gap: 8px; }
.zt-imgc-seg {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--zt-border);
	border-radius: 9px;
	background: var(--zt-card);
}
.zt-imgc-seg button {
	padding: 6px 14px;
	border: 0;
	background: transparent;
	color: var(--zt-text-2);
	font-size: 12px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.zt-imgc-seg button + button { border-left: 1px solid var(--zt-border); }
.zt-imgc-seg button:hover { background: var(--zt-card-hover); }
.zt-imgc-seg button.is-on { background: var(--zt-accent); color: #fff; }
.zt-imgc-range { width: 132px; accent-color: var(--zt-accent); }
.zt-imgc-qval { min-width: 24px; font-size: 12px; color: var(--zt-text-2); }
.zt-imgc-num { width: 88px; padding: 6px 9px; font-size: 12px; }
.zt-imgc-color {
	width: 34px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--zt-border);
	border-radius: 7px;
	background: var(--zt-card);
	cursor: pointer;
}
.zt-imgc-hint { font-size: 11.5px; color: var(--zt-text-3); }
.zt-imgc-drop {
	padding: 26px 16px;
	border: 1.5px dashed var(--zt-border);
	border-radius: 12px;
	background: var(--zt-card-hover);
	color: var(--zt-text-3);
	font-size: 12.5px;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s, background .18s, color .18s;
}
.zt-imgc-drop:hover,
.zt-imgc-drop.is-over { border-color: var(--zt-accent); color: var(--zt-accent); background: color-mix(in srgb, var(--zt-accent) 8%, transparent); }
.zt-imgc-drop.is-hide { display: none; }
.zt-imgc-win.is-empty .zt-imgc-list { display: none; }
.zt-imgc-win.is-empty .zt-imgc-drop {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}
.zt-imgc-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	scrollbar-width: thin;
}
.zt-imgc-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border: 1px solid var(--zt-border);
	border-radius: 10px;
	background: var(--zt-card);
}
.zt-imgc-thumb {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 7px;
	object-fit: cover;
	background: var(--zt-card-hover);
}
.zt-imgc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zt-imgc-fname { font-size: 12.5px; color: var(--zt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-imgc-sub { font-size: 11px; color: var(--zt-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-imgc-out { flex: 0 0 auto; min-width: 0; max-width: 40%; display: flex; flex-direction: column; gap: 2px; text-align: right; }
.zt-imgc-status { font-size: 11.5px; font-weight: 600; }
.zt-imgc-status.is-ok { color: #15803d; }
.zt-imgc-status.is-bad { color: var(--zt-danger); }
.zt-imgc-status.is-idle { color: var(--zt-text-3); }
.zt-imgc-acts { flex: none; display: flex; gap: 6px; }
.zt-imgc-acts .zt-tl-btn { padding: 5px 10px; font-size: 11.5px; }
@media (max-width: 780px) {
	.zt-imgc-item { flex-wrap: wrap; }
	.zt-imgc-out { flex: 1 1 100%; max-width: 100%; text-align: left; }
}

/* ---------- 工具类窗口 / 面板补充 ---------- */
.zt-json-win,
.zt-dev-win,
.zt-imgc-win { min-height: 0; }
.zt-dev-num { width: 84px; padding: 6px 9px; font-size: 12px; }
.zt-dev-out { min-height: 120px; }
.zt-dev-jwt { white-space: pre-wrap; word-break: break-all; }
.zt-dev-jwt-status {
	flex: 0 0 auto;
	padding: 7px 11px;
	border-radius: 9px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--zt-text-3);
	background: var(--zt-card-hover);
}
.zt-dev-jwt-status.is-ok { color: #15803d; background: rgba(34, 197, 94, .13); }
.zt-dev-jwt-status.is-bad { color: var(--zt-danger); background: color-mix(in srgb, var(--zt-danger) 12%, transparent); }

/* 尊重系统「减少动态效果」：保留状态变化，去掉时长与循环动画 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}