:root {
	--accent: #6366f1;
	--accent-hover: #4f46e5;
	--accent-muted: rgba(99, 102, 241, .12);
	--danger: #ef4444;
	--danger-hover: #dc2626;
	--success: #10b981;
	--warning: #f59e0b;
	--bg: #fff;
	--bg-muted: #f6f8fa;
	--surface: #ffffff;
	--surface-2: #f0f2f5;
	--surface-3: #e4e8ed;
	--border: #d0d7de;
	--text: #1f2328;
	--text-muted: #57606a;
	--text-subtle: #8c959f;
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 14px;
}

body.dark-mode {
	--bg: #0d1117;
	--bg-muted: #161b22;
	--surface: #161b22;
	--surface-2: #21262d;
	--surface-3: #30363d;
	--border: #30363d;
	--text: #e6edf3;
	--text-muted: #8b949e;
	--text-subtle: #6e7681;
}

* {
	box-sizing: border-box;
}

button,
select,
input,
label,
a {
	touch-action: manipulation;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

.main {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 16px 20px 3rem;
	font-size: .875rem;
	line-height: 1.5;
	background-color: var(--bg);
	color: var(--text);
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 12px;
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--text-muted);
}

.card-header button {
	margin-left: auto;
}

.card-body {
	padding: 12px 14px;
}

.card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}

body.dark-mode .card-actions {
	background: var(--bg);
}

body.dark-mode .main {
	background-color: var(--bg);
	color: var(--text);
}

button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 5px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text);
	font-size: .875rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
	outline: none;
	line-height: 1.5;
}

button:hover {
	background: var(--surface-3);
	border-color: var(--text-subtle);
}

button:disabled {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

button.primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

button.primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	box-shadow: 0 0 0 3px #6366f140;
}

button.secondary {
	background: var(--surface-2);
	color: var(--text);
	border-color: var(--border);
}

button.secondary:hover {
	background: var(--surface-3);
	border-color: var(--text-subtle);
	box-shadow: 0 0 0 3px #6366f11f;
}

button.danger {
	background: var(--danger);
	color: #fff;
	border-color: var(--danger);
}

button.danger:hover {
	background: var(--danger-hover);
	box-shadow: 0 0 0 3px #ef444440;
}

button.small {
	padding: 3px 9px;
	font-size: .78rem;
}

input[type=text],
input[type=number],
select {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 5px 10px;
	max-width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}

select {
	padding: 5px 28px 5px 10px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2357606a' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
}

body.dark-mode select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238b949e' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
}

input[type=file] {
	font-size: .875rem;
	color: var(--text);
	max-width: 60%;
}

input::file-selector-button {
	font-size: .875rem;
	font-weight: 500;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	background: var(--surface-2);
	color: var(--text);
	padding: 4px 10px;
	transition: background .15s ease;
	margin-right: 8px;
}

input::file-selector-button:hover {
	background: var(--surface-3);
}

input[type=text]:focus,
input[type=number]:focus,
select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px #6366f133;
	outline: none;
}

input[type=text]:disabled,
input[type=number]:disabled,
select:disabled {
	opacity: .4;
	cursor: not-allowed;
}

input[type=range] {
	accent-color: var(--accent);
	cursor: pointer;
}

input[type=checkbox] {
	accent-color: var(--accent);
	cursor: pointer;
}

label {
	margin-right: 4px;
	white-space: nowrap;
	font-size: .875rem;
	font-weight: 600;
	color: var(--text-muted);
}

code {
	padding: .2em .4em;
	font-size: 85%;
	background: var(--surface-3);
	color: #f0883e;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
}

/* ---------- Flex utilities ---------- */
.flex-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.flex-container:last-child {
	margin-bottom: 0;
}

.flex-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.flex-group.right {
	margin-left: auto;
}

/* ---------- Bluetooth filter ---------- */
.filter-group {
	white-space: nowrap;
}

.filter-group .filter-label {
	color: var(--text-muted);
}

.filter-group input[type=text] {
	width: 130px;
	padding: 4px 10px;
}

/* ---------- OTA 固件升级 ---------- */
.ota-info {
	margin: 6px 0;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--text);
}

.ota-status {
	font-weight: 600;
	white-space: nowrap;
}

#otaProgress {
	flex: 1;
	min-width: 120px;
	accent-color: var(--accent);
	height: 10px;
}

.ota-hint {
	margin-top: 8px;
	font-size: .8rem;
	color: var(--text-muted);
}

hr.divider {
	width: 100%;
	border: none;
	border-top: 1px solid var(--border);
	margin: 10px 0;
}

.flex-container.outline {
	margin-bottom: 10px;
	padding: 10px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.flex-container.outline:last-child {
	margin-bottom: 0;
}

/* ---------- App header (sticky) ---------- */
.app-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #f6f8faeb;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

body.dark-mode .app-header {
	background: #161b22eb;
}

.header-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--text);
}

.header-status {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	font-size: .8rem;
	color: var(--text-muted);
}

