/* ===== 主题变量 ===== */
/* ============================================================
   设计 token（单一 source of truth）
   体系对齐 Ant Design 的字阶/间距/圆角**结构**，取值按本组件尺度收敛
   （桌面小组件比后台系统紧凑，正文基准取 12px 而非 AntD 的 14px）。
   新增样式一律引用这里的变量，不要再写散落的 px 值。
   ============================================================ */
:root {
  /* ===== 字号 6 级（相邻级差 ≥1px，禁用 0.5px 增量）===== */
  --fs-xs:   11px;   /* 角标、极小标注（不低于 11px，AntD 规范下限为 12px，此处已是最紧尺度） */
  --fs-sm:   12px;   /* 辅助文字、页签、按钮 */
  --fs-base: 13px;   /* 正文（基准） */
  --fs-md:   14px;   /* 强调正文 */
  --fs-lg:   16px;   /* 小标题 */
  --fs-xl:   24px;   /* 大数字、大标题 */

  /* ===== 间距 8px 栅格 ===== */
  --space-1:  2px;   /* 细缝（分隔线两侧） */
  --space-2:  4px;
  --space-3:  8px;   /* 栅格基准 */
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;

  /* ===== 圆角（AntD 体系 + 主卡片）===== */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:  10px;
  --r-2xl: 14px;     /* 弹层/面板 */
  --radius: 18px;    /* 主卡片（保留） */
  --r-full: 50%;     /* 正圆：悬浮球、头像、徽章 */

  --accent: #6c8cff;
  --accent-soft: rgba(108, 140, 255, .16);
  --danger: #ff6b6b;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
body[data-theme="dark"] {
  --bg-a: rgba(26, 30, 44, 1);    /* 底色不再打折透明度：滑块 100% 必须完全不透（原先 .94 会永远透 6%） */
  --bg-b: rgba(16, 19, 30, 1);
  --panel: rgba(255, 255, 255, .045);
  --panel-hover: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .09);
  --text: #eef1fa;
  --text-dim: #9aa3bd;
  --text-faint: #8a93b0;   /* 5.44:1 实测（原 #6b7390 只有 3.54:1） */
  --text-ghost: #4a5169;   /* 第 4 级：禁用/占位 */
  --chip: rgba(255,255,255,.06);
  --chip-line: rgba(255,255,255,.12);
  --pane-line: rgba(255,255,255,.20);
  --ok: #4ade80;
  --shadow: 0 18px 48px rgba(0, 0, 0, .45);
  --input-bg: rgba(255,255,255,.06);
}
body[data-theme="light"] {
  --bg-a: rgba(252, 252, 255, 1);
  --bg-b: rgba(236, 239, 250, 1);
  --panel: rgba(20, 26, 60, .05);
  --panel-hover: rgba(20, 26, 60, .1);
  --line: rgba(20, 26, 60, .1);
  --text: #23273a;
  --text-dim: #5a6178;
  --text-faint: #656f8a;   /* 4.89:1 实测（原 #98a0b8 只有 2.55:1） */
  --text-ghost: #c2c8d8;   /* 第 4 级：禁用/占位 */
  --chip: rgba(20,26,60,.05);
  --chip-line: rgba(20,26,60,.12);
  --pane-line: rgba(20,26,60,.22);
  --ok: #16a34a;
  --shadow: 0 18px 48px rgba(60, 70, 120, .28);
  --input-bg: rgba(20,26,60,.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 兜底：面板类（#settings / #digest）显式写了 display:flex，作者样式会压过浏览器
 * 对 [hidden] 的 display:none，导致 hidden=true 也照样渲染（关不掉）。这里统一兜底。 */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);   /* 全局字号基准：未显式设字号的元素都继承它，别再走浏览器默认的 16px */
  background: transparent;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* 表单控件默认不继承字号（浏览器给 13.33px），统一继承 —— 否则会出现「同一个面板里两套字号」 */
button, input, textarea, select { font: inherit; }

/* ===== 主卡片 ===== */
#card {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

/* 桌面（透明窗口）模式：卡片圆角外必须是纯透明，否则 box-shadow 会向外扩散出一圈
 * 半透明残留（实测圆角外 alpha 12~17）。主进程在 Windows 上已设 hasShadow:false，
 * 这里把 CSS 阴影一并去掉，两者保持一致。 */
body.is-desk #card { box-shadow: none; }

/* ===== 标题栏（拖动区）===== */
#titlebar {
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-3) var(--space-3) var(--space-5);
  flex: 0 0 auto;
}
.tb-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.logo { width: 20px; height: 20px; flex: none; display: block; }
.appname { font-size: var(--fs-md); font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
.mode-chip {
  font-size: var(--fs-xs); color: var(--text-dim); border: 1px dashed var(--chip-line);
  border-radius: var(--r-md); padding: 1px var(--space-3); white-space: nowrap;
}
.tb-right { display: flex; gap: var(--space-1); }
.tb-btn {
  -webkit-app-region: no-drag;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.tb-btn:hover { background: var(--panel-hover); color: var(--text); }
.tb-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-btn.pin-on { color: var(--accent); }
/* 置顶按钮用的是图标库的「实心填充」图钉，跟其它线条按钮不同：
   全局的 .tb-btn svg 设了 fill:none 会把它的填充抽掉（只剩碎轮廓），所以这里单独放开。
   普通态填 currentColor（= .tb-btn 的 color），置顶态由上面的 .pin-on 换成 accent。 */
#btnPin svg { fill: currentColor; stroke: none; }
.tb-btn.pin-on svg { fill: var(--accent); stroke: none; }

/* ===== Hero 总览 ===== */
#hero { padding: var(--space-1) var(--space-5) var(--space-3); flex: 0 0 auto; }
.hero-top {
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3);
}
/* 「个人 / 团队」总开关贴在标题行最右：margin-left:auto 吃掉剩余空间。
   用 center 对齐（baseline 会让按钮相对大标题下沉）。 */
#scopeSwitch { margin-left: auto; flex: none; }
#heroTitle { font-size: var(--fs-xl); font-weight: 700; letter-spacing: .5px; }
#heroMeta { font-size: var(--fs-base); color: var(--text-dim); }
.progress-wrap { display: flex; align-items: center; gap: var(--space-3); }
.progress-track {
  flex: 1; height: 7px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--panel);
}
#progressFill {
  height: 100%; width: 0%;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, #6c8cff, #8f6cff);
  transition: width .25s ease;
}
#progressText { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; min-width: 76px; text-align: right; }

/* ===== 页签 ===== */
#tabs {
  /* 一行放完当前 scope 的周期标签（+ 个人的「更多 ▾」）。
   * 不许换行；标签 flex:1 等分宽度。（「个人|团队」开关在标题行右侧） */
  display: flex; flex-wrap: nowrap; align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-3); flex: 0 0 auto;
  position: relative;                 /* 「更多 ▾」的下拉菜单要相对它定位 */
}

/* 「个人 | 团队」总开关：先选看谁，再选周期。渲染在标题行右侧（#scopeSwitch）。 */
.scope-switch {
  flex: none; display: flex; gap: 2px;
  padding: 2px; border-radius: var(--r-xl);
  background: var(--panel); border: 1px solid var(--border);
}
.scope-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--text-dim);
  font-size: var(--fs-sm); font-weight: 600;
  padding: 4px var(--space-3); border-radius: calc(var(--r-xl) - 3px);
  white-space: nowrap; line-height: 20px;
}
.scope-btn:hover { color: var(--text); }
.scope-btn.on { background: var(--accent-soft); color: var(--accent); }

/* 「更多 ▾」：个人页常驻 今日/本周/本月，远期/备忘/日志收进下拉；团队页没有「更多」 */
.tab-more .caret { margin: var(--space-2); font-size: var(--fs-xs); opacity: .75; }
.tabs-more-menu {
  position: absolute; right: 10px; top: 100%; z-index: 12;
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2);
  border-radius: var(--r-xl); border: 1px solid var(--chip-line);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.tabs-more-menu .tab { justify-content: flex-start; }

/* 日历按钮（日期导航右侧）：点它选一天直接跳过去 */
.cal-btn svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round;
}
.cal-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ===== 自绘日历弹层 =====
 * 用原生 input[type=date] 的 showPicker() 弹的是浏览器自带的日历（白底、系统字体），
 * 跟应用主题对不上，所以这里自己画一个，颜色/圆角/间距全部走主题变量。
 * 位置由 JS 按日历按钮算，并夹在窗口内（窗口是透明且不可溢出的）。 */
