/* =====================================================================
   ui.css — 在 styles.css 之后加载：深色模式修正 / 控制台 / 特效层
   ===================================================================== */

:root {
	--panel-solid: #ffffff;
	--glow-intensity: 0.45;
	--glow-blur: 70px;
	--glass-blur: 14px;
	--glass-alpha: 0.7;
	--border-alpha: 0.1;
	--shadow-strength: 1;
	--anim-dist: 10px;
	--dur: 240ms;
	--tracking: 0em;
	--font-weight: 500;
	--font-preset-scale: 1;
	--contrast-boost: 1;
	--gap: 16px;
	--row-pad: 14px;
}

html[data-theme="dark"] {
	--panel-solid: #1b1d29;
	--cal-invert: 1;
	color-scheme: dark;
}
html[data-theme="light"] {
	--cal-invert: 0;
	color-scheme: light;
}

body {
	font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
	letter-spacing: var(--tracking);
	font-size: calc(15px * var(--font-scale, 1) * var(--font-preset-scale));
}

/* ---------------------------------------------------------------
   1. 深色模式输入控件修正（选择框看不清的问题）
   --------------------------------------------------------------- */
.select,
select,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea {
	background: var(--panel-solid) !important;
	color: var(--text) !important;
	border: 1px solid rgba(var(--line), calc(0.22 * var(--contrast-boost))) !important;
	border-radius: var(--radius-sm, 12px);
	padding: 9px 12px;
	font: inherit;
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s;
}

.select:focus,
select:focus,
.input:focus,
input:focus,
textarea:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

::placeholder {
	color: var(--text-faint);
	opacity: 1;
}

/* 自绘下拉箭头，避开系统深色下的黑字黑底 */
select,
.select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 32px !important;
	background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%) !important;
	background-position: calc(100% - 17px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px) !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
}
select {
	background-color: var(--panel-solid) !important;
}

/* 下拉面板（系统渲染）*/
select option,
select optgroup {
	background-color: var(--panel-solid);
	color: var(--text);
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
	background-color: #181a26;
	color: #edeff7;
}
select option:checked {
	background: var(--accent);
	color: #fff;
}

/* 日期控件图标在深色下取反 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(var(--cal-invert, 0));
	opacity: 0.75;
	cursor: pointer;
}

/* ---------------------------------------------------------------
   2. 右上角悬浮控制台
   --------------------------------------------------------------- */
#console-root {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.console-fab {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(var(--line), 0.16);
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(0, 0, 0, calc(0.35 * var(--shadow-strength)));
	display: grid;
	place-items: center;
	transition: transform 0.22s, box-shadow 0.22s;
}
.console-fab:hover {
	transform: translateY(-1px) scale(1.04);
}
.console-fab.is-open .console-fab-icon {
	transform: rotate(120deg);
}
.console-fab-icon {
	transition: transform 0.35s;
}

.console-panel {
	width: 340px;
	max-height: min(78vh, 680px);
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	border: 1px solid rgba(var(--line), 0.14);
	background: rgba(var(--panel), 0.86);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
	overflow: hidden;
	animation: console-in 0.22s ease;
}
@keyframes console-in {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.98);
	}
}

.console-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 14px 10px;
}
#console-title {
	font-weight: 700;
	font-size: 15px;
}
.console-sub {
	margin-top: 2px;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--text-faint);
}
.console-x {
	border: 0;
	background: rgba(var(--line), 0.08);
	color: var(--text-dim);
	width: 26px;
	height: 26px;
	border-radius: 8px;
	cursor: pointer;
}
.console-x:hover {
	color: var(--text);
}

#console-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin: 0 12px 10px;
	padding: 4px;
	border-radius: 12px;
	background: rgba(var(--line), 0.07);
}
#console-tabs button {
	border: 0;
	background: transparent;
	color: var(--text-dim);
	padding: 7px 0;
	border-radius: 9px;
	font-size: 12.5px;
	cursor: pointer;
}
#console-tabs button.is-active {
	background: rgba(var(--line), 0.14);
	color: var(--text);
	font-weight: 600;
}

#console-body {
	padding: 0 12px 12px;
	overflow-y: auto;
	flex: 1;
}
#console-body::-webkit-scrollbar {
	width: 6px;
}
#console-body::-webkit-scrollbar-thumb {
	background: rgba(var(--line), 0.2);
	border-radius: 3px;
}

