/* ============================================================
   WhaleDo 鲸鱼待办 — 单一样式表
   分区：TOKENS / BASE / LAYOUT / COMPONENTS / RESPONSIVE
   ============================================================ */

/* ==================== TOKENS ==================== */
:root {
  /* ================= 品牌（海洋蓝） ================= */
  --c-primary: #0EA5E9;
  --c-primary-hover: #0284C7;
  --c-primary-active: #0369A1;
  --c-primary-soft: #E0F2FE;
  --c-on-primary: #FFFFFF;

  /* ================= 原始色阶（只供语义层引用，组件不要直接用） ================= */
  --c-gray-50: #F9FAFB;
  --c-gray-100: #F3F4F6;
  --c-gray-200: #E5E7EB;
  --c-gray-300: #D1D5DB;
  --c-gray-500: #6B7280;
  --c-gray-700: #374151;
  --c-gray-900: #111827;
  --c-gray-950: #1C1C1E;

  /* ================= 底色（语义层） ================= */
  --c-bg: #F4F5F7;              /* 页面底：比内容面暗一档，让白卡浮起来 */
  --c-surface: #FFFFFF;         /* 内容面：卡片 / 列表 / 侧栏 */
  --c-surface-raised: #FFFFFF;  /* 浮起：弹窗、下拉 */
  --c-surface-sunken: #E9ECF1;  /* 内陷：搜索框底、分段控件轨道 */
  --c-hover: #ECEEF1;
  --c-active: #E2E5E9;
  --c-fill: #E9ECF1;            /* 图标按钮填充底 */
  --c-fill-hover: #DEE2E7;

  /* ================= 文字 =================
     对比度（前景 / --c-surface 白底）：
       --c-text            #1C1C1E → 16.9:1  AAA
       --c-text-secondary  #6B7280 →  4.8:1  AA（正文线 4.5:1）
       --c-text-tertiary   #8E8E93 →  3.1:1  仅占位符 / 禁用态，不承载正文 */
  --c-text: #1C1C1E;
  --c-text-secondary: #6B7280;
  --c-text-tertiary: #8E8E93;
  --c-text-inverse: #FFFFFF;

  /* ================= 线条 ================= */
  --c-border: #E2E4E8;
  --c-divider: #EDEFF2;
  --hairline: rgba(60, 60, 67, 0.18);   /* 发丝线：随深浅自动反色 */

  /* ================= 遮罩 ================= */
  --c-overlay: rgba(17, 24, 39, 0.45);
  --c-overlay-blur: blur(8px);
  --c-toast-bg: rgba(17, 24, 39, 0.92);
  --c-topbar-bg: rgba(244, 245, 247, 0.88);   /* 顶栏毛玻璃底（--c-bg 的半透明版） */

  /* ================= 语义色 ================= */
  --c-success: #10B981;
  --c-overdue: #DC2626;
  --c-overdue-bg: #FEF2F2;
  --c-overdue-border: #FECACA;
  --c-overdue-hover: #B91C1C;
  --c-check-border: #C7CBD1;                  /* 复选框未勾选的描边 */

  /* 重要程度（四象限）—— 刻意与逾期红、品牌蓝拉开：
     「紧急不重要」用的是偏紫的深蓝，不会和主色蓝混成一个意思 */
  --c-prio-critical: #DC2626;
  --c-prio-critical-bg: #FEE2E2;
  --c-prio-important: #B45309;
  --c-prio-important-bg: #FEF3C7;
  --c-prio-urgent: #2563EB;
  --c-prio-urgent-bg: #DBEAFE;

  /* ================= 圆角 ================= */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ================= 阴影（--sh-rgb 便于深色下整体翻转） ================= */
  --sh-rgb: 17, 24, 39;
  --shadow-sm: 0 1px 2px rgba(var(--sh-rgb), 0.06);
  --shadow-md: 0 4px 16px rgba(var(--sh-rgb), 0.10);
  --shadow-lg: 0 12px 32px rgba(var(--sh-rgb), 0.16);

  /* ================= 间距（4px 基准） ================= */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ================= 字阶 / 字重 ================= */
  --fs-display: 34px;
  --fs-title: 24px;
  --fs-headline: 17px;
  --fs-body: 15px;
  --fs-callout: 14px;
  --fs-subhead: 13px;
  --fs-caption: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ================= 动效 ================= */
  --d-fast: 0.14s;
  --d-base: 0.20s;
  --d-slow: 0.32s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ================= 层级 ================= */
  --z-sticky: 5;
  --z-topbar: 15;
  --z-bottombar: 30;
  --z-fab: 31;
  --z-modal: 100;
  --z-reminder: 190;
  --z-toast: 200;

  /* ================= 尺寸 ================= */
  --nav-w: 240px;
  --nav-w-tablet: 200px;
  --bottombar-h: 56px;
  --fab: 56px;
  --topbar-h: 60px;
  --content-max: 760px;

  /* ================= 安全区（刘海屏 / Home 条） ================= */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  color-scheme: light;
}