.cal-pop, .tp-pop {
  position: fixed; z-index: 45;
  width: 244px; padding: var(--space-3);
  border-radius: var(--r-2xl);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
  color: var(--text);
  user-select: none; -webkit-user-select: none;
}
.cal-head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3); }
.cal-title { flex: 1; text-align: center; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week { margin: var(--space-2); }
.cal-week span { text-align: center; font-size: var(--fs-xs); color: var(--text-faint); padding: var(--space-1) 0; }
.cal-day {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  color: var(--text-dim); font-family: var(--font); font-size: var(--fs-base);
  aspect-ratio: 1 / 1; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  position: relative;                           /* 给下面的任务标识圆点做定位基准 */
}
.cal-day:hover { background: var(--panel-hover); color: var(--text); }
.cal-day.out { color: var(--text-faint); opacity: .55; }      /* 上/下月补位 */
.cal-day.today { color: var(--accent); font-weight: 700; }    /* 今天 */
.cal-day.sel { background: var(--accent); color: #fff; font-weight: 700; }   /* 当前查看的那天 */
/* 那天的任务状态：底部一个小圆点。数字本身占满格子，圆点放不下就吃掉字高，
 * 所以贴底边、直径 4px，不挪动日期数字的位置。
 * padding-bottom 把数字往上顶 3px，给圆点留出喘息空间（尤其选中态是整块蓝底，
 * 圆点贴着底边会显得卡在框线上）。格子高度由 aspect-ratio 定，不受内距影响。 */
.cal-day {
  padding-bottom: 3px;
}
.cal-day.has-left::after,
.cal-day.all-done::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
}
.cal-day.has-left::after { background: var(--accent); }   /* 还有没完成的 */
.cal-day.all-done::after { background: var(--ok); }       /* 全部完成 */
/* 选中格是蓝底，原色圆点会糊在里面 */
.cal-day.sel.has-left::after, .cal-day.sel.all-done::after { background: #fff; }
.cal-legend {
  display: flex; justify-content: center; gap: var(--space-5);
  margin: 0 var(--space-3) var(--space-2);
  font-size: var(--fs-xs); color: var(--text-faint);
}
.cal-legend > span { display: flex; align-items: center; gap: 4px; }
.cal-legend i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cal-legend .lg-left { background: var(--accent); }
.cal-legend .lg-done { background: var(--ok); }
.cal-foot { display: flex; justify-content: center; margin: var(--space-3); }

/* ===== 自绘时间选择面板（提醒时间）=====
 * 跟日历一个理由：原生 input[type=time] 的弹层是浏览器样式，没法跟主题统一。 */
.tp-head { font-size: var(--fs-base); color: var(--text-dim); text-align: center; margin: var(--space-3); }
/* 上下滚动的滚轮（时 + 分两列）。滚动条全局隐藏，视觉上是「滚轮」不是「滚动条」；
 * 上下用 mask 渐隐提示还能继续滚，scroll-snap 保证停下来时对齐到整档。 */
.tp-wheels { position: relative; display: flex; gap: var(--space-1); height: 156px; margin: var(--space-3) 0; }
/* iOS 时间选择器最标志性的部分：中间的选中区高亮条（左右两条横线 + 浅底），
 * 放在条目下面（pointer-events:none 不挡点击） */
.tp-wheels::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: var(--space-1); right: var(--space-1); top: 50%; height: 30px; margin-top: -15px;
  background: var(--panel-hover); border-radius: var(--r-md);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.tp-col {
  flex: 1; min-width: 0; overflow-y: auto; text-align: center;
  scroll-snap-type: y mandatory;
  padding: 63px 0;                 /* (156 - 30) / 2：让首尾档位也能滚到正中 */
  /* 上下明显渐隐（iOS 滚轮的纵深观感主要靠这一层）。原来只在最外 58px 渐隐、看不出来，
   * 改成从边缘到第二档就已经明显变淡。 */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.28) 26px, rgba(0,0,0,.62) 44px, #000 62px,
    #000 calc(100% - 62px), rgba(0,0,0,.62) calc(100% - 44px), rgba(0,0,0,.28) calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0, rgba(0,0,0,.28) 26px, rgba(0,0,0,.62) 44px, #000 62px,
    #000 calc(100% - 62px), rgba(0,0,0,.62) calc(100% - 44px), rgba(0,0,0,.28) calc(100% - 26px), transparent 100%);
}
.tp-col + .tp-col { border-left: 1px solid var(--line); }
.tp-item {
  appearance: none; border: 0; cursor: pointer;
  position: relative; z-index: 1;
  display: block; width: 100%; height: 30px; line-height: 30px; scroll-snap-align: center;
  background: transparent; color: var(--text-faint);
  font-family: var(--font); font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-md); text-align: center;
  transition: color .18s ease-out, font-size .18s ease-out;
}
.tp-item:hover { color: var(--text); background: none; }
/* 选中的档位：更亮 + 加粗（iOS 中间项的观感） */
.tp-item.on { color: var(--text); font-weight: 600; }
.tp-foot { display: flex; justify-content: flex-end; gap: var(--space-3); margin: var(--space-3); }

/* 抽屉里那枚「设提醒时间」按钮（原来是原生 input[type=time]） */
.remind-btn {
  appearance: none; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--chip-line); border-radius: var(--r-lg);
  /* 字号必须和 .seg / .d-btn 同为 --fs-sm，否则这一行按钮比「时段」那行高 1~2px */
  color: var(--text); font-family: var(--font); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; padding: var(--space-2) var(--space-3);
}
.remind-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ⚠️ 修饰类不能叫 .empty —— 页面里另有一个通用的「空状态块」.empty（带 padding 24px/字号 13px），
 * 会一起命中把按钮撑到 74px 高（踩过）。 */
.remind-btn.is-empty { color: var(--text-faint); }
.tab {
  flex: 1 1 0; min-width: 0; margin: var(--space-1);
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--text-dim);
  font-size: var(--fs-base); font-weight: 600;
  padding: var(--space-3) var(--space-1); border-radius: var(--r-xl);
  white-space: nowrap;                /* 单个页签内部也不许折行 */
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  position: relative;
}
.tab:hover { background: var(--panel); color: var(--text); }
.tab.active { background: var(--accent-soft); color: var(--accent); }
.tab .badge {
  font-size: var(--fs-xs); min-width: 16px; height: 16px; line-height: 16px;
  border-radius: var(--r-lg); background: var(--chip); color: var(--text-faint);
  padding: 0 4px; text-align: center;
}
.tab.active .badge { background: rgba(108,140,255,.2); color: var(--accent); }
.tab .badge.zero { opacity: 0; }

/* ===== 期次导航 ===== */
/* 用 gap 代替「相邻元素加 margin」：flex 默认 align-items:stretch，带 margin 的元素内容盒
 * 会矮一截（上下各多一个 margin），同排看起来不齐 —— 同一个坑在 .set-btns / .seg-group 都踩过。 */
#viewNav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-5) var(--space-3); flex: 0 0 auto; }
#viewNav .title { font-size: var(--fs-base); color: var(--text-dim); font-weight: 600; }
#viewNav .spacer { flex: 1; }
.nav-btn {
  appearance: none; border: 1px solid var(--chip-line); cursor: pointer;
  background: var(--chip); color: var(--text-dim);
  width: 22px; height: 22px; border-radius: var(--r-md); font-size: var(--fs-lg); line-height: 1;
}
.nav-btn:hover:not(:disabled) { background: var(--panel-hover); color: var(--text); }
.nav-btn:disabled { opacity: .35; cursor: default; }
.back-today {
  appearance: none; border: 1px dashed var(--chip-line); cursor: pointer;
  background: transparent; color: var(--text-dim); font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3); border-radius: var(--r-lg);
}
.back-today:hover { color: var(--accent); border-color: var(--accent); }

/* ===== 列表 ===== */
#list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 12px 12px; min-height: 0; }
/* 隐藏所有滚动条但保留滚动能力（用户明确要求：不要出现滑动条）
 * 原来给 .scroll 做了 6px 的可见滚动条，现在覆盖掉；window 仍是可滚动的。 */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }

.section-title {
  font-size: var(--fs-sm); color: var(--text-faint); font-weight: 600;
  margin: var(--space-3) var(--space-1) var(--space-3); display: flex; align-items: center; gap: var(--space-3);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 计划条目 */
.item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  /* 左右都是 12px：左边要避开 3px 色条（内容距色条 9px），右边和它对称；
   * 左边原来是 8px，内容离色条只有 6px，太挤（用户报「太挨着左边的色块了」） */
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;   /* 让详情抽屉能换行独占整行（它原来是 .it-main 的子级，右边被 ★ 挤掉一截） */
  /* 左右 margin 必须是 0：卡片左边缘要和「+ 添加今天要做的事」按钮对齐（#list 自带 12px padding 提供留白） */
  margin: var(--space-2) 0;
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  transition: background .12s;
  position: relative;
  /* 让卡片把自己的圆角「切」到左色条上。不加这行色条会露出圆角：
   * 色条只有 3px 宽，而 CSS 规定圆角半径不能超过尺寸的一半，所以 ::before 上的
   * border-radius: var(--r-xl) 会被压成 ~1.5px，与卡片的 10px 对不上，
   * 左上/左下角的圆弧外侧就会漏出 3px 宽的直角（用户报「左边色块突出卡片圆角」）。 */
  overflow: hidden;
}
.item:hover {
  background: var(--panel-hover);
  border-color: var(--chip-line);
  /* 悬停轻微抬升（参考 PomeTodo 卡片：0 2px 14px），用主题变量不新增色 */
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
/* 左侧 3px 状态色条：一眼看出轻重缓急（参考 PomeTodo 卡片的 notibar 设计）
 * 三态用现有语义色，不新增色板：未完成=强调蓝 / 已完成=线灰（视觉降权）/ 今日重点=红 */
.item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  background: var(--accent);
}
.item.done::before { background: var(--line); }
.item.pinned::before { background: var(--danger); }
.it-title-row { display: flex; align-items: flex-start; gap: var(--space-2); }
/* 有 ★ 的卡片（日计划）标题要让出右上角的位置：★ 宽 22 + 间距 4。
 * 用 :has(.a-btn) 而不是 :has(.it-actions)——后者对「.it-actions 存在但里面没按钮」的卡片也成立（周/月计划）。 */
.item:has(.a-btn) .it-title-row { padding-right: 26px; }
.item .it-title { font-weight: 500; }
/* 已完成：不用删除线（横线会切过文字，读起来像"作废"而不是"做完了"）。
 * 改用「绿 ✓ + 文字降权」：勾号给出明确的正向反馈，淡色负责让已完成项退到视觉后排。 */
.item.done .it-title { color: var(--text-faint); }
.item.done .it-title::before {
  content: '✓'; color: var(--ok); font-weight: 700; margin-right: 5px;
}
/* 备注：卡片上直接显示，最多 2 行（参考 PomeTodo 的 .todo-card-note） */
.it-note {
  margin-top: var(--space-1); color: var(--text-dim);
  font-size: var(--fs-sm); line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; word-break: break-word;
}
.item.pinned { border-color: rgba(108,140,255,.4); background: rgba(108,140,255,.08); }

/* 完成按钮（参考 PomeTodo：footer 里的「图标+文字」动作，替掉原来的小圆圈勾选框） */
.it-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
/* ⚠️ 这个类以前定义了两遍，后一条把 flex:1/min-width 覆盖掉、还带了个 4px margin，
 * 结果标签组比标题/备注右缩 4px（用户报「左边内容的对齐也调整一下」）。已合并为一条。 */
.it-meta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.it-done-btn {
  flex: none; cursor: pointer; white-space: nowrap;
  padding: var(--space-1) var(--space-3); border-radius: var(--r-md);
  border: 1px solid var(--chip-line); background: var(--chip); color: var(--text-dim);
  font-family: var(--font); font-size: var(--fs-sm); line-height: 1.5;
}
.it-done-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.it-done-btn.on { color: var(--ok); border-color: var(--ok); background: rgba(74, 222, 128, .14); }


.it-main { flex: 1; min-width: 0; }
.it-title { font-size: var(--fs-md); line-height: 1.5; word-break: break-word; }

