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

			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
				background-image: linear-gradient(0deg, #eee 1px, transparent 0),
					linear-gradient(90deg, #eee 1px, transparent 0);
				background-size: 30px 30px;
				color: #333;
				min-height: 100dvh;
				overflow: hidden;
			}

			body.is-mobile {
				overflow-y: auto;
			}

			#board {
				position: relative;
				width: 100vw;
				height: 100dvh;
				overflow: hidden;
			}

			body.is-mobile #board {
				height: auto;
				min-height: 100dvh;
			}

			.card {
				position: absolute;
				width: 220px;
				border-radius: 12px;
				box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
				background: #fff;
				border: 1px solid rgba(0, 0, 0, 0.08);
				overflow: hidden;
				opacity: 0;
				transform-origin: center;
				transition: transform 0.35s ease, opacity 0.35s ease, left 0.35s ease,
					top 0.35s ease, width 0.35s ease, height 0.35s ease,
					border-radius 0.35s ease;
			}

			.card.dragging {
				transition: none;
				box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35);
			}

			.card.maximized {
				box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
			}

			.card-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 12px;
				background: rgba(255, 255, 255, 0.7);
				cursor: grab;
				user-select: none;
				touch-action: pan-y;
			}

			.card-header.dragging {
				cursor: grabbing;
			}

			.window-controls {
				display: flex;
				align-items: center;
				gap: 6px;
			}

			.window-controls .control {
				position: relative;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				border: 1px solid rgba(0, 0, 0, 0.08);
				background: #ccc;
				cursor: pointer;
				outline: none;
				padding: 0;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			.window-controls .control.close {
				background: #ff5f57;
				border-color: #e0443e;
			}

			.window-controls .control.minimize {
				background: #febb2e;
				border-color: #dea123;
			}

			.window-controls .control.maximize {
				background: #28c840;
				border-color: #1aab2c;
			}

			.window-controls .control::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				opacity: 0;
				transition: opacity 0.2s ease;
			}

			.card-header:hover .window-controls .control::after {
				opacity: 0.8;
			}

			.window-controls .control.close::after {
				content: '×';
				width: auto;
				height: auto;
				background: none;
				font-size: 10px;
				line-height: 1;
				font-weight: 700;
				color: rgba(0, 0, 0, 0.7);
			}

			.window-controls .control.minimize::after {
				width: 6px;
				height: 2px;
				background: rgba(0, 0, 0, 0.6);
			}

			.window-controls .control.maximize::after {
				width: 6px;
				height: 6px;
				background: linear-gradient(
					45deg,
					rgba(0, 0, 0, 0.6) 0%,
					rgba(0, 0, 0, 0.6) 45%,
					transparent 45%,
					transparent 55%,
					rgba(0, 0, 0, 0.6) 55%,
					rgba(0, 0, 0, 0.6) 100%
				);
			}

			.card-title {
				font-size: 13px;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.55);
				padding-left: 10px;
				flex: 1;
			}

			.card-body {
				padding: 16px;
				font-size: 16px;
				line-height: 1.4;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.72);
			}

			@media (max-width: 768px) {
				.card {
					width: 180px;
					border-radius: 10px;
				}

				.card-body {
					padding: 14px;
					font-size: 14px;
				}

				.card-title {
					font-size: 12px;
				}
			}

	/* 背景切换按钮和星空背景样式 */
	#bgToggle {
			position: fixed;
			right: 18px;
			bottom: 18px;
			width: 48px;
			height: 48px;
			border-radius: 50%;
			border: none;
			background: rgba(255,255,255,0.9);
			color: #222;
			font-size: 20px;
			line-height: 1;
			display: inline-grid;
			place-items: center;
			box-shadow: 0 10px 25px rgba(10,10,20,0.25);
			cursor: pointer;
				z-index: 1000001; /* 高于卡片和最大化层 */
			transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
		}

		#bgToggle:hover {
			transform: translateY(-3px);
		}

		#bgToggle.active {
			background: linear-gradient(135deg, #1b2a55 0%, #10203a 100%);
			color: #fff;
		}

		/* 星空背景层（用于做淡入淡出的动画） */
		#bgLayer {
			position: fixed;
			inset: 0;
			pointer-events: none;
			z-index: 0; /* 在卡片之下（卡片 z-index 从 200 起） */
			opacity: 0;
			transition: opacity 0.6s ease;
			background-color: #071126;
			background-image:
				radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.9) 20%, transparent 21%),
				radial-gradient(1.6px 1.6px at 30% 40%, rgba(255,255,255,0.85) 20%, transparent 21%),
				radial-gradient(1.2px 1.2px at 50% 10%, rgba(255,255,255,0.8) 20%, transparent 21%),
				radial-gradient(1.4px 1.4px at 70% 60%, rgba(255,255,255,0.85) 20%, transparent 21%),
				radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.7) 20%, transparent 21%),
				linear-gradient(180deg, rgba(6,14,34,0.6), rgba(3,7,18,0.9));
			background-repeat: repeat;
			background-size: 380px 380px, 420px 420px, 300px 300px, 520px 520px, 220px 220px, 100% 100%;
		}

		/* 细微闪烁效果（覆盖在星空层上） */
		#bgLayer::after {
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-image: radial-gradient(circle at 10% 30%, rgba(255,255,255,0.06), transparent 8%),
						radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05), transparent 6%);
			mix-blend-mode: screen;
			animation: twinkle 6s linear infinite;
			opacity: 0.9;
		}

		@keyframes twinkle {
			0% { opacity: 0.6 }
			50% { opacity: 0.9 }
			100% { opacity: 0.6 }
		}

		/* 当 body 有 starry 时显示星空层，同时调整页面文字颜色 */
		body.starry {
			color: #e6f2ff;
		}
		body.starry #bgLayer {
			opacity: 1;
		}

		/* 卡片暗色模式，在 body.starry 下生效 */
		/* 添加过渡以便于平滑切换 */
		.card {
			transition: transform 0.35s ease, opacity 0.35s ease, left 0.35s ease,
				top 0.35s ease, width 0.35s ease, height 0.35s ease,
				border-radius 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
		}

		/* 强制覆盖内联背景颜色（JS 设置的浅色背景会被覆盖） */
		body.starry .card {
			background: rgba(6, 18, 34, 0.86) !important;
			border: 1px solid rgba(255,255,255,0.06) !important;
			box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
			color: #e6f2ff !important;
		}

		body.starry .card-header {
			background: rgba(255,255,255,0.03) !important;
			color: #d9e9ff !important;
		}

		body.starry .card-body {
			color: #e6f2ff !important;
		}

		/* 卡片内部若有直接设置颜色的元素，也强制为浅色 */
		body.starry .card * {
			color: inherit !important;
		}

		/* 窗口控制按钮在暗色模式下使用更柔和的颜色 */
		body.starry .window-controls .control {
			background: rgba(255,255,255,0.08);
			border-color: rgba(255,255,255,0.06);
		}

		body.starry .window-controls .control.close {
			background: linear-gradient(180deg, #ff7b75, #ff5f57);
		}
		body.starry .window-controls .control.minimize {
			background: linear-gradient(180deg, #ffd77e, #febb2e);
		}
		body.starry .window-controls .control.maximize {
			background: linear-gradient(180deg, #55d47a, #28c840);
		}