/* 淺色為主，深色靠按鈕切換（不跟系統走 —— 使用者明確要求）。
   風格原則見 PLAN.md「UI 風格」：克制、資訊密度高、像工具不像 landing page。 */

:root {
	--bg: #fafafa;
	--surface: #ffffff;
	--text: #1a1a1a;
	--muted: #6b7280;
	--border: #e4e4e7;
	--border-strong: #d4d4d8;
	--accent: #2563eb;
	--accent-text: #ffffff;
	--ok: #15803d;
	--bad: #b42318;
	--track: #ececef;
	--radius: 5px;
}

:root[data-theme="dark"] {
	--bg: #17181a;
	--surface: #1f2023;
	--text: #e8e8ea;
	--muted: #9a9aa2;
	--border: #303136;
	--border-strong: #3d3e44;
	--accent: #5b8dff;
	--accent-text: #0d1117;
	--ok: #4ade80;
	--bad: #f87171;
	--track: #2a2b30;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 1rem 4rem;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang TC", sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

.wrap { max-width: 52rem; margin: 0 auto; }

/* 數字右對齊 + 等寬：進度／速度／大小每秒在跳，字寬不等整列會左右抖動。 */
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── 頁首 ────────────────────────────────────────────────── */

header {
	display: flex; align-items: center; gap: .75rem;
	padding: 1rem 0 .85rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: 1.25rem;
}
header h1 { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }

.quota { min-width: 9rem; }
.quota-bar {
	height: 5px; background: var(--track); border-radius: 3px; overflow: hidden;
	margin-top: .3rem;
}
.quota-bar > i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.quota-bar.full > i { background: var(--bad); }
.quota-text { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── 元件 ────────────────────────────────────────────────── */

button, .btn {
	font: inherit; font-size: .875rem;
	padding: .42rem .8rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface); color: var(--text);
	cursor: pointer;
	/* 手機觸控目標 */
	min-height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none;
}
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; }
button.danger { color: var(--bad); }
button.icon { padding: .42rem .6rem; }

input[type=text], input[type=password], select {
	font: inherit;
	padding: .5rem .65rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface); color: var(--text);
	width: 100%;
	min-height: 40px;
}
input:focus-visible, select:focus-visible, button:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ── 貼上網址 ────────────────────────────────────────────── */

.submit-row { display: flex; gap: .5rem; margin-bottom: .4rem; }
.submit-row input { flex: 1; }
.hint { font-size: .8rem; color: var(--muted); margin: 0 0 1.5rem; }
.hint.error { color: var(--bad); }

/* ── 任務 ────────────────────────────────────────────────── */

.tasks { display: flex; flex-direction: column; gap: .5rem; }

.task {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .7rem .8rem;
}
.task-head { display: flex; gap: .7rem; align-items: flex-start; }
.thumb {
	width: 72px; height: 41px; object-fit: cover; flex: none;
	border-radius: 3px; background: var(--track);
}
.task-main { flex: 1; min-width: 0; }
.task-title {
	font-weight: 500; margin: 0 0 .1rem;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-meta { font-size: .8rem; color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; }
.task-actions { display: flex; gap: .35rem; flex: none; }

.state { font-size: .8rem; }
.state.completed { color: var(--ok); }
.state.failed { color: var(--bad); }

.progress { height: 4px; background: var(--track); border-radius: 2px; margin-top: .55rem; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.progress.indeterminate > i { width: 35%; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ── 選格式 ──────────────────────────────────────────────── */

.choices { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
.choice-row { display: flex; gap: .5rem; align-items: center; }
.choice-row select { flex: 1; }
details.more { margin-top: .35rem; }
details.more > summary {
	font-size: .8rem; color: var(--muted); cursor: pointer; list-style: none;
	padding: .3rem 0;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸ "; }
details.more[open] > summary::before { content: "▾ "; }

.items { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.item {
	display: flex; gap: .5rem; align-items: center;
	font-size: .875rem; padding: .3rem 0;
	border-top: 1px solid var(--border);
}
.item label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item input[type=checkbox] { width: 18px; height: 18px; flex: none; }

.empty { color: var(--muted); text-align: center; padding: 3rem 1rem; font-size: .9rem; }

@media (max-width: 30rem) {
	.task-head { flex-wrap: wrap; }
	.task-actions { width: 100%; justify-content: flex-end; }
	.thumb { width: 56px; height: 32px; }
}