/* 标题的编辑入口：平时藏着，鼠标移到这条计划上才浮出来 */
.it-edit {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-faint); font-size: var(--fs-base); line-height: 1;
  padding: var(--space-1) var(--space-2); border-radius: var(--r-md); flex: none;
  opacity: 0; transition: opacity .12s ease;
}
.item:hover .it-edit { opacity: .7; }
.it-edit:hover { opacity: 1; color: var(--accent); background: var(--accent-soft); }
.it-title[contenteditable="true"] {
  outline: 1px solid var(--accent); border-radius: var(--r-sm); padding: 0 3px;
  background: var(--input-bg); user-select: text; -webkit-user-select: text;
}
.chip {
  font-size: var(--fs-xs); padding: 1px var(--space-3); border-radius: var(--r-md);
  background: var(--chip); border: 1px solid var(--chip-line);
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
  /* ⚠️ 行高必须写死：line-height:normal 时中文和「🔔 15:30」这种 emoji+数字的内容盒高度不同
   * （emoji 走另一套 fallback 字体），同排标签会差 1.33px、顶边也错位（用户报「时段、提醒时间的标签高度不一致」）。
   * 固定 20px 后所有 chip 高度一致，不受字体影响。 */
  line-height: 20px;
}
/* 「重点」标签用强调色（参考 PomeTodo 的 urgent badge 是红底），否则和「上午/下午」这类中性标签长得一样 */
.chip.pin-chip { color: var(--danger); border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .14); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.when { cursor: default; }
.chip.when.am { color: #ffb020; border-color: rgba(255,176,32,.35); }
.chip.when.pm { color: #6c8cff; border-color: rgba(108,140,255,.4); }
.chip.when.night { color: #b388ff; border-color: rgba(179,136,255,.4); }
.chip.when.full { color: var(--text-faint); }
.chip.lvl { cursor: default; opacity: .9; }
.chip.lvl.day { color: #4ade80; border-color: rgba(74,222,128,.35); }
.chip.lvl.week { color: #ffb020; border-color: rgba(255,176,32,.35); }
.chip.lvl.month { color: #6c8cff; border-color: rgba(108,140,255,.4); }
.chip.lvl.far { color: #b388ff; border-color: rgba(179,136,255,.4); }

/* ★ 绝对定位浮在右上角。它原来在 flex 流里，会把 .it-main 挤窄 30px，
 * 于是底部的「✓ 完成」右边距 43px 对不上 ★ 的 13px（用户报「完成按钮要不要跟收藏图标对齐」）。
 * 浮起来后 .it-main 满宽，两者的右边距都等于 .item 的 padding-right + 边框 = 13px。 */
.it-actions {
  position: absolute; top: var(--space-3); right: var(--space-4);
  display: flex; gap: var(--space-1); opacity: .45; z-index: 1;
}
.item:hover .it-actions { opacity: 1; }
.it-actions:focus-within { opacity: 1; }
.a-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 22px; height: 22px; border-radius: var(--r-md); color: var(--text-dim);
  font-size: var(--fs-base); line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.a-btn:hover { background: var(--chip); color: var(--text); }
.a-btn.on { color: var(--accent); }

/* 抽屉（编辑/关联/时段/备注/删除） */
.drawer {
  /* flex-basis:100% + .item 的 flex-wrap：抽屉铺满卡片整行（左右只差 .item 自身的 8/12 内边距） */
  flex-basis: 100%; width: 100%;
  margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-3);
  border: 1px solid var(--chip-line); border-radius: var(--r-xl);
  background: var(--input-bg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.drawer .row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.drawer .lbl { font-size: var(--fs-sm); color: var(--text-faint); }
/* 抽屉底部：左「改动会自动保存」+ 右「删除」。
 * 提示用 faint 色（4.89:1~5.44:1，达标）—— 是说明不是警示，不能抢删除按钮的注意力。 */
.drawer-foot { justify-content: space-between; }
/* 两端对齐：左边提示、右边删除按钮。间距由 space-between 提供，不需要 gap */
.autosave-hint { font-size: var(--fs-sm); color: var(--text-dim); }
/* ⚠️ 用 --text-dim 而不是 --text-faint：实测 faint 在这个抽屉底色(42,45,56)上只有 4.49:1，
 * 刚好卡在小字 AA 的 4.5:1 门槛之下（背景是半透明叠加出来的，不能拿 token 直接算）。 */
/* 用 gap 而不是「相邻元素加 margin」：flex 的 align-items:stretch 会让 margin 压缩子项高度，
 * 结果第一个（无 margin）比其余高 8px —— 用户报「上午的容器跟其他时段高度不一致」 */
.seg-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seg {
  appearance: none; border: 1px solid var(--chip-line); cursor: pointer;
  background: var(--chip); color: var(--text-dim);
  font-size: var(--fs-sm); padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
}
.seg:hover { color: var(--text); }
/* 抽屉里同一行的按钮（时段 / 提醒 / 试听 / 清除 / 改 / 删除）统一最小高度：
 * 各处的 font-size/边框/内边距有细微差别，实测会差 1px，靠这条抹平。 */
.seg, .remind-btn, .d-btn { min-height: 26px; }
.seg.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.drawer textarea {
  width: 100%; resize: vertical; min-height: 44px; max-height: 140px;
  background: var(--input-bg); border: 1px solid var(--chip-line);
  border-radius: var(--r-lg); color: var(--text); font-family: var(--font);
  font-size: var(--fs-base); line-height: 1.6; padding: var(--space-3) var(--space-3); user-select: text;
  -webkit-user-select: text;
}
.drawer textarea:focus { outline: 1px solid var(--accent); }
.cand-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 150px; overflow-y: auto; }
.cand {
  appearance: none; border: 1px solid transparent; cursor: pointer; text-align: left;
  background: transparent; color: var(--text-dim); font-size: var(--fs-base);
  padding: var(--space-2) var(--space-3); border-radius: var(--r-md); display: flex; gap: var(--space-3); align-items: center;
}
.cand:hover { background: var(--panel-hover); color: var(--text); }
.cand.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cand .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-btn {
  appearance: none; border: 0; cursor: pointer; font-size: var(--fs-sm);
  border-radius: var(--r-md); padding: var(--space-2) var(--space-3); background: var(--chip); color: var(--text-dim);
}
.d-btn:hover { color: var(--text); }
/* 危险操作默认就要有红色语义（原来只有 hover 才红，静态看是个中性灰按钮，
 * 视觉上跟「改」「试听」没区别 —— 删除是不可逆操作，必须一眼可辨） */
.d-btn.danger { color: var(--danger); border-color: rgba(255,107,107,.45); }
.d-btn.danger:hover { background: rgba(255,107,107,.14); color: var(--danger); border-color: var(--danger); }

/* ===== 在线更新提示条 =====
 * 只在桌面端安装版出现。放在卡片最顶部，不抢主内容。
 * 下载中只给一行进度（不打扰），下载完成才给「重启更新」按钮。 */
.upd-bar {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}
.upd-txt { flex: 1; min-width: 0; color: var(--text-dim); }
.upd-btn { flex: none; cursor: pointer; padding: 2px var(--space-3); border-radius: var(--r-md);
  border: 1px solid var(--chip-line); background: var(--chip); color: var(--text-dim);
  font: inherit; font-size: var(--fs-sm); line-height: 20px; }
.upd-btn:hover { color: var(--accent); border-color: var(--accent); }
.upd-btn.primary { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ===== 自绘确认框 =====
 * 系统原生的确认弹窗跟应用主题完全不搭（用户报过「浏览器自带的那个跟整体风格不搭」）。
 * 注意事项：
 *  - 铺满窗口的浮层必须加 border-radius: var(--radius)，否则卡片四角是方的（.guide 踩过这个坑）
 *  - 透明窗口里超出窗口边界的 box-shadow 会被硬切成黑边，所以弹框要居中、别贴边
 *  - z-index 要高过设置面板(20)和自绘下拉(40) */
.cf-mask {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, .55);
  border-radius: var(--radius);
}
.cf-box {
  width: 100%; max-width: 290px;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(180deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--chip-line);
  border-radius: var(--r-2xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.cf-title { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.cf-body { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-dim); word-break: break-word; }
.cf-foot { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-1); }

/* 空状态 */
.empty {
  text-align: center; color: var(--text-faint); font-size: var(--fs-base);
  padding: var(--space-7) var(--space-4); line-height: 1.9;
  border: 1px dashed var(--chip-line); border-radius: var(--r-xl); margin: var(--space-3);
}
.empty b { color: var(--text-dim); }

/* ===== 视图内联输入：在看某个日期时，直接在这个视图里写内容 ===== */
.inline-add-btn {
  appearance: none; cursor: pointer; width: 100%;
  /* 左右 margin 必须为 0：width:100% 已经按内容区算过了，再加左右 margin 会把容器撑破、
   * 在 #list 里产生一条横向滚动条（#list 自己有 12px padding 提供留白） */
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-3); text-align: left;
  border: 1px dashed var(--chip-line); border-radius: var(--r-xl);
  background: transparent; color: var(--text-dim);
  font-family: var(--font); font-size: var(--fs-base);
}
.inline-add-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.inline-add {
  /* 竖排：输入框一行，按钮另起一行靠右下（用户要求，不要跟输入框同排） */
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3);
  margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--r-xl);
  border: 1px solid var(--accent); background: var(--accent-soft);
}
.inline-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }
/* 添加计划的输入框：与抽屉里的「备注」框完全一致（用户要求），
 * 字色/圆角/内边距/行高/最小高度都照抄 .drawer textarea */
.inline-input {
  flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box;
  min-height: 44px; max-height: 140px;
  resize: vertical;                     /* 同备注框：可以手动拉高 */
  background: var(--input-bg); border: 1px solid var(--chip-line);
  border-radius: var(--r-lg); color: var(--text); font-family: var(--font);
  font-size: var(--fs-base); line-height: 1.6; padding: var(--space-3) var(--space-3);
  user-select: text; -webkit-user-select: text;
  overflow-y: auto;                     /* 配合 autoGrowInline：跟着内容长高 */
  display: block;
}
.inline-input:focus { outline: 1px solid var(--accent); }

/* ===== 设置面板 ===== */
#settings, #digest {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20;
  margin: 0 auto; width: 100%; max-width: 560px; height: 100%;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--text);
  animation: slidein .16s ease;
}
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.set-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-3); flex: none; border-bottom: 1px solid var(--line);
}
.set-head h2 { font-size: var(--fs-lg); }
.set-body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-5) var(--space-6); }
.set-group { padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--line); }
.set-group:last-child { border-bottom: 0; }
.set-label {
  font-size: var(--fs-sm); color: var(--text-faint); font-weight: 600;
  margin: var(--space-3); letter-spacing: .4px;
}
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-md); padding: var(--space-3) 0; gap: var(--space-4);
}
.set-row select, .set-row input[type="range"] { flex: 1; max-width: 220px; }
.set-row select {
  background: var(--input-bg); border: 1px solid var(--chip-line); color: var(--text);
  border-radius: var(--r-lg); padding: var(--space-2) var(--space-3); font-size: var(--fs-base); font-family: var(--font);
}

