/* ============================================================
   个人备忘管家 v3.0 - 全局样式
   结构说明：
     1) 基础/布局  2) 顶部导航  3) 页面容器(4页)
     4) 卡片/面板  5) 日历(第二页)  6) 备忘条目  7) 输入区(第一页沉底)
     8) 弹窗  9) 提示/加载/灯箱  10) 登录页  11) 响应式
   ============================================================ */

/* ---------- 1) 基础 / 布局 ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%; overflow:hidden;
  overscroll-behavior:none;   /* 阻止浏览器原生下拉/上滑刷新与滚动链 */
}
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:#f0f2f5; color:#333;
  -webkit-overflow-scrolling:touch; /* iOS 惯性滚动 */
}
#app {
  display:flex; flex-direction:column;
  height:100vh;               /* 回退：旧浏览器 */
  height:100dvh;              /* 动态视口：随移动端工具栏收起/展开实时更新，解决三星等手机底部遮档 */
  overflow:hidden;
  overscroll-behavior:none;
  position:relative;
}

/* 下拉刷新指示器：固定在顶部，默认隐藏，通过 JS 控制下拉位移与状态 */
.ptr-indicator {
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:48px; color:#888; font-size:13px;
  transform:translateY(-60px);   /* 默认藏在顶部上方 */
  transition:transform .15s cubic-bezier(.22,.61,.36,1), opacity .15s;
  opacity:0; pointer-events:none; z-index:900;
}
.ptr-indicator.show { opacity:1; pointer-events:none; }
.ptr-indicator .ptr-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12);
  font-size:14px; transition:transform .15s;
}
.ptr-indicator.refreshing .ptr-icon {
  border:3px solid #d4dcff; border-top-color:#4f6ef7;
  animation:ptrSpin .7s linear infinite;
  background:transparent; box-shadow:none;
}
@keyframes ptrSpin { to { transform:rotate(360deg); } }

/* 各页面内容区：可滚动，页脚预留底部导航高度
   min-height:0 是 flex 子项内部滚动的关键：允许子项收缩而非把容器撑高(否则 body 会出现原生滚动条)
   overscroll-behavior-y:contain 阻止滚动到顶/底后触发浏览器原生刷新 */
.page {
  display:none; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding:22px 16px 84px;   /* 顶部留白替代原 header，底部给导航腾位 */
}
.page.active { display:block; }
/* 页面切换滑动动画：改用 transform 只移动视口内偏移，避免触发重排/横向滚动条；非线性缓动 */
.page.slide {
  animation: pageSlide .18s cubic-bezier(.22,.61,.36,1);
}
@keyframes pageSlide {
  from { transform:translateX(calc(var(--slide-dir,1) * 3%)); opacity:.4; }
  to   { transform:translateX(0); opacity:1; }
}

/* 简化滚动指示条：仅一条低透明度细滑块，无上下三角、不可拖拽(用滚轮/触摸即可) */
/* 所有滚动容器统一：页面 .page、弹窗 .modal、内嵌列表、以及 textarea 输入框 */
.page::-webkit-scrollbar, .modal::-webkit-scrollbar, #aiList::-webkit-scrollbar, #listBody::-webkit-scrollbar,
textarea::-webkit-scrollbar, .chat-input::-webkit-scrollbar, #editContent::-webkit-scrollbar {
  width:5px; height:5px;
}
.page::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track,
#aiList::-webkit-scrollbar-track, #listBody::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track, .chat-input::-webkit-scrollbar-track {
  background:transparent;
}
.page::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb,
#aiList::-webkit-scrollbar-thumb, #listBody::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb, .chat-input::-webkit-scrollbar-thumb {
  background:rgba(0,0,0,.12); border-radius:3px;
}
.page::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.22); }
/* 去掉上下三角按钮（Chrome/Safari/Edge） */
.page::-webkit-scrollbar-button, .modal::-webkit-scrollbar-button,
textarea::-webkit-scrollbar-button, .chat-input::-webkit-scrollbar-button { display:none; width:0; height:0; }
/* Firefox：细滚动条 + 低透明滑块 */
.page, .modal, #aiList, #listBody, textarea, .chat-input {
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.15) transparent;
}
/* 聊天框/输入框内 textarea：直接隐藏滚动条（仍可用滚轮/触摸滚动），保持简洁 */
.chat-input::-webkit-scrollbar, textarea::-webkit-scrollbar, #editContent::-webkit-scrollbar {
  display:none; width:0; height:0;
}
.chat-input, textarea, #editContent {
  scrollbar-width:none;   /* Firefox */
  -ms-overflow-style:none; /* 旧 Edge/IE */
}