/* Gear button in header */
.settings-toggle {
	padding: 4px 7px;
	font-size: 1rem;
	line-height: 1;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--text-muted);
	transition: background .15s ease, border-color .15s ease;
	margin-left: 4px;
}

.settings-toggle:hover {
	background: var(--surface-2);
	border-color: var(--text-subtle);
}

/* ---------- Settings slide-in panel ---------- */
.settings-backdrop {
	position: fixed;
	inset: 0;
	z-index: 199;
	background: #00000040;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: fadeIn .15s ease;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	to { opacity: 1; }
}

.settings-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 200;
	height: 100dvh;
	width: 280px;
	background: var(--surface);
	border-left: 1px solid var(--border);
	box-shadow: -4px 0 24px #0000001f;
	display: flex;
	flex-direction: column;
	transform: translate(100%);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.settings-panel.open {
	transform: translate(0);
}

.settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--text-muted);
	background: var(--surface-2);
	flex-shrink: 0;
}

.settings-close {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: var(--radius-sm);
	background: none;
	border: 1px solid transparent;
	color: var(--text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease;
}

.settings-close:hover {
	background: var(--surface-3);
	color: var(--text);
}

.settings-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 0;
}

.settings-section {
	margin-bottom: 4px;
}

.settings-section-title {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--text-subtle);
	padding: 6px 16px 4px;
}

.settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px;
	font-size: .875rem;
	cursor: default;
}

.settings-row:hover {
	background: var(--surface-2);
}

.settings-row-actions {
	justify-content: flex-end;
}

.settings-label {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--text-muted);
	font-size: .875rem;
	font-weight: 600;
	flex: 1;
	-webkit-user-select: none;
	user-select: none;
}

.settings-row select {
	width: 175px;
}

.settings-input {
	width: 80px;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text);
	font-size: .875rem;
	text-align: right;
	outline: none;
	transition: border-color .15s ease;
}

.settings-input:focus {
	border-color: var(--accent);
}

.settings-input-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.settings-row-stack {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 10px 16px 12px;
}

.settings-row-stack .settings-input-group {
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ---------- 模板生成编辑器（课表/待办） ---------- */
.template-generator {
	margin: 14px 0 0;
	padding: 12px 14px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
}

.template-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.template-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
}

.template-hint {
	font-size: .75rem;
	color: var(--text-subtle);
}

.template-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 6px 0;
}

.template-label {
	display: inline-block;
	min-width: 48px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--text);
}

.template-input-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .75rem;
	color: var(--text-muted);
}

.template-input {
	width: 52px;
	padding: 3px 6px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text);
	font-size: .8rem;
	text-align: center;
	outline: none;
	transition: border-color .15s ease;
}

.template-input:focus {
	border-color: var(--accent);
}

.template-row-actions {
	justify-content: flex-end;
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px dashed var(--border);
}

.editor-list {
	padding: 6px 0 2px;
	max-height: 320px;
	overflow-y: auto;
	border-top: 1px dashed var(--border);
	margin-top: 4px;
}

.editor-list:empty {
	display: none;
}

.editor-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.editor-row .editor-cell-input {
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text);
	font-size: .8rem;
	outline: none;
	transition: border-color .15s ease;
}

.editor-row .editor-cell-input:focus {
	border-color: var(--accent);
	background: var(--surface);
}

.editor-row label.editor-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	cursor: pointer;
	color: var(--text-muted);
	user-select: none;
}

.editor-row label.editor-done input {
	margin: 0;
	cursor: pointer;
}

.editor-grid {
	display: grid;
	gap: 2px;
	margin-top: 8px;
	padding: 4px;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

.editor-grid .editor-cell-input {
	padding: 3px 5px;
	border: 1px solid var(--border);
	border-radius: 3px;
	background: var(--surface);
	color: var(--text);
	font-size: .7rem;
	text-align: center;
	outline: none;
	transition: border-color .15s ease, background .15s ease;
	min-width: 0;
}

.editor-grid .editor-cell-input:focus {
	border-color: var(--accent);
	background: var(--bg);
}

.editor-grid .editor-cell-header {
	background: var(--accent-muted);
	font-weight: 700;
	color: var(--text);
}

.editor-grid .editor-cell-corner {
	background: var(--surface-3);
}


/* Mobile: settings panel as bottom sheet */
@media (max-width: 540px) {
	.settings-panel {
		inset: auto 0 0;
		width: 100%;
		height: auto;
		max-height: 80dvh;
		border-left: none;
		border-top: 1px solid var(--border);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: 0 -4px 24px #00000026;
		transform: translateY(100%);
	}

	.settings-panel.open {
		transform: translateY(0);
	}

	.settings-header {
		position: relative;
		padding-top: 22px;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}

	.settings-header::before {
		content: "";
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--border);
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translate(-50%);
	}

	.settings-row {
		padding: 12px 20px;
	}

	.settings-section-title {
		padding: 8px 20px 4px;
	}
}