/* 自绘下拉（原生 select 的弹层系统绘制、无法换肤：暗色主题下白底黑字）
 * 结构：.sel > .sel-btn(显示当前值) + .sel-pop(选项) + select(隐藏，保留值/事件语义) */
.sel { position: relative; flex: 1; max-width: 220px; }
.sel-btn {
  width: 100%; display: flex; align-items: center; gap: var(--space-2);
  background: var(--input-bg); border: 1px solid var(--chip-line); color: var(--text);
  border-radius: var(--r-lg); padding: var(--space-2) var(--space-3);
  font-size: var(--fs-base); font-family: var(--font); text-align: left; cursor: pointer;
}
.sel-btn:hover { background: var(--panel-hover); }
.sel-btn.on { border-color: var(--accent); }
.sel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn::after {
  content: ''; flex: none; width: 0; height: 0; margin-left: auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-dim);
}
.sel-pop {
  position: absolute; z-index: 40; top: calc(100% + var(--space-1)); left: 0; right: 0;
  display: flex; flex-direction: column; padding: var(--space-1);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); max-height: 200px; overflow-y: auto;
}
.sel-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--text-dim);
  font-family: var(--font); font-size: var(--fs-sm); line-height: 1.5;
  padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
}
.sel-opt:hover { background: var(--panel-hover); color: var(--text); }
.sel-opt.on { color: var(--accent); background: var(--accent-soft); }
.switch-row { justify-content: space-between; cursor: pointer; }
.switch-row input[type="checkbox"] {
  appearance: none; width: 38px; height: 21px; border-radius: var(--r-xl);
  background: var(--chip-line); position: relative; cursor: pointer; flex: none;
  transition: background .15s;
}
.switch-row input[type="checkbox"]::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px;
  border-radius: var(--r-full); background: #fff; transition: left .15s;
}
.switch-row input[type="checkbox"]:checked { background: var(--accent); }
.switch-row input[type="checkbox"]:checked::after { left: 19px; }
.data-path {
  font-size: var(--fs-sm); color: var(--text-dim); background: var(--input-bg);
  border: 1px solid var(--chip-line); border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-3); margin: var(--space-3); word-break: break-all;
  user-select: text; -webkit-user-select: text;
}
/* 用 gap 而不是「相邻元素加 margin」：flex 默认 align-items:stretch 会把同一行拉到等高，
 * 而带 margin 的元素内容盒矮 16px（上下各 8），导致第一个（无 margin）看起来高出一截
 * —— 用户报「打开数据目录、复制版本信息比其他按钮高」。同一个坑在 .seg-group 也踩过。 */
.set-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sbtn {
  appearance: none; cursor: pointer; border: 1px solid var(--chip-line);
  background: var(--chip); color: var(--text); font-size: var(--fs-base);
  border-radius: var(--r-lg); padding: var(--space-2) var(--space-4); font-family: var(--font);
}
.sbtn:hover { background: var(--panel-hover); }
.sbtn.danger { border-color: transparent; background: rgba(255,107,107,.14); color: var(--danger); }
.sbtn.danger:hover { background: rgba(255,107,107,.24); }
/* 「检查更新」的结果反馈：检查中 / 已是最新 / 发现新版本 / 出错 */
.upd-status { font-size: var(--fs-sm); color: var(--text-dim); margin: var(--space-3) var(--space-4) 0; line-height: 1.6; }
.upd-status.err { color: var(--danger); }
.about-text { font-size: var(--fs-base); color: var(--text-dim); line-height: 1.8; margin: var(--space-4); user-select: text; -webkit-user-select: text; }
.about-text b { color: var(--text); }

/* ===== Toast ===== */
#toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: rgba(0,0,0,.82); color: #fff; font-size: var(--fs-base);
  padding: var(--space-3) var(--space-5); border-radius: var(--r-xl); z-index: 40;
  max-width: 80%; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
#toast.show { opacity: 1; }

/* ===== 远期目标卡片样式微调 ===== */
.item.far-goal .it-title { font-weight: 600; }
.mini-progress { height: 4px; border-radius: var(--r-xs); background: var(--chip-line); overflow: hidden; margin: var(--space-3); }
.mini-progress i { display: block; height: 100%; background: linear-gradient(90deg, #b388ff, #6c8cff); }
.it-done-line { font-size: var(--fs-sm); color: var(--text-faint); }

/* 标题编辑输入框 */
input.it-title {
  display: block; width: 100%;
  font: inherit; font-size: var(--fs-md); line-height: 1.5;
  color: var(--text); background: var(--input-bg);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 1px var(--space-2); margin: -1px 0;
  user-select: text; -webkit-user-select: text;
}
input.it-title:focus { outline: none; }

/* ===== 备忘筛选行 ===== */
.filter-chip {
  appearance: none; cursor: pointer; font-size: var(--fs-sm);
  border: 1px solid var(--chip-line); background: var(--chip); color: var(--text-dim);
  border-radius: var(--r-lg); padding: var(--space-2) var(--space-3); max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ===== 备忘录 ===== */
.memo {
  display: flex; align-items: flex-start; gap: var(--space-3);
  flex-wrap: wrap;   /* 让详情抽屉换行独占整行（和 .item 一致） */
  /* 左右内边距 12px、左右外边距 0：内容左基准与计划卡片、与「+ 添加」按钮对齐（备忘没有状态色条，所以左右同宽） */
  padding: var(--space-3) var(--space-4); margin: var(--space-2) 0;
  background: var(--panel); border: 1px solid transparent; border-radius: var(--r-xl);
}
.memo:hover { background: var(--panel-hover); }
.memo.pinned { border-color: rgba(108,140,255,.4); background: rgba(108,140,255,.08); }
.memo.archived .memo-text { color: var(--text-faint); }
.memo-main { flex: 1; min-width: 0; }
.memo-text {
  font-size: var(--fs-md); line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  user-select: text; -webkit-user-select: text;
}
.memo-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2); }
.memo-tag {
  font-size: var(--fs-xs); padding: 1px var(--space-3); border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid rgba(108,140,255,.28); cursor: pointer; white-space: nowrap;
}
.memo-tag:hover { border-color: var(--accent); }

/* ===== 工作日志 ===== */
.log-card {
  border: 1px solid var(--chip-line); border-radius: var(--r-xl);
  background: var(--panel); padding: var(--space-3) var(--space-4); margin: var(--space-3);
}
.log-meta { font-size: var(--fs-sm); color: var(--text-faint); margin: var(--space-3); }
.log-field { display: block; margin: var(--space-3); }
.log-label { display: block; font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; margin: var(--space-2); }
.log-field textarea {
  width: 100%; min-height: 58px; max-height: 200px; resize: vertical;
  background: var(--input-bg); border: 1px solid var(--chip-line); border-radius: var(--r-lg);
  color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.6;
  padding: var(--space-3) var(--space-3); user-select: text; -webkit-user-select: text;
}
.log-field textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.log-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.log-history {
  display: flex; align-items: center; gap: var(--space-3); cursor: pointer;
  padding: var(--space-3) var(--space-3); margin: var(--space-2); border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid transparent; font-size: var(--fs-base);
}
.log-history:hover { background: var(--panel-hover); border-color: var(--chip-line); }
.log-date { color: var(--accent); font-variant-numeric: tabular-nums; flex: none; }
.log-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.log-author { flex: none; font-size: var(--fs-xs); color: var(--text-faint); }

/* 设置里的文本输入 */
.set-row input[type="text"] {
  flex: 1; max-width: 220px; background: var(--input-bg); border: 1px solid var(--chip-line);
  color: var(--text); border-radius: var(--r-lg); padding: var(--space-2) var(--space-3); font-size: var(--fs-base);
  font-family: var(--font); user-select: text; -webkit-user-select: text;
}
.set-row input[type="text"]:focus { outline: 1px solid var(--accent); }

/* ===== 团队日报看板 ===== */
.team-cover { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.cover-chip {
  font-size: var(--fs-sm); padding: var(--space-1) var(--space-3); border-radius: var(--r-lg);
  border: 1px solid var(--chip-line); background: var(--chip); color: var(--text-dim);
}
.cover-chip.ok { color: var(--ok); border-color: rgba(74,222,128,.35); }
.cover-chip.miss { color: #ffb020; border-color: rgba(255,176,32,.35); }
.team-summary { font-size: var(--fs-sm); color: var(--text-dim); margin: var(--space-2) 0 var(--space-3); }
/* 成员卡：内距/外距/圆角/底色全部对齐个人页的任务卡（.item 是 8px 12px / 4px 0 / 10px），
 * 这样「切到团队」不会觉得换了个应用。虚线只保留给「未上报」这个语义，不是纯装饰。 */
.team-card {
  border: 1px solid var(--chip-line); border-radius: var(--r-xl);
  background: var(--panel);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
}
.team-card.missing { border-style: dashed; }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); }
.team-name { font-size: var(--fs-md); font-weight: 600; }
.self-mark {
  font-size: var(--fs-xs); color: var(--accent); border: 1px solid rgba(108,140,255,.4);
  border-radius: var(--r-md); padding: 0 5px; margin: var(--space-2); vertical-align: middle; font-weight: 400;
}
.team-state { font-size: var(--fs-xs); color: var(--text-faint); flex: none; }
.team-state.ok { color: var(--ok); }
.team-state.miss { color: #ffb020; }
.team-block { margin: var(--space-2) 0; }
.team-block-title { font-size: var(--fs-xs); color: var(--text-faint); margin: 0 2px var(--space-2); }
.team-lines { list-style: none; padding: 0; margin: 0; }
.team-lines li {
  font-size: var(--fs-base); line-height: 1.6; color: var(--text); padding: var(--space-4);
  position: relative; word-break: break-word; user-select: text; -webkit-user-select: text;
}
.team-lines li::before { content: "・"; position: absolute; left: 0; color: var(--text-faint); }
.team-hint { font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.65; margin: var(--space-2) 2px 0; }
/* 成员的任务清单（已完成 / 未完成）—— 之前只在网页看板有，客户端团队页看不到。
   形态与网页看板一致：完成率 + 进度条 + 两组列表。 */
.team-block-items .team-block-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.team-block-items .team-block-title > .team-items-rate { font-size: var(--fs-sm); }
.team-items-rate { color: var(--text-dim); font-weight: 600; }
.team-bar { height: 7px; border-radius: var(--r-sm); background: var(--panel); overflow: hidden; margin: 0 2px var(--space-2); }
.team-bar > i { display: block; height: 100%; border-radius: var(--r-sm); background: var(--accent); transition: width .2s ease; }
/* 团队页里的任务项：**照个人页任务卡（.item）的语言做** ——
 * 同样的 3px 左色条、同样的内距/圆角/字重，切过去不觉得换了个应用。
 * 底色比 .item 淡一档：它们嵌在成员卡内部，同强度会糊成一片。 */
.team-plans { margin: var(--space-2) 0 var(--space-3); }
.team-plans-t { font-size: var(--fs-xs); color: var(--text-faint); margin: 0 2px 2px; }
.team-plans-l { list-style: none; padding: 0; margin: 0; }
.team-plans-l li {
  position: relative; overflow: hidden;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: rgba(255, 255, 255, .03);
  border-radius: var(--r-xl);
  font-size: var(--fs-md); line-height: 1.5; font-weight: 500;
  color: var(--text); word-break: break-word;
}
/* 3px 左色条：未完成=强调蓝、已完成=线灰（视觉降权），与 .item 的三态同源 */
.team-plans-l li::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
/* 已完成：与个人页同一套表现 —— 绿色 ✓ + 文字降权，不用删除线。
 * 这里只能用 ::after（::before 已经被左边那条 3px 状态色条占用了）。 */
.team-plans-l.done li { color: var(--text-faint); }
.team-plans-l.done li::after {
  content: '✓'; color: var(--ok); font-weight: 700; margin-left: 5px;
}
.team-plans-l.done li::before { background: var(--line); }
.team-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin: var(--space-3) 0 4px; }
.d-btn.primary { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.member-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3); }
.member-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); border-radius: var(--r-lg);
  background: var(--chip); border: 1px solid var(--chip-line); color: var(--text);
}
.member-x {
  appearance: none; border: 0; background: transparent; color: var(--text-faint);
  cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 0 3px;
}
.member-x:hover { color: var(--danger); }
.member-empty { font-size: var(--fs-sm); color: var(--text-faint); }
.member-add { display: flex; gap: var(--space-3); margin: var(--space-3); }
.member-add input {
  flex: 0 1 180px; min-width: 84px; background: var(--input-bg); border: 1px solid var(--chip-line);
  border-radius: var(--r-lg); color: var(--text); font-family: var(--font); font-size: var(--fs-base);
  padding: var(--space-2) var(--space-3); user-select: text; -webkit-user-select: text;
}
.member-add input:focus { outline: 1px solid var(--accent); }
.member-actions { display: flex; gap: var(--space-3); }