/* ---------- 2) 顶部(品牌标题已移除，页面顶部留白由 .page padding 承担) ---------- */

/* ---------- 3) 页面容器 ---------- */
.container { max-width:900px; margin:0 auto; }

/* ---------- 4) 卡片 / 面板 ---------- */
.panel {
  background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:16px;
}
.panel h2 { font-size:17px; color:#1a1a2e; margin-bottom:14px; }
.no-data { text-align:center; color:#bbb; padding:40px 0; font-size:14px; }
.no-data .emoji { font-size:40px; display:block; margin-bottom:10px; }

/* ---------- 5) 日历(第二页) ---------- */
.calendar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-nav button {
  border:none; background:#f0f0f0; border-radius:8px; padding:6px 12px; cursor:pointer;
  font-size:14px; color:#555; transition:all .15s; font-family:inherit;
}
.cal-nav button:hover { background:#e0e0e0; }
.cal-title { font-size:16px; font-weight:700; color:#1a1a2e; min-width:130px; text-align:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-weekday { text-align:center; font-size:12px; color:#999; font-weight:600; padding:4px 0; }
.cal-day {
  min-height:52px; border-radius:10px; background:#fafafa; border:1px solid #f0f0f0;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; transition:all .15s; padding:2px; overflow:hidden; box-sizing:border-box;
}
.cal-day:hover { border-color:#4f6ef7; background:#f5f7ff; }
.cal-day.other-month { opacity:.35; }
.cal-day.today { border-color:#4f6ef7; background:#f0f4ff; }
.cal-day.selected { background:#4f6ef7; border-color:#4f6ef7; }
.cal-day.selected .day-num { color:#fff; font-weight:700; }
.day-num { font-size:14px; font-weight:600; color:#333; }
.day-rest { font-size:10px; color:#ff7875; font-weight:700; }
.day-count { font-size:10px; padding:1px 5px; border-radius:8px; color:#4f6ef7; background:#e6ebff; }
.cal-day.selected .day-count { color:#fff; background:rgba(255,255,255,.25); }
.cal-legend { margin-top:10px; font-size:12px; color:#888; display:flex; gap:16px; flex-wrap:wrap; }
.cal-legend span { display:inline-flex; align-items:center; gap:4px; }
.cal-legend .clickable { cursor:pointer; }

/* 日历下方：当天详情 */
.day-detail-head { display:flex; align-items:center; gap:10px; margin:18px 0 12px; border-top:1px solid #f0f0f0; padding-top:14px; flex-wrap:wrap; }
.day-detail-head .date-label { font-size:15px; font-weight:700; color:#1a1a2e; }
.day-detail-head .rest-note { font-size:12px; background:#fff1f0; color:#cf1322; padding:3px 10px; border-radius:12px; }
.badge.count-badge { background:#e6ebff; color:#4f6ef7; }

/* ---------- 6) 备忘条目 ---------- */
.memo {
  display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:10px;
  border:1px solid #f0f0f0; margin-bottom:8px; background:#fff; transition:all .15s; cursor:pointer;
}
.memo:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
.memo.done { opacity:.6; }
.memo.done .content { text-decoration:line-through; }
.memo-checkbox { width:20px; height:20px; cursor:pointer; margin-top:2px; flex-shrink:0; }
.memo-info { flex:1; min-width:0; }
.memo .content { font-size:14px; margin-bottom:4px; word-break:break-word; }
.memo .meta { font-size:12px; color:#999; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.memo .memo-img-thumb { margin-top:8px; cursor:zoom-in; border-radius:6px; border:1px solid #eee; max-width:160px; max-height:120px; display:block; }
.memo .note { font-size:12px; color:#bbb; margin-top:4px; line-height:1.5; }
.memo-actions { display:flex; gap:6px; flex-shrink:0; }
.due { font-size:12px; color:#4f6ef7; font-weight:600; margin-right:4px; }
.no-memo { text-align:center; color:#bbb; padding:24px 0; font-size:14px; }
.badge { padding:2px 8px; border-radius:10px; font-size:11px; }
.badge.high { background:#fff1f0; color:#cf1322; }
.badge.normal { background:#f0f5ff; color:#2f54eb; }
.badge.low { background:#f6ffed; color:#389e0d; }
.badge.no-time { background:#fff7e6; color:#d46b08; }
.badge.archive { background:#e6fffb; color:#08979c; }
.badge.category { background:#f9f0ff; color:#722ed1; }

/* ---------- 7) 输入区(第一页 / 沉底) ---------- */
.input-dock {
  position:fixed; left:0; right:0; bottom:56px;   /* 底部导航上方 */
  background:#fff; box-shadow:0 -2px 10px rgba(0,0,0,.05);
  z-index:900; padding:0 12px 4px;
  max-width:900px; margin:0 auto; left:50%; transform:translateX(-50%); width:100%;
}
.chat-tools { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 2px 4px; background:#fff; }
.chat-tool {
  flex:0 0 auto; padding:8px 16px; border-radius:18px; border:1px solid #e5e5e5;
  background:#fafafa; color:#555; font-size:13px; cursor:pointer; transition:all .15s;
  font-family:inherit; white-space:nowrap;
}
.chat-tool:hover { background:#f0f0f0; }
.chat-tool.active { background:#4f6ef7; color:#fff; border-color:#4f6ef7; }
.chat-bar { display:flex; align-items:center; gap:10px; padding:0 2px 10px; background:#fff; }
.mode-btn {
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:#f2f3f5; color:#666; font-size:18px; display:flex; align-items:center;
  justify-content:center; transition:all .15s; flex-shrink:0; font-family:inherit;
}
.mode-btn:hover { background:#e8e8e8; }
.mode-btn.active { background:#eef2ff; color:#4f6ef7; }
.chat-input-wrap {
  flex:1; min-height:46px; background:#f2f3f5; border-radius:23px;
  padding:0 6px 0 16px; box-sizing:border-box;
  display:flex; align-items:center; gap:4px;
  transition:height .15s cubic-bezier(.22,.61,.36,1);
}
.chat-input {
  flex:1; min-width:0; border:none; background:transparent; font-size:15px; font-family:inherit;
  line-height:1.4; resize:none; outline:none; color:#1a1a1a;
  height:46px; padding:13px 0; box-sizing:border-box; display:block;
}
.chat-input::placeholder { color:#bbb; }
.clear-circle {
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:#999; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; font-family:inherit; opacity:0; pointer-events:none;
}
.chat-input-wrap.has-text .clear-circle { opacity:1; pointer-events:auto; }
.clear-circle:hover { background:#e8e8e8; color:#666; }
.hold-wrap {
  flex:1; display:none; height:46px; min-height:46px; box-sizing:border-box;
  background:#f2f3f5; border-radius:23px; padding:0 14px;
}
.hold-wrap.show { display:flex; }
.hold-btn {
  flex:1; height:46px; border:none; cursor:pointer; margin:0;
  background:transparent; font-size:15px; transition:all .15s;
  font-family:inherit; touch-action:none; user-select:none; -webkit-user-select:none;
  text-align:left; box-sizing:border-box; display:block;
  line-height:1.4; color:#bbb; padding:13px 0;
}
.hold-btn:active { color:#666; }
.hold-btn.recording { color:#666; }
.send-btn {
  min-width:58px; height:46px; border:none; border-radius:8px; background:#4f6ef7;
  color:#fff; font-size:14px; cursor:pointer; transition:all .15s; font-family:inherit; flex-shrink:0;
}
.send-btn:hover { background:#3b54d6; }
.send-btn:disabled { background:#b6c1f0; cursor:not-allowed; }
.send-btn.loading {
  background:#4f6ef7; cursor:wait; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.send-btn .send-spinner {
  display:none; width:15px; height:15px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:spin .8s linear infinite;
}
.send-btn.loading .send-spinner { display:inline-block; }
.voice-status-line { display:none; padding:6px 4px; font-size:12px; color:#888; background:#fafafa; border-radius:8px; margin-bottom:4px; }
.voice-status-line.show { display:block; }
.img-preview-bar {
  display:none; align-items:center; gap:10px; padding:8px 4px; background:#f6f8ff;
  border-radius:10px; font-size:12px; color:#666; margin-bottom:4px;
}
.img-preview-bar img { width:44px; height:44px; object-fit:cover; border-radius:6px; cursor:zoom-in; border:1px solid #dbe3ff; flex-shrink:0; }
.img-preview-bar .img-preview-msg { flex:1; line-height:1.4; }
.img-preview-bar .img-preview-x { width:26px; height:26px; border:none; border-radius:6px; background:#eef; color:#888; cursor:pointer; flex-shrink:0; }
.img-preview-bar .img-preview-x:hover { background:#ffe1e1; color:#d33; }

/* 今日页内容区：底部给输入区腾位 */
#page-today .page-content { padding-bottom:170px; }

/* ---------- 8) 弹窗(modals) ---------- */
.modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-mask.show { display:flex; }
/* 关闭时淡出动画（编辑弹窗保存/取消后自动退出） */
.modal-mask.closing {
  display:flex;
  animation: modalFadeOut .15s ease forwards;
}
@keyframes modalFadeOut {
  from { opacity:1; transform:scale(1); }
  to   { opacity:0; transform:scale(.96); }
}
.modal {
  background:#fff; border-radius:14px; padding:18px; width:100%; max-width:340px;
  max-height:90vh; overflow-y:auto; box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.modal h3 { font-size:16px; color:#1a1a2e; margin-bottom:14px; }
.modal label { display:block; font-size:12px; color:#888; margin:10px 0 4px; }
.modal input[type=text], .modal textarea, .modal select {
  width:100%; border:1px solid #ddd; border-radius:8px; padding:9px 10px; font-size:14px;
  font-family:inherit; resize:vertical; background:#fff; color:#333;
}
.modal input[type=datetime-local] { width:100%; border:1px solid #ddd; border-radius:8px; padding:9px 10px; font-size:14px; font-family:inherit; background:#fff; color:#333; }
.modal textarea { min-height:60px; }
.modal input:focus, .modal textarea:focus, .modal select:focus { outline:none; border-color:#4f6ef7; }
/* 账号管理弹窗（修改密码 / 注销） */
.acct-modal { max-width:340px; }
.acct-modal .login-field input { width:100%; }
.acct-modal .login-field input:focus { border-color:#4f6ef7; }
.modal-actions { display:flex; gap:10px; margin-top:16px; }
.modal-actions .btn { flex:1; }
.btn { padding:9px 20px; border-radius:8px; border:none; cursor:pointer; font-size:14px; font-family:inherit; transition:all .15s; }
.btn-primary { background:#4f6ef7; color:#fff; flex:1; }
.btn-primary:hover { background:#3b54d6; }
.btn-secondary { background:#e0e0e0; color:#333; }
.btn-secondary:hover { background:#d0d0d0; }
.btn-danger { background:#ff5252; color:#fff; }
.list-tab { flex:1; padding:7px 0; border:1px solid #e5e5e5; border-radius:8px; background:#fff; color:#666; font-size:12px; cursor:pointer; font-family:inherit; transition:all .15s; }
.list-tab:hover { background:#f0f0f0; }
.list-tab.active { background:#4f6ef7; color:#fff; border-color:#4f6ef7; }

/* AI 确认弹窗内条目 */
.preview-item { padding:9px; border-bottom:1px dashed #eee; font-size:13px; }
.preview-item:last-child { border-bottom:none; }
.preview-item input[type=datetime-local], .preview-item select, .preview-item input[type=text] {
  border:1px solid #ccc; border-radius:6px; padding:5px; font-size:12px; margin-top:4px; background:#fff; color:#333;
}

/* ---------- 9) 提示 / 加载 / 灯箱 ---------- */
.toast {
  position:fixed; top:16px; right:16px; background:#333; color:#fff; padding:11px 18px;
  border-radius:8px; font-size:13px; opacity:0; transition:opacity .15s; z-index:9999;
  pointer-events:none; max-width:80vw;
}
.toast.show { opacity:1; }
.toast.success { background:#52c41a; }
.toast.error { background:#ff4d4f; }
/* 顶部居中提示（保存确认等） */
.toast.center {
  top:14px; left:50%; right:auto;
  transform:translateX(-50%);
  padding:9px 22px; border-radius:20px;
}
/* 保存确认：灰色低饱和底、白字、降低透明度(降低侵入感) */
.toast.save {
  background:rgba(120,120,120,.72);   /* 低饱和灰 + 透明度 */
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.loading { display:none; text-align:center; padding:10px; color:#4f6ef7; font-size:14px; }
.loading.show { display:block; }
.error { color:#cf1322; background:#fff1f0; padding:10px 14px; border-radius:8px; margin-top:10px; display:none; font-size:13px; }
.error.show { display:block; }
.busy-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10000; display:none; align-items:center; justify-content:center; }
.busy-overlay.show { display:flex; }
.busy-card { background:#fff; border-radius:14px; padding:30px 44px; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.busy-card .spinner-big { width:44px; height:44px; border:4px solid #d4dcff; border-top-color:#4f6ef7; border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 16px; }
.busy-card .busy-text { font-size:15px; color:#1f2329; }
@keyframes spin { to { transform:rotate(360deg); } }
.img-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; display:none; align-items:center; justify-content:center; cursor:zoom-out; }
.img-lightbox.show { display:flex; }
.img-lightbox img { max-width:90vw; max-height:90vh; border-radius:6px; }

/* ---------- 10) 底部导航(4页切换) ---------- */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; height:56px; background:#fff;
  border-top:1px solid #eee; display:flex; z-index:1000;
  max-width:900px; margin:0 auto; left:50%; transform:translateX(-50%); width:100%;
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; color:#999; font-size:11px; background:none; border:none;
  font-family:inherit; transition:color .15s;
}
.nav-item .nav-icon { font-size:20px; line-height:1; }
.nav-item.active { color:#4f6ef7; font-weight:600; }
.nav-item:hover { color:#4f6ef7; }

/* ---------- 11) 登录页 ---------- */
.login-wrap {
  max-width:340px; margin:80px auto 0; text-align:center;
}
.login-logo { font-size:56px; margin-bottom:12px; }
.login-title { font-size:22px; color:#1a1a2e; margin-bottom:8px; }
.login-sub { color:#999; font-size:13px; margin-bottom:28px; }
.login-field { margin-bottom:14px; text-align:left; }
.login-field label { display:block; font-size:13px; color:#666; margin-bottom:6px; }
.login-field input {
  width:100%; border:1px solid #ddd; border-radius:10px; padding:12px 14px;
  font-size:15px; font-family:inherit; background:#fff; color:#333;
}
.login-field input:focus { outline:none; border-color:#4f6ef7; }
.login-btn {
  width:100%; padding:13px; border:none; border-radius:10px; background:#4f6ef7;
  color:#fff; font-size:15px; cursor:pointer; margin-top:8px; font-family:inherit;
}
.login-btn:hover { background:#3b54d6; }
/* 登录/注册模式切换按钮 */
.login-mode-btn {
  flex:1; padding:10px 0; border:1px solid #e0e0e0; border-radius:10px;
  background:#fff; color:#666; font-size:14px; cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.login-mode-btn.active { background:#4f6ef7; color:#fff; border-color:#4f6ef7; }
.login-mode-btn:hover { border-color:#4f6ef7; }
.login-hint { margin-top:16px; font-size:12px; color:#bbb; line-height:1.6; }

/* --- 微信登录（memorecall0.1 新增，与网页版风格统一）--- */
.wx-login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 14px; color: #c0c4cc; font-size: 12px;
}
.wx-login-divider::before,
.wx-login-divider::after {
  content: ''; flex: 1; height: 1px; background: #e8eaee;
}
.wx-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #07c160; color: #fff;
}
.wx-login-btn:hover { background: #06ad56; }
.wx-login-btn .wx-icon { flex-shrink: 0; }
.wx-login-btn .wx-icon path { fill: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width:600px) {
  .cal-day { border-radius:8px; }
  .day-num { font-size:13px; }
  .page { padding:16px 12px calc(90px + env(safe-area-inset-bottom)); }   /* 底部预留导航+safe区，避免底部备注被遮 */
  .input-dock { padding:0 8px 4px; }
}

/* ============================================================
   3.2 顺序工作流专项（笔记页）
   ============================================================ */
.wf-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; margin-top:2px; }
.wf-title { font-size:14px; font-weight:700; color:#1a1a2e; flex:1; }
.wf-empty { font-size:12px; color:#999; background:#fafafa; border:1px dashed #ddd; border-radius:10px; padding:14px; text-align:center; line-height:1.8; }
.wf-card { border:1px solid #eee; border-radius:12px; margin-bottom:10px; background:#fff; overflow:hidden; }
.wf-card.done { opacity:.8; }
.wf-card-head { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; }
.wf-card-head:active { background:#fafbff; }
.wf-folder { font-size:20px; }
.wf-card-info { flex:1; min-width:0; }
.wf-card-title { font-size:14px; font-weight:700; color:#1a1a2e; word-break:break-word; }
.wf-card-meta { font-size:11px; color:#999; margin-top:3px; }
.wf-card-meta b { color:#4f6ef7; }
.wf-done-tag { display:inline-block; font-size:11px; color:#089981; background:#e6f7f1; padding:2px 8px; border-radius:10px; }
.wf-progress { height:4px; background:#eef0f6; border-radius:4px; margin-top:8px; overflow:hidden; }
.wf-progress-bar { height:100%; background:linear-gradient(90deg,#6a8cff,#4f6ef7); border-radius:4px; transition:width .15s ease; }
.wf-chev { color:#bbb; font-size:12px; }
.wf-card-body { border-top:1px solid #f2f2f2; padding:8px 14px 12px; background:#fcfcfe; }
.wf-divider { height:1px; background:#f0f0f0; margin:14px 0 12px; }

/* ---------- 笔记搜索框 ---------- */
.notes-search-wrap {
  position:relative;
  display:flex;
  align-items:center;
  margin-bottom:12px;
}
.notes-search-icon {
  position:absolute;
  left:11px;
  font-size:14px;
  color:#bbb;
  pointer-events:none;
}
.notes-search {
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:8px 34px 8px 32px;
  font-size:14px;
  font-family:inherit;
  color:#333;
  background:#f7f8fa;
  outline:none;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.notes-search::placeholder { color:#bbb; }
.notes-search:focus {
  border-color:#4f6ef7;
  background:#fff;
  box-shadow:0 0 0 3px rgba(79,110,247,.12);
}
.notes-search-clear {
  position:absolute;
  right:10px;
  font-size:14px;
  color:#ccc;
  cursor:pointer;
  padding:2px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s;
}
.notes-search-wrap.has-text .notes-search-clear {
  opacity:1;
  pointer-events:auto;
}
.notes-search-empty {
  text-align:center;
  color:#bbb;
  padding:30px 0;
  font-size:13px;
}
.wf-step { display:flex; align-items:flex-start; gap:10px; padding:9px 6px; border-radius:8px; }
.wf-step.current { background:#f0f4ff; }
.wf-step.done { opacity:.6; }
.wf-step-check { display:flex; align-items:center; gap:6px; margin-top:2px; cursor:pointer; }
.wf-check { width:18px; height:18px; accent-color:#4f6ef7; cursor:pointer; }
.wf-check:disabled { cursor:not-allowed; }
.wf-step-num { font-size:11px; color:#4f6ef7; font-weight:700; background:#e6ebff; border-radius:6px; padding:1px 6px; }
.wf-step.done .wf-step-num { background:#e6f7f1; color:#089981; }
.wf-step-info { flex:1; min-width:0; }
.wf-step-content { font-size:13px; color:#333; word-break:break-word; }
.wf-step-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.wf-tag { font-size:10px; padding:1px 7px; border-radius:8px; }
.wf-tag.current { background:#4f6ef7; color:#fff; }
.wf-tag.done { background:#e6f7f1; color:#089981; }
.wf-tag.due { background:#fff7e6; color:#d46b08; }
.wf-card-foot { text-align:right; margin-top:6px; }
.wf-del { color:#cf1322 !important; border-color:#ffd6d6 !important; background:#fff !important; }
.btn-sm { padding:5px 12px !important; font-size:12px !important; }
.wf-hint { font-size:11px; color:#999; margin-top:6px; }
#wfStepsEdit .wf-step-edit-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.wf-step-edit-num { width:18px; text-align:right; color:#4f6ef7; font-weight:700; font-size:12px; }
#wfStepsEdit .wf-step-edit { flex:1; border:1px solid #e5e5e5; border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; background:#fff; }
.wf-step-del { border:none; background:transparent; color:#bbb; font-size:16px; cursor:pointer; }
.wf-step-del:hover { color:#cf1322; }

/* ============================================================
   3.3 API 设置（管理员）
   ============================================================ */
.api-hint { font-size:11px; color:#999; margin-bottom:12px; line-height:1.6; }
.api-group { border:1px solid #eee; border-radius:10px; padding:12px; margin-bottom:12px; background:#fafbfe; }
.api-group-title { font-size:13px; font-weight:700; color:#333; margin-bottom:10px; }
.api-group label { display:block; font-size:11px; color:#888; margin:8px 0 4px; }
.api-group input[type="text"], .api-group input[type="password"] {
  width:100%; box-sizing:border-box; border:1px solid #e5e5e5; border-radius:8px; padding:9px 10px; font-size:13px; font-family:inherit; background:#fff;
}
.api-key-row { display:flex; gap:6px; align-items:center; }
.api-key-row input { flex:1; }
.api-eye { border:1px solid #e5e5e5; border-radius:8px; background:#fff; font-size:13px; cursor:pointer; padding:8px 10px; flex-shrink:0; }
.api-eye:hover { background:#f0f0f0; }
.api-placeholder { color:#999; font-style:italic; }
.api-test-result { margin:8px 0; font-size:12px; min-height:0; }
.api-test-line { padding:5px 8px; border-radius:6px; margin-bottom:4px; }
.api-test-line.ok { background:#f0f9f4; color:#089981; }
.api-test-line.fail { background:#fff1f0; color:#cf1322; }

/* --- 游客模式 + 隐私说明/关于（网页版向小程序对齐） --- */
.guest-login-btn {
  margin-top: 12px;
  background: #f5f6f8; color: #666; border: 1px dashed #c0c4cc;
}
.guest-login-btn:hover { background: #eef0f3; color: #333; }
.login-about-row {
  display: flex; justify-content: center; gap: 20px; margin-top: 14px;
}
.link-btn {
  background: none; border: none; color: #909399; font-size: 12px; cursor: pointer; padding: 4px 8px;
}
.link-btn:hover { color: #4f6ef7; text-decoration: underline; }

/* ============================================================
   工作专项：今日列表专项步骤徽标 + 可编辑弹窗 + 单步编辑弹窗
   （样式作用域限定在弹窗内，避免与笔记页卡片同名类冲突；
    视觉对齐小程序 workflow-edit / memo-edit 规格书）
   ============================================================ */
/* 今日列表里的专项步骤徽标 */
.badge.wf { background:#eef2ff; color:#4f6ef7; } /* 小程序专项徽标：浅蓝底主色字 */

/* ---------- 创建专项可编辑弹窗 #wfEditMask ---------- */
#wfEditMask .modal { max-width:360px; }
#wfEditMask .wf-title-field { margin:0 0 12px; }
#wfEditMask .wf-title-input { width:100%; box-sizing:border-box; }
#wfEditMask .wf-edit-steps { overflow-y:auto; flex:1; padding-right:4px; max-height:50vh; }
#wfEditMask .wf-step-edit { padding:11px 0; border-bottom:1px dashed #eee; }
#wfEditMask .wf-step-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
#wfEditMask .wf-step-no { font-size:13px; color:#4f6ef7; font-weight:700; } /*「第N步」主色加粗 */
#wfEditMask .wf-step-del { font-size:12px; color:#f5563f; cursor:pointer; background:none; border:none; }
#wfEditMask .wf-step-load textarea, #wfEditMask .wf-step-content {
  width:100%; box-sizing:border-box; min-height:40px; resize:vertical;
  border:1px solid #eee; border-radius:7px; padding:8px 10px;
  font-size:14px; line-height:1.5; background:#f7f8fa; color:#333; font-family:inherit;
}
#wfEditMask .wf-step-content:focus { outline:none; border-color:#4f6ef7; background:#fff; }
/* 日期/时间双胶囊（对齐 workflow-edit 的 .pv-time-cell/.pv-field） */
#wfEditMask .pv-label, #wfStepMask .pv-label { display:block; font-size:12px; color:#888; margin:8px 0 5px; }
#wfEditMask .pv-time-row { display:flex; gap:8px; align-items:center; }
#wfEditMask .pv-time-row > .pv-cell { flex:1; width:auto; min-width:0; }
#wfEditMask .pv-time-cell { flex:1; min-width:0; }
#wfEditMask .pv-cell {
  position:relative; display:flex; align-items:center; gap:6px; width:100%; box-sizing:border-box;
  background:#fff; border:1px solid #ddd; border-radius:8px; padding:7px 9px; cursor:pointer;
}
#wfEditMask .pv-cell.ph { border-color:#e3e5ea; }
#wfEditMask .pv-cell .pv-ph { flex:1; min-width:0; font-size:13px; color:#bbb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wfEditMask .pv-cell .pv-icon { color:#999; font-size:13px; flex-shrink:0; }
/* 原生 date/time 输入透明铺满接收点击，由系统弹选择器；显示值由 .pv-ph 承担 */
#wfEditMask .pv-cell > input[type="date"], #wfEditMask .pv-cell > input[type="time"] {
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
#wfEditMask .wf-time-clear { display:inline-block; font-size:11px; color:#888; margin-top:6px; cursor:pointer; }
#wfEditMask .wf-time-clear:hover { color:#4f6ef7; }
#wfEditMask .wf-add {
  margin-top:10px; text-align:center; color:#4f6ef7; font-size:14px;
  padding:9px; border:1px dashed #c7d0fb; border-radius:8px; cursor:pointer;
}
#wfEditMask .wf-add:hover { background:#f4f7ff; }

/* ---------- 单步编辑弹窗 #wfStepMask ---------- */
#wfStepMask .pv-time-row { display:flex; gap:8px; align-items:center; }
#wfStepMask .pv-time-row > .pv-cell { flex:1; width:auto; min-width:0; }
#wfStepMask .pv-cell {
  position:relative; display:flex; align-items:center; gap:6px; width:100%; box-sizing:border-box;
  background:#fff; border:1px solid #ddd; border-radius:8px; padding:7px 9px; cursor:pointer;
}
#wfStepMask .pv-cell.ph { border-color:#e3e5ea; }
#wfStepMask .pv-cell .pv-ph { flex:1; min-width:0; font-size:13px; color:#bbb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wfStepMask .pv-cell .pv-icon { color:#999; font-size:13px; flex-shrink:0; }
#wfStepMask .pv-cell > input[type="date"], #wfStepMask .pv-cell > input[type="time"] {
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}

#wfStepMask .modal { max-width:360px; }
#wfStepMask .edit-content {
  width:100%; box-sizing:border-box; min-height:60px; resize:vertical;
  border:1px solid #ddd; border-radius:8px; padding:8px 10px;
  font-size:14px; line-height:1.5; background:#fff; color:#333; font-family:inherit;
}
#wfStepMask .edit-content:focus { outline:none; border-color:#4f6ef7; }
#wfStepMask .edit-time-row { display:flex; gap:8px; align-items:center; }
#wfStepMask .time-cell { flex:1; min-width:0; }
#wfStepMask .edit-picker {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  border:1px solid #ddd; border-radius:8px; padding:8px 9px;
  font-size:13px; color:#333; background:#fff; box-sizing:border-box;
}
#wfStepMask .edit-picker input[type="date"], #wfStepMask .edit-picker input[type="time"] {
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:13px; color:#333; font-family:inherit; -webkit-appearance:none; appearance:none;
}
#wfStepMask .edit-picker.ph { border-color:#e3e5ea; }
#wfStepMask .edit-picker.ph input { color:#bbb; }
#wfStepMask .picker-arrow { color:#bbb; font-size:12px; flex-shrink:0; }
#wfStepMask .wf-time-clear { font-size:11px; color:#888; cursor:pointer; white-space:nowrap; }
#wfStepMask .wf-time-clear:hover { color:#4f6ef7; }