:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #1c1c1e;
  --text-secondary: #6e6e73;
  --accent: #0a84ff;
  --success: #30d158;
  --danger: #ff453a;
  --need: #ff9f0a;
  --want: #0a84ff;
  --border: #e5e5ea;
  --input-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --card: #2c2c2e;
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --border: #3a3a3c;
    --input-bg: #3a3a3c;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.hidden {
  display: none !important;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 40px;
}

header {
  padding: 8px 0 16px;
}

header h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

section {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: 1.05rem;
  font-weight: 600;
}

.progress {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.empty {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
  padding: 12px 0;
}

/* ---- 表單 ---- */
.row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
}

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

button {
  font-size: 1rem;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.link-btn {
  background: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 8px;
}

/* 需要 / 想要 選擇器 */
.type-picker {
  flex: 1;
  display: flex;
  gap: 6px;
}

.type-picker label {
  flex: 1;
}

.type-picker input {
  display: none;
}

.type-picker span {
  display: block;
  text-align: center;
  padding: 9px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.type-picker input[value="need"]:checked + span {
  background: var(--need);
  border-color: var(--need);
  color: #fff;
}

.type-picker input[value="want"]:checked + span {
  background: var(--want);
  border-color: var(--want);
  color: #fff;
}

/* 到期日欄位(選填) */
.due-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
}

.due-field > span {
  font-size: 0.9rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.due-field input[type="date"] {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- 任務清單(共用) ---- */
.task-list {
  list-style: none;
}

.task-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}

.task-list li:last-child {
  border-bottom: none;
}

.task-list input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--success);
  flex-shrink: 0;
}

.task-list .title {
  flex: 1;
  word-break: break-word;
}

.task-list li.done .title {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.task-list .when {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 需要 / 想要 以標題字色區分 */
.task-list .title.need {
  color: var(--need);
}

.task-list .title.want {
  color: var(--want);
}

/* 逾期 / 今天到期 */
.task-list .when.overdue {
  color: var(--danger);
  font-weight: 600;
}

/* 列内按鈕 */
.pick-btn {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ghost-btn {
  background: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 4px 8px;
  flex-shrink: 0;
}

.delete-btn {
  background: none;
  color: var(--danger);
  font-size: 1.05rem;
  padding: 4px 8px;
  flex-shrink: 0;
}

/* ---- 點子孵化區 ---- */
.idea-review {
  border: 1px solid color-mix(in srgb, var(--need) 45%, transparent);
  background: color-mix(in srgb, var(--need) 8%, transparent);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.review-hint {
  font-size: 0.8rem;
  color: var(--need);
  font-weight: 600;
  padding: 2px 2px 4px;
}

/* 回顧列按鈕多,標題獨佔一行、按鈕排第二行 */
.idea-review li {
  flex-wrap: wrap;
  row-gap: 4px;
}

.idea-review li .title {
  flex: 1 0 100%;
}

/* ---- 貼上匯入 ---- */
#import-section {
  padding: 0;
}

#import-details summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

#import-details summary::-webkit-details-marker {
  display: none;
}

#import-details summary::after {
  content: "›";
  color: var(--text-secondary);
  transform: rotate(90deg);
  transition: transform 0.15s;
}

#import-details[open] summary::after {
  transform: rotate(-90deg);
}

#import-details .hint,
#import-details textarea,
#import-details .row,
#import-details .import-msg {
  margin-left: 16px;
  margin-right: 16px;
}

#import-details .hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

#import-details textarea {
  display: block;
  width: calc(100% - 32px);
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  resize: vertical;
  margin-bottom: 10px;
}

#import-details textarea:focus {
  border-color: var(--accent);
}

#import-details .row {
  margin-bottom: 16px;
}

.import-msg {
  font-size: 0.85rem;
  color: var(--success);
  padding-bottom: 16px;
}

.import-msg.error {
  color: var(--danger);
  margin-top: 0;
}

/* ---- 已完成(收合) ---- */
#done-section {
  padding: 0;
}

#done-details summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

#done-details summary::-webkit-details-marker {
  display: none;
}

#done-details summary::after {
  content: "›";
  color: var(--text-secondary);
  transform: rotate(90deg);
  transition: transform 0.15s;
}

#done-details[open] summary::after {
  transform: rotate(-90deg);
}

#done-details .task-list,
#done-details .empty {
  padding: 0 16px 16px;
}

/* ---- footer ---- */
footer {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

/* ---- Token 畫面 ---- */
.token-screen {
  max-width: 320px;
  margin: 0 auto;
  padding: 25vh 24px 0;
  text-align: center;
}

.token-screen h1 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.token-screen p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.token-screen form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error {
  color: var(--danger);
  margin-top: 12px;
}