.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.cat-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 9px 2px 7px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: rgba(var(--line), 0.06);
	color: var(--text-dim);
	cursor: pointer;
	transition: 0.16s;
}
.cat-tile:hover {
	background: rgba(var(--line), 0.11);
}
.cat-tile.is-active {
	border-color: var(--accent);
	color: var(--text);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.cat-icon {
	font-size: 15px;
}
.cat-name {
	font-size: 10.5px;
	white-space: nowrap;
}
.cat-led {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(var(--line), 0.3);
}
.cat-led.on {
	background: var(--accent);
	box-shadow: 0 0 6px var(--accent);
}

.fx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 2px 8px;
}
.fx-head b {
	font-size: 13.5px;
}
.fx-text {
	display: block;
	font-size: 11.5px;
	color: var(--text-faint);
}
.fx-text i {
	display: block;
	font-style: normal;
	font-size: 11px;
	color: var(--text-faint);
}
.fx-text b {
	display: block;
	font-size: 13px;
	color: var(--text);
	font-weight: 600;
}

.fx-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.fx-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 11px;
	border: 1px solid transparent;
	background: rgba(var(--line), 0.05);
	color: var(--text);
	text-align: left;
	cursor: pointer;
	transition: 0.15s;
}
.fx-item:hover {
	background: rgba(var(--line), 0.1);
}
.fx-item.is-active {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.fx-no {
	flex: 0 0 22px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
}
.fx-item.is-active .fx-no {
	color: var(--accent);
}

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

.console-group {
	margin: 12px 2px 6px;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--text-faint);
}
.range-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 2px;
}
.range-wrap input[type="range"] {
	flex: 1;
	accent-color: var(--accent);
}
.range-out {
	min-width: 42px;
	text-align: right;
	font-size: 12px;
	color: var(--text-dim);
	font-variant-numeric: tabular-nums;
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.theme-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 4px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: rgba(var(--line), 0.06);
	color: var(--text);
	cursor: pointer;
	transition: 0.15s;
}
.theme-card:hover {
	background: rgba(var(--line), 0.11);
}
.theme-card.is-active {
	border-color: var(--accent);
}
.theme-swatch {
	width: 100%;
	height: 22px;
	border-radius: 7px;
}
.theme-name {
	font-size: 11.5px;
}
.theme-en {
	font-size: 9.5px;
	color: var(--text-faint);
}

.console-adv {
	padding-top: 4px;
}
.console-textarea {
	width: 100%;
	min-height: 150px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	resize: vertical;
}
.console-actions {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}
.console-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid rgba(var(--line), 0.1);
}
.console-hint {
	font-size: 11px;
	color: var(--text-faint);
}
.console-btn {
	padding: 6px 12px;
	border-radius: 9px;
	border: 1px solid rgba(var(--line), 0.16);
	background: rgba(var(--line), 0.06);
	color: var(--text);
	font-size: 12px;
	cursor: pointer;
}
.console-btn:hover {
	background: rgba(var(--line), 0.13);
}
.console-btn.primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	border-color: transparent;
	color: #fff;
}

/* ---------------------------------------------------------------
   3. 特效画布与点击反馈
   --------------------------------------------------------------- */
#particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
#trail {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.fx-click {
	position: fixed;
	pointer-events: none;
	z-index: 95;
	translate: -50% -50%;
}
.fx-ripple,
.fx-dualring,
.fx-shock {
	width: var(--fx-size, 110px);
	height: var(--fx-size, 110px);
	border-radius: 50%;
	border: 2px solid var(--accent);
	animation: fx-ring 0.65s ease-out forwards;
}
.fx-shock {
	filter: blur(2px);
	border-width: 4px;
}
.fx-pulse {
	width: var(--fx-size, 80px);
	height: var(--fx-size, 80px);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
	animation: fx-ring 0.55s ease-out forwards;
}
.fx-square {
	width: var(--fx-size, 90px);
	height: var(--fx-size, 90px);
	border: 2px solid var(--accent-2);
	animation: fx-square 0.6s ease-out forwards;
}
.fx-star,
.fx-cross {
	width: var(--fx-size, 50px);
	height: 2px;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
	animation: fx-star 0.5s ease-out forwards;
}
.fx-star::after,
.fx-cross::after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transform: rotate(90deg);
}
.fx-burst,
.fx-splash,
.fx-confetti {
	width: var(--fx-dot, 6px);
	height: var(--fx-dot, 6px);
	border-radius: 50%;
	background: var(--accent);
	animation: fx-spark 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.fx-confetti {
	border-radius: 2px;
	animation: fx-confetti 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.fx-splash {
	border-radius: 50% 40% 60% 45%;
}

@keyframes fx-ring {
	from {
		transform: scale(0.1);
		opacity: 0.9;
	}
	to {
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes fx-square {
	from {
		transform: scale(0.1) rotate(0deg);
		opacity: 0.9;
	}
	to {
		transform: scale(1) rotate(90deg);
		opacity: 0;
	}
}
@keyframes fx-star {
	from {
		transform: scale(0.2);
		opacity: 1;
	}
	to {
		transform: scale(1.6);
		opacity: 0;
	}
}
@keyframes fx-spark {
	from {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}
	to {
		transform: translate(var(--dx, 20px), var(--dy, 20px)) scale(0.2);
		opacity: 0;
	}
}
@keyframes fx-confetti {
	from {
		transform: translate(0, 0) rotate(0deg);
		opacity: 1;
	}
	to {
		transform: translate(var(--dx, 20px), calc(var(--dy, 20px) + 90px)) rotate(420deg);
		opacity: 0;
	}
}

/* ---------------------------------------------------------------
   4. 炫光背景变体
   --------------------------------------------------------------- */
#bg .blob {
	opacity: var(--glow-intensity);
	filter: blur(var(--glow-blur));
}
html[data-glow="off"] #bg .blob {
	opacity: 0;
}
html[data-glow="off"] #bg::after {
	content: none;
}

#bg::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: var(--glow-intensity);
}
html[data-glow="blobs"] #bg::after {
	background: none;
}
html[data-glow="aurora"] #bg::after {
	background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--accent) 40%, transparent) 45%, color-mix(in srgb, var(--accent-2) 40%, transparent) 60%, transparent 85%);
	filter: blur(60px);
}
html[data-glow="spotlight"] #bg::after {
	background: radial-gradient(60% 45% at 50% -10%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%);
}
html[data-glow="beam"] #bg::after {
	background: repeating-linear-gradient(60deg, transparent 0 120px, color-mix(in srgb, var(--accent) 22%, transparent) 120px 200px);
	filter: blur(40px);
}
html[data-glow="mesh"] #bg::after {
	background: linear-gradient(rgba(var(--line), 0.16) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(var(--line), 0.16) 1px, transparent 1px) 0 0 / 40px 40px,
		radial-gradient(50% 40% at 50% 30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
}
html[data-glow="vignette"] #bg::after {
	background: radial-gradient(75% 60% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.55));
}
html[data-glow="grain"] #bg::after {
	background-image: radial-gradient(rgba(var(--line), 0.35) 0.5px, transparent 0.5px);
	background-size: 3px 3px;
}
html[data-glow="halo"] #bg::after {
	background: radial-gradient(closest-side, transparent 55%, color-mix(in srgb, var(--accent) 45%, transparent) 62%, transparent 72%);
	filter: blur(18px);
}
html[data-glow="sunrise"] #bg::after {
	background: linear-gradient(0deg, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 55%);
	filter: blur(30px);
}
html[data-glow="nebula"] #bg::after {
	background: radial-gradient(40% 30% at 20% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
		radial-gradient(45% 35% at 80% 25%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%),
		radial-gradient(50% 40% at 50% 85%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
	filter: blur(50px);
}

/* ---------------------------------------------------------------
   5. 质感变体
   --------------------------------------------------------------- */
.glass,
.panel,
.task,
.modal,
.auth-card,
.share-card,
.group,
.stat,
.composer,
.toolbar {
	border-radius: var(--radius, 18px);
}

.glass,
.panel,
.modal,
.auth-card {
	backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
	background: rgba(var(--panel), var(--glass-alpha));
	border: 1px solid rgba(var(--line), calc(var(--border-alpha) * var(--contrast-boost)));
	box-shadow: 0 18px 40px rgba(0, 0, 0, calc(0.28 * var(--shadow-strength)));
}

html[data-surface="flat"] .glass,
html[data-surface="flat"] .panel,
html[data-surface="flat"] .task {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--panel-solid);
	box-shadow: none;
}
html[data-surface="outline"] .glass,
html[data-surface="outline"] .panel,
html[data-surface="outline"] .task {
	background: transparent;
	backdrop-filter: none;
	box-shadow: none;
	border: 1px solid rgba(var(--line), 0.28);
}
html[data-surface="neumorph"] .glass,
html[data-surface="neumorph"] .panel,
html[data-surface="neumorph"] .task {
	background: var(--panel-solid);
	border: 0;
	box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.3), -6px -6px 16px rgba(255, 255, 255, 0.06);
}
html[data-surface="paper"] .glass,
html[data-surface="paper"] .panel,
html[data-surface="paper"] .task {
	background-image: radial-gradient(rgba(var(--line), 0.12) 0.5px, transparent 0.5px);
	background-size: 3px 3px;
}
html[data-surface="carbon"] .glass,
html[data-surface="carbon"] .panel,
html[data-surface="carbon"] .task {
	background-image: repeating-linear-gradient(45deg, rgba(var(--line), 0.08) 0 2px, transparent 2px 4px);
}
html[data-surface="edge"] .glass,
html[data-surface="edge"] .panel,
html[data-surface="edge"] .task {
	border: 1px solid transparent;
	background-image: linear-gradient(rgba(var(--panel), var(--glass-alpha)), rgba(var(--panel), var(--glass-alpha))), linear-gradient(135deg, var(--accent), var(--accent-2));
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
html[data-surface="dashed"] .glass,
html[data-surface="dashed"] .panel,
html[data-surface="dashed"] .task {
	border-style: dashed;
	border-color: rgba(var(--line), 0.3);
}
html[data-surface="frost"] .glass,
html[data-surface="frost"] .panel,
html[data-surface="frost"] .task {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------------------
   6. 动态变体
   --------------------------------------------------------------- */
* {
	--t: var(--dur);
}
.btn,
.icon-btn,
.task,
.fx-item,
.cat-tile,
.theme-card {
	transition-duration: var(--dur);
}

html[data-anim="none"] *,
html[data-motion="off"] * {
	animation: none !important;
	transition: none !important;
}

.task,
.group,
.share-card,
.stat {
	animation: fx-enter var(--dur) ease both;
}
html[data-anim="fade"] .task,
html[data-anim="fade"] .group {
	animation-name: fx-fade;
}
html[data-anim="slide"] .task,
html[data-anim="slide"] .group {
	animation-name: fx-slide;
}
html[data-anim="zoom"] .task,
html[data-anim="zoom"] .group {
	animation-name: fx-zoom;
}
html[data-anim="blurin"] .task,
html[data-anim="blurin"] .group {
	animation-name: fx-blur;
}
html[data-anim="flip"] .task,
html[data-anim="flip"] .group {
	animation-name: fx-flip;
}
html[data-anim="drift"] .task,
html[data-anim="drift"] .group {
	animation-name: fx-drift;
}
html[data-anim="spring"] .task {
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-anim="snap"] .task {
	animation-duration: 90ms;
}
html[data-anim="calm"] .task {
	animation-duration: calc(var(--dur) * 1.6);
}

@keyframes fx-enter {
	from {
		opacity: 0;
		transform: translateY(var(--anim-dist));
	}
}
@keyframes fx-fade {
	from {
		opacity: 0;
	}
}
@keyframes fx-slide {
	from {
		opacity: 0;
		transform: translateX(calc(var(--anim-dist) * -1.6));
	}
}
@keyframes fx-zoom {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
}
@keyframes fx-blur {
	from {
		opacity: 0;
		filter: blur(8px);
	}
}
@keyframes fx-flip {
	from {
		opacity: 0;
		transform: perspective(600px) rotateX(-12deg);
	}
}
@keyframes fx-drift {
	from {
		opacity: 0;
		transform: translate(calc(var(--anim-dist) * -1), var(--anim-dist));
	}
}

/* ---------------------------------------------------------------
   7. 排版密度
   --------------------------------------------------------------- */
.wrap,
.container,
main,
.topbar-inner {
	max-width: var(--maxw, 920px);
}
.task {
	padding: var(--row-pad, 14px);
}
.group + .group,
.panel + .panel {
	margin-top: var(--gap);
}

html[data-density="list"] .task {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	box-shadow: none;
	background: transparent;
	backdrop-filter: none;
}
html[data-density="card"] .task {
	box-shadow: 0 10px 24px rgba(0, 0, 0, calc(0.22 * var(--shadow-strength)));
}
html[data-density="focus"] .stat,
html[data-density="focus"] #bg .blob {
	display: none;
}

/* ---------------------------------------------------------------
   8. 移动端
   --------------------------------------------------------------- */
@media (max-width: 640px) {
	#console-root {
		top: 10px;
		right: 10px;
		left: 10px;
		align-items: flex-end;
	}
	.console-panel {
		width: 100%;
		max-height: 74vh;
	}
	.theme-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}