/* 汇总预览 */
#digest textarea {
  width: 100%; min-height: 46vh; resize: vertical;
  background: var(--input-bg); border: 1px solid var(--chip-line); border-radius: var(--r-lg);
  color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-base); line-height: 1.65; padding: var(--space-3) var(--space-3); margin: var(--space-3);
  user-select: text; -webkit-user-select: text;
}

/* 提醒时间输入 */
.remind-input {
  background: var(--input-bg); border: 1px solid var(--chip-line); border-radius: var(--r-lg);
  color: var(--text); font-family: var(--font); font-size: var(--fs-base); padding: var(--space-2) var(--space-3);
}
.remind-input:focus { outline: 1px solid var(--accent); }

/* 已完成折叠：列表默认只显示还要做的事，点开才看划掉的 */
.done-toggle {
  display: block; width: 100%; margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-1);
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text-faint);
}
.done-toggle:hover { color: var(--text-dim); }
.done-box { margin: var(--space-1); }
.done-box .item { opacity: .6; }

/* 记进工作日志的快捷入口（今天有完成、日志还没写时才出现） */
.log-hint {
  display: block; width: 100%; margin: 0 0 10px; padding: var(--space-3) var(--space-3);
  text-align: left; cursor: pointer; font-family: inherit;
  font-size: var(--fs-base); line-height: 1.5; color: var(--text-dim);
  background: var(--bg-b); border: 1px solid var(--line); border-radius: var(--r-xl);
}
.log-hint:hover { border-color: var(--accent); color: var(--accent); }


/* ===== 全局搜索 =====
 * 点标题栏的放大镜出现；结果直接渲染进 #list（复用主列表区，省一套容器）。
 * mark 的高亮底色跟着主题走，浅色主题下也看得清。 */
.search-bar {
  display: flex; align-items: center; gap: var(--space-3);
  /* 左右 16px 对齐 #hero；原来是 0 边距 → 顶到窗口边缘，看着像在卡片外面 */
  margin: var(--space-3) var(--space-5) var(--space-3); padding: var(--space-3) var(--space-3);
  background: var(--bg-b); border: 1px solid var(--line); border-radius: var(--r-xl);
  flex: 0 0 auto;
}
.search-bar .sb-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
.search-bar input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: var(--fs-base); line-height: 1.6;
}
.search-bar input::placeholder { color: var(--text-faint); }
.tb-btn.on { color: var(--accent); }

.sr-head { font-size: var(--fs-sm); color: var(--text-faint); padding: var(--space-1) var(--space-1) var(--space-3); }
.sr-item {
  display: flex; align-items: flex-start; gap: var(--space-3); width: 100%;
  padding: var(--space-3); margin: var(--space-3); cursor: pointer; text-align: left;
  background: var(--bg-b); border: 1px solid var(--line); border-radius: var(--r-xl);
  font-family: inherit; color: var(--text);
}
.sr-item:hover { border-color: var(--accent); }
.sr-item.done .sr-title { opacity: .6; }
.sr-item.done .sr-title::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.sr-kind {
  flex: none; padding: 1px var(--space-3); border-radius: var(--r-md);
  font-size: var(--fs-xs); line-height: 1.6; color: #fff; background: var(--text-faint);
}
.sr-kind.sr-plan { background: var(--accent); }
.sr-kind.sr-memo { background: #d9a12b; }
.sr-kind.sr-log { background: #3fa97b; }
.sr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sr-title { font-size: var(--fs-base); line-height: 1.5; word-break: break-word; }
.sr-sub { font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.5; }
.sr-go { flex: none; font-size: var(--fs-sm); color: var(--text-faint); align-self: center; }
.sr-item:hover .sr-go { color: var(--accent); }
.sr-title mark, .sr-sub mark {
  /* 高亮用青色，不用 --accent —— 结果项的类型标签里「计划」已经占了 accent 色，
     两者同色会糊在一起（审图时被指出）。青色跟紫/橙/绿三种标签都能区分。 */
  background: rgba(63, 199, 211, .18); color: #3fc7d3;
  border-radius: var(--r-xs); padding: 0 1px; font-weight: 600;
}

/* ===== 首次使用引导 =====
 * 目的：同事第一次打开时，四个手势一眼看明白（悬浮球这类交互没人猜得到）。
 * 只弹一次（cfg.guideSeen 记过），想再看去「设置 → 关于 → 再看一次引导」。 */
.guide {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60;
  /* 圆角必须跟卡片一致：这是铺满窗口的遮罩，窗口本身是圆角+透明的，
   * 少了这一条四角会戳出卡片圆角外、露出直角（#settings / #digest 都有这条） */
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); background: rgba(0, 0, 0, .55);
}
.guide-card {
  width: 100%; max-width: 340px; max-height: 100%; overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-5); border-radius: var(--r-2xl);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  color: var(--text);
}
.guide-card h3 { font-size: var(--fs-lg); margin: 0 0 6px; }
.guide-lead { font-size: var(--fs-base); color: var(--text-dim); margin: 0 0 10px; line-height: 1.6; }
.guide-list { margin: 0 0 10px; padding: var(--space-6); }
.guide-list li { font-size: var(--fs-base); line-height: 1.75; color: var(--text-dim); margin: var(--space-2); }
.guide-list b { color: var(--text); font-weight: 600; }
.guide-foot { font-size: var(--fs-sm); color: var(--text-faint); margin: 0 0 10px; }
.guide-btns { display: flex; justify-content: flex-end; }
/* 引导独立成窗口后，这层遮罩不需要压暗底下的东西了 —— 只留卡片本身
 * （留着半透明黑底的话，桌面上会多出一大块灰，反而更扎眼）。 */
body.is-guide .guide { background: transparent; padding: var(--space-4); }