/* ==================== 深色主题 ====================
   只覆盖语义层，组件一律不写死颜色 —— 这样加深色不用改任何组件。
   settings.theme = 'system' 时不带 data-theme，由系统偏好决定；
   = 'light' 时下面这条媒体查询被 :not() 排除，钉死浅色；
   = 'dark' 时由上面那条属性选择器钉死深色。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #1C1C1E;
  --c-surface: #2C2C2E;
  --c-surface-raised: #2C2C2E;
  --c-surface-sunken: #161618;
  --c-hover: #3A3A3C;
  --c-active: #48484A;
  --c-fill: #3A3A3C;
  --c-fill-hover: #48484A;

  --c-text: #FFFFFF;
  --c-text-secondary: #AEAEB2;    /* 对 #2C2C2E → 7.4:1  AAA */
  --c-text-tertiary: #7C7C80;
  --c-text-inverse: #1C1C1E;

  --c-border: #38383A;
  --c-divider: #2E2E30;
  --hairline: rgba(120, 120, 128, 0.36);

  --c-overlay: rgba(0, 0, 0, 0.5);
  --c-toast-bg: rgba(58, 58, 60, 0.96);
  --c-topbar-bg: rgba(28, 28, 30, 0.88);
  --sh-rgb: 0, 0, 0;

  --c-overdue-hover: #FCA5A5;
  --c-check-border: #6E6E73;

  --c-primary-soft: #10394D;
  --c-success: #34D399;
  --c-overdue: #F87171;
  --c-overdue-bg: #3A2326;
  --c-overdue-border: #5B2A2E;

  --c-prio-critical: #F87171;
  --c-prio-critical-bg: #3A2326;
  --c-prio-important: #FBBF24;
  --c-prio-important-bg: #3A3120;
  --c-prio-urgent: #60A5FA;
  --c-prio-urgent-bg: #1E2A3A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #1C1C1E;
    --c-surface: #2C2C2E;
    --c-surface-raised: #2C2C2E;
    --c-surface-sunken: #161618;
    --c-hover: #3A3A3C;
    --c-active: #48484A;
    --c-fill: #3A3A3C;
    --c-fill-hover: #48484A;

    --c-text: #FFFFFF;
    --c-text-secondary: #AEAEB2;
    --c-text-tertiary: #7C7C80;
    --c-text-inverse: #1C1C1E;

    --c-border: #38383A;
    --c-divider: #2E2E30;
    --hairline: rgba(120, 120, 128, 0.36);

    --c-overlay: rgba(0, 0, 0, 0.5);
    --c-toast-bg: rgba(58, 58, 60, 0.96);
    --c-topbar-bg: rgba(28, 28, 30, 0.88);
    --sh-rgb: 0, 0, 0;

    --c-overdue-hover: #FCA5A5;
    --c-check-border: #6E6E73;

    --c-primary-soft: #10394D;
    --c-success: #34D399;
    --c-overdue: #F87171;
    --c-overdue-bg: #3A2326;
    --c-overdue-border: #5B2A2E;

    --c-prio-critical: #F87171;
    --c-prio-critical-bg: #3A2326;
    --c-prio-important: #FBBF24;
    --c-prio-important-bg: #3A3120;
    --c-prio-urgent: #60A5FA;
    --c-prio-urgent-bg: #1E2A3A;
  }
}

/* ==================== BASE ==================== */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: var(--c-text);
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ==================== LAYOUT ==================== */
#app { min-height: 100%; }

/* ---- 侧栏 ---- */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--topbar-h);
  padding: 0 var(--sp-4);
  flex: 0 0 auto;
}
/* 品牌标：鲸鱼用主色，文字用正文色，一眼能找到 */
.brand-logo { font-size: 22px; line-height: 1; color: var(--c-primary); }
.brand-name {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.nav-main { padding: var(--sp-2) var(--sp-2) 0; flex: 0 0 auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 14.5px;
  text-align: left;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.nav-item:hover { background: var(--c-hover); }
.nav-item.active { background: var(--c-primary-soft); color: var(--c-primary-active); font-weight: 600; }
.nav-item.as-button { width: 100%; }

/* 图标槽：固定 18px 宽，保证文字左边缘对齐（emoji 时代是挤出来的） */
.nav-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 17px;
  line-height: 1;
}

.sidebar-divider {
  height: 1px;
  background: var(--c-divider);
  margin: var(--sp-3) var(--sp-4);
  flex: 0 0 auto;
}

.sidebar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-3) 0 var(--sp-4);
  flex: 0 0 auto;
}
.sidebar-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text-secondary);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--c-text-secondary);
  font-size: 18px;
  line-height: 1;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.icon-btn:hover { background: var(--c-hover); color: var(--c-primary); }

.sidebar-projects {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-1) var(--sp-2) var(--sp-3);
}
.sidebar-projects .nav-item { min-height: 34px; font-size: 14px; }
.proj-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  opacity: 0.55;
  flex: 0 0 auto;
}
.nav-item.active .proj-dot { opacity: 1; }
.proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-count { margin-left: auto; font-size: 12px; color: var(--c-text-secondary); flex: 0 0 auto; }

.sidebar-footer {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-divider);
}
.sidebar-empty {
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  color: var(--c-text-secondary);
}

/* ---- 主区 ---- */
#main {
  margin-left: var(--nav-w);
  min-height: 100vh;        /* 老浏览器回退 */
  min-height: 100dvh;       /* 移动端地址栏收起时不再溢出 */
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  background: var(--c-topbar-bg);
  backdrop-filter: var(--c-overlay-blur);
  border-bottom: 1px solid var(--c-border);
}

