/* ============================================================
   设计令牌 (Design Tokens) — 统一 · 简约 · 紧凑
   配色：中性灰底 + 沉稳蓝主色；轻边框 + 极淡阴影
   ============================================================ */
:root {
  /* 色彩 */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e8eaed;
  --border-strong: #d9dce1;
  --text: #1f2933;
  --muted: #707a89;
  --accent: #2563eb;          /* 主色：沉稳蓝 */
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --accent-soft-2: rgba(37, 99, 235, 0.16);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --warning: #f59e0b;
  --success: #10b981;

  /* 圆角 */
  --r-pill: 999px;
  --r: 12px;        /* 卡片 / 主控件 */
  --r-sm: 8px;      /* 徽标 / 小按钮 / 输入框 */

  /* 阴影（极淡，靠边框分区） */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.07);

  /* 间距（8pt 基准，紧凑版） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
}

/* ===================== 基础 ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
input::-ms-clear, input::-ms-reveal { display: none; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  padding-bottom: 72px;
}
.page { max-width: 820px; margin: 0 auto; padding: 16px 14px 0; }

/* 统一卡片：白底 + 1px 边框 + 极淡阴影 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

/* ===================== 页面顶部 ===================== */
.page-header { padding: 4px 0 14px; }
.page-header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.page-title-wrap h1 {
  font-size: 22px; font-weight: 800; color: var(--text);
  letter-spacing: 0.3px; line-height: 1.2;
}
.page-subtitle { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* 视图切换标签（待办 / 备忘） */
.tabbar { display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: #eef0f3; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; }
.tab {
  cursor: pointer; border: none; background: transparent; color: var(--muted);
  border-radius: var(--r-pill); padding: 9px 26px; font-size: 15.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab:hover { color: var(--text); }
.tab.active {
  color: #fff; background: var(--accent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22); font-weight: 700;
}
.tab.active:hover { color: #fff; }

/* ===================== 统计卡片（统一为单卡片 + 等分） ===================== */
.stats-card {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px; border-radius: var(--r); margin-top: 2px;
}
.stat-box {
  display: flex; flex-direction: row; align-items: baseline; gap: 10px;
  padding: var(--sp-3) var(--sp-4); border-radius: 10px;
  transition: background 0.2s;
}
.stat-box + .stat-box { border-left: 1px solid var(--border); }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-num { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-box.active { background: var(--accent-soft); }
.stat-box.active .stat-num { color: var(--accent); }
.stat-green { color: var(--success); }
.stat-red { color: var(--danger); }

.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ===================== 工具栏 ===================== */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin: 14px 0 10px; flex-wrap: wrap;
}
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 筛选 */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px;
  transition: all 0.2s; font-weight: 500;
}
.filter:hover { color: var(--text); border-color: var(--border-strong); }
.filter.active { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* 在线人数 */
.presence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
}

/* 主按钮（统一） */
.btn-add-header {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; cursor: pointer; padding: 0 16px; height: 36px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap;
  background: var(--accent);
  transition: background 0.2s, transform 0.15s;
}
.btn-add-header:hover { background: var(--accent-hover); }
.btn-add-header:active { transform: scale(0.97); }

/* ===================== 新增 / 编辑内联面板 ===================== */
.composer-inline {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.36s;
}
.composer-inline.open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 12px; }
.composer-wrap { overflow: hidden; min-height: 0; }
.composer { padding: var(--sp-4); }
.composer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.composer-title { font-size: 14px; font-weight: 700; color: var(--text); }
.composer-cancel {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  cursor: pointer; font-size: 12.5px; padding: 4px 10px; border-radius: var(--r-sm);
  transition: all 0.2s;
}
.composer-cancel:hover { color: var(--text); border-color: var(--accent); }
.todo-input {
  width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.todo-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-row { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; flex-wrap: wrap; }
.composer-actions { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
.field-group { display: flex; flex-direction: column; gap: 3px; }
.field-group.grow { flex: 1; min-width: 130px; }
.field-label { font-size: 11px; color: var(--muted); padding-left: 2px; }
.field {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; outline: none; min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.deadline-split { display: flex; gap: 8px; }
.deadline-split .field { min-width: 0; font-variant-numeric: tabular-nums; }

/* 日期/时间输入：通透、图标收敛 */
.deadline-split input[type="date"],
.deadline-split input[type="time"] {
  position: relative; height: 36px; padding: 0 32px 0 12px;
  border: 1px solid var(--border); background: #fff; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.deadline-split input[type="date"]:hover,
.deadline-split input[type="time"]:hover { border-color: var(--accent-soft-2); }
.deadline-split input[type="date"]:focus,
.deadline-split input[type="time"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.deadline-split input[type="date"] { flex: 1.8; min-width: 150px; }
.deadline-split input[type="time"] { flex: 1; min-width: 92px; }
.deadline-split input[type="date"]::-webkit-calendar-picker-indicator,
.deadline-split input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  opacity: 0.32; cursor: pointer; width: 16px; height: 16px; padding: 0; margin: 0; filter: grayscale(100%);
  transition: opacity 0.2s, filter 0.2s;
}
.deadline-split input[type="date"]:hover::-webkit-calendar-picker-indicator,
.deadline-split input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 0.7; filter: grayscale(0%); }
.deadline-split input[type="date"]:focus::-webkit-calendar-picker-indicator,
.deadline-split input[type="time"]:focus::-webkit-calendar-picker-indicator { opacity: 0.9; }

.deadline-group.grow { min-width: 250px; }
.recurrence-group { min-width: 130px; }
.recurrence-wrap { display: flex; align-items: center; gap: 6px; }
.recurrence-wrap .field { min-width: 0; }
.recurrence-interval { width: 64px; text-align: center; -moz-appearance: textfield; }
.recurrence-interval::-webkit-outer-spin-button,
.recurrence-interval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-add {
  border: none; cursor: pointer; padding: 0 18px; height: 36px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap;
  background: var(--accent); transition: background 0.2s, transform 0.15s;
}
.btn-add:hover { background: var(--accent-hover); }
.btn-add:active { transform: scale(0.97); }

/* ===================== 列表（紧凑） ===================== */
.todo-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.todo-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
  transition: border-color 0.2s, box-shadow 0.25s, opacity 0.2s, transform 0.18s;
}
.todo-item:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); transform: translateY(-1px); }
.todo-item.enter { animation: enter 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.todo-item.done { opacity: 0.62; background: #fafbfc; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); }

/* 方形复选框 */
.todo-check {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto; align-self: center;
  border: 2px solid #d1d5db; background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.todo-check:hover { border-color: var(--accent); transform: scale(1.06); }
.check-svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.22s ease; }
.todo-item.done .todo-check { background: var(--accent); border-color: var(--accent); }
.todo-item.done .todo-check .check-svg { stroke-dashoffset: 0; }

.todo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.todo-title-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.todo-title-row .badge { flex-shrink: 0; }
.todo-title-row .todo-text { flex: 1; min-width: 0; }
.todo-title-row .recur-tag-mobile { flex-shrink: 0; }
.todo-text { font-size: 20px; font-weight: 700; line-height: 1.45; word-break: break-word; color: var(--text); }
.todo-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
}
.todo-meta span { display: inline-flex; align-items: center; gap: 5px; }
.todo-meta .overdue { color: var(--danger); font-weight: 600; }
.todo-meta .meta-icon { font-size: 12px; line-height: 1; opacity: 0.85; }

/* 负责人选择（composer 内） */
.assignee-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.assignee-option {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; font-size: 13px; cursor: pointer;
  color: var(--muted); background: var(--surface); transition: all 0.18s; user-select: none;
}
.assignee-option:hover { border-color: var(--border-strong); color: var(--text); }
.assignee-option input { accent-color: var(--accent); margin: 0; width: 14px; height: 14px; }
.assignee-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* 列表项中的负责人（与日期同处于 meta 行） */
.todo-meta .assignee-line {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 10px;
}
.todo-meta .assignee-line .meta-icon { font-size: 11px; line-height: 1; opacity: 0.85; }

.todo-actions { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }
.todo-edit, .todo-delete {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: 9px;
  padding: 0; font-size: 14px; cursor: pointer; color: var(--muted); transition: all 0.18s;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.todo-edit .act-ico, .todo-delete .act-ico { line-height: 1; }
.todo-edit:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.todo-delete:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); transform: translateY(-1px); }

/* 重要程度 / 状态 标签（圆润胶囊） */
.badge {
  font-size: 14px; font-weight: 700; padding: 7px 16px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.2px;
}
.imp-urgent { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.imp-high { background: #fff4e5; color: #d97706; border: 1px solid #fed7aa; }
.imp-medium { background: #eff6ff; color: var(--accent); border: 1px solid #dbeafe; }
.imp-low { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.badge-overdue { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.recur-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid #c7d8fb;
}
.recur-tag-mobile { display: none; }
.recur-next { color: var(--muted); white-space: nowrap; }

.deadline-row { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-wrap: nowrap; }
.deadline-row .deadline-date, .deadline-row .deadline-time { white-space: nowrap; }

/* ===================== 团队备忘录 ===================== */
.memo-composer {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-4); margin-bottom: 12px; display: none; box-shadow: var(--shadow-sm);
}
.memo-composer.open { display: block; animation: memoFadeIn 0.22s ease; }
@keyframes memoFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.memo-editor-toolbar {
  display: flex; align-items: center; gap: 4px;
  margin: 8px 0 6px; padding: 4px 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  flex-wrap: wrap;
}
.memo-editor-toolbar button {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  border-radius: 6px; padding: 5px 12px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; text-align: center; white-space: nowrap;
}
.memo-editor-toolbar button:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.memo-char-count {
  margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; padding: 5px 4px;
}

.memo-title-input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 14px; font-weight: 700;
  background: var(--bg); color: var(--text); margin-bottom: 8px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.memo-title-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.memo-title-input::placeholder { font-weight: 500; color: #9aa3af; }
.memo-input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 14px; font-family: inherit; line-height: 1.6; resize: vertical;
  background: var(--bg); color: var(--text);
  min-height: 198px;
}
.memo-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.memo-composer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.memo-tags-input {
  flex: 1; min-width: 150px; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 13.5px; background: var(--bg); color: var(--text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.memo-tags-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.memo-pin-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); cursor: pointer; user-select: none; }
.memo-pin-toggle input { display: none; }
.memo-pin-toggle span {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px;
  background: var(--bg); transition: all 0.2s;
}
.memo-pin-toggle input:checked + span { background: #fef3c7; color: #b45309; border-color: #fde68a; font-weight: 600; }
.memo-composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.btn-memo-cancel {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: var(--r-sm); padding: 7px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.btn-memo-cancel:hover { background: rgba(0, 0, 0, 0.04); }
.btn-memo-submit {
  border: none; background: var(--accent); color: #fff; border-radius: var(--r-sm);
  padding: 7px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.btn-memo-submit:hover { background: var(--accent-hover); }
.btn-memo-submit:active { transform: scale(0.97); }

.memo-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }

/* 备忘卡片：白底轻边框，紧凑内边距 */
.memo-item {
  display: flex; align-items: flex-start; gap: 0; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm); transition: border-color 0.2s, box-shadow 0.2s;
}
.memo-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.memo-item.enter { animation: enter 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.memo-item.pinned { border-color: #fde68a; background: linear-gradient(180deg, #fffdf7 0%, #fff 100%); }

.memo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

/* 顶部：标题 + 操作按钮，永远对齐 */
.memo-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.memo-title-row {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding-top: 2px;
}
.memo-pin { font-size: 12px; line-height: 1; flex-shrink: 0; }
.memo-title-text {
  font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4;
  word-break: break-word; cursor: pointer; transition: color 0.2s;
}
.memo-title-text:hover { color: var(--accent); }

/* 操作按钮：圆角方框图标按钮，横排于标题右侧 */
.memo-actions {
  display: flex; flex-direction: row; gap: 6px; flex-shrink: 0;
}
.memo-edit, .memo-delete {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; border-radius: 8px;
  padding: 0; font-size: 13px; cursor: pointer; color: var(--muted);
  transition: all 0.18s;
}
.memo-edit .act-ico, .memo-delete .act-ico { line-height: 1; }
.memo-edit:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.memo-delete:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

/* 摘要：最多两行，颜色更淡不抢标题 */
.memo-summary {
  font-size: 13px; line-height: 1.55; color: #8b93a1; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 底部：标签在左，时间在右，固定在一行 */
.memo-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; margin-top: 2px;
}
.memo-tags {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0;
}
.memo-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  white-space: nowrap; line-height: 1.4;
}
.tag-blue { background: var(--accent-soft); color: var(--accent); border: 1px solid #c7d8fb; }
.tag-red { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.tag-purple { background: #f3e8ff; color: #9333ea; border: 1px solid #e9d5ff; }
.tag-green { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.tag-orange { background: #ffedd5; color: #d97706; border: 1px solid #fed7aa; }
.tag-gray { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.memo-time { font-size: 12px; color: var(--muted); white-space: nowrap; }

.memo-edit-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.memo-edit-title {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 14px; font-weight: 700; background: var(--bg); color: var(--text); outline: none;
}
.memo-edit-title:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.memo-edit-area {
  width: 100%; border: 1px solid var(--accent); border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 14px; font-family: inherit; line-height: 1.6; resize: vertical; background: var(--bg); color: var(--text); outline: none;
}
.memo-edit-area:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.memo-edit-tags {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 13.5px; background: var(--bg); color: var(--text); outline: none;
}
.memo-edit-tags:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.memo-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.memo-edit-cancel {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: var(--r-sm); padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.memo-edit-save { border: none; background: var(--accent); color: #fff; border-radius: var(--r-sm); padding: 6px 15px; font-size: 13px; font-weight: 700; cursor: pointer; }

.memo-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 48px 20px; display: none; flex-direction: column; align-items: center; }

/* ===================== 备忘详情弹层 ===================== */
.memo-detail {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-end; justify-content: center;
}
.memo-detail.open { display: flex; }
.memo-detail-overlay {
  position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45);
  opacity: 0; transition: opacity 0.25s ease;
}
.memo-detail.open .memo-detail-overlay { opacity: 1; }
.memo-detail-panel {
  position: relative; width: 100%; max-width: 620px; max-height: 88vh;
  background: var(--surface); border-radius: var(--r) var(--r) 0 0;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.18);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.memo-detail.open .memo-detail-panel { transform: translateY(0); }
.memo-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.memo-detail-back {
  border: none; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm); transition: background 0.15s;
}
.memo-detail-back:hover { background: var(--bg); color: var(--text); }
.memo-detail-actions { display: flex; align-items: center; gap: 8px; }
.memo-detail-actions button {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: var(--r-sm); padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.memo-detail-actions button:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.memo-detail-edit:hover { color: var(--accent); border-color: var(--accent); }
.memo-detail-delete:hover { color: var(--danger); border-color: var(--danger); }
.memo-detail-pin-toggle:hover { color: var(--warning); border-color: #fde68a; background: #fffbeb; }
.memo-detail-body {
  flex: 1; overflow-y: auto; padding: 18px 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.memo-detail-pin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: #b45309;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--r-pill);
  padding: 2px 10px; align-self: flex-start;
}
.memo-detail-title { font-size: 22px; font-weight: 800; line-height: 1.35; word-break: break-word; }
.memo-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.memo-detail-text {
  font-size: 15px; line-height: 1.75; color: var(--text); word-break: break-word;
  flex: 1; min-height: 120px;
}
.memo-detail-text p { margin-bottom: 10px; }
.memo-detail-text h2 { font-size: 18px; font-weight: 800; margin: 18px 0 8px; }
.memo-detail-text h3 { font-size: 16px; font-weight: 800; margin: 14px 0 6px; }
.memo-detail-text h4 { font-size: 15px; font-weight: 800; margin: 12px 0 6px; }
.memo-detail-text ul { padding-left: 20px; margin-bottom: 10px; }
.memo-detail-text li { margin-bottom: 4px; }
.memo-detail-text hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.memo-detail-text strong { font-weight: 800; }
.memo-detail-text em { font-style: italic; }
.memo-detail-text .memo-detail-empty { color: var(--muted); font-style: italic; }
.memo-detail-time { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 8px; }

@media (min-width: 641px) {
  .memo-detail { align-items: center; }
  .memo-detail-panel { border-radius: var(--r); max-height: 82vh; transform: translateY(20px) scale(0.96); opacity: 0; }
  .memo-detail.open .memo-detail-panel { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===================== 空状态 ===================== */
.empty { text-align: center; padding: 56px 20px; color: var(--muted); display: none; flex-direction: column; align-items: center; }
.empty-emoji { font-size: 46px; margin-bottom: 12px; }
.empty p, .memo-empty p { font-size: 14px; }

/* ===================== 截止时间可点 + 快速编辑弹层 ===================== */
.deadline-edit {
  cursor: pointer; border-bottom: 1px dashed currentColor; border-radius: 4px; padding: 0 2px;
  transition: background 0.15s, border-color 0.15s;
}
.deadline-edit:hover { background: var(--accent-soft); border-bottom-color: transparent; }
.deadline-pop {
  position: fixed; z-index: 1000; display: none; width: 244px; padding: 12px 14px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md);
}
.deadline-pop.open { display: block; animation: popIn 0.18s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.deadline-pop .dp-label { font-size: 11px; color: var(--muted); display: block; margin: 8px 0 4px; padding-left: 2px; }
.deadline-pop .dp-label:first-child { margin-top: 0; }
.deadline-pop input {
  width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; outline: none; min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.deadline-pop input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ===================== 周期提醒弹窗 ===================== */
.reminder-toast {
  position: fixed; top: 16px; right: 16px; z-index: 2000;
  display: flex; align-items: flex-start; gap: 10px; max-width: 320px; padding: 12px 12px 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r); box-shadow: var(--shadow-md); transform: translateX(120%); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.reminder-toast.show { transform: translateX(0); opacity: 1; }
.rt-icon { font-size: 18px; line-height: 1.2; }
.rt-body { flex: 1; min-width: 0; }
.rt-title { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.3px; }
.rt-text { font-size: 14px; color: var(--text); margin-top: 3px; word-break: break-word; line-height: 1.45; }
.rt-close { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 6px; }
.rt-close:hover { background: var(--bg); color: var(--text); }

/* ===================== 工具类 ===================== */
.hidden { display: none !important; }

/* ===================== 响应式 ===================== */
@media (hover: none) and (pointer: coarse) {
  .magnetic { transform: none !important; }
  .todo-edit, .todo-delete { opacity: 0.85; }
  .todo-item:active { transform: scale(0.99); }
}
@media (max-width: 640px) {
  .page { padding: 12px 12px 0; }
  .page-title-wrap h1 { font-size: 20px; }
  .page-subtitle { font-size: 12.5px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar-right { justify-content: space-between; }
  .filters { width: 100%; }
  .filter { flex: 1; text-align: center; padding: 7px 10px; }
  .composer-row { flex-direction: column; align-items: stretch; }
  .deadline-group.grow { min-width: 0; }
  .deadline-split input[type="date"] { min-width: 136px; }
  .btn-add { width: auto; }
  .todo-item { padding: 12px; gap: 10px; }
  .todo-title-row { flex-wrap: nowrap; align-items: center; gap: 7px; }
  .todo-title-row .todo-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .todo-meta { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
  .todo-meta span { line-height: 1.5; }
  .todo-meta .recur-tag, .todo-meta .recur-next { display: none; }
  .recur-tag-mobile { display: inline-flex; flex: 0 0 auto; }
  .todo-actions { margin-left: 6px; }
  .memo-item { padding: 10px 12px; }
  .memo-actions { flex-direction: row; gap: 6px; }
  .memo-composer-row { flex-direction: column; align-items: stretch; }
  .memo-tags-input { width: 100%; }
  .memo-editor-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 4px; gap: 3px; }
  .memo-editor-toolbar button { padding: 5px 9px; font-size: 12.5px; }
  .stats-card { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 6px; }
  .stat-box { padding: 12px; }
  .stat-box + .stat-box { border-left: none; border-top: 1px solid var(--border); }
  .stat-box:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat-num { font-size: 24px; }
}

@media (max-width: 640px) {
  .page-header-top { flex-direction: row; align-items: center; gap: 10px; }
  .page-title-wrap { flex: 1; min-width: 0; }
  .tabbar { align-self: center; flex-shrink: 0; }
  .tab { padding: 7px 16px; font-size: 14px; }
}

/* ===================== 强制窄屏（/m 入口） ===================== */
.force-mobile { background: #eef0f3; }
.force-mobile .page { max-width: 430px; margin: 0 auto; }
.force-mobile .magnetic { transform: none !important; }
.force-mobile .page-header-top { flex-direction: row; align-items: center; gap: 10px; }
.force-mobile .page-title-wrap { flex: 1; min-width: 0; }
.force-mobile .page-title-wrap h1 { font-size: 20px; }
.force-mobile .page-subtitle { font-size: 12px; }
.force-mobile .tabbar { align-self: center; flex-shrink: 0; }
.force-mobile .tab { padding: 7px 16px; font-size: 14px; }
.force-mobile .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.force-mobile .toolbar-right { justify-content: space-between; }
.force-mobile .filters { width: 100%; }
.force-mobile .filter { flex: 1; text-align: center; padding: 7px 10px; }
.force-mobile .composer-row { flex-direction: column; align-items: stretch; }
.force-mobile .deadline-group.grow { min-width: 0; }
.force-mobile .deadline-split input[type="date"] { min-width: 136px; }
.force-mobile .btn-add { width: auto; }
.force-mobile .todo-item { padding: 12px; gap: 10px; }
.force-mobile .todo-title-row { flex-wrap: nowrap; align-items: center; gap: 7px; }
.force-mobile .todo-title-row .todo-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.force-mobile .todo-meta { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.force-mobile .todo-meta span { line-height: 1.5; }
.force-mobile .todo-meta .recur-tag, .force-mobile .todo-meta .recur-next { display: none; }
.force-mobile .recur-tag-mobile { display: inline-flex; flex: 0 0 auto; }
.force-mobile .todo-actions { margin-left: 6px; }
.force-mobile .memo-item { padding: 10px 12px; }
.force-mobile .memo-actions { flex-direction: row; gap: 6px; }
.force-mobile .memo-composer-row { flex-direction: column; align-items: stretch; }
.force-mobile .memo-tags-input { width: 100%; }
.force-mobile .memo-editor-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 4px; gap: 3px; }
.force-mobile .memo-editor-toolbar button { padding: 5px 9px; font-size: 12.5px; }
.force-mobile .stats-card { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 4px; }
.force-mobile .stat-box { padding: 10px 4px; align-items: center; }
.force-mobile .stat-box + .stat-box { border-left: 1px solid var(--border); border-top: none; border-right: none; }
.force-mobile .stat-label { font-size: 11px; }
.force-mobile .stat-num { font-size: 22px; }

/* ===================== 负责人「所有人」选项 ===================== */
.assignee-all { border-style: dashed; border-color: var(--accent); }
.assignee-all span { font-weight: 600; color: var(--accent); }
.assignee-all:has(input:checked) { background: var(--accent-soft-2); border-color: var(--accent); }

/* ===================== 回收站按钮 ===================== */
.btn-trash {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: var(--r-pill); padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; flex-shrink: 0; transition: all 0.2s; white-space: nowrap;
}
.btn-trash:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

/* ===================== 回收站弹层 ===================== */
.trash-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; }
.trash-modal.open { display: flex; }
.trash-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; transition: opacity 0.25s ease; }
.trash-modal.open .trash-overlay { opacity: 1; }
.trash-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 82vh;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(0.96); opacity: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s;
}
.trash-modal.open .trash-panel { transform: none; opacity: 1; }
.trash-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.trash-title { font-size: 17px; font-weight: 800; }
.trash-close { border: none; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background 0.15s; }
.trash-close:hover { background: var(--bg); color: var(--text); }
.trash-body { flex: 1; overflow-y: auto; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.trash-section { display: flex; flex-direction: column; gap: 8px; }
.trash-subtitle { font-size: 13px; font-weight: 700; color: var(--muted); padding-bottom: 4px; border-bottom: 1px dashed var(--border); }
.trash-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.trash-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); }
.trash-item-main { flex: 1; min-width: 0; }
.trash-item-text { font-size: 14px; font-weight: 600; color: var(--text); display: block; word-break: break-word; line-height: 1.45; }
.trash-item-time { font-size: 12px; color: var(--muted); }
.trash-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.trash-restore { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--r-sm); padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.trash-restore:hover { background: var(--accent-hover); }
.trash-purge { border: 1px solid var(--border); background: var(--surface); color: var(--danger); border-radius: var(--r-sm); padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.trash-purge:hover { border-color: var(--danger); background: var(--danger-soft); }
.trash-empty { font-size: 13px; color: var(--muted); padding: 4px 2px; }

/* ===================== 移动端 / 强制窄屏：回收站与按钮 ===================== */
@media (max-width: 640px) {
  .btn-trash-label { display: none; }
  .btn-trash { padding: 7px 10px; }
  .trash-panel { max-width: 100%; border-radius: var(--r) var(--r) 0 0; max-height: 88vh; align-self: flex-end; transform: translateY(100%); }
  .trash-modal.open .trash-panel { transform: translateY(0); }
  .trash-item { flex-wrap: wrap; }
  .trash-item-actions { width: 100%; justify-content: flex-end; }
}
.force-mobile .btn-trash-label { display: none; }
.force-mobile .btn-trash { padding: 7px 10px; }
.force-mobile .trash-panel { max-width: 100%; }
.force-mobile .trash-item { flex-wrap: wrap; }
.force-mobile .trash-item-actions { width: 100%; justify-content: flex-end; }

/* ============================================================
   🎨 移动端首页重设计 v2 — 信息层级清晰化
   作用域：仅 .force-mobile（/todo/m 入口），桌面布局不受影响
   设计原则：8pt 间距体系 · 层级分明 · 触控友好(≥42px) · WCAG AA
   ============================================================ */
.force-mobile { background: #f2f4f7; }
.force-mobile .page { max-width: 430px; margin: 0 auto; padding: 10px 14px 0; }

/* ---------- 顶部：标题行 + 全宽分段切换（两段式） ---------- */
.force-mobile .page-header { padding: 6px 0 10px; }
.force-mobile .page-header-top { flex-wrap: wrap; gap: 10px 12px; }
.force-mobile .page-title-wrap h1 { font-size: 21px; letter-spacing: 0.2px; }
.force-mobile .page-subtitle { font-size: 12.5px; margin-top: 4px; }
.force-mobile .btn-trash { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 12px; font-size: 16px; }
.force-mobile .tabbar { order: 10; flex-basis: 100%; width: 100%; padding: 4px; border-radius: 14px; background: #e8ebf1; }
.force-mobile .tab { flex: 1; padding: 9px 0; font-size: 14.5px; border-radius: 10px; }

/* ---------- 统计：单行 4 列紧凑卡（外框圆角，内部细分隔线） ---------- */
.force-mobile .stats-card { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; margin-top: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.force-mobile .stat-box { padding: 10px 4px; gap: 4px; border: none; border-radius: 0; background: transparent; box-shadow: none; align-items: center; justify-content: center; }
.force-mobile .stat-box + .stat-box { border-left: 1px solid var(--border); }
.force-mobile .stat-label { font-size: 10.5px; }
.force-mobile .stat-num { font-size: 20px; }
.force-mobile .stat-box.active { background: var(--accent-soft); border-radius: 0; border: none; }
.force-mobile .stat-box.active + .stat-box { border-left-color: transparent; }

/* ---------- 工具栏：分段筛选控件 + 在线人数 ---------- */
/* 桌面版 m-band 默认：stats 一整行，toolbar + 新增按钮同一行（filters 左 + 按钮右） */
.m-band { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.m-band > .stats-card { flex: 1 1 100%; }
.m-band > .toolbar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.m-band > .toolbar > .filters { margin-right: auto; }
.m-band > .btn-add-header { margin-left: auto; flex-shrink: 0; }
.force-mobile .m-band { display: flex; gap: 8px; align-items: stretch; margin: 12px 0 14px; }
.force-mobile .m-band > .stats-card { flex: 1.6; min-width: 0; margin: 0; }
.force-mobile .m-band > .toolbar { flex: 1; min-width: 0; margin: 0; gap: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.force-mobile .toolbar { margin: 12px 0; gap: 10px; }
.force-mobile .filters { display: flex; gap: 2px; padding: 2px; background: #e8ebf1; border: 1px solid var(--border); border-radius: 12px; }
.force-mobile .filter { flex: 1; border: none; background: transparent; color: #5b6472; border-radius: 9px; padding: 7px 0; font-size: 11.5px; font-weight: 600; }
.force-mobile .filter.active { background: #fff; color: var(--accent); font-weight: 700; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }
.force-mobile .m-band > .stats-card > .stat-box { padding: 8px 4px; gap: 2px; cursor: pointer; transition: background 0.15s, transform 0.12s; justify-content: flex-start; }
.force-mobile .m-band > .stats-card > .stat-box:hover { background: var(--accent-soft-2); }
.force-mobile .m-band > .stats-card > .stat-box:active { transform: scale(0.96); }
.force-mobile .m-band > .stats-card > .stat-box .stat-label { font-size: 11px; }
.force-mobile .m-band > .stats-card > .stat-box .stat-num { font-size: 19px; }
.force-mobile .toolbar-right { justify-content: flex-end; }
.force-mobile .presence { display: none; }
.force-mobile .presence { font-size: 12.5px; padding: 5px 11px; }

/* ---------- 悬浮新增按钮 (FAB)：右下角圆形，清空工具栏 ---------- */
.force-mobile .btn-add-header {
  position: fixed; right: 18px; bottom: 24px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%; padding: 0;
  justify-content: center; font-size: 28px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.38);
}
.force-mobile .btn-add-header .fab-label { display: none; }
.force-mobile .btn-add-header:active { transform: scale(0.94); }
.force-mobile body { padding-bottom: 112px; }

/* ---------- 待办卡片：标题可折两行，触控区加大 ---------- */
.force-mobile .todo-item { padding: 14px; border-radius: 18px; gap: 8px; }
.force-mobile .todo-title-row { gap: 6px; align-items: flex-start; padding-left: 0; }
.force-mobile .todo-title-row .badge { font-size: 12px; padding: 4px 10px; }
.force-mobile .todo-title-row .todo-text {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  padding-top: 3px;
  font-size: 15px;
}
.force-mobile .todo-edit, .force-mobile .todo-delete { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.force-mobile .todo-meta {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 12px; gap: 10px;
}
.force-mobile .todo-meta span { line-height: 1.55; }

/* ---------- 新增/编辑面板：触控友好 ---------- */
.force-mobile .composer { padding: 16px; border-radius: 18px; }
.force-mobile .composer-title { font-size: 15px; }
.force-mobile .todo-input { font-size: 15px; padding: 12px 14px; border-radius: 10px; }
.force-mobile .field-label { font-size: 12px; padding-left: 3px; }
.force-mobile .field { font-size: 15px; padding: 10px 12px; border-radius: 10px; }
.force-mobile .deadline-split input[type="date"],
.force-mobile .deadline-split input[type="time"] { height: 42px; font-size: 14px; }
.force-mobile .assignee-option { padding: 7px 13px; font-size: 14px; }
.force-mobile .composer-actions .btn-add { width: 100%; height: 46px; border-radius: 12px; font-size: 15.5px; }
.force-mobile .recurrence-wrap { gap: 8px; }

/* ---------- 备忘卡片：置顶左竖条强化，正文清晰 ---------- */
.force-mobile .memo-item { padding: 13px 14px; border-radius: 16px; }
.force-mobile .memo-item.pinned { border-left: 3px solid #f59e0b; }
.force-mobile .memo-title-text { font-size: 16px; }
.force-mobile .memo-summary { font-size: 13.5px; color: #7c8593; }
.force-mobile .memo-tag { font-size: 11.5px; padding: 3px 9px; }
.force-mobile .memo-time { font-size: 12px; }
.force-mobile .memo-composer { padding: 16px; border-radius: 18px; }
.force-mobile .memo-title-input,
.force-mobile .memo-input,
.force-mobile .memo-tags-input { font-size: 15px; border-radius: 10px; }
.force-mobile .btn-memo-submit { padding: 10px 18px; font-size: 14.5px; border-radius: 10px; }
.force-mobile .btn-memo-cancel { padding: 10px 16px; font-size: 14.5px; border-radius: 10px; }

/* ---------- 空状态 / 弹层 ---------- */
.force-mobile .empty, .force-mobile .memo-empty { padding: 44px 20px; }
.force-mobile .empty-emoji { font-size: 54px; }
.force-mobile .memo-detail-panel { border-radius: 18px 18px 0 0; }
.force-mobile .trash-panel { border-radius: 18px 18px 0 0; }