.about-warn { color: #e8a33d; }

/* 启动诊断：错误横幅 + 加载提示 */
.boot-error {
  margin: var(--space-3) var(--space-4) 0; padding: var(--space-3) var(--space-3); border-radius: var(--r-xl);
  background: rgba(255, 107, 107, .16); border: 1px solid rgba(255, 107, 107, .5);
  color: #ffb3b3; font-size: var(--fs-sm); line-height: 1.6; word-break: break-all;
  user-select: text; -webkit-user-select: text;
  white-space: pre-wrap;
}
.boot-hint { font-size: var(--fs-sm); color: var(--text-dim); margin: var(--space-3) 0 2px; }
.boot-hint[hidden] { display: none; }

/* ===== 宽度自适应：窄窗口是桌面小组件（一张卡），宽窗口是 今日计划 | 预览汇总 | 远期计划 三栏 ===== */
.wide-only { display: none; }

/* 窄窗口（< 780px）卡片铺满窗口宽度。
 * ⚠️ 这里以前有一条 `#card { max-width: 460px }`，导致拖窗口边缘把窗口拉宽时
 * 卡片被钉死在 460px 居中，用户看着就是「容器宽度调不了」（踩过）。 */

/* 宽屏（>=900px）：三栏仪表盘 */
@media (min-width: 780px) {
  .wide-only { display: inline-flex; }
  #hero, #tabs, #viewNav { display: none; }        /* 三栏各有自己的标题与切换，不再需要顶部页签 */
  #list { padding: 0 14px 14px; }
  /* 用 flex 而不是 grid：老一点的浏览器内核也能正确并排 */
  .dash { display: flex; flex-direction: row; align-items: stretch; height: 100%; min-height: 0; }
  .dash > .pane + .pane { margin: var(--space-5); }   /* 不用 gap：老内核也能留出栏间距 */
  .dash > .pane { flex: 1 1 0; min-width: 0; }
  .dash > .pane[data-pane="summary"] { flex: 1.15 1 0; }
  .dash.has-future > .pane[data-pane="future"] { flex: 0.9 1 0; }

  /* 每一栏都是独立的框：更亮的框线 + 顶部分隔线 + 投影 + 左侧色条 */
  .pane {
    display: flex; flex-direction: column; min-height: 0;
    background: linear-gradient(180deg, var(--panel-hover), var(--panel));
    border: 1.5px solid var(--pane-line);
    border-radius: var(--r-2xl); padding: var(--space-3) var(--space-4) var(--space-3);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  }
  .pane-head {
    display: flex; align-items: center; gap: var(--space-3); flex: none;
    padding: var(--space-3); margin: var(--space-3);
    border-bottom: 1px solid var(--line);
  }
  .pane-title {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-size: var(--fs-md); font-weight: 700; white-space: nowrap;
  }
  .pane-title::before {
    content: ''; width: 3px; height: 13px; border-radius: var(--r-xs); background: var(--accent); flex: none;
  }
  .pane[data-pane="summary"] .pane-title::before { background: #ffb020; }
  .pane[data-pane="future"] .pane-title::before { background: #b388ff; }
  .pane-nav { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
  .pane-row { display: flex; flex-wrap: wrap; flex: none; margin: var(--space-3); }
  .pane-row { gap: var(--space-2); }   /* 同 .set-btns：用 gap 不用相邻 margin */
  .pane-seg { display: inline-flex; gap: var(--space-2); }
  .pane-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: var(--space-1); }
  .pane-x {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: var(--text-dim); font-size: var(--fs-lg); line-height: 1; margin-left: auto; padding: 0 4px;
  }
  .pane-x:hover { color: var(--danger); }
  .pane .inline-add-btn { width: auto; align-self: flex-start; }
  .digest-preview {
    white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); line-height: 1.6;
    color: var(--text-dim); background: var(--input-bg); border: 1px solid var(--chip-line);
    border-radius: var(--r-lg); padding: var(--space-3) var(--space-3); margin: var(--space-2) 0 8px;
    user-select: text; -webkit-user-select: text;
  }
}

/* ===== 三栏分割条：可拖动调整宽度 ===== */
.splitter { position: relative; }
.splitter:hover, .splitter.active { background: var(--accent-soft); }
.split-grip {
  display: block; width: 4px; height: 46px; border-radius: var(--r-xs);
  background: var(--chip-line); transition: background .12s, height .12s;
}
.splitter:hover .split-grip, .splitter.active .split-grip { background: var(--accent); height: 64px; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; }
body.col-resizing { user-select: none; -webkit-user-select: none; }

/* 栏内 / 设置里的说明文字 */
.pane-hint { font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.7; margin: var(--space-3); }
.pane-hint b { color: var(--text-dim); }


/* ===== 悬浮球：球可拖到屏幕任意位置；悬停弹面板；点击铺开卡片 =====
 * 窗口尺寸跟着状态变：球态 100×100（球 64 + 两侧 18 留白给光晕）/ 预览态 = 球 + 面板 / 卡片态 = 整张卡。
 * 球与面板在窗口内的落位一律由 app.js 的 layoutHandle() 锚定（贴左/右/上/下具体像素），
 * 这里只管形状与动效 —— **不要**在这里写 left/top 定位：窗口改尺寸时百分比居中会把球甩到新中心。 */
#handle {
  position: fixed; z-index: 31;
  display: flex; align-items: center; justify-content: center;
  /* 窗口 168×168（见 edge.js DEFAULT_HANDLE），但可见内容只有中间那只鸡——
     圆底/描边全部去掉：桌宠是独立形象，套在一个圆圈里既像按钮又和「宠物」打架。 */
  width: 168px; height: 168px;
  background: none; border: 0;
  color: var(--text);
  cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-app-region: no-drag;   /* 必须：drag 区域会吞掉鼠标事件，拖拽我们自己实现（mousedown+mousemove） */
  overflow: visible;             /* 角标要能溢出宠物外 */
}
#handle:active { cursor: grabbing; }

/* 三态的球位置全部由 app.js 的 layoutHandle() 锚定（贴具体边、跟着 dir/dirY 走）。
 * 这里只清掉 transform：曾经用 left/top:50% 居中，窗口在悬停时同时改尺寸和位置，
 * 球会先跳到新窗口中心再弹回来（用户报「鼠标滑上去球会闪一下」）；用百分比一旦碰上窗口
 * 尺寸变化就必然错位，锚定式（具体像素）没有这个问题。 */
body.edge-hidden #handle, body.edge-peek #handle, body.edge-open #handle { transform: none; }

/* 球态、预览态都让卡片让位（预览态只在球旁边多开一块放面板） */
body.edge-hidden #card, body.edge-peek #card { display: none; }

/* 卡片态（edge-open）：把手整体隐藏 —— 卡片铺开后不再需要任何圆点/把手。
   收起入口是标题栏的「贴边收起」按钮（#btnEdge）和托盘菜单，都在别处。

   演进记录（这个位置反复改过，写清楚免得再踩一遍）：
   ① 最早是 18×18 小圆点，点它收回成宠物；
   ② 宠物合并进把手后 #handle 变成 168×168，我换了背景却没缩尺寸，
      卡片上留下 168×168 的隐形热区，点哪儿都把卡片收了（用户报「右下角一大片区域」）；
   ③ 缩回 18px 后用户仍要求去掉 → 直接隐藏。
   ⚠️ 隐藏必须用 display: none —— opacity: 0 或 visibility 的元素照样吃点击，
   这个坑在 ② 里已经吃过一次（视觉上看不见 ≠ 不响应事件）。 */
body.edge-open #handle { display: none; }

/* 原来这里有一组 .hd-badge（宠物右上角的未完成数字角标）——已删除（用户要求）。
   理由：小鸡本身已经是个显眼的活物，再压一个色块数字既挡形象，又和「今日」页签上的
   角标重复播报同一个数；未完成条数改由悬停浮出的「今日待办」面板承担。
   （更早的呼吸光晕 hd-pulse / 浮动画 hdFloat 也已随圆球一起去掉：宠物自带逐帧动画，
     再叠一层光环会更像「活的挂件」，用户反馈过像桌宠。） */

/* 悬停文字提示：悬停已经会弹「今日待办」面板，这层提示冗余（宠物能拖到屏幕任意位置，
 * 提示还可能跑到屏幕外），所以不显示。元素保留给无障碍/调试用。 */
.hd-tip { display: none; }

/* ===== 卡片缩放热区：四个角 + 四条边（隐形，只靠鼠标指针形状提示） =====
 * 无边框窗口（frame:false）抓不到窗口边缘，拖窗口边 resize 天生失效，只能在边缘自己铺热区。
 * 刻意不加任何视觉标记（用户要求）：光标形状就是唯一提示。 */
.rz-box { position: fixed; inset: 0; z-index: 36; pointer-events: none; }
.rz { position: absolute; pointer-events: auto; -webkit-app-region: no-drag; }
/* 四条边：6px 厚，中间段避开角落 */
.rz-n { top: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.rz-w { left: 0; top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
.rz-e { right: 0; top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
/* 四个角：18×18，写在后面盖住边的端头 */
.rz-nw { top: 0; left: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.rz-se { bottom: 0; right: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.rz-ne { top: 0; right: 0; width: 18px; height: 18px; cursor: nesw-resize; }
.rz-sw { bottom: 0; left: 0; width: 18px; height: 18px; cursor: nesw-resize; }
/* 只在卡片态启用（球态窗口就是球本身那么大、预览态是临时的） */
body.edge-hidden .rz-box, body.edge-peek .rz-box { display: none; }

/* ===== 独立的面板窗口（src/panel.html，body.is-panel） =====
 * 面板搬进独立窗口后，窗口自己就带着正确的位置和尺寸，
 * 面板只要铺满窗口并留出边距（让 box-shadow 不被窗口边界裁掉）即可。 */
body.is-panel { background: transparent; overflow: hidden; }
body.is-panel .hd-panel {
  position: static; width: auto;
  margin: var(--space-7);                     /* 给下面的阴影留空间（6px 偏移 + 18px 模糊）*/
  /* ⚠️ 阴影必须在这里换成「小号」的：卡片那套是 0 18px 48px，模糊 48px 远超 24px 留白，
   * 超出部分会被窗口边界硬切 —— 切面上还是 45% 的黑，看着就是「窗有一道黑色半透明的边」。
   * 6 + 18 = 24px 正好卡在留白内，边缘处已经淡到看不见。 */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  opacity: 1; transform: none;
  pointer-events: auto; transition: none;
}
body.is-panel .hd-panel-foot { cursor: pointer; }

/* ===== 悬停弹出的「今日待办」小面板（旧的内嵌版，浏览器预览用；桌面端已改独立窗口） ===== */
.hd-panel {
  position: fixed; z-index: 32;
  width: 200px; padding: var(--space-3) var(--space-4);
  border-radius: var(--r-2xl);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--text);
  transform: scale(.94);             /* 位置（上下左右）全部由 app.js 的 layoutHandle() 锚定 */
  /* 限高：必须容得下 peek 窗口（180 - 上下留白 18×2 = 144），超了就会被窗口边界裁掉 */
  max-height: 144px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
body.edge-peek .hd-panel { opacity: 1; transform: scale(1); pointer-events: auto; }
/* 收回前先淡出（写在上面之后，同优先级后者胜出）：鼠标移开不再「啪」一下消失 */
body.edge-peek.edge-fading .hd-panel { opacity: 0; transform: scale(.94); transition-duration: .11s; }

.hd-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-dim); margin: var(--space-3);
}
.hd-panel-head b { font-size: var(--fs-lg); color: var(--accent); font-variant-numeric: tabular-nums; }
.hd-panel-list { list-style: none; }
.hd-panel-list li {
  position: relative; font-size: var(--fs-base); line-height: 1.45; padding: var(--space-2) 0 3px 12px;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-panel-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: var(--r-full); background: var(--accent);
}
.hd-panel-list li.hd-panel-empty { color: var(--ok); padding: var(--space-1); }
.hd-panel-list li.hd-panel-empty::before { display: none; }
.hd-panel-list li.hd-panel-more { color: var(--text-faint); font-size: var(--fs-sm); padding: var(--space-1); }
.hd-panel-list li.hd-panel-more::before { display: none; }
.hd-panel-foot {
  margin: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-faint); text-align: center;
}

/* ===== 桌宠（悬浮把手里的鸡；src/pet.html 那份已停用但样式共用） =====
 * 精灵图规格：8 列 × 13 行，每帧 192×208（见 src/lib/petstate.js）。
 * 播放方式 = CSS steps()：整张图集当一张背景图，按行定位到某个状态，
 * 再用 steps(N) 在这一行里横向走 N 格 —— 不需要 JS 逐帧。
 * ⚠️ class 名用「行名」而不是业务状态名：业务状态到行的映射只写在一处
 *    （petstate.js 的 STATE_ROW），这边两级命名会漂。
 *
 * ⚠️ steps() 的步数没法用 CSS 变量传，所以按帧数（5/6/8）拆成三组 keyframes。
 * ⚠️ keyframes 里必须把 Y 也写进去：只动 background-position-x 的话，
 *    有的实现会把 shorthand 的另一半当默认值重置掉，宠物会「跳行」显示别的状态。 */
body.is-pet { background: transparent; overflow: hidden; }

.pet-stage {
  width: 100%; height: 100%;
  /* 顶部对齐 —— 必须与 .pet-sprite 的 transform-origin: top center 配套，
     这样缩放后宠物紧贴窗口上沿，底部留出的余量正好放投影。 */
  display: flex; align-items: flex-start; justify-content: center;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  /* 形变层挂在这一层，不动精灵那层 —— 精灵的 transform 已经被 --pet-scale 占了。
     缩放原点放在「底部中心」：宠物是站着的，呼吸/跳跃要脚不动。 */
  transform-origin: bottom center;
  /* 常驻「呼吸」：幅度刻意很小（1.2% / 2.2%），大了就成了「喘气」 */
  animation: pet-breathe 3200ms ease-in-out infinite;
}
.pet-stage:active { cursor: grabbing; }

/* 走路：每步轻微上下颠动；跳跃：见 .pet-row-jump（换帧与抬升合并在一个动画里，不在这里挂 transform）；
   摇摆：叠一点水平微颤。
   状态名用的是图集行名（见 petstate.js 的 ROWS），业务状态在渲染层已经映射成行了。 */
.pet-stage[data-pet="walk-left"], .pet-stage[data-pet="walk-right"] { animation: pet-bob 450ms ease-in-out infinite; }
.pet-stage[data-pet="shake"] { animation: pet-jit 350ms linear infinite; }
/* 点击的挤压回弹：一次性，由 JS 挂 .is-squash、动画播完摘掉（挂在同一个属性上会互相覆盖） */
.pet-stage.is-squash { animation: pet-squash 320ms ease-out; }

@keyframes pet-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.012, 1.022); }
}
@keyframes pet-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-3%) scale(.995, 1.008); }
}
/* ★ 跳跃的抬升**已经搬进 .pet-row-jump / pet-jump-row**（和换帧写在同一个动画里）——
   原因见 pet-jump-row 的注释：拆成两个动画时相位会稳定错开半圈，抬升撞上余量最小的帧就切头。
   这里不要再给 [data-pet="jump"] 挂 transform 动画，否则又变回两个动画相争。 */