/* 移动端专属：桌面侧栏已经有品牌区了，这里默认不显示 */
.topbar-logo { display: none; }

.search-box {
  position: relative;
  flex: 0 1 340px;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 10px;
  font-size: 16px;
  color: var(--c-text-tertiary);
  pointer-events: none;
}
#topSearch {
  width: 100%;
  height: 36px;
  padding: 0 var(--sp-3) 0 30px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
#topSearch::placeholder { color: var(--c-text-secondary); }
#topSearch:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
#topSearch::-webkit-search-cancel-button { cursor: pointer; }

.topbar-new { margin-left: auto; flex: 0 0 auto; }

.view {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
}
.view:focus { outline: none; }

/* ---- 底部导航 / FAB（默认隐藏，手机端显示） ---- */
#bottombar { display: none; }
#fab { display: none; }

/* ==================== COMPONENTS ==================== */

/* ---- 图标 ----
   内联 SVG 统一 1em 见方，颜色继承 currentColor，
   所以字号改它就改，父级文字换色它就换色（含深色模式）。 */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;              /* 别让行高把图标撑歪 */
}
.ico > svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* ---- 按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease), transform 0.1s var(--ease);
}
.btn:active { transform: scale(0.985); }

.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-primary:active { background: var(--c-primary-active); }

.btn-ghost {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-hover); }

.btn-quiet { color: var(--c-text-secondary); }
.btn-quiet:hover { background: var(--c-hover); color: var(--c-text); }

.btn-danger { background: var(--c-overdue); color: var(--c-on-primary); }
.btn-danger:hover { background: var(--c-overdue-hover); }
/* 只是把文字染成危险色，不抢主按钮的视觉重量（设置里的「清空所有数据」） */
.btn-text-danger { color: var(--c-overdue); }
.btn-text-danger:hover { background: var(--c-overdue-bg); }

.btn-link {
  min-height: auto;
  padding: 0;
  color: var(--c-text-secondary);
  font-size: 14px;
}
.btn-link:hover { color: var(--c-primary); }

.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: 13.5px; }
.btn-block { width: 100%; }

/* ---- 页头 ---- */
.page-head { margin-bottom: var(--sp-5); }
.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.page-head-actions {
  display: flex;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
.page-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.page-sub {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--c-text-secondary);
}
.page-desc { margin-top: var(--sp-2); font-size: 14px; color: var(--c-text-secondary); }
.page-bar { margin-top: var(--sp-4); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--sp-3);
  font-size: 13.5px;
  color: var(--c-text-secondary);
}
.back-link:hover { color: var(--c-primary); }

/* ---- 分组标题 ---- */
.group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text-secondary);
  text-transform: uppercase;
}
.group-head:first-child { margin-top: 0; }
.group-count {
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--c-hover);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
}
/* 分组标题右侧的「全部 →」小链接（今日页的已完成组跳去 #/done） */
.group-more {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-primary);
  text-transform: none;
}
.group-more:hover { color: var(--c-primary-hover); }

/* ---- 列表容器 ---- */
.list {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.list + .list { margin-top: var(--sp-2); }

/* ---- 任务行 ---- */
.task-row {
  position: relative;              /* 拖拽把手浮在左内边距里，不挤动行内容 */
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);   /* 发丝线，深浅主题自动反色 */
  cursor: pointer;
  transition: background 0.14s var(--ease), opacity 0.22s var(--ease),
              transform 0.22s var(--ease);
}
.list .task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--c-hover); }
.task-row .task-actions { opacity: 0; transition: opacity 0.14s var(--ease); }
.task-row:hover .task-actions,
.task-row:focus-within .task-actions { opacity: 1; }

.task-row.completing {
  opacity: 0;
  transform: translateX(8px) scale(0.99);
}

/* 复选框 */
.task-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--c-check-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: transparent;
  font-size: 12px;
  line-height: 1;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease),
              color 0.14s var(--ease);
}
.task-check:hover { border-color: var(--c-primary); }
.task-check.checked {
  background: var(--c-success);
  border-color: var(--c-success);
  color: var(--c-on-primary);
}

.task-main { flex: 1 1 auto; min-width: 0; }
.task-title {
  font-size: 14.5px;
  line-height: 1.5;
  word-break: break-word;
}
.task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--c-text-secondary);
}
.task-project { color: var(--c-text-secondary); }

/* 提醒时刻药丸：三态同形，只换颜色。
   注意它**不表示逾期** —— 逾期仍是 dueDate 的日期语义。
   已过期或已到点时它会变成 <button>（见 .is-postponable），
   所以这里顺手把 button 的默认外观抹平，两种标签长得一模一样。 */
.task-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-hover);
  color: var(--c-text-secondary);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
/* 时钟图标：跟着药丸的字号走，未勾选时靠 .task-check 的透明色隐身 */
.time-ico { font-size: 1.05em; }
.task-check .check-mark { font-size: 13px; }

/* 关了提醒：时刻还在，只是压暗 + 划掉，一眼能看出「不会响」 */
.task-time.is-muted {
  opacity: 0.5;
  text-decoration: line-through;
}