/* ---------- Log container ---------- */
.log-container {
	width: 100%;
	height: 140px;
	margin: 0;
	padding: 8px 12px;
	background: var(--surface-2);
	border-top: 1px solid var(--border);
	overflow-y: auto;
	overflow-x: hidden;
	font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .875rem;
	box-sizing: border-box;
	word-break: break-word;
	scrollbar-width: thin;
	scrollbar-color: var(--surface-3) transparent;
}

.log-container .log-line {
	padding: 0;
}

.log-container .time,
.log-container .action {
	display: inline-block;
	white-space: nowrap;
}

.log-container .time {
	color: var(--text-subtle);
	margin-right: .5em;
}

.log-container .action {
	color: #03a9f4;
	margin-right: .5em;
}

.log-container .log-text {
	color: var(--text-muted);
}

.log-container .dup-count {
	margin-left: .35em;
	color: #999;
	opacity: .9;
}

body.dark-mode .log-container .time {
	color: #8bc34a;
}

body.dark-mode .log-container .dup-count {
	color: #9aa0a6;
}

/* ---------- Status bar (visibility controlled by JS) ---------- */
.status-bar {
	display: none;
	font-size: .8rem;
	color: var(--text-muted);
	margin-bottom: 8px;
	padding: 6px 10px;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}

/* ---------- Canvas & tools ---------- */
.canvas-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.canvas-container canvas {
	border: 1px solid var(--border);
	max-width: 100%;
	height: auto;
	display: block;
	margin: 5px auto;
}

.canvas-container.crop-mode canvas {
	border: 2px dashed var(--accent);
	cursor: grab;
}

.canvas-container .flex-container,
.canvas-container .flex-group {
	align-items: center;
	justify-content: center;
}

.canvas-title {
	display: none;
	text-align: center;
	margin-bottom: 5px;
	color: var(--accent);
}

.canvas-tools {
	justify-content: center;
}

canvas.text-placement-mode {
	border: 2px dashed var(--accent) !important;
	cursor: text !important;
}

.brush-tools,
.text-tools,
.crop-tools {
	display: none;
}

.canvas-container.brush-mode .brush-tools,
.canvas-container.text-mode .brush-tools,
.canvas-container.eraser-mode .brush-tools,
.canvas-container.text-mode .text-tools,
.canvas-container.crop-mode .crop-tools {
	display: flex;
}

.canvas-container.crop-mode .tool-buttons,
.canvas-container.crop-mode .brush-tools,
.canvas-container.crop-mode .text-tools {
	display: none;
}

.tool-button {
	width: 36px;
	height: 36px;
	font-size: 1.1rem;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
	background-color: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0;
	cursor: pointer;
	transition: all .15s ease;
	color: var(--text);
}

.tool-button:hover {
	background-color: var(--surface-3);
	border-color: var(--text-subtle);
}

.tool-button.active {
	background-color: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.tool-button.hide {
	display: none;
}

body.dark-mode .tool-button:hover {
	background-color: #3a3a3a;
	border-color: #444;
}

body.dark-mode .tool-button.active {
	background-color: var(--accent);
	color: #fff;
	border-color: var(--accent-hover);
}


/* ---------- Debug toggle (.debug hidden until show-debug or dark-mode) ---------- */
.debug {
	display: none;
}

body.show-debug .debug {
	display: flex;
}

body.dark-mode .debug {
	display: flex !important;
}

/* ---------- 设置面板：屏幕驱动/设备配置仅在调试模式显示 ---------- */
.settings-section.settings-debug {
	display: none;
}

body.show-debug .settings-section.settings-debug,
body.dark-mode .settings-section.settings-debug {
	display: block;
}

/* ---------- Footer ---------- */
.footer {
	display: flex;
	gap: 8px;
	flex-direction: column;
	font-size: .78rem;
	color: var(--text-subtle);
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 1rem 20px 1.5rem;
	border-top: 1px solid var(--border);
}

.footer .links {
	display: inline-flex;
	align-items: center;
}

.footer .links a {
	color: var(--text-muted);
	text-decoration: none;
	position: relative;
	padding: 0 8px;
}

.footer .links a:first-child {
	padding-left: 0;
}

.footer .links a:not(:last-child):after {
	content: "•";
	position: absolute;
	right: -4px;
	color: #999;
}

.footer a:hover {
	color: var(--accent);
	text-decoration: underline;
}

body.dark-mode .footer,
body.dark-mode .footer a {
	color: #999;
}

body.dark-mode .footer a:hover {
	color: #64b5f6;
}

body.dark-mode .footer .links a:not(:last-child):after {
	color: #666;
}

/* ---------- Global media queries ---------- */
@media (max-width: 768px) {
	.main {
		padding: 12px 14px 2.5rem;
	}

	button {
		width: auto;
	}

	input[type=text],
	input[type=number],
	select {
		max-width: 100%;
	}

	.flex-container {
		flex-direction: column;
	}

	.flex-container.options .flex-group label {
		min-width: 80px;
	}

	.flex-group.right {
		margin-left: 0;
	}

	.canvas-tools.flex-container {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.canvas-tools .flex-group {
		justify-content: center;
		width: 100%;
	}

	.log-container {
		font-size: .75rem;
	}

	.footer {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}