/* ============================================================
   模拟管家 - 使用端样式
   风格：奶油系治愈 + 圆润大按钮
   ============================================================ */

* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg-main: #fdf6e9;
  --bg-card: #ffffff;
  --bg-module: #fff4dc;
  --accent: #88c9a1;
  --accent-deep: #5fa37a;
  --pink: #f7b7c4;
  --pink-deep: #e88ba0;
  --warn: #f4a261;        /* 即将到期 */
  --danger: #e76f51;      /* 过期 */
  --text: #4a3f35;
  --text-light: #9a8b7a;
  --border: #ece1c8;
  --shadow: 0 4px 16px rgba(150, 120, 90, 0.12);
  --shadow-strong: 0 8px 24px rgba(150, 120, 90, 0.18);
  --radius: 18px;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-main);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  /* v10.9 修复：原来写 pan-y（只允许纵向滚动，横向交给浏览器仲裁），
     真机上横向手势会被浏览器接管，表现为「第一次能滑、第二次失灵」。
     改成 pan-y pinch-zoom 明确禁止横向 pan，横向手势完全由我们的 touchend 处理。 */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

/* ============================================================
   v7: 横向滑动 track 容器（日常页 + 收纳页水平排列）
   ============================================================ */
.viewport {
  width: 100vw;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  position: relative;
  /* v10.9: 横向滑动由 JS 接管，禁止浏览器拦截成返回手势 */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}
.track {
  display: flex;
  flex-direction: row;
  /* v10.6: 7 屏（clone-cats + app + storage + shopping + cats + rental + clone-app）实现无缝循环 */
  width: 700vw;
  height: 100vh; height: 100dvh;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  /* v9.1 修复：默认偏移 -100vw（= 显示第二屏 = page-0 日常页），
     防止 PocketBay 截图工具渲染时 .viewport 没有 .page-x 类，
     导致 track 没有任何 translateX，左右两半屏拼接（购物 + 模拟管家）。
     当 .viewport 加了 .page-x 类时，下面的规则会覆盖此默认值。 */
  transform: translateX(-100vw);
}
/* v9.1 防御：保证 track 里每个 .app 固定占 100vw，防止 PocketBay 类环境
   下 flex 子项被压缩/换行，出现"两页叠在一起" */
.track > .app {
  flex: 0 0 100vw;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
}
/* v10.1: track 偏移逻辑（猫咪之家是最后一页）
   page 0（日常）→ track 在第 2 屏（index=1）
   page 1（计时家务）→ track 在第 3 屏（index=2）
   page 2（购物）→ track 在第 4 屏（index=3）
   page 3（猫咪之家）→ track 在第 5 屏（index=4）
   无克隆、无过渡时 只需 translateX(-N * 100vw)。下面对应修正为： */
.viewport.page-0 .track { transform: translateX(-100vw); }
.viewport.page-1 .track { transform: translateX(-200vw); }
.viewport.page-2 .track { transform: translateX(-300vw); }
.viewport.page-3 .track { transform: translateX(-400vw); }
.viewport.page-4 .track { transform: translateX(-500vw); }

/* v10.3: 循环跨屏镜像预位移。
   - mirror-cats：track 瞬时跳到 idx=0（cats 克隆位置，translateX 0vw），用于右滑到 rental 时先「看到猫页」再滑到真实页
   - mirror-app：track 瞬时跳到 idx=6（app 克隆位置，translateX -600vw），用于左滑到 app 时先「看到 app 克隆」再滑到真实 app
     注：v10.6 加了租房页后 track 变成 7 屏，clone-app 从 idx=5 挪到 idx=6，这里同步改成 -600vw
   - transition:none 让 track 瞬时跳到镜像位置，不会有入场动画
   - 下一帧去掉 mirror-* class，CSS 让 track 走真实目标位置（带 0.32s 动画）
   - 视觉上：用户右滑 → 看到 cats 克隆从右进入 → 滑到真实页
*/
.viewport.mirror-cats .track,
.viewport.mirror-app .track { transition: none !important; }
.viewport.mirror-cats .track { transform: translateX(0vw); }
.viewport.mirror-app .track { transform: translateX(-600vw); }

/* v9: 克隆页占位：用 position:absolute 隐藏起来，避免看到重复页面 */
.track > .app[id$="-clone"] {
  /* 默认不隐藏；这些都是轨道里的一部分，用户能滑到，但克隆页里我们填充的是提示文本 */
}

/* 两个 .app 兄弟节点各占 100vw，水平排在 track 内 */
#app-track {
  display: flex;
  flex-direction: column;
  width: 100vw;
  flex-shrink: 0;
  padding: 8px 10px;
  gap: 6px;
}

/* 收纳页同 .app 的 flex layout */
.page-storage {
  display: flex;
  flex-direction: column;
  width: 100vw;
  flex-shrink: 0;
  background: var(--bg-main);
  padding: 8px 10px;
  gap: 6px;
}