.task-time.is-due {
  background: var(--c-primary-soft);
  color: var(--c-primary-active);
}
.task-time.is-overdue {
  background: var(--c-overdue-bg);
  color: var(--c-overdue);
}
/* 可延期：点一下弹出延期 / 放弃。
   内描边用 currentColor 常驻（不是只在 hover）—— 不换底色，三态（中性 / 蓝 / 红）
   的语义色都保得住，同时一眼能看出「这颗胶囊跟别的不一样，它能点」。
   尾部还有一枚小箭头强化这一点（见 .caret-ico）。 */
.task-time.is-postponable {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px currentColor;
}
.task-time.is-postponable:hover { opacity: 0.82; }
.task-time.is-postponable:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
.task-time .caret-ico { font-size: 0.9em; opacity: 0.75; }
.task-row.done .task-time {
  background: transparent;
  color: var(--c-text-secondary);
  font-weight: 500;
}

/* ---- 重要程度 ----
   四档颜色只在 data-priority 上落成两个变量，标签 / 格子 / 圆点都复用它，
   以后调色只改 :root 里那三组 token。 */
[data-priority="critical"] { --prio: var(--c-prio-critical); --prio-bg: var(--c-prio-critical-bg); }
[data-priority="important"] { --prio: var(--c-prio-important); --prio-bg: var(--c-prio-important-bg); }
[data-priority="urgent"] { --prio: var(--c-prio-urgent); --prio-bg: var(--c-prio-urgent-bg); }
[data-priority="normal"] { --prio: var(--c-text-secondary); --prio-bg: var(--c-hover); }

/* 行内小标签。普通档在 JS 侧就不渲染，所以这里看不到「灰标签」。 */
.priority-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--prio-bg);
  color: var(--prio);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
  transition: filter 0.14s var(--ease);
}
.priority-tag:hover { filter: brightness(0.95); }
.task-row.done .priority-tag { opacity: 0.6; }

.task-row.done .task-title { color: var(--c-text-secondary); }
/* 放弃的比做完的再淡一档：「不做了」比「做完了」更该退到背景里 */
.task-row.dropped .task-title { opacity: 0.75; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
}
.badge-overdue {
  background: var(--c-overdue-bg);
  color: var(--c-overdue);
  border: 1px solid var(--c-overdue-border);
}
/* 已放弃：中性灰。它和「逾期」的红、完成的对勾都不同，
   一眼能分清「这条是做完了」还是「这条是不做了」。 */
.badge-dropped {
  background: var(--c-hover);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border);
}

/* ---------- 重要程度：2×2 四象限面板 ----------
   摆放就是矩阵本身：左列紧急、右列不紧急，上排重要、下排不重要。
   每格是 <button role="radio">，键盘 Tab 聚焦、方向键移动、Enter 选中。 */
.priority-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.priority-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.priority-cell:hover { background: var(--c-hover); }
.priority-cell.is-current {
  border-color: var(--prio);
  background: var(--prio-bg);
}
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--prio);
}
.priority-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}
.priority-hint {
  font-size: 11.5px;
  color: var(--c-text-secondary);
}

/* 已完成视图里的完成时刻 */
.done-time {
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 行内操作 */
.task-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.act {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-text-secondary);
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.act:hover { background: var(--c-active); color: var(--c-text); }
.act.danger:hover { color: var(--c-overdue); }

/* 单任务提醒开关：纯图标按钮，比文字按钮窄得多，手机端多它一个也不挤 */
.task-bell { padding: 0 var(--sp-1); color: var(--c-text-tertiary); }
.task-bell[aria-pressed="true"] { color: var(--c-primary); }
.task-bell[aria-pressed="false"]:hover { color: var(--c-text); }
.bell-ico { font-size: 16px; }

/* ---------- 分段控件 ----------
   「全部任务」页切换分组方式（优先级 / 时间 / 混合）。
   选中态用「白底 + 极浅阴影」从灰底里浮出来，不引入新颜色。 */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-hover);
}
.segmented-item {
  height: 28px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.segmented-item:hover { color: var(--c-text); }
.segmented-item.active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-sm);
}

/* ---- 快速添加 ---- */
.composer { margin-bottom: var(--sp-4); }
.composer-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text-secondary);
  font-size: 14.5px;
  transition: border-color 0.14s var(--ease), color 0.14s var(--ease),
              background 0.14s var(--ease);
}
.composer-trigger:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-surface);
}
.composer-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.composer-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
}
.composer-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-size: 14.5px;
  height: 40px;
}
.composer-input:focus { outline: none; }
.composer-hint { font-size: 12px; color: var(--c-text-secondary); flex: 0 0 auto; }