@keyframes pet-jit {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-2.5%); }
  40%      { transform: translateX(2.5%); }
  60%      { transform: translateX(-2%); }
  80%      { transform: translateX(1.5%); }
}
@keyframes pet-squash {
  0%   { transform: scale(1, 1); }
  50%  { transform: scale(1.08, .92); }
  100% { transform: scale(1, 1); }
}

.pet-sprite {
  width: 192px; height: 208px;                  /* 原生帧尺寸，缩小交给 transform */
  flex: none;                                   /* ⚠️ 必须：它是 flex item，默认 flex-shrink:1 会被
                                                   压到窗口宽度，再被下面的 scale() 缩一次 → 整只鸡横向压扁 */
  background-image: url(../assets/pet/sprite.webp);
  background-repeat: no-repeat;
  /* ⚠️⚠️ 必须显式写 background-size：图集是「高分辨率栅格」——文件里单帧 216×234（1.125×），
     逻辑上仍按 192×208 使用。不写这句浏览器就按图片原始像素画，整只鸡大一点二五倍、行位移全错。
     为什么是 1.125×：--pet-scale .75 × 系统 150% 缩放 → 屏幕上要画 216×234 设备像素，
     栅格单帧正好 216 ⇒ **1:1 映射、零重采样**（清晰且不会有摩尔纹）。
     ⚠️ 别再往上加栅格倍数：浏览器要缩小就麻烦 —— Skia 在缩放比 ≥0.5 时不用 mipmap，
     会把细节折叠成规则摩尔纹（实测 2× 那版整只鸡上出现每 4 逻辑像素一条的横竖网格）。
     取值规则一句话：**单帧像素 ≤ 屏幕设备像素，只放大不缩小**。
     数值 = 逻辑图集尺寸（列数×192 × 行数×208），改行数/列数时必须同步。 */
  background-size: 1536px 2704px;
  /* 静态兜底（动画未启动的那一瞬也要显示对的行） */
  background-position: 0 calc(var(--pet-row, 0) * -208px);
  /* ⚠️ 素材是平滑的矢量风插画（线条勾勒 + 渐变色），**不是像素画**——
     写 pixelated 会走最近邻采样，在 0.75 这种非整数缩放下边缘全是锯齿，
     观感就是「很粗糙」。这类素材必须平滑插值。 */
  image-rendering: auto;
  transform: scale(var(--pet-scale, .75));
  /* ⚠️ 锚点必须在「顶部中心」，且与容器 align-items: flex-start 配套：
     布局盒是原生 192×208（比窗口大），若锚在底部 center bottom，
     缩放后底边会停在原布局位置、比窗口下沿还低一截 → 脚被齐刷刷裁掉（已实测踩到）。 */
  transform-origin: top center;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .38));
}

/* 横向位移 = 帧数 × 192px；steps(N) 逐格跳，不做插值补间 */
@keyframes pet-x5 {
  from { background-position: 0 calc(var(--pet-row, 0) * -208px); }
  to   { background-position: -960px calc(var(--pet-row, 0) * -208px); }
}
@keyframes pet-x6 {
  from { background-position: 0 calc(var(--pet-row, 0) * -208px); }
  to   { background-position: -1152px calc(var(--pet-row, 0) * -208px); }
}
@keyframes pet-x8 {
  from { background-position: 0 calc(var(--pet-row, 0) * -208px); }
  to   { background-position: -1536px calc(var(--pet-row, 0) * -208px); }
}

/* ★ 跳跃：把「换帧」和「抬升」写进**同一个**动画，物理上不可能错相。
   为什么必须合并（踩过）：先前是「精灵 pet-x6 steps()」+「stage 的 pet-hop transform」两个独立动画，
   实测两者相位差约半圈且**恒定复现**（不是抖动）—— 抬升 16~20px 的那一刻，屏幕上正好是
   余量最小的帧4(7.3px)/帧5(9.3px)，于是头顶被窗口上沿切掉约 8px。
   台账（屏幕逻辑px，= 帧内原生留白 × 1/1.125 × 0.75）：
     帧0 4.7 / 帧1 25.3 / 帧2 32.0 / 帧3 23.3 / 帧4 7.3 / 帧5 9.3
   抬升量逐帧按上面这张表给，每帧都留 ≥5px 余量。
   ⚠️ steps(1, end)：每段保持该段起点的值 → 换帧与抬升同时切换，误差恒为 0（这正是合并的意义）。
   ⚠️ 这里的 transform 必须带上 scale(var(--pet-scale,.75))，否则会把精灵的缩放覆盖掉。 */
@keyframes pet-jump-row {
  0%    { background-position:    0px calc(var(--pet-row, 0) * -208px); transform: translateY(0px) scale(var(--pet-scale, .75)); }
  16.7% { background-position: -192px calc(var(--pet-row, 0) * -208px); transform: translateY(-14px) scale(var(--pet-scale, .75)); }
  33.3% { background-position: -384px calc(var(--pet-row, 0) * -208px); transform: translateY(-20px) scale(var(--pet-scale, .75)); }
  50%   { background-position: -576px calc(var(--pet-row, 0) * -208px); transform: translateY(-16px) scale(var(--pet-scale, .75)); }
  66.7% { background-position: -768px calc(var(--pet-row, 0) * -208px); transform: translateY(-2px) scale(var(--pet-scale, .75)); }
  83.3% { background-position: -960px calc(var(--pet-row, 0) * -208px); transform: translateY(-2px) scale(var(--pet-scale, .75)); }
  100%  { background-position: -1152px calc(var(--pet-row, 0) * -208px); transform: translateY(0px) scale(var(--pet-scale, .75)); }
}

/* 13 个状态 = 13 行（图集行名，见 petstate.js 的 ROWS）。
   帧数来自 ROW_FRAMES、时长来自 ROW_LOOP —— 两边必须一致，改一处就得两处一起改。
   ⚠️ 时长不能统一成一个值：眨眼 245ms 与睡觉 3900ms 差十几倍，
      拉平之后要么眨眼卡得像掉帧，要么睡觉抖得像抽搐。 */