.page-dots {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 50;
  pointer-events: auto;
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(150, 120, 90, 0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.dot.active {
  background: var(--accent-deep);
  transform: scale(1.4);
}

/* ============================================================
   v10.6: 租房清单页
   ============================================================ */
.page-rental {
  display: flex;
  flex-direction: column;
  width: 100vw;
  flex-shrink: 0;
  background: var(--bg-main);
  padding: 8px 10px;
  gap: 6px;
}
.page-rental .page-hint { font-size: 11px; }
.rental-main {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.rental-main::-webkit-scrollbar { width: 4px; }
.rental-main::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* 模块卡片 */
.rental-module {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.rental-module--list { flex: 0 0 auto; }

/* 模块标题行 */
.rental-module-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-deep);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
/* 数字角标 */
.rental-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.rental-badge:empty, .rental-badge[data-zero="1"] {
  background: rgba(150, 120, 90, 0.22);
  color: var(--text-light);
}
.rental-badge--restore { background: var(--warn); }
.rental-badge--items { background: var(--accent-deep); }

/* 模块 1：入驻照片按钮 */
.rental-photo-actions {
  display: flex;
  gap: 8px;
}
.rental-photo-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--bg-module);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.rental-photo-btn:active { transform: scale(0.95); border-color: var(--accent); }
.rental-photo-btn-icon { font-size: 26px; line-height: 1; }
.rental-photo-btn-text { font-size: 12px; color: var(--text); font-weight: 600; }
.rental-photo-btn--cam { background: #fff2e0; }
.rental-photo-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
}

/* v10.15：移动端连续多选提示条（默认隐藏，选中后才出现） */
.rental-multi-select {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.rental-multi-select.show {
  display: flex;
}
.rental-multi-select-text {
  font-size: 12px;
  color: #15803d;
  font-weight: 600;
}
.rental-multi-select-done {
  border: 1px solid #15803d;
  background: #f0fdf4;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 28px;
}
.rental-multi-select-done:active {
  background: #dcfce7;
}

/* 模块 2+3：清单入口按钮 */
.rental-list-head {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.rental-list-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  background: var(--bg-module);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  transition: transform 0.15s, border-color 0.2s;
}
.rental-list-btn:active { transform: scale(0.96); border-color: var(--accent); }
.rental-list-btn-icon { font-size: 17px; line-height: 1; }
.rental-list-btn--reno { background: #fff2e0; }
.rental-list-btn--item { background: #eaf7ef; }

/* 底部输入框（改造 / 物品 两按钮） */
.rental-input {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.rental-input-field {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-module);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.rental-input-field:focus { border-color: var(--accent); }
.rental-input-btn {
  border: none;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: transform 0.15s, filter 0.2s;
}
.rental-input-btn:active { transform: scale(0.94); }
.rental-input-btn--reno { background: var(--warn); }
.rental-input-btn--item { background: var(--accent-deep); }
.rental-input-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.5;
}

/* 子页面（覆盖层） */
.rental-subpage {
  position: fixed;
  inset: 0;
  background: rgba(74, 63, 53, 0.42);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
}
.rental-subpage.show { display: flex; }
.rental-sub-card {
  width: 100%;
  max-height: 78vh;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-strong);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rental-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.rental-sub-header h3 { font-size: 15px; color: var(--accent-deep); }
.rental-sub-close {
  background: var(--bg-module);
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.rental-sub-close:active { transform: scale(0.92); }
.rental-sub-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.rental-sub-list {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.rental-sub-list::-webkit-scrollbar { width: 4px; }
.rental-sub-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* 清单条目 */
.rental-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--bg-module);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  animation: slideIn 0.25s ease;
}
.rental-row:active { background: var(--pink); color: white; }
.rental-row-name { flex: 1; font-weight: 500; word-break: break-all; }
.rental-row-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--warn);
  color: #fff;
  white-space: nowrap;
}
.rental-row-tag--restored { background: rgba(150, 120, 90, 0.3); color: var(--text-light); }
.rental-row--restored { opacity: 0.5; }
.rental-row--restored .rental-row-name { text-decoration: line-through; }
.rental-row-hint { font-size: 10px; color: var(--text-light); opacity: 0.75; white-space: nowrap; }
.rental-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  padding: 28px 8px;
  line-height: 1.6;
}
/* 物品行 */
.rental-item-row { cursor: pointer; }
.rental-item-photo {
  width: 34px; height: 34px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-module);
  flex-shrink: 0;
}
.rental-item-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.rental-item-prices {
  font-size: 10px;
  color: var(--text-light);
  white-space: nowrap;
  text-align: right;
  line-height: 1.4;
}

/* 还原选择弹窗 */
.rental-restore-picker {
  position: fixed;
  inset: 0;
  background: rgba(74, 63, 53, 0.42);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}
.rental-restore-picker.show { display: flex; }
.rental-restore-card {
  width: 100%;
  max-width: 320px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 18px;
  text-align: center;
}
.rental-restore-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.rental-restore-text {
  font-size: 13px;
  color: var(--accent-deep);
  margin-bottom: 14px;
  word-break: break-all;
  line-height: 1.5;
}
.rental-restore-options {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.rental-restore-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--bg-module);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.rental-restore-opt:active { transform: scale(0.95); }
.rental-restore-opt-icon { font-size: 22px; }
.rental-restore-opt--yes { background: #fff2e0; }
.rental-restore-opt--no { background: #eaf7ef; }
.rental-restore-cancel {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
}
.rental-restore-cancel:active { background: var(--bg-module); }

/* 物品编辑弹窗 */
.rental-item-edit {
  position: fixed;
  inset: 0;
  background: rgba(74, 63, 53, 0.42);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}
.rental-item-edit.show { display: flex; }
.rental-item-edit-card {
  width: 100%;
  max-width: 320px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 16px;
}
.rental-item-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rental-item-edit-header h3 { font-size: 15px; color: var(--accent-deep); }
.rental-item-edit-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rental-item-edit-photo img {
  width: 110px; height: 110px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--bg-module);
}
/* 无照片时的占位（img 隐藏时显示） */
.rental-item-edit-photo-empty {
  width: 110px; height: 110px;
  border-radius: 14px;
  background: var(--bg-module);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.rental-item-edit-photo img:not([src]) { display: none; }
.rental-item-edit-photo button {
  background: var(--bg-module);
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.rental-item-edit-field {
  display: block;
  margin-bottom: 10px;
}
.rental-item-edit-field span {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 4px;
}
.rental-item-edit-field input {
  width: 100%;
  background: var(--bg-module);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.rental-item-edit-field input:focus { border-color: var(--accent); }
.rental-item-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.rental-item-edit-delete {
  flex: 1;
  background: #ffeceb;
  border: none;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
  font-family: inherit;
}
.rental-item-edit-save {
  flex: 2;
  background: var(--accent-deep);
  border: none;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  font-family: inherit;
}
.rental-item-edit-delete:active, .rental-item-edit-save:active { transform: scale(0.96); }

/* ============================================================
   布局
   ============================================================ */

.app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  padding: 8px 10px;
  gap: 6px;
}

/* ============================================================
   顶部：标题 + 公告栏（固定不动）
   ============================================================ */
.header {
  display: flex; flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.title {
  font-size: 16px; font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: 1px;
  padding: 0 4px;
}

.announcement-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 88px;
  overflow-y: auto;
  padding: 2px 2px;
}
.announcement-bar::-webkit-scrollbar { height: 4px; }
.announcement-bar::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.ann-empty {
  font-size: 12px; color: var(--text-light);
  background: var(--bg-card);
  border-radius: 12px;
  padding: 4px 10px;
}

.ann-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  border-left: 3px solid var(--warn);
  cursor: pointer;
  transition: transform 0.15s;
  animation: ann-in 0.3s ease;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 100%;
}
.ann-item:active { transform: scale(0.96); }
.ann-item.overdue { border-left-color: var(--danger); }
/* v7: 公告任务——发布出去的任务。底色（不靠左边描边区别），与过期项区分 */
.ann-item.task {
  background: #e7f0ff;
  border-left-color: #6b8cff;
}
.ann-item.task .ann-status {
  background: #6b8cff;
}
.ann-item.task .ann-tag {
  background: #6b8cff;
  color: white;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.ann-close {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 12px;
  padding: 0 2px;
  margin-left: 2px;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
}
.ann-close:active { opacity: 1; color: var(--pink-deep); }

.ann-icon { font-size: 14px; }
.ann-name { font-weight: 600; white-space: nowrap; }
.ann-status {
  white-space: nowrap;
  background: var(--warn); color: white;
  padding: 1px 6px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
}
.ann-item.overdue .ann-status { background: var(--danger); }
.ann-freq {
  background: var(--bg-module);
  color: var(--text-light);
  padding: 1px 6px; border-radius: 6px;
  font-size: 11px;
}

/* v8: 轮值人 tag —— 与 ann-freq 同高，紫色调，突出轮值语义 */
.ann-doer-tag {
  background: linear-gradient(135deg, #c084fc, #a855f7);
  color: white;
  padding: 2px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

@keyframes ann-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   主体：左右两栏
   ============================================================ */
.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* ============================================================
   左侧：按钮区（独立滚动）
   ============================================================ */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  min-height: 0;
}
.left-panel::-webkit-scrollbar { width: 4px; }
.left-panel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.module {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: var(--shadow);
}

.module-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.module-title {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.module-count {
  font-size: 11px; color: var(--text-light);
  margin-left: auto;
}

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.task-btn {
  background: var(--bg-module);
  border: none;
  border-radius: 14px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  box-shadow: 0 2px 6px rgba(150, 120, 90, 0.08);
  min-height: 70px;
}
.task-btn:active {
  transform: scale(0.94);
  background: #ffe9c2;
}
.task-emoji { font-size: 24px; }
.task-label { font-size: 13px; font-weight: 500; color: var(--text); }

/* v10.2: 猫咪之家「上次完成时间」角标（按钮下方一行） */
.cat-last-time {
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 500;
  margin-top: 2px;
  background: rgba(150, 150, 150, 0.18);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.cat-last-time.today   { background: rgba(34, 197, 94, 0.18);  color: #15803d; } /* 綠 */
.cat-last-time.recent  { background: rgba(245, 158, 11, 0.20); color: #b45309; } /* 1~3天 · 橙黄 */
.cat-last-time.mid     { background: rgba(234, 88, 12, 0.22);  color: #9a3412; } /* 4~7天 · 深橙 */
.cat-last-time.long    { background: rgba(239, 68, 68, 0.22);  color: #b91c1c; } /* 7天以上 · 紅 */
.cat-last-time.never   { background: rgba(150, 150, 150, 0.18); color: #6b7280; }

/* v6: 公告状态描边（四周描边 + 较粗） */
.task-btn.task-soon {
  border: 4px solid #f59e0b;
  box-shadow: 0 2px 6px rgba(150, 120, 90, 0.08);
}
.task-btn.task-overdue {
  border: 4px solid #ef4444;
  box-shadow: 0 2px 6px rgba(150, 120, 90, 0.08);
}

/* ============================================================
   右侧：历史记录
   ============================================================ */
.right-panel {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 0;
}

.history-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  border-bottom: 1px dashed var(--border);
  flex-shrink: 0;
}
.history-title { font-size: 13px; font-weight: 600; }
.export-btn {
  background: var(--accent); color: white; border: none;
  border-radius: 10px; padding: 4px 10px;
  font-size: 11px; cursor: pointer; font-weight: 500;
}
.export-btn:active { background: var(--accent-deep); }

.history-list {
  flex: 1; overflow-y: auto;
  padding: 6px 8px;
  min-height: 0;
}
.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.loading {
  text-align: center; color: var(--text-light);
  padding: 16px; font-size: 12px;
}

/* v10.3: 历史加载失败提示（含「点击重试」按钮） */
.history-error { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.history-error-icon { font-size: 22px; }
.history-error-msg { color: #b91c1c; font-size: 12px; text-align: center; }
.history-error-retry {
  margin-top: 4px; padding: 6px 14px;
  background: var(--accent, #ec4899); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.history-error-retry:active { opacity: 0.7; }
.history-error-inline { margin: 8px 12px; padding: 10px;
  background: rgba(185,28,28,0.08); border-radius: 8px; }

.history-day { margin-bottom: 10px; }
.history-day-label {
  font-size: 11px; color: var(--text-light);
  margin: 4px 0; padding: 2px 8px;
  background: var(--bg-module);
  border-radius: 8px;
  display: inline-block;
  font-weight: 500;
}

.history-item {
  background: var(--bg-module);
  border-radius: 12px;
  padding: 6px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.4;
  border-left: 3px solid var(--accent);
  animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 计时家务：来自第二个页面（计时家务）的记录，底色/左边条与普通区分 */
.history-item.timer-task {
  background: #ffd591;
  border-left: 3px solid #d97706;
}
/* v7: 发布任务完成后产生的记录：波雪紫底，与普通家务（米黄）、计时家务（橙黄）都不同 */
.history-item.is-task {
  background: #e9d5ff;
  border-left: 3px solid #a855f7;
}
@keyframes slideIn {
  0% { opacity: 0; transform: translateX(16px) scale(0.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.history-row {
  display: flex; align-items: flex-start; gap: 4px;
}
.history-content { flex: 1; min-width: 0; }
.history-line {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px;
}

.history-time {
  color: var(--text-light); font-size: 11px;
}
.history-item-name {
  font-weight: 600;
  font-size: 13px;
}

/* Doer tags */
.doer-tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 2px;
}
.doer-tag {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 10px;
  padding: 1px 8px 1px 2px;
  font-size: 11px;
  font-weight: 500;
  background: white;
  border: 1px solid var(--border);
}
.doer-tag .avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}
.doer-tag.girl {
  background: #ffe5ec;
  color: var(--pink-deep);
  border: 1px solid var(--pink);
}
.doer-tag.boy {
  background: #e3f3e9;
  color: var(--accent-deep);
  border: 1px solid var(--accent);
}
.doer-tag.together {
  background: linear-gradient(90deg, #ffe5ec 50%, #e3f3e9 50%);
  color: var(--text);
  border: 1px solid var(--pink);
  font-weight: 600;
}

.history-note {
  color: var(--text-light); font-size: 11px;
  margin-top: 2px;
}

/* v6: 收纳计时徽章 */
.history-duration {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

.delete-btn {
  background: transparent; border: none;
  color: var(--text-light); font-size: 14px;
  cursor: pointer; padding: 0 4px;
  opacity: 0.5; flex-shrink: 0;
  transition: opacity 0.2s, color 0.2s;
  line-height: 1;
}
.delete-btn:hover, .delete-btn:active {
  opacity: 1; color: var(--pink-deep);
}

/* ============================================================
   底部固定
   ============================================================ */
.footer {
  display: flex; gap: 6px; padding: 2px;
  flex-shrink: 0;
}
.note-input {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px; color: var(--text);
  outline: none;
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
}
.note-input:focus { border-color: var(--accent); }
.record-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--accent); color: white; border: none;
  border-radius: 14px;
  padding: 0 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(95, 163, 122, 0.3);
  transition: transform 0.15s, background 0.2s;
}
.record-btn:active { transform: scale(0.95); background: var(--accent-deep); }
.publish-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--pink); color: white; border: none;
  border-radius: 14px;
  padding: 0 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(232, 139, 160, 0.3);
  transition: transform 0.15s, background 0.2s;
}
.publish-btn:active { transform: scale(0.95); background: var(--pink-deep); }

/* ============================================================
   选人弹层
   ============================================================ */
.picker-overlay {
  position: fixed; inset: 0;
  background: rgba(74, 63, 53, 0.4);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.25s ease;
}
.picker-overlay.show { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.picker-card {
  background: var(--bg-card);
  border-radius: 22px;
  padding: 18px 22px;
  min-width: 280px; max-width: 90vw;
  box-shadow: var(--shadow-strong);
  text-align: center;
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.7) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.picker-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.picker-item {
  font-size: 12px; color: var(--text-light);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.picker-item .picker-icon { font-size: 16px; }

.picker-people {
  display: flex; gap: 12px; justify-content: center; margin-bottom: 12px;
}
.person-btn {
  background: var(--bg-module); border: 3px solid transparent;
  border-radius: 18px; padding: 10px 18px;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 86px;
}
.person-btn:active { transform: scale(0.92); }
.person-btn.selected[data-person="淇淇"] {
  border-color: var(--pink-deep);
  background: #fff0f4;
  transform: translateY(-2px);
}
.person-btn.selected[data-person="若愚"] {
  border-color: var(--accent-deep);
  background: #e8f7ee;
  transform: translateY(-2px);
}

.avatar {
  font-size: 36px;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: white; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(150, 120, 90, 0.12);
}
.avatar-girl { background: linear-gradient(135deg, #ffe0e8, #fff5f8); }
.avatar-boy  { background: linear-gradient(135deg, #d8efe2, #f0faf4); }
.avatar-image {
  background: white;
  overflow: hidden;
  padding: 0;
}
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.person-name { font-size: 13px; font-weight: 600; }

.picker-actions {
  display: flex; gap: 8px; justify-content: center;
}
.picker-cancel, .picker-confirm {
  border: none; border-radius: 12px;
  padding: 7px 18px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.picker-cancel {
  background: var(--bg-module); color: var(--text);
}
.picker-cancel:active { background: #ffe9c2; transform: scale(0.95); }
.picker-confirm {
  background: var(--accent); color: white;
}
.picker-confirm:active { background: var(--accent-deep); transform: scale(0.95); }
.picker-confirm:disabled {
  background: #d8d8d8; cursor: not-allowed;
}

/* ============================================================
   确认弹窗
   ============================================================ */
/* ============================================================
   点击特效
   ============================================================ */
.click-fx {
  position: fixed; pointer-events: none;
  font-size: 22px;
  animation: floatUp 1s ease-out forwards;
  z-index: 999;
}
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-70px) scale(1.4) rotate(20deg); }
}

/* ============================================================
   v6: 收纳页样式
   ============================================================ */
.page-hint {
  font-size: 11px; color: var(--text-light);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 4px 10px;
  margin-top: 4px;
}

.storage-main {
  display: flex;
  grid-template-columns: none;
  flex: 1;
  min-height: 0;
}
.storage-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
}
.storage-actions {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.storage-btn {
  background: var(--bg-card);
  border: none;
  border-radius: 22px;
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, background 0.2s;
  min-width: 140px;
}
.storage-btn:active { transform: scale(0.94); background: var(--bg-module); }
.storage-emoji { font-size: 64px; }
.storage-label { font-size: 18px; font-weight: 600; color: var(--text); }

.storage-timer {
  background: var(--bg-card);
  border-radius: 22px;
  padding: 24px 32px;
  box-shadow: var(--shadow-strong);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.storage-timer.hidden { display: none; }
.storage-empty {
  color: var(--text-light);
  font-size: 13px;
  padding: 16px;
  text-align: center;
}
.storage-emoji-big { font-size: 72px; }
.storage-action-name {
  font-size: 16px; font-weight: 600;
  color: var(--accent-deep);
}
.storage-time {
  font-size: 42px; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}
.storage-hint {
  font-size: 11px; color: var(--text-light);
}
.storage-stop-btn {
  background: var(--pink-deep);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.15s, background 0.2s;
}
.storage-stop-btn:active { transform: scale(0.94); background: #d77790; }

/* ============================================================
   v10: 猫咪之家样式
   ============================================================ */
.page-cats {
  display: flex;
  flex-direction: column;
  width: 100vw;
  flex-shrink: 0;
  background: var(--bg-main);
  padding: 8px 10px;
  gap: 6px;
}
.page-cats .title {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* v10.5：体重入口改成带文字的按钮（原为光秃秃的 ⚖️ 图标） */
.cat-weight-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
  padding: 5px 12px;
  background: var(--bg-module);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s;
  line-height: 1.2;
  white-space: nowrap;
}
.cat-weight-btn-icon { font-size: 14px; line-height: 1; }
.cat-weight-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-weight-btn:active { transform: scale(0.94); }

/* ============================================================
   v11.0：管理端入口按钮（使用端每一页都有 → /admin）
   用 <a> 实现，点击整页跳转到管理端，不依赖任何 JS
   ============================================================ */
.admin-entry-btn {
  text-decoration: none;   /* 去掉链接下划线 */
  color: var(--text);       /* 覆盖 <a> 默认蓝色 */
  white-space: nowrap;
}
.admin-entry-btn:hover { text-decoration: none; }
.admin-entry-btn:active { transform: scale(0.94); }

/* 体重本浮层（modal） */
.cat-weight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 20, 0.55);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.cat-weight-overlay.show { display: flex; }
.cat-weight-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 12px 20px 16px;
  width: min(92vw, 420px);
  /* v10.5：等比例适配当前屏幕。用 dvh（动态视口高）而不是 vh，
     小屏手机上不再超高看不到底部的日期/保存按钮。
     min(92vh, 92dvh) 兼容不支持 dvh 的旧浏览器。 */
  max-height: min(92vh, 92dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-strong);
}
.cat-weight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cat-weight-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.cat-weight-close {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-light);
  padding: 0 4px;
  line-height: 1;
}
.cat-weight-close:hover { color: var(--text); }
.cat-weight-chart-wrap {
  position: relative;
  background: var(--bg-module);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  /* v10.5：图表高度随视口等比缩放。
     下限 190px 是硬约束：viewBox 是 360x210，顶部要放下最多 3 层事件文字
     （每层 12.5px，共约 46px）。压到 180px 以下时（扣掉 padding 只剩 156px）
     整张图会被缩到 96px，事件文字互相叠字。
     上限压到 220px，给下方的体重列表和折叠标题腾位置。 */
  height: clamp(190px, 30dvh, 220px);
  min-height: 190px;
  flex-shrink: 0;
}
.cat-weight-chart {
  width: 100%;
  height: 100%;
  display: block;
}
/* v10.5 修 BUG：空态提示原来用 `position:absolute; inset:0`，但它同时被
   app.js 注入到 #cat-weight-list 里（父级 position:static），导致该元素找不到
   包含块、逃逸出去铺满整个浮窗（实测 756x454），把按钮/体重/日期/保存全部挡住
   → 用户表现为「日期和体重都点不了，没有输入框」。
   修法：只有图表区内的空态才允许绝对定位，列表空态回归普通文档流。 */
.cat-weight-chart-wrap .cat-weight-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 图表空态不拦截点击 */
}
.cat-weight-empty {
  color: var(--text-light);
  font-size: 14px;
  text-align: center;
  padding: 14px 8px;
}
/* v10.5：表单改竖向单列，小屏不再被挤成两列导致点不准 / 看不全 */
.cat-weight-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 9px;
}
.cat-weight-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
}
.cat-weight-field input {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}
.cat-weight-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.cat-weight-save {
  width: 100%;
  padding: 11px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cat-weight-save:hover { background: var(--accent-deep); }
.cat-weight-save:active { transform: scale(0.97); }
.cat-weight-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* v10.5：列表自己内部滚动，不把整个浮窗撑高。
     调矮是为了给下方的「事件标注」「称重提醒」腾位置。 */
  max-height: clamp(70px, 10dvh, 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cat-weight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-module);
  border-radius: 10px;
  font-size: 13px;
}
.cat-weight-row-val { font-weight: 700; color: var(--text); }
.cat-weight-row-date { color: var(--text-light); font-size: 12px; }
.cat-weight-row-del {
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

/* v10.5：可折叠分区的标题（点击展开/收起）
   体重本内容变多（体重 + 事件 + 提醒），全展开会把图表顶出屏，
   所以事件/提醒默认收起，只显示一行摘要，点一下才展开。 */
.cat-weight-section-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 13px 0 7px;
  padding: 10px 0 0;
  background: transparent;
  border: none;
  border-top: 1px dashed var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.cat-weight-section-toggle .cat-weight-section-title {
  margin: 0;
  padding: 0;
  border-top: none;
}
.cat-weight-caret {
  color: var(--text-light);
  font-size: 11px;
  transition: transform 0.18s;
  display: inline-block;
}
.cat-weight-section-toggle[aria-expanded="true"] .cat-weight-caret {
  transform: rotate(90deg);
}
.cat-weight-section-toggle[aria-expanded="true"] {
  padding-bottom: 2px;
}

/* v10.5: 测量间隔标签（画在折线两点的中点上）
   白描边 + 半透明填充，压在折线上也能读清。 */
.cat-weight-gap-label {
  font-weight: 700;
  letter-spacing: 0.2px;
  pointer-events: none;
  user-select: none;
}

/* v10.5: 历史记录行上的间隔徽标（如「距上次 8 天」） */
.cat-weight-row-gap {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fdf3e0;
  border: 1px solid #f0dcae;
  color: #a97f3c;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 1px;
}
.cat-weight-row-gap.is-long {
  background: #fdeee6;
  border-color: #f4cdb8;
  color: #c2704a;
}

/* v10.5: 次级折叠标题（体重历史列表）—— 不需要虚线上边线，因为紧跟在表单后 */
.cat-weight-section-toggle--sub {
  margin-top: 4px;
  padding-top: 6px;
  border-top: none;
}
.cat-weight-list-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* 折叠内容区 */
.cat-weight-collapse {
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
.cat-weight-collapse.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.cat-weight-collapse:not(.collapsed) {
  max-height: 900px;
  opacity: 1;
}

/* v10.5: 体重本 —— 事件标注 / 真实时间轴 / 摘要 / 提醒
   ============================================================ */

/* 分区标题 */
.cat-weight-section-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 13px 0 7px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.cat-weight-section-title:first-of-type { border-top: none; }
.cat-weight-section-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-light);
}

/* 超期提醒条 */
.cat-weight-reminder.hidden { display: none; }
/* v10.5: 称重提醒已并入公告栏，这里的样式改为公告栏内的提醒条样式 */
.ann-item.weight-reminder { cursor: pointer; }

/* 体重摘要条 */
.cat-weight-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-module);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-light);
}
.cat-weight-summary.hidden { display: none; }
.cat-weight-summary-cur {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cat-weight-summary-cur small { font-size: 12px; font-weight: 600; color: var(--text-light); }
.cat-weight-summary-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-weight-summary-delta.up { color: #e08a5d; }
.cat-weight-summary-delta.down { color: #5aa9a0; }
.cat-weight-summary-delta.flat { color: var(--text-light); }
.cat-weight-summary-note { font-size: 11px; color: var(--text-light); }

/* 图上事件标记的可点区域 */
.cat-weight-ev-hit { cursor: pointer; pointer-events: all; }
.cat-weight-ev-label {
  font-size: 9.5px;
  fill: #8a6d3b;
  pointer-events: none;
  font-weight: 600;
}
.cat-weight-ev-line { stroke: #d9b877; stroke-width: 1; stroke-dasharray: 3 3; }
.cat-weight-ev-dot { fill: #e0a458; stroke: #fff; stroke-width: 1.5; }

/* 点击事件后的详情气泡 */
.cat-weight-tip {
  position: absolute;
  z-index: 20;
  max-width: 88%;
  background: #4a3f31;
  color: #fff8ec;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  pointer-events: none;
}
.cat-weight-tip.hidden { display: none; }
.cat-weight-tip-date { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; color: #ffd9a0; }
.cat-weight-tip-title { font-weight: 600; }
.cat-weight-tip-note { color: #e2d7c4; margin-top: 3px; }
.cat-weight-tip-weight { color: #b9e6c9; margin-top: 4px; font-size: 11.5px; }

/* 事件列表 */
.cat-weight-events-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: clamp(80px, 14dvh, 150px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cat-weight-events-list:empty { display: none; }
.cat-weight-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fdf6e9;
  border: 1px solid #f0dfbd;
  border-radius: 10px;
  font-size: 13px;
}
.cat-weight-event-flag {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0a458;
}
.cat-weight-event-body { flex: 1; min-width: 0; }
.cat-weight-event-title {
  font-weight: 600;
  color: #6b4f21;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-weight-event-meta {
  font-size: 11px;
  color: #a08a63;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-weight-event-del {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #c98d6a;
  cursor: pointer;
  font-size: 15px;
  padding: 0 4px;
  line-height: 1;
}
.cat-weight-event-del:hover { color: var(--danger); }
.cat-weight-events-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  padding: 10px 8px;
  background: var(--bg-module);
  border-radius: 10px;
}

/* 事件保存按钮 */
.cat-weight-save--event { background: #e0a458; }
.cat-weight-save--event:hover { background: #cf9448; }

/* 称重提醒设置 */
.cat-weight-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cat-weight-settings-label { font-size: 13px; color: var(--text); }
.cat-weight-settings input {
  width: 74px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  text-align: center;
}
.cat-weight-settings input:focus { outline: none; border-color: var(--accent); }
.cat-weight-remind-save {
  padding: 7px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cat-weight-remind-save:hover { background: var(--accent-deep); }
.cat-weight-settings-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.5;
}

/* v10.2: 猫咪计时器改为 inline 状态条，不再是浮层。
   放在 .page-cats 的 header 后、main 前，用户可一眼看到状态。*/
.cat-timer-bar {
  margin: 0 12px 8px 12px;
  padding: 10px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cat-timer-bar.hidden { display: none; }
.cat-timer-emoji { font-size: 22px; }
.cat-timer-name { flex: 1; font-weight: 600; }
.cat-timer-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  padding: 4px 10px;
  background: rgba(255,255,255,0.25);
  border-radius: 8px;
}
.cat-timer-stop {
  background: var(--accent-deep);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cat-timer-stop:active { transform: scale(0.97); }

/* ============================================================
   v9: 购物页样式
   ============================================================ */
.page-shopping {
  display: flex;
  flex-direction: column;
  width: 100vw;
  flex-shrink: 0;
  background: var(--bg-main);
  padding: 8px 10px;
  gap: 6px;
}
/* shopping 主体：左右两块，1:1 平分（窄屏下代购也不会被挤成一条缝）
   用 minmax(0, 1fr) 而非 1fr，绕过 grid 'auto' 最小宽度把左列挤碎 */
.shopping-main,
.page-shopping .shopping-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
/* 左：待购清单（todo 小票样式） */
.shop-left {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  overflow-y: auto;
  min-height: 0;
}
.shop-left::-webkit-scrollbar { width: 4px; }
.shop-left::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.shop-left-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.shop-list-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  padding: 24px 8px;
  line-height: 1.6;
}
.shop-receipt {
  list-style: none;
  margin: 0; padding: 0;
}
.shop-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-module);
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  border-left: 3px solid var(--accent);
  animation: slideIn 0.3s ease;
}
.shop-item:active {
  background: var(--pink);
  color: white;
  transform: scale(0.97);
}
.shop-item-source-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.shop-item-name {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-item-hint {
  font-size: 10px;
  color: var(--text-light);
  opacity: 0.7;
}
/* 右：消耗品 + 输入 */
.shop-right {
  display: grid;
  grid-template-rows: 1fr auto;
  /* 关键：列宽不能默认 single column（会跟 content 走 = 撑大），
     必须显式 grid-template-columns: minmax(0,1fr)，让列宽 = 上层
     .shopping-main 给的 1fr = 172.5px。minmax(0,1fr) 同时保证子项可以
     比 cell 内容更窄（不会反过来撑大 cell）。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  min-width: 0; /* 防止内部 grid/flex 被内容最小宽度撑大，溢出视口 */
  /* 兜底防御：grid item 默认会被内部内容撑出 cell（intrinsic min-width），
     即使子项加 min-width:0 / width:100% 也可能被 CSS Grid 算法反推撑大。
     overflow:hidden 保证任何意外溢出都被裁掉，不会再看到右半边超出的 cube。 */
  overflow: hidden;
}
.shop-consumables {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0; /* 防止内部 grid/flex 被内容最小宽度撑大，溢出视口 */
  /* grid item 的盒模型修复：.shop-right 是 grid 容器，子项默认会被内容撑出 cell
     （intrinsic min-width）。即使 min-width:0，display:block 的子项还是会按
     shrink-to-fit 算法算成 content 列宽。width:100% + max-width:100% + box-sizing
     联合约束，让 .shop-consumables 严格收敛到 .shop-right 的 cell 宽（172.5px）。 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.shop-consumables::-webkit-scrollbar { width: 4px; }
.shop-consumables::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.shop-consumables-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.shop-consumables-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  /* 防御：grid 容器自身默认 min-width: auto = 子项内容最小宽度总和，
     即使列用 minmax(0,1fr)，父容器宽度仍会被撑开 → 整体溢出 .shop-consumables。
     加 min-width:0 + max-width:100% 让 grid 收敛到父容器。 */
  min-width: 0;
  max-width: 100%;
}
.shop-cube {
  background: var(--bg-module);
  border: none;
  border-radius: 14px;
  padding: 12px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(150, 120, 90, 0.08);
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
  font-family: inherit;
  min-height: 92px;
  /* 关键：grid 子项默认 min-width: auto = 内容最小宽度，
     在窄屏下会被 name(nowrap) + meta(nowrap) 撑成 ~123px，
     导致 2 列总宽超过 .shop-consumables 可用宽度，整体溢出右侧视口。
     加 min-width: 0 后，列宽 minmax(0,1fr) 才能真正收敛到父容器。 */
  min-width: 0;
  max-width: 100%;
  /* 防止长按时被浏览器默认弹菜单、文本选中 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.shop-cube-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
  /* 防止 meta row 在 flex 子项里被父 cube 撑大 */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.shop-cube-meta {
  font-size: 10px;
  color: var(--text-light);
  background: rgba(255,255,255,0.7);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 500;
  line-height: 1.4;
  /* 允许换行：长日期/金额在窄 cube 下换行显示，不再 ellipsis。 */
  white-space: normal;
  word-break: break-all;
  min-width: 0;
  max-width: 100%;
}
.shop-cube:active {
  transform: scale(0.93);
  background: #ffe9c2;
  box-shadow: 0 1px 3px rgba(150, 120, 90, 0.12);
}
.shop-cube-emoji {
  font-size: 30px;
  line-height: 1;
  /* 防止 emoji 在 flex 容器里被压缩 */
  flex-shrink: 0;
}
.shop-cube-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  /* 改为允许换行：名字长（如「洗衣机清洁液」）直接换行，不 ellipsis 不裁剪。
     配合 .shop-cube 的 min-width:0，name 在窄列下能占满 cube 宽。
     行高 1.3 保证换行后视觉上还是紧凑的小标签 */
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.shop-cube-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  padding: 18px 8px;
  font-style: italic;
}
.shop-cube-note {
  font-size: 10px;
  color: var(--text-light);
  background: rgba(255, 240, 200, 0.7);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 500;
  line-height: 1.4;
  width: 100%;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
}
/* 长按提示气泡 */
.shop-cube-pressing {
  transform: scale(0.95);
  background: #fff2c2 !important;
  box-shadow: 0 0 0 3px rgba(255, 200, 80, 0.45) !important;
}
.shop-input {
  display: flex;
  gap: 6px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}
.shop-input-field {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-module);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.shop-input-field:focus { border-color: var(--accent); }
.shop-input-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.shop-input-btn:active { transform: scale(0.94); background: var(--accent-deep); }

/* v9: 购物页下输入框与滑页边距补足 */
.page-shopping .page-hint { font-size: 11px; }

/* v9.1: 客户端消耗品编辑弹层（长按触发）。从 admin.css 拷贝核心样式，避免加载 admin.css */
.edit-overlay {
  position: fixed; inset: 0;
  background: rgba(74, 63, 53, 0.4);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
.edit-overlay.show { display: flex; }
.edit-card {
  background: var(--bg-card, #ffffff);
  border-radius: 20px;
  padding: 22px 26px;
  min-width: 360px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.edit-card h2 { font-size: 18px; color: var(--accent-deep); margin-bottom: 16px; }
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 4px; font-weight: 500; }
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field textarea {
  width: 100%;
  border: 1px solid var(--border, #ece1c8);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text, #4a3f35);
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  background: var(--bg-card, #ffffff);
  box-sizing: border-box;
}
.field input:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 60px; }
.icon-picker {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--bg-module, #fff4dc);
  border-radius: 10px;
  max-height: 160px;
  overflow-y: auto;
}
.icon-cell {
  font-size: 22px;
  text-align: center;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  background: var(--bg-card, #ffffff);
}
.icon-cell:hover { background: var(--bg-main, #fdf6e9); }
.icon-cell.selected { background: var(--accent); transform: scale(1.1); }
.field-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; line-height: 1.5; }
.edit-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.consumable-edit-cancel,
.edit-cancel {
  border: none; border-radius: 10px; padding: 8px 20px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--bg-module, #fff4dc); color: var(--text, #4a3f35);
  font-family: inherit;
}
.consumable-edit-save,
.edit-save {
  border: none; border-radius: 10px; padding: 8px 20px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--accent); color: white;
  font-family: inherit;
}
.consumable-edit-save:hover,
.edit-save:hover { background: var(--accent-deep); }

/* ============================================================
   v10.6.1 租房清单调整
   1) 子页浮窗改全屏（从上到下，尺寸跟整页一致）
   2) 物品清单改卡片网格（一行 2~3 个）
   3) 新增「入住照片」画廊
   ============================================================ */

/* ---- 子页浮窗：全屏，从上到下 ---- */
.rental-subpage {
  align-items: stretch;
  background: var(--bg-main);
  backdrop-filter: none;
}
.rental-sub-card {
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-main);
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
.rental-sub-header {
  padding-top: 4px;
  margin-bottom: 8px;
}
.rental-sub-header h3 { font-size: 17px; }
.rental-sub-hint { margin-bottom: 12px; font-size: 12px; }
/* 列表区占满剩余高度，滚动发生在列表内部 */
.rental-sub-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 全屏下每行给足呼吸感 */
.rental-sub-list .rental-row {
  padding: 12px 12px;
  font-size: 14px;
  margin-bottom: 8px;
  border-radius: 12px;
}

/* ---- 物品清单：卡片网格 ---- */
.rental-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .rental-items-grid { grid-template-columns: repeat(3, 1fr); }
}
.rental-item-card {
  background: var(--bg-module);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: slideIn 0.25s ease;
}
.rental-item-card:active { transform: scale(0.97); }
.rental-item-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-card);
  display: block;
}
.rental-item-card-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.rental-item-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  line-height: 1.3;
  text-align: center;
}
.rental-item-card-prices {
  font-size: 10px;
  color: var(--text-light);
  text-align: center;
  line-height: 1.5;
  word-break: break-all;
}
.rental-item-card-prices .rental-item-card-price--buy { color: var(--accent-deep); }
.rental-item-card-edit {
  font-size: 10px;
  color: var(--text-light);
  text-align: center;
  opacity: 0.7;
}

/* ---- 入驻照片画廊 ---- */
.rental-gallery {
  position: fixed;
  inset: 0;
  background: rgba(74, 63, 53, 0.5);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 16px;
}
.rental-gallery.show { display: flex; }
.rental-gallery-card {
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rental-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.rental-gallery-header h3 { font-size: 16px; color: var(--accent-deep); }
.rental-gallery-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rental-gallery-count {
  font-size: 12px;
  color: var(--text-light);
}
.rental-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}
.rental-gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-module);
  display: block;
}
.rental-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  font-size: 12px;
  padding: 40px 8px;
  line-height: 1.6;
}

/* 模块标题可点击 */
.rental-module-title--clickable {
  cursor: pointer;
}
.rental-module-title--clickable:active { opacity: 0.7; }
.rental-module-title-more {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-light);
  white-space: nowrap;
}

/* ---- v10.6.1: 子页全屏后的「返回」按钮 ---- */
.rental-sub-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.rental-sub-title-wrap h3 {
  font-size: 17px;
  color: var(--accent-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rental-sub-back {
  background: var(--bg-module);
  border: none;
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  margin-right: 10px;
}
.rental-sub-back:active { transform: scale(0.95); }

/* ---- v10.6.2: 「不需要还原」的改造条目（不可切换状态）---- */
.rental-row--plain {
  opacity: 0.72;
}
.rental-row--plain .rental-row-hint {
  opacity: 0.45;
}

/* ---- v10.6.3: 改造清单分组（需要还原 / 不需要还原）---- */
.rental-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #c8794a);
  letter-spacing: .5px;
  opacity: .9;
}
.rental-group-title:first-child { margin-top: 4px; }
.rental-group-title--plain {
  color: var(--text-light);
  opacity: .75;
}
.rental-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(200, 121, 74, .14);
  font-size: 11px;
  font-weight: 700;
}
.rental-group-title--plain .rental-group-count {
  background: rgba(150, 140, 130, .16);
}
/* 「不需要还原」标签：中性灰，不抢眼 */
.rental-row-tag--plain {
  background: rgba(150, 140, 130, .16);
  color: var(--text-light);
}


/* ============================================================
   v10.10 租房清单改造
   1) 入住照片：多选上传 + 页内进度条（不弹浮窗）
   2) 改造清单 / 物品清单：拆成两个独立方块（并排两列）
   3) 输入框独立放在底部 footer
   4) 照片删除 / 点击放大查看
   5) 物品照片：选择 / 相机
   6) 相机连续拍摄浮窗（半透明置顶）
   ============================================================ */

/* ---- 租房页主体：上（照片）下（两个清单方块并排） ---- */
.rental-main {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.rental-main::-webkit-scrollbar { width: 4px; }
.rental-main::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* 照片模块：占满整行 */
.rental-module--photos { flex: 0 0 auto; }

/* 两个清单方块并排（wrapper 2 列 grid，不依赖 nth-of-type） */
.rental-blocks-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: start;
}
.rental-blocks-row .rental-module--list {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 340px) {
  .rental-blocks-row { grid-template-columns: minmax(0, 1fr); }
}

/* 底部固定输入框（模仿模拟管家 footer） */
.rental-footer {
  flex-shrink: 0;
  gap: 6px;
  padding: 2px;
}
.rental-footer .rental-input-field {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- 清单方块内的预览区 ---- */
.rental-block-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 190px;
  overflow-y: auto;
}
.rental-block-preview::-webkit-scrollbar { width: 4px; }
.rental-block-preview::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.rental-block-preview:empty { display: none; }
.rental-block-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-module);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.rental-block-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rental-block-row--restored { opacity: 0.5; }
.rental-block-row--restored .rental-block-row-name { text-decoration: line-through; }
.rental-block-row--plain { opacity: 0.75; }
.rental-block-mini-tag {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(224, 122, 95, 0.22);
  color: var(--warn);
  white-space: nowrap;
}
.rental-block-mini-tag--restored {
  background: rgba(150, 120, 90, 0.3);
  color: var(--text-light);
}
.rental-block-mini-tag--plain {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-light);
}
.rental-block-empty {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  padding: 14px 4px;
  line-height: 1.6;
}
.rental-block-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  border: none;
  border-radius: 10px;
  background: var(--bg-module);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rental-block-more:active { opacity: 0.7; }

/* ---- 上传进度条（页内，不打断用户） ---- */
.rental-upload-bar {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-module);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.rental-upload-bar[hidden] { display: none; }
.rental-upload-bar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rental-upload-bar-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rental-upload-bar-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.rental-upload-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.rental-upload-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.25s ease;
}
.rental-upload-fill.is-error { background: #d9534f; }
.rental-upload-fill.is-done { background: var(--accent-deep); }
.rental-upload-bar-foot {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-light);
  min-height: 14px;
}
.rental-upload-bar-foot.is-error { color: #c0392b; }
.rental-upload-bar-foot.is-ok { color: var(--accent-deep); }

/* ---- 画廊：照片可点开、可删除 ---- */
.rental-gallery-grid {
  position: relative;
}
.rental-gallery-cell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-module);
}
.rental-gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rental-gallery-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rental-gallery-del:active { background: rgba(0, 0, 0, 0.8); }

/* ---- 照片放大查看器 ---- */
.rental-viewer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}
.rental-viewer.show { display: flex; }
.rental-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: rentalViewerIn 0.18s ease;
}
@keyframes rentalViewerIn {
  from { transform: scale(0.9); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}
.rental-viewer-bar {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rental-viewer-count {
  flex: 1;
  color: #fff;
  font-size: 13px;
  opacity: 0.85;
}
.rental-viewer-del {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.rental-viewer-close {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}
.rental-viewer-prev,
.rental-viewer-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rental-viewer-prev { left: 10px; }
.rental-viewer-next { right: 10px; }

/* ---- 物品照片「选择 / 相机」弹窗 ---- */
.rental-photo-source {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
}
.rental-photo-source.show { display: flex; }
.rental-photo-source-card {
  width: min(300px, 82vw);
  background: var(--bg-card);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.rental-photo-source-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  text-align: center;
  word-break: break-all;
}
.rental-photo-source-opts {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.rental-photo-source-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px;
  border: none;
  border-radius: 14px;
  background: var(--bg-module);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.rental-photo-source-opt--cam { background: #fff2e0; }
.rental-photo-source-opt:active { transform: scale(0.96); }
.rental-photo-source-icon { font-size: 26px; line-height: 1; }
.rental-photo-source-cancel {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 12px;
  background: var(--bg-module);
  color: var(--text-light);
  font-size: 13px;
  cursor: pointer;
}

/* ---- 相机连续拍摄浮窗（半透明置顶） ---- */
.rental-burst {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.28);
  display: none;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}
.rental-burst.show { display: flex; }
.rental-burst-card {
  pointer-events: auto;
  margin-top: calc(56px + env(safe-area-inset-top));
  width: min(300px, 84vw);
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-align: center;
}
.rental-burst-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-all;
  line-height: 1.35;
}
.rental-burst-progress {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 10px;
}
.rental-burst-actions {
  display: flex;
  gap: 8px;
}
.rental-burst-btn {
  flex: 1;
  padding: 7px 4px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rental-burst-btn--skip {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.rental-burst-btn--stop {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}
.rental-burst-btn:active { transform: scale(0.96); }

/* ---- 物品卡片：照片可点（选择/相机） ---- */
.rental-item-card-photo {
  cursor: pointer;
}
.rental-item-card-photo-wrap {
  position: relative;
}
.rental-item-card-photo-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 0;
  text-align: center;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 0 0 10px 10px;
}

/* ---- 连续拍摄开关 ---- */
.rental-burst-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.rental-burst-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  user-select: none;
}
.rental-burst-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rental-burst-toggle-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--border);
  background: var(--bg-module);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.rental-burst-toggle input:checked + .rental-burst-toggle-box {
  background: var(--accent);
  border-color: var(--accent);
}
.rental-burst-toggle input:checked + .rental-burst-toggle-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rental-burst-toggle input:disabled + .rental-burst-toggle-box { opacity: 0.5; }
.rental-burst-start {
  margin-left: auto;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.rental-burst-start:disabled {
  background: var(--bg-module);
  color: var(--text-light);
  cursor: not-allowed;
}
.rental-burst-start:active:not(:disabled) { transform: scale(0.96); }
.rental-upload-retry {
  margin-left: 6px;
  border: none;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

/* ============================================================
   v10.11：网页自绘相机（getUserMedia）
   ============================================================ */
.rental-camera {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000;
  display: none;
  overflow: hidden;
}
.rental-camera.show { display: block; }
.rental-camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
/* 顶部半透明浮窗 */
.rental-cam-float {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  z-index: 2;
}
.rental-cam-float-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rental-cam-float-count {
  font-size: 11px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.rental-cam-float-name {
  font-size: 15px;
  font-weight: 700;
  margin-top: 5px;
  word-break: break-all;
  line-height: 1.3;
}
.rental-cam-float-name:empty { display: none; }
.rental-cam-float-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}
.rental-cam-float-btn {
  flex: 1;
  padding: 7px 4px;
  border: none;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.rental-cam-float-btn--stop {
  background: rgba(255, 255, 255, 0.92);
  color: #333;
}
.rental-cam-float-btn:active { transform: scale(0.96); }
/* 非连拍时隐藏跳过/结束 */
.rental-cam-float:not(.is-burst) .rental-cam-float-actions { display: none; }

/* 底部快门条 */
.rental-cam-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 26px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.rental-cam-cancel,
.rental-cam-switch {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.rental-cam-cancel:active,
.rental-cam-switch:active { transform: scale(0.92); }
.rental-cam-shutter {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  padding: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.rental-cam-shutter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.12s;
}
.rental-cam-shutter:active span { transform: scale(0.85); }
/* 拍摄瞬间闪白 */
.rental-camera.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 3;
  animation: rental-cam-flash 0.26s ease-out forwards;
  pointer-events: none;
}
@keyframes rental-cam-flash {
  from { opacity: 0.9; }
  to { opacity: 0; }
}
/* 错误提示 */
.rental-cam-error {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 84vw);
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  display: none;
  z-index: 4;
}
.rental-cam-error.show { display: block; }

/* 相机里的连续拍摄开关（浅色文字） */
.rental-burst-toggle--cam { color: #fff; }
.rental-burst-toggle--cam .rental-burst-toggle-box {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
}
.rental-burst-toggle--cam input:checked + .rental-burst-toggle-box {
  background: var(--accent);
  border-color: var(--accent);
}
/* 子页顶部开关的说明 */
.rental-burst-toggle-hint {
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.3;
}
/* 外侧物品方块：紧凑预览（不罗列物品名） */
.rental-block-preview--compact { min-height: 0; }
.rental-block-preview--compact .rental-block-preview-line {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  padding: 10px 0;
}