/* 扩展控件区：一排优先级胶囊 + 一排日期快捷（默认都为空） */
.composer-extras {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-border);
}
.prio-chips, .date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.prio-chip, .date-chip {
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-hover);
  color: var(--c-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.prio-chip:hover, .date-chip:hover { color: var(--c-text); }
/* 选中态复用 [data-priority] 落下的 --prio / --prio-bg */
.prio-chip[aria-pressed="true"] {
  background: var(--prio-bg);
  color: var(--prio);
  border-color: var(--prio);
}
.date-chip[aria-pressed="true"] {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* ---------- 循环（重复）任务 ---------- */

/* 行上的循环徽章：形态沿用 .badge（高度、字重一致），
   但用主色系 —— 它是「属性」不是「异常」，不该像逾期那样喊。 */
.task-repeat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary-active);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
}
.task-repeat .repeat-ico { font-size: 1.05em; }
/* 「已错过 3 次」用逾期色：它是这条循环任务当前唯一需要你知道的坏消息，
   但只染这一段文字，不把整个徽章变成警告色。 */
.task-repeat .repeat-missed {
  color: var(--c-overdue);
  font-variant-numeric: tabular-nums;
}
.task-row.done .task-repeat { opacity: 0.6; }

/* 弹窗里的档位胶囊：与 .prio-chip / .date-chip 同一套视觉语言 */
.repeat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.repeat-chip {
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-hover);
  color: var(--c-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.repeat-chip:hover { color: var(--c-text); }
.repeat-chip[aria-pressed="true"] {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* 「自定义…」展开出来的那一行：每 [N] [天|周|月|年] */
.repeat-every {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.repeat-every-label { color: var(--c-text-secondary); font-size: 12.5px; }
.repeat-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.repeat-hint {
  margin-top: var(--sp-2);
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  line-height: 1.5;
}

.date-cal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-hover);
  color: var(--c-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.date-cal:hover { color: var(--c-text); }
.date-cal-icon { font-size: 13px; }
/* 视觉隐藏，但要留在文档里 —— showPicker() 对 display:none 的元素会拒绝 */
.date-cal-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

/* ---------- 延期弹层 ----------
   一排档位胶囊。形态与 .date-chip 一致，但不复用那个类：
   延期是「点了就执行」，没有选中态，带 [aria-pressed] 的样式会误导。 */
.postpone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.postpone-chip {
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-hover);
  color: var(--c-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
              border-color 0.14s var(--ease);
}
.postpone-chip:hover {
  color: var(--c-text);
  border-color: var(--c-text-tertiary);
}
/* 「自定义…」展开后就是个表单，靠这条分隔线与上面那排胶囊分开 */
.postpone-custom {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
}
.postpone-row { display: flex; gap: var(--sp-2); }
.postpone-row .input { flex: 1 1 0; min-width: 0; }
.postpone-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.postpone-error {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--c-overdue);
}
.postpone-error:empty { display: none; }

.shake { animation: wd-shake 0.32s var(--ease); }
@keyframes wd-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---- 进度条 ---- */
.progress {
  height: 6px;
  background: var(--c-divider);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-full);
  transition: width 0.3s var(--ease);
}
.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: 12.5px;
  color: var(--c-text-secondary);
}
.progress-pct { font-weight: 600; color: var(--c-text); }

/* ---- 项目卡片 ---- */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.project-card {
  position: relative;              /* 卡片右上角的拖拽把手用绝对定位 */
  display: block;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
              transform 0.16s var(--ease);
}
.project-card:hover {
  border-color: var(--c-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.project-card-name { font-size: 15.5px; font-weight: 600; }
.project-card-desc {
  margin-top: 2px;
  font-size: 13px;
  color: var(--c-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-card .page-bar { margin-top: var(--sp-4); }

/* ---- 拖拽排序 ---- */
/* 把手平时隐形，悬停 / 触屏才出现，列表看起来依然干净 */
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-tertiary);
  cursor: grab;
  touch-action: none;            /* 触屏上把手里的手势归拖拽，不归页面滚动 */
  opacity: 0;
  transition: opacity 0.14s var(--ease), color 0.14s var(--ease);
}
.drag-handle::before {
  content: "";
  width: 10px;
  height: 16px;
  background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.35px);
  background-size: 5px 5.5px;
  background-repeat: repeat;
}
.drag-handle:hover { color: var(--c-primary); }
.drag-handle:active { cursor: grabbing; }

/* 任务行：把手落在行的左内边距里，所以不改变原有对齐与留白 */
.task-row .drag-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sp-4);
}
.task-row:hover .drag-handle,
.task-row:focus-within .drag-handle { opacity: 1; }

/* 项目卡片：右上角 */
.card-handle {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
}
.card-handle:hover { background: var(--c-hover); }
.project-card:hover .card-handle { opacity: 1; }

/* 触屏没有 hover，把手常显 */
@media (hover: none) {
  .task-row .drag-handle,
  .card-handle { opacity: 0.65; }
}

/* 拖拽进行中 */
body.is-dragging { user-select: none; -webkit-user-select: none; }
body.is-dragging,
body.is-dragging * { cursor: grabbing !important; }
.drag-source { opacity: 0.32; }

/* 跟着指针走的克隆体 */
.ghost-detached {
  position: fixed;
  z-index: 300;
  margin: 0;
  pointer-events: none;
  background: var(--c-surface);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-md);
  box-sizing: border-box;
  box-shadow: var(--shadow-lg);
  opacity: 0.95;
}
.ghost-detached.task-row { border: 1px solid var(--c-primary); }

/* 插入位置：用内阴影画线，不占高度，列表不会跳 */
[data-sortable] .drop-before { box-shadow: inset 0 2px 0 0 var(--c-primary); }
[data-sortable] .drop-after { box-shadow: inset 0 -2px 0 0 var(--c-primary); }