.pet-row-idle       { animation: pet-x6 4420ms steps(6) infinite; }   /* 待命 */
.pet-row-blink      { animation: pet-x5  245ms steps(5) infinite; }   /* 眨眼（空闲点缀） */
.pet-row-happy      { animation: pet-x6  500ms steps(6) infinite; }   /* 开心（即时反馈） */
.pet-row-jump       { animation: pet-jump-row 765ms steps(1, end) infinite; }   /* 跳（= 今日全完成）；换帧+抬升合并，见 pet-jump-row */
.pet-row-shake      { animation: pet-x6  410ms steps(6) infinite; }   /* 摇摆（= 出错） */
.pet-row-chat       { animation: pet-x5  820ms steps(5) infinite; }   /* 张嘴叫（= 提醒） */
.pet-row-pet        { animation: pet-x5  650ms steps(5) infinite; }   /* 摸头 */
.pet-row-eat        { animation: pet-x5  750ms steps(5) infinite; }   /* 吃东西 */
.pet-row-sleep      { animation: pet-x5 3900ms steps(5) infinite; }   /* 睡觉 */
.pet-row-peek       { animation: pet-x5  600ms steps(5) infinite; }   /* 探头（= 审阅） */
.pet-row-peck       { animation: pet-x5  760ms steps(5) infinite; }   /* 啄食（= 等你） */
.pet-row-walk-left  { animation: pet-x8  600ms steps(8) infinite; }   /* 往左走 */
.pet-row-walk-right { animation: pet-x8  600ms steps(8) infinite; }   /* 往右走（= 忙碌） */

/* ===== 桌宠互动菜单（src/petmenu.html，独立窗口；右键点鸡弹出） ===== */
body.is-petmenu { background: transparent; overflow: hidden; }

.pm {
  /* ⚠️ 边距 + 阴影必须配套：透明窗口会把超出边界的阴影硬切掉，切面留一圈半透明黑边。
     这里 margin 10px，所以阴影最多只能用 4px 偏移 + 6px 模糊（=10px，正好衰减到 0）。
     别照搬卡片那套 --shadow（0 18px 48px = 66px 远超出界）—— 面板窗口踩过同一个坑。 */
  margin: 10px;
  padding: var(--space-3);
  border-radius: var(--r-2xl);
  background: linear-gradient(165deg, var(--bg-a), var(--bg-b));
  border: 1px solid var(--line);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .35);
  color: var(--text);
  display: flex; flex-direction: column; gap: 6px;
}

.pm-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.pm-x {
  width: 18px; height: 18px; line-height: 1; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: var(--chip); color: var(--text-dim);
  font-size: var(--fs-md); cursor: pointer;
}
.pm-x:hover { background: var(--panel-hover); color: var(--text); }

.pm-acts { display: flex; flex-direction: column; gap: 4px; }
.pm-act {
  display: flex; align-items: center; gap: var(--space-3);
  height: 32px; padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--r-lg);
  background: var(--chip); color: var(--text);
  font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer;
}
.pm-act:hover { background: var(--panel-hover); border-color: var(--line); }
.pm-act.is-on { background: var(--accent-soft); border-color: var(--accent); }
.pm-emoji { font-size: var(--fs-lg); line-height: 1; }
.pm-label { flex: 1; }

/* 台词气泡：**独立小窗口**，显示在鸡的头顶（右下角带个小尖角指向它）。
   固定用暖黄底 + 黄边 —— 这是「宠物在说话」的视觉语言，跟应用主题无关，所以不随 dark/light 变
   （对齐素材原设的 #fff9e6 / #ffd54d）。 */
.bub {
  position: relative;                          /* 尖角是 ::after 绝对定位，父级必须有定位 */
  margin: 10px;                                /* 留白给阴影：小窗口的阴影超出边界会被硬切出黑边（踩过） */
  padding: 6px var(--space-3);
  border-radius: var(--r-lg);
  background: #fff9e6; border: 1px solid #ffd54d; color: #6b4a00;
  font-size: var(--fs-sm); line-height: 1.35;
  text-align: center;
  overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;   /* 太长就截断，不撑破窗口 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, .28);
}
/* 指向鸡头顶的尖角：底部居中的等腰三角 */
.bub::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px; margin-left: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff9e6;
}
/* 气泡翻到鸡脚下时，尖角朝上 */
body.is-bubble.below .bub::after {
  bottom: auto; top: -6px;
  border-top: 0;
  border-bottom: 6px solid #fff9e6;
}

.pm-foot {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--text-faint);
}
.pm-foot b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* 关于系统级「减少动效」（prefers-reduced-motion）：这里**刻意不跟随**。
   桌宠是用户自己开的功能，动画就是功能本体 —— 停掉等于功能失效（实测本机系统该项为 ON，
   一跟随桌宠就变成一张静止图片）。而它只是低频的整帧切换，无闪烁、无视差滚动，
   前庭刺激风险很低。真想要静止的，请直接关掉桌宠本身。 */

/* ================= 登录层（服务端模式） =================
   只在「浏览器访问服务端地址」或「桌面端配了服务器地址」时显示，由 app.js 控制 hidden。
   没配服务器的老用户永远看不到它 —— 这是「不改变现有用法」这条底线的具体落实。
   宽度用 max-width 而非固定值，手机上自然就是全宽。 */
#login {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, var(--bg-a), var(--bg-b));
}
#login[hidden] { display: none; }
.login-box {
  width: 100%; max-width: 320px; box-sizing: border-box;
  padding: 26px 22px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* 登录层用内联 SVG 徽标，不引用图片文件：单文件试用版必须零外部引用，
   而图片引用会被预览构建的扫描当成外部依赖（预览版的登录层本来也用不到）。
   ⚠️ 注释里也别写图片标签的字面量 —— 扫描用的是粗正则，会把注释一起算进去。 */
.login-logo { display: block; width: 44px; height: 44px; margin: 0 auto 10px; color: var(--accent); }
.login-title { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 600; color: var(--text); text-align: center; }
.login-sub { margin: 0 0 18px; font-size: var(--fs-sm); color: var(--text-dim); text-align: center; word-break: break-all; }
.login-fld { display: block; margin-bottom: 12px; }
.login-fld > span { display: block; margin-bottom: 5px; font-size: var(--fs-sm); color: var(--text-dim); }
.login-fld input {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  font-size: var(--fs-md); color: var(--text);
  background: var(--chip); border: 1px solid var(--chip-line);
  border-radius: var(--r-md); outline: none;
}
.login-fld input:focus { border-color: var(--accent); }
.login-go { width: 100%; margin-top: 4px; }
.login-err { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--danger); text-align: center; }
.login-local {
  display: block; width: 100%; margin-top: 14px; padding: 6px;
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-sm); color: var(--text-faint);
}
.login-local:hover { color: var(--text-dim); }

/* 手机窄屏：卡片本身已经是一列，这里只调一下呼吸感；登录层靠 max-width 自适应，无需额外规则 */
@media (max-width: 480px) {
  #card { border-radius: var(--r-lg); }
}

/* ===== 任务看板页（board.html）—— 给领导看的只读视图 =====
 * 复用主卡片那套 token 与控件（.seg / .d-btn），但布局是「整页可滚动」，
 * 所以要覆盖 body 的 overflow:hidden + 固定高度（那是给桌面小组件窗口定的规矩）。
 * 同一个地址手机打开也是这个页面 → 窄屏下三列要合成一列。 */
body.board-page {
  height: auto; min-height: 100%;
  overflow: auto;
  user-select: text; -webkit-user-select: text;   /* 领导要复制文字，别拦 */
  background: linear-gradient(160deg, var(--bg-a), var(--bg-b));
  color: var(--text);
}
.bd-err {
  position: sticky; top: 0; z-index: 20;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm); word-break: break-all;
  background: var(--danger); color: #fff;
}
.bd-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-a); border-bottom: 1px solid var(--line);
}
.bd-head-l { display: flex; align-items: center; gap: var(--space-3); }
.bd-logo { width: 30px; height: 30px; flex: none; color: var(--accent); }
.bd-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.bd-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-dim); }
.bd-head-r { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bd-seg { display: flex; gap: var(--space-2); }
.bd-body { max-width: 1080px; margin: 0 auto; padding: var(--space-5); }
.bd-metrics { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.bd-metric {
  flex: 1 1 130px;
  padding: var(--space-3) var(--space-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
}
.bd-metric b { display: block; font-size: var(--fs-xl); line-height: 1.25; }
.bd-metric span { font-size: var(--fs-sm); color: var(--text-dim); }
.bd-list { display: flex; flex-direction: column; gap: var(--space-4); }
.bd-card {
  padding: var(--space-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
}
.bd-card-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bd-name { font-size: var(--fs-md); font-weight: 600; }
.bd-rate { margin-left: auto; font-size: var(--fs-sm); color: var(--text-dim); }
.bd-badge {
  padding: 1px var(--space-2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text-dim); background: var(--chip);
}
.bd-badge-ok { color: var(--ok); border: 1px solid var(--ok); background: none; }
.bd-bar { height: 4px; margin: var(--space-3) 0; background: var(--chip); border-radius: 2px; overflow: hidden; }
.bd-bar > i { display: block; height: 100%; background: var(--accent); }
.bd-cols { display: flex; gap: var(--space-4); }
.bd-col { flex: 1 1 0; min-width: 0; }
.bd-col-log { flex: 1.3 1 0; }
.bd-col-t { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); }
.bd-time { margin-left: var(--space-2); font-size: var(--fs-xs); color: var(--text-faint); }
.bd-items { margin: 0; padding: 0; list-style: none; }
.bd-items li { position: relative; padding-left: 14px; font-size: var(--fs-base); line-height: 1.7; word-break: break-word; }
.bd-items li::before { position: absolute; left: 0; }
.bd-li-done::before { content: '✓'; color: var(--ok); }
.bd-li-left { color: var(--text-dim); }
.bd-li-left::before { content: '○'; color: var(--text-faint); }
.bd-li-plain::before { content: '・'; color: var(--text-faint); }
.bd-lg-t { margin: var(--space-2) 0 2px; font-size: var(--fs-xs); color: var(--text-faint); }
.bd-nolog { margin: 0; font-size: var(--fs-base); color: var(--text-faint); }
.bd-empty { margin: var(--space-6) 0; text-align: center; font-size: var(--fs-base); color: var(--text-faint); }

/* 窄屏（手机）：三列合成一列，指标卡两列 */
@media (max-width: 780px) {
  .bd-cols { flex-direction: column; gap: var(--space-3); }
  .bd-body { padding: var(--space-3); }
  .bd-head { padding: var(--space-3); }
  .bd-metric { flex: 1 1 45%; }
  .bd-rate { margin-left: 0; width: 100%; }
}