/* ---- 表单 ---- */
.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-secondary);
}
.field-label .optional { font-weight: 400; }

/* 弹窗里的「到点提醒」开关行：只在设了时刻时才出现（由 JS 控制 display） */
.reminder-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.reminder-toggle-label {
  font-size: var(--fs-subhead);
  color: var(--c-text-secondary);
}

.input, .select {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14.5px;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
.date-custom { margin-top: var(--sp-2); }

/* ---- 空状态 ---- */
.empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
/* 空状态：图标放大到 48px 并压低存在感，让「标题 + 说明」当主角 */
.empty-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--sp-3);
  color: var(--c-text-tertiary);
  justify-content: center;
}
.empty-title { font-size: 15.5px; font-weight: 600; }
.empty-text {
  margin-top: var(--sp-1);
  font-size: 13.5px;
  color: var(--c-text-secondary);
  white-space: pre-line;
}
.empty-action { margin-top: var(--sp-4); }

/* ---- Modal ---- */
#modal-root:empty { display: none; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--c-overlay);
  animation: wd-fade-in 0.16s var(--ease);
}
.modal {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: wd-modal-in 0.18s var(--ease);
  overflow: hidden;
}
/* 底部 sheet 的把手条：只在手机端显示（见 RESPONSIVE 区） */
.modal-grabber { display: none; }
.modal-title {
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}
.modal-text { font-size: 14.5px; color: var(--c-text-secondary); }
.modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-divider);
}
.modal-foot .spacer { margin-left: auto; }

@keyframes wd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wd-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---- 账号：登录 / 注册覆盖层 + 「我的」面板 ---- */

/* 空的时候不占位（和 #modal-root / #reminder-root 一个套路） */
#auth-root:empty { display: none; }

/* 全屏覆盖层。z-index 低于 .modal-overlay(100)：
   登录页里要弹「把数据并进来？」的确认框，那个必须盖在它上面。 */
.auth-root {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  padding-top: calc(var(--sp-4) + var(--sat));
  padding-bottom: calc(var(--sp-4) + var(--sab));
  background: var(--c-bg);
  overflow-y: auto;
  animation: wd-fade-in var(--d-base) var(--ease);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.auth-brand { display: flex; align-items: center; gap: var(--sp-2); }
.auth-logo { font-size: 26px; color: var(--c-primary); }
.auth-brand-name {
  font-size: var(--fs-headline);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.auth-title {
  margin-top: var(--sp-3);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}
.auth-tabs {
  display: flex;
  gap: var(--sp-1);
  margin: var(--sp-4) 0;
  padding: 3px;
  background: var(--c-surface-sunken);
  border-radius: var(--r-md);
}
.auth-tab {
  flex: 1 1 0;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: var(--fs-callout);
  color: var(--c-text-secondary);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.auth-tab.active {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}
.auth-field { margin-bottom: var(--sp-3); }
.auth-form { display: flex; flex-direction: column; }
.auth-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}
.auth-label .optional { font-weight: var(--fw-regular); }
.auth-field .input,
.auth-field .select { width: 100%; }
.auth-question {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--sp-3);
}
.auth-question-label {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}
.auth-question-text { font-size: var(--fs-callout); color: var(--c-text); }
.auth-error {
  min-height: 18px;
  margin: var(--sp-2) 0;
  font-size: var(--fs-subhead);
  color: var(--c-overdue);
}
.auth-submit { margin-top: var(--sp-2); }
.auth-link { margin-top: var(--sp-3); font-size: var(--fs-subhead); }
.auth-hint { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--c-text-secondary); }
/* 威胁模型如实交代，不承诺安全性 */
.auth-warning {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--c-text-tertiary);
}
.auth-cancel { margin-top: var(--sp-4); }

/* 「我的」面板 */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--c-primary-soft);
  color: var(--c-primary-active);
  font-size: 24px;
}
.profile-name { font-size: var(--fs-headline); font-weight: var(--fw-semibold); }
.profile-sub { margin-top: 2px; font-size: var(--fs-caption); color: var(--c-text-secondary); }
.profile-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.profile-group { margin-top: var(--sp-4); }
.profile-group-label {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
}
.profile-switch.active { background: var(--c-primary-soft); color: var(--c-primary-active); }

/* 账号入口：桌面走侧栏，手机走顶栏头像（见 RESPONSIVE 区） */
.topbar-avatar { display: none; }

/* ---- Toast ---- */
#toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-5) + 12px);
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 80vw;
  padding: 9px var(--sp-4);
  background: var(--c-toast-bg);
  color: var(--c-text-inverse);
  border-radius: var(--r-md);
  font-size: 13.5px;
  box-shadow: var(--shadow-md);
  animation: wd-toast-in 0.2s var(--ease);
}
.toast.out { animation: wd-toast-out 0.2s var(--ease) forwards; }
/* 四种 toast 之前长得一模一样，只有图标字符不同。
   现在按语义给图标上色；底色在深浅两种主题下都是深色，所以这四个值不参与主题切换。 */
.toast-icon { flex: 0 0 auto; font-size: 15px; }
.toast-success .toast-icon { color: #4ADE80; }
.toast-warn .toast-icon { color: #FBBF24; }
.toast-error .toast-icon { color: #F87171; }
.toast-info .toast-icon { color: #7DD3FC; }

@keyframes wd-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes wd-toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* ---- 提醒横幅 ---- */
/* 宿主常驻，空时整块消失（:empty 不占位） */
#reminder-root {
  position: fixed;
  left: 50%;
  top: calc(var(--topbar-h) + var(--sp-3));
  transform: translateX(-50%);
  z-index: 190;                                   /* toast(200) 之下、弹窗(100) 之上 */
  width: min(460px, calc(100vw - 2 * var(--sp-4)));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;                           /* 宿主不吃事件，只有横幅本体吃 */
}
#reminder-root:empty { display: none; }

.reminder-banner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: wd-banner-in 0.22s var(--ease);
}
.reminder-ico { flex: 0 0 auto; font-size: 17px; line-height: 1.4; }
.reminder-body { flex: 1 1 auto; min-width: 0; }
.reminder-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}
.reminder-sub {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.reminder-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

@keyframes wd-banner-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

/* 从通知点进来的定位闪烁：闪两轮，与 JS 的 1800ms 移除对齐 */
.task-row.row-flash { animation: wd-row-flash 0.9s var(--ease) 2; }
@keyframes wd-row-flash {
  0%, 100% { background: transparent; }
  50% { background: var(--c-primary-soft); }
}

/* ---- 设置 ---- */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-divider);
}
.setting-row:last-child { border-bottom: none; }
/* 设置里「外观」的三段选择：贴着右侧不参与拉伸，说明文字负责占满剩余空间 */
.theme-seg { flex: 0 0 auto; }
.setting-label { font-size: 14.5px; }
.setting-desc { margin-top: 2px; font-size: 12.5px; color: var(--c-text-secondary); }
.setting-about {
  margin-top: var(--sp-2);
  font-size: 12.5px;
  color: var(--c-text-secondary);
}
.setting-status {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--c-hover);
  color: var(--c-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* 提醒设置编成一组，与下面的「示例数据 / 清空」拉开层次 */
.setting-group {
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--c-divider);
}
.setting-group .setting-row:last-child { border-bottom: none; }

/* 开关：input 铺满、透明，视觉全交给轨道 */
.switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  cursor: pointer;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--c-active);
  transition: background 0.16s var(--ease);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s var(--ease);
}
.switch input:checked + .switch-track { background: var(--c-primary); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* 数字输入：窄，居中，等宽数字，避免宽度跳动 */
.input-num {
  width: 68px;
  padding: 0 var(--sp-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ==================== 桌面壳（WPF + WebView2） ====================
   全部限定在 html[data-host="desktop"] 下，浏览器版一行都不受影响。
   data-host 由 js/native.js 在探测到宿主时打上；浏览器里这个属性根本不存在。

   窗口控制按钮用 Windows 系统色而非品牌色 —— 它是「窗口的」按钮，
   不是应用的按钮，跟着系统走才不会显得突兀；深浅主题下这两个色值是同一份。 */
:root {
  --c-win-close: #C42B1C;
  --c-win-close-hover: #B02718;
}

/* 无边框窗口：整条顶栏就是拖拽区，拖动 / 双击最大化 / 右键系统菜单全由 OS 原生处理。
   注意里面的交互元素必须显式 no-drag —— WebView2 从 v152 起 app-region 会强制继承，
   不排除的话按钮点击会被当成「按在标题栏上」而吞掉。 */
html[data-host="desktop"] .topbar {
  app-region: drag;
  -webkit-app-region: drag;
}
html[data-host="desktop"] .topbar input,
html[data-host="desktop"] .topbar button,
html[data-host="desktop"] .topbar a,
html[data-host="desktop"] .modal,
html[data-host="desktop"] .modal-overlay,
html[data-host="desktop"] #toast-root,
html[data-host="desktop"] #reminder-root,
html[data-host="desktop"] .auth-root {
  app-region: no-drag;
  -webkit-app-region: no-drag;
}

/* 窗口控制按钮：贴住右上角，尺寸照抄系统标题栏（44×56），悬停态也照抄 */
.win-controls { display: none; }
html[data-host="desktop"] .topbar.has-win-controls { padding-right: 0; }
html[data-host="desktop"] .win-controls {
  display: flex;
  align-self: stretch;
  margin-left: var(--sp-2);
}
.win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--c-text-secondary);
  font-family: inherit;
  cursor: default;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.win-btn:hover { background: var(--c-active); color: var(--c-text); }
.win-btn:active { background: var(--c-hover); }
.win-btn-close:hover { background: var(--c-win-close); color: #FFFFFF; }
.win-btn-close:active { background: var(--c-win-close-hover); color: #FFFFFF; }
.win-ico { font-size: 14px; }

/* 设置行里「一段状态文字 + 若干按钮」的横向排布 */
.setting-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

/* ==================== RESPONSIVE ==================== */

/* 平板：侧栏收窄 */
@media (max-width: 1023px) {
  #sidebar { width: var(--nav-w-tablet); }
  #main { margin-left: var(--nav-w-tablet); }
  .view { padding: var(--sp-5) var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
  .project-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* 手机：隐藏侧栏，底部导航 + FAB */
@media (max-width: 639px) {
  #sidebar { display: none; }
  #main {
    margin-left: 0;
    padding-bottom: calc(var(--bottombar-h) + var(--fab) + var(--sp-5));
  }

  /* 顶栏：左侧露出鲸鱼标 —— 移动端之前完全看不到品牌 */
  .topbar {
    padding: 0 var(--sp-4);
    height: 56px;
    gap: var(--sp-2);
  }
  .topbar-logo {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 24px;
    color: var(--c-primary);
  }
  .search-box { flex: 1 1 auto; }
  .topbar-new { display: none; }

  /* 手机端顶栏右侧的账号头像入口（桌面有侧栏底部那一个，这里不显示） */
  .topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: var(--c-fill);
    color: var(--c-text-secondary);
    font-size: 18px;
  }
  .topbar-avatar.is-guest { color: var(--c-text-tertiary); }

  .view { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .page-title { font-size: 28px; }        /* 大标题：Apple 原生感的关键 */
  .page-sub { font-size: 13px; }
  .project-cards { grid-template-columns: 1fr; }

  /* 分组头吸顶：滚长列表时不会丢失「这组是什么」 */
  .group-head {
    position: sticky;
    top: 56px;                            /* = 移动端顶栏高度 */
    z-index: var(--z-sticky);
    margin: var(--sp-4) 0 var(--sp-1);
    padding: var(--sp-2) 0;
    background: var(--c-topbar-bg);
    backdrop-filter: var(--c-overlay-blur);
  }

  /* 触屏没有 hover，操作常显；同时收窄按钮，给标题留出空间 */
  .task-row .task-actions { opacity: 1; }
  .task-row { padding: var(--sp-3); }
  .task-row .drag-handle { width: var(--sp-3); }   /* 跟着内边距收窄，别压到复选框上 */
  .act { padding: 0 6px; font-size: 12.5px; }

  /* 延期弹层：手机上五个胶囊排一排会换行，收紧间距让它们挤得下 */
  .postpone-chips { gap: var(--sp-1); }
  .postpone-chip { height: 32px; padding: 0 var(--sp-2); }

  /* 复选框视觉 22px，但用伪元素把可点区域撑到 44px —— 不用瞄准 */
  .task-check { position: relative; width: 22px; height: 22px; }
  .task-check::before { content: ""; position: absolute; inset: -11px; }

  /* 底部导航：图标在上、文字在下，激活态给一条顶部指示条 */
  #bottombar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-bottombar);
    display: flex;
    align-items: stretch;
    height: calc(var(--bottombar-h) + var(--sab));
    padding: 0 var(--sar) var(--sab) var(--sal);
    background: var(--c-surface);
    border-top: 1px solid var(--hairline);
  }
  .tab-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;                     /* 触控目标下限 */
    padding: var(--sp-1) 0;
    font-size: var(--fs-caption);
    color: var(--c-text-secondary);
    transition: color 0.14s var(--ease);
  }
  .tab-ico { font-size: 22px; }
  .tab-label { line-height: 1.25; }
  .tab-item:active { background: var(--c-hover); }
  .tab-item.active { color: var(--c-primary); }
  .tab-item.active .tab-label { font-weight: var(--fw-semibold); }
  .tab-item.active::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--c-primary);
  }

  #fab {
    position: fixed;
    right: var(--sp-4);
    bottom: calc(var(--bottombar-h) + var(--sab) + var(--sp-4));
    z-index: var(--z-fab);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fab);
    height: var(--fab);
    border-radius: var(--r-full);
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-size: 26px;
    line-height: 1;
    box-shadow: var(--shadow-md);
    transition: background 0.14s var(--ease), transform 0.1s var(--ease);
  }
  #fab:hover { background: var(--c-primary-hover); }
  #fab:active { transform: scale(0.94); }

  #toast-root { bottom: calc(var(--bottombar-h) + var(--sp-5)); }

  /* 手机：提醒横幅挪到底部导航之上，占满宽度 */
  #reminder-root {
    top: auto;
    bottom: calc(var(--bottombar-h) + var(--sab) + var(--sp-3));
    width: calc(100vw - 2 * var(--sp-3));
  }
  .reminder-banner { padding: var(--sp-3); }
  .reminder-actions { flex-wrap: wrap; justify-content: flex-end; }

  /* 底部 sheet：把手条 + 大圆角 + 模糊遮罩 */
  .modal-grabber {
    display: block;
    width: 36px; height: 4px;
    margin: var(--sp-2) auto 0;
    border-radius: var(--r-full);
    background: var(--c-text-tertiary);
    opacity: 0.55;
    flex: 0 0 auto;
  }
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    backdrop-filter: var(--c-overlay-blur);
  }
  .modal {
    max-width: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: wd-sheet-in 0.2s var(--ease);
  }
  @keyframes wd-sheet-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
  }
}

/* 窄屏（iPhone SE 一类）：再收一档，别让 5 个 tab 挤在一起 */
@media (max-width: 375px) {
  .page-title { font-size: 24px; }
  .view { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .tab-ico { font-size: 20px; }
  .tab-item { font-size: var(--fs-caption); }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}