/* ═══ 主题:MEMSTACK 新配色(纸质墨蓝配色替换为浅灰底 + 紫色主操作 + 分类色) ═══ */
:root {
  --radius: 14px;
  --nav-h: 68px;
  --header-h: 42px;

  /* 基础——暖白墨色:米白底 + 深墨字,取代之前的浅灰蓝底(参考 Notion/Linear 那种
     "暖中性 + 单一强调色"路线,见配色提案里的"暖白墨色"方案)。 */
  --bg-page: #F6F3EC;
  --bg-card: #FFFFFF;
  --text-primary: #2B2620;
  --text-secondary: #8A8172;
  --border: #E7E1D4;

  /* MEMSTACK名字 / 主操作——原来的紫色换成一支赤陶色,不再跟 Material You 默认的
     靛紫撞脸。 */
  --primary: #B5542F;
  --primary-dark: #873F23;
  --primary-light: #F3DFD3;
  --navy: #3F6E66;

  /* 分类:位置 */
  --location-bg: #DCEEFF;
  --location-icon: #2388D5;
  --location-text: #2A69A6;

  /* 分类:文字——换配色时顺带把这组从橙色挪到金黄色:新主色 --primary 本身就是
     赤陶橙,跟原来这组"文字"分类色几乎撞色(同一片橙色调,按钮和分类徽标会分不
     清),挪到金黄色系才跟新主色错开,又还在"暖色系"这个大方向里。 */
  --text-bg: #FBEBC4;
  --text-icon: #C9971E;
  --text-color: #8A6B14;

  /* 分类:图片 */
  --image-bg: #DFF1EE;
  --image-icon: #159A86;
  --image-text: #258276;

  /* 分类:语音 */
  --voice-bg: #E9E3FC;
  --voice-icon: #7150C8;
  --voice-text: #583BA7;

  /* 状态 / AI——danger 跟着新配色重新调过(暖红,不是旧紫色系里剩下的冷粉红);
     ai-bg/ai-text 保留原来的紫色系,故意跟主色区分开——"AI 生成的内容"用一支
     独立于品牌色的强调色是常见做法(类似 Notion AI/Copilot 那种紫),换主题时
     不用跟着抖。 */
  --danger-bg: #F5E1DE;
  --danger: #B23B3B;
  --ai-bg: #E5DDFB;
  --ai-text: #5637AA;

  /* —— 兼容旧变量名,指向新配色,下面几百处 var(--accent) / var(--bg) 等
     调用点不用逐一替换,改这一处即可全局换色 —— */
  --bg: var(--bg-page);
  --panel: color-mix(in srgb, var(--bg-page) 92%, var(--border));
  --card: var(--bg-card);
  --text: var(--text-primary);
  --dim: var(--text-secondary);
  --accent: var(--primary);
  --accent2: var(--danger);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* 手机上不出现左右滚动条:任何一处子元素意外撑宽(呼吸球/输入框等)都不该让整页横向可滑,
   页面里真正需要横向滚动的地方(pre.json 等)各自有自己的 overflow-x:auto 兜底。 */
html, body { overflow-x: hidden; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--nav-h) + 12px);
  min-height: 100vh;
  font-size: 16px;
}
.card { box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* 顶部栏固定,只有中间内容区滚动(跟底部导航一样的处理);尽量窄——只放得下品牌名
   和记忆数,不需要跟底部导航(68px)一样高。 */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px; padding-top: env(safe-area-inset-top);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 15px; }
.promise { font-size: 12px; color: var(--dim); letter-spacing: .5px; }

main { padding: 4px 16px; max-width: 100%; }
.view { display: none; }
.view.active { display: block; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.greet { font-size: 24px; margin: 8px 2px 16px; letter-spacing: 1px; }

/* ═══ 捕获屏:呼吸球(S1) ═══ */
.orb-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52vh; gap: 22px;
}
.orb {
  width: 148px; height: 148px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--primary), var(--primary-dark) 70%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; touch-action: none;
  animation: breath 3s ease-in-out infinite;
  box-shadow: 0 0 60px color-mix(in srgb, var(--primary) 40%, transparent);
  transition: transform .25s;
}
.orb span { font-size: 16px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
@keyframes breath { 50% { transform: scale(1.05); } }
.orb.recording {
  animation: recpulse .8s ease-in-out infinite;
  box-shadow: 0 0 90px var(--primary);
  transform: scale(1.25);
}
@keyframes recpulse { 50% { box-shadow: 0 0 40px var(--primary); } }
.live-transcript { min-height: 44px; max-width: 90%; text-align: center;
  color: var(--dim); font-size: 17px; }
.cap-feedback { min-height: 20px; font-size: 15px; color: var(--accent2); }

.cap-no-parse-toggle {
  display: flex; align-items: center; gap: 6px; padding: 0 4px 8px;
  font-size: 13px; color: var(--dim); cursor: pointer;
}
.cap-row {
  display: flex; gap: 10px; align-items: center; padding: 6px 4px 14px;
}
.cap-row input {
  /* min-width:0 是关键:flex 子项默认最小宽度是内容的固有宽度,<input> 的固有宽度经常
     比手机窄屏剩下的空间还宽,不加这行整行(连带整个页面)就会被撑出横向滚动条。 */
  flex: 1; min-width: 0; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 22px; padding: 12px 16px; font-size: 17px;
}
.cap-row input:focus { outline: 1.5px solid var(--accent); }
.cap-round {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 19px; cursor: pointer;
}
.cap-round.accent { background: var(--accent); color: #fff; border: none; }

/* ═══ 底部导航:中央凸起(8.2) ═══ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-around;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  background: none; border: none; color: var(--dim); font-size: 16px;
  padding: 10px 14px; cursor: pointer; border-radius: 16px; min-width: 60px;
}
.nav-btn.active { color: var(--accent); font-weight: 600; }
.nav-orb {
  width: 58px; height: 58px; border-radius: 50%; border: none;
  margin-top: -26px; font-size: 22px; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 24px color-mix(in srgb, var(--primary) 50%, transparent);
}

/* ═══ 卡片体系 ═══ */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px; font-size: 16px;
  animation: cardin .25s ease both;
}
@keyframes cardin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.card .title { font-weight: 600; margin-bottom: 4px; }
.card .meta { font-size: 14px; color: var(--dim); line-height: 1.6; }
.card.processing { border-color: var(--accent); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .7; } }

.card .thumb {
  max-width: 160px; max-height: 160px; border-radius: 8px; margin: 6px 0;
  display: block; object-fit: cover;
}
.card .geo { font-size: 13px; color: var(--dim); }

/* 图片查看:点开的详情抽屉里那张缩略图现在允许点击放大——本地留了原图的话看到的
   就是全分辨率原图(见 app.js 的 saveLocalPhoto/loadLocalPhoto),不再局限于服务器
   那张最大边 320px 的压缩缩略图。z-index 比 .drawer(100)高,盖在抽屉上面。
   用户反馈"拍摄或导入的图片需要可以放大或者旋转查看"——加了双指/滚轮缩放、
   放大后单指拖动平移、双击(双触)切换 1x/2.5x、右上角按钮旋转 90°。图片本身
   现在专门用来做这些手势,不再点一下就关闭;关闭改成点空白背景或右上角 ✕。 */
.thumb.viewable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); padding: 24px; box-sizing: border-box;
}
.lightbox.hidden { display: none; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px;
  touch-action: none; will-change: transform; transform-origin: center center;
}
.lightbox-toolbar {
  position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 301;
  display: flex; gap: 8px;
}
.lightbox-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
.lightbox-btn:active { background: rgba(255,255,255,.32); }

/* 时间线卡片按"分类"(采集方式:文字/图形/拍照/附件/语音/坐标)给背景上一层浅色调
   (用户反馈修正:"分类是指文字、图形、拍照、附件、语音、坐标这些方式",不是内容
   类型 kind——原来按 kind 上左边框色的方案换成按 record.source 映射出的采集方式上
   背景色,颜色要浅,别盖过卡片本身的文字对比度;不影响其它已有的左边框语义
   (事件卡的 urgency-*、过期卡的 .overdue 这些更强的状态信号走各自的
   eventCard()/overdueCard(),不套这组 cat-* 类)。 */
.card.cat-text { background: var(--text-bg); }
.card.cat-image { background: var(--image-bg); }
.card.cat-photo { background: var(--image-bg); }
.card.cat-file { background: color-mix(in srgb, var(--text-secondary) 10%, var(--bg-card)); }
.card.cat-voice { background: var(--voice-bg); }
.card.cat-geo { background: var(--location-bg); }

/* 分类卡片 / 图标——按采集方式上色的徽标 + 图标基础色,geo→location、photo 复用 image
   (新配色只给了 位置/文字/图片/语音 四种,photo 跟 image 视觉上同属"图形"合并使用)。 */
.category-location { background: var(--location-bg); color: var(--location-text); }
.category-text { background: var(--text-bg); color: var(--text-color); }
.category-image { background: var(--image-bg); color: var(--image-text); }
.category-voice { background: var(--voice-bg); color: var(--voice-text); }

.location-icon { color: var(--location-icon); }
.text-icon { color: var(--text-icon); }
.image-icon { color: var(--image-icon); }
.voice-icon { color: var(--voice-icon); }

/* 记忆卡片左滑删除(用户反馈:"往左滑动就允许删除,移动到 1/3 位置时空出来的空间
   显示删除,继续往左移动就删除")——.mem-swipe 是外层容器,.mem-swipe-del 是常驻
   在底下的红色删除层,平时被卡片盖住看不见;JS(setupMemSwipeToDelete)拖动时用
   transform 平移 .card,露出下面这层,过 1/3 屏宽显现、过 2/3 屏宽变深提示"松手
   即删"。overflow:hidden 防止拖动过程中把页面撑出横向滚动条。 */
.mem-swipe { position: relative; overflow: hidden; touch-action: pan-y; border-radius: var(--radius); }
.mem-swipe > .card { position: relative; margin-bottom: 10px; }
.mem-swipe-del {
  position: absolute; inset: 0; margin-bottom: 10px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 28px;
  background: #b71c1c; color: #fff; font-weight: 700; font-size: 15px;
  opacity: 0; transition: opacity .15s, background-color .15s;
}
.mem-swipe-del.show { opacity: 1; }
.mem-swipe-del.armed { background: #7f0000; }

/* "我"页顶部:账号 + 记忆统计是基本信息,不是可以逐条浏览的功能模块,不套 .card 样式——
   用户反馈修复:这两块应该固定显示在页面顶端,跟下面的卡片列表区分开。 */
.me-basic {
  padding: 4px 2px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.me-basic-account { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.me-basic-stats { font-size: 14px; color: var(--dim); margin-bottom: 10px; }
.app-version { text-align: center; font-size: 12px; color: var(--dim); padding: 18px 0 30px; letter-spacing: .5px; }
.me-basic-alias-row { display: flex; gap: 8px; margin-bottom: 10px; }
.me-basic-alias-row input {
  flex: 1; min-width: 0; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px;
}

/* ═══ 事件卡片:右上角图标按钮(取代整行文字按钮),左边框颜色表示紧迫程度 ═══ */
.event-card { position: relative; }
/* 用户反馈修正:"全部的内容删除方式都改为左滑删除"——原来的🗑删除图标按钮去掉了,
   右上角最多剩"来历"+"取消"两个图标,留白比以前 3 个图标时小一些。 */
.event-card.has-actions .title { padding-right: 64px; }  /* 给右上角图标留空间,标题长了也不会叠住 */
.event-card .icon-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.event-card .icon-btn {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.event-card.urgency-critical { border-left: 4px solid #e53935; box-shadow: 0 0 14px rgba(229,57,53,.32); }
.event-card.urgency-soon { border-left: 4px solid #fb8c00; }
.event-card.urgency-normal { border-left: 4px solid var(--accent); }
.event-card.urgency-far { border-left: 4px solid var(--border); }
.event-card.overdue {
  border-left: 4px solid #b71c1c;
  background: color-mix(in srgb, #b71c1c 8%, var(--card));
}
.event-card .overdue-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.overdue-banner { cursor: pointer; font-weight: 600; }

.badge { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 10px;
  margin: 3px 4px 0 0; background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); }
.badge.alt { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); }
.badge.warn { background: #3d352255; color: #ffb74d; }
.badge.bell { background: #e57373; color: #fff; }
.old-val { color: #e57373; text-decoration: line-through; }
.new-val { color: var(--accent2); font-weight: 600; }
.empty { color: var(--dim); font-size: 14px; padding: 6px 0 14px; }

.now-sec h2 { font-size: 14px; color: var(--dim); letter-spacing: 2px; margin: 14px 0 8px;
  text-transform: uppercase; }

/* "今日"页的 变化/悬而未决/继续:平时收成贴在屏幕右边缘的小标签(只露一条竖排
   文字),点一下从右边弹出对应列表(复用 .drawer 抽屉),再点一下/点外面收回——
   不占页面正文的位置,跟其它固定定位层(header/bottom-nav/drawer)不冲突。
   跟下面的 Focus 标签一起挂在 .edge-tabs-wrap 里,由外层整组居中定位+撑开高度,
   两组标签各自只用 flex 排自己内部的几个按钮,不用再各自猜一个像素偏移量——
   之前 Focus 标签用 top: calc(40% + 230px) 硬算,矮屏幕/激活了 3 个以上 Focus 时
   会跟上面这组重叠,甚至被推到底部导航条下面完全看不见(2026-09-03 用户反馈)。 */
/* z-index 高于 .drawer(100)/.drawer-mask(99):标签本身要一直留在够得着的地方——
   抽屉开着的时候还能点同一个标签收回,或者直接点另一个标签切换,不用先关了再点。 */
.edge-tabs-wrap {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 110;
  display: flex; flex-direction: column; gap: 20px;
}
.edge-tabs { display: flex; flex-direction: column; gap: 10px; }
.edge-tab {
  border: none; cursor: pointer; color: #fff; touch-action: none;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  padding: 12px 6px; min-height: 64px; border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: -2px 2px 8px rgba(0,0,0,.15);
}
.edge-tab.changed { background: var(--accent2); }
.edge-tab.unresolved { background: #b8860b; }
.edge-tab.continuing { background: var(--accent); }
.edge-tab.active { filter: brightness(.82); }
/* 用户反馈修正:"不是拖动排序,是改变整个标签的位置变化,松手就会停止在新位置"——
   长按超过阈值后抓起的那一个,放大+提高层级+加一圈高亮描边,让"已经抓起,可以
   拖了"这个状态一眼可辨。 */
.edge-tab.dragging { transform: scale(1.12); z-index: 121; box-shadow: 0 0 0 2px #fff, -2px 2px 12px rgba(0,0,0,.35); }
/* 被拖到自由位置的标签:挂到 <body> 下用 position:fixed 精确停在拖拽松手那一刻的
   像素坐标,不再受原来竖排列表的形状约束,所以圆角改成四角对称(原来非对称的圆角
   是为了贴在屏幕右边缘,飘到屏幕中间再用那个形状就很奇怪了)。 */
.edge-tab.floating { position: fixed; z-index: 110; border-radius: var(--radius); }
.edge-tab.focus-tab.floating { border-radius: 50%; }

/* 关注领域(Focus)边缘标签(#5):跟上面"变化/未决/继续"用同一套交互(点开抽屉/点第二
   下收回),但故意换成圆形图标而不是竖排文字长条——形状本身就是"这是另一类东西,
   点开是一整个领域的内容"的视觉信号,不用额外文字说明;数量随用户激活了几个 Focus
   动态生成,不是写死的。单独一组贴在原来三个标签下方,留出可见间距。 */
.focus-edge-tabs { display: flex; flex-direction: column; gap: 8px; }
.edge-tab.focus-tab {
  writing-mode: horizontal-tb;
  width: 42px; height: 42px; min-height: 0; padding: 0;
  border-radius: 50%;
  font-size: 19px; font-weight: 400; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2f7a68;
}

/* ═══ 记忆页 ═══ */
.ask-input {
  width: 100%; background: var(--card); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 24px; padding: 13px 18px;
  font-size: 17px; margin-bottom: 10px;
}
.ask-input:focus { outline: none; border-color: var(--accent); }
.answer-card {
  border: 1.5px solid var(--accent); border-radius: var(--radius);
  background: var(--card); padding: 14px; margin-bottom: 14px; font-size: 17px;
}
.answer-card .sources { margin-top: 8px; }
.subtabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.subtab { background: var(--card); border: 1px solid var(--border); color: var(--dim);
  border-radius: 16px; padding: 6px 18px; font-size: 15px; cursor: pointer; }
.subtab.active { color: var(--accent); border-color: var(--accent); }
.mem-group-toggle { display: flex; gap: 8px; margin: 2px 0 10px; }

/* "分类"模式的多选 chip + 折叠区块(用户反馈:"分类中应该包括时间线选择、图片、
   文字、坐标、语音、拍照等输入方式,不选中不加载,选中之后再加载,可以多选;选中
   之后该分类以折叠的方式显示,点击后再以时间线显示该类型的内容")。 */
.mem-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.chip {
  background: var(--card); color: var(--dim); border: 1px solid var(--border);
  border-radius: 16px; padding: 6px 14px; font-size: 14px; cursor: pointer;
}
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-fold {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.cat-fold-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.cat-fold-arrow { color: var(--dim); font-size: 13px; }
.cat-fold.expanded .cat-fold-header { border-bottom: 1px solid var(--border); }
.cat-fold-body { padding: 10px 10px 0; }
.cat-pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px 12px; font-size: 13px; color: var(--dim); touch-action: pan-y;
}
.cat-pager .small { margin: 0; }
.cat-pager .small:disabled { opacity: .35; cursor: default; }
.small {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 12px; font-size: 14px; cursor: pointer; margin: 3px 3px 0 0;
  display: inline-block; text-decoration: none;
}
.small:hover { border-color: var(--accent); }
button.small.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
button.small.danger { color: var(--accent2); border-color: var(--accent2); }
button.small.danger:hover { background: var(--accent2); color: #fff; }

/* Change Detection + Confirmation(MemStack V2 §4):重要字段变更待确认,跟已生效的
   变化卡区分开——左边框强调"需要你决定",不用删除线(还没发生覆盖,不该看起来像已替换)。 */
.pending-change { border-left: 3px solid var(--accent2); }

/* ═══ 我 ═══ */
.perm-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.perm-table td { padding: 6px 8px; border-bottom: 1px dashed var(--border); color: var(--dim); }
.perm-table td:first-child { color: var(--text); white-space: nowrap; }

/* 建议卡(#5,Focus 抽屉里的第一段):纯规则生成,不是待办/事件,左边框用跟建议
   本身语气匹配的中性色,不跟事件卡(urgency-*)或变化卡(pending-change)的强调色混淆。 */
.suggestion-card { border-left: 3px solid var(--dim); font-size: 14px; }

/* Focus(关注领域)列表:激活中的一行一个,归档态降低透明度但保留在列表里 */
.focus-row { display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px dashed var(--border); }
.focus-row:last-child { border-bottom: none; }
.focus-row .fr-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--accent2);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex: none; }
.focus-row.archived { opacity: .55; }
.focus-row .fr-name { flex: 1; font-size: 15px; }
.focus-row .fr-badge { font-size: 12px; color: var(--dim); }
#focus-available-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#focus-available-list .focus-add-chip { background: var(--card); border: 1px dashed var(--border);
  color: var(--dim); border-radius: 14px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
#focus-available-list .focus-add-chip:hover { border-color: var(--accent); color: var(--text); }

/* ═══ 抽屉 ═══ */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 94vw); z-index: 100;
  background: var(--panel); border-left: 1px solid var(--border);
  overflow-y: auto; transition: transform .3s ease;
}
.drawer.hidden { transform: translateX(100%); }
.drawer-head { display: flex; justify-content: space-between; align-items: center;
  padding: 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--panel); }
.drawer-head button { background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer; }
/* 用户反馈修复:"记忆详情需要以手机方式显示,不应该横向滚动"——根因是长链接/长
   不带空格的字符串(比如粘贴的 URL)放进 .raw-block 只有 white-space:pre-wrap,
   遇到空格才会换行,一整段没有空格的文本会把 .drawer 撑宽,而 .drawer 本身设了
   overflow-y:auto(CSS 规范里这会连带把 overflow-x 从 visible 变成 auto),表现
   就是抽屉内容区自己出现横向可滑动。在容器这一级统一兜底 overflow-wrap,不用
   逐个给 .raw-block/pre.json/audit-row 各自加一遍。 */
#drawer-body { padding: 16px; font-size: 15px; overflow-wrap: anywhere; }
.drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99; }
.drawer-mask.hidden { display: none; }
.raw-block { background: var(--card); border-left: 3px solid var(--accent2);
  border-radius: 6px; padding: 10px; margin: 8px 0; white-space: pre-wrap; }
.audit-row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border);
  font-size: 14px; }
.audit-row .t { color: var(--dim); min-width: 118px; }
.audit-row .actor { color: var(--accent2); min-width: 48px; }
pre.json { background: var(--card); padding: 10px; border-radius: 6px; overflow-x: auto;
  font-size: 13px; color: var(--dim); }
.section-label { font-size: 13px; color: var(--dim); margin: 14px 0 6px; letter-spacing: 1.5px; }
.kv { display: flex; gap: 8px; font-size: 15px; padding: 4px 0;
  border-bottom: 1px dashed var(--border); }
.kv .k { color: var(--dim); min-width: 88px; }
.continue-card { border: 1.5px solid var(--accent); border-radius: var(--radius);
  padding: 14px; margin-top: 12px; background: var(--card); }
.continue-card h4 { color: var(--accent); margin-bottom: 8px; }
.continue-card li { padding: 3px 0; font-size: 15px; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 登录覆盖层 */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(8px);
}
.auth-overlay.hidden { display: none; }
.auth-card {
  width: min(360px, 88vw); background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px;
  color: var(--text);
}
.auth-card h2 { text-align: center; }
.auth-card input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; font-size: 17px;
}
.auth-card input:focus { outline: 1.5px solid var(--accent); }
.auth-btns { display: flex; gap: 10px; }
.auth-btn {
  flex: 1; padding: 12px; border-radius: 10px; font-size: 17px; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.auth-btn.primary { background: var(--accent); color: #fff; border: none; }

/* 使用目的覆盖层(首次登录问一次) */
.purpose-overlay {
  position: fixed; inset: 0; z-index: 205; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(8px); overflow-y: auto;
}
.purpose-overlay.hidden { display: none; }
.purpose-card {
  width: min(520px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px; color: var(--text);
}
.purpose-card h2 { font-size: 21px; line-height: 1.4; }
.purpose-sub { font-size: 14.5px; color: var(--dim); margin: 6px 0 18px; line-height: 1.6; }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.purpose-tile {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 13px; cursor: pointer; text-align: left; color: var(--text);
}
.purpose-tile .pt-icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; margin-bottom: 8px;
}
.purpose-tile .pt-name { font-weight: 600; font-size: 15.5px; }
.purpose-tile .pt-tag { font-size: 13px; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.purpose-tile.selected { border-color: var(--accent); background: var(--panel); }
.purpose-tile.selected .pt-icon { background: var(--accent); color: #fff; }
.purpose-section-label { font-size: 13px; color: var(--dim); letter-spacing: 1.5px;
  margin: 20px 0 8px; text-transform: uppercase; }
.purpose-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.purpose-chip {
  background: var(--bg); border: 1px solid var(--border); color: var(--dim);
  border-radius: 14px; padding: 6px 14px; font-size: 14px; cursor: pointer;
}
.purpose-chip.selected { border-color: var(--accent2); color: var(--accent2); }
.purpose-continue {
  width: 100%; margin-top: 22px; padding: 13px; border-radius: 10px; font-size: 17px;
  cursor: pointer; background: var(--accent); color: #fff; border: none; font-weight: 600;
}

/* NOW 页版块按使用目的模板重排(JS 用 style.order 控制,见 applyPurposeOrder)。
   必须带 .active 才生效——否则这条 ID 选择器的优先级会压过 .view{display:none},
   导致切到其它 Tab 之后"今日"页还是叠在下面(这是切 Tab 时一直存在的老 bug,这次顺手修)。 */
#view-today.active { display: flex; flex-direction: column; }

/* 跟 Android 一致:记忆页的提问/搜索框和回答面板收成页面宽度的 2/3 并居中。 */
/* (记忆页 2/3 宽度见文件末尾的 .ask-row / .ask-result-panel) */

/* 多语言:英/日/法的权限名称比中文长,第一列不再强制单行,避免把整页撑出横向滚动。 */
.perm-table { table-layout: fixed; }
.perm-table td:first-child { white-space: normal; width: 34%; }
.perm-table td { overflow-wrap: anywhere; }

/* 多语言:底部导航文字一律单行。日/法的标签比中文长,原来的 16px + 左右 14px 内边距会在
   窄屏上折成两行("ホー/ム"),这里收小内边距、字号随屏宽缩放,并禁止换行。 */
.nav-btn { white-space: nowrap; padding: 10px 4px; min-width: 0; font-size: clamp(12px, 3.6vw, 16px); }
.subtab { white-space: nowrap; }
.subtabs { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════════════════════════
   跟 Android 同一套配色(androidApp/.../ui/theme/Color.kt):浅色 = 浅蓝白底 + 蓝色主色 +
   blue-100 顶栏/底栏;深色跟随系统(prefers-color-scheme),同样取 Color.kt 的 Dark 值。
   只改变量,上面几百处 var(--accent)/var(--bg) 自动跟着换色。
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --bg-page: #F0F9FF; --bg-card: #FFFFFF;
  --text-primary: #0F172A; --text-secondary: #64748B; --border: #CBD5E1;
  --primary: #3B82F6; --primary-dark: #2563EB; --primary-light: #DBEAFE; --navy: #1E3A8A;
  --bar-bg: #DBEAFE; --bar-text: #1E3A8A;
  --danger: #EF4444; --danger-bg: #FEE2E2;
  --ai-bg: #EDE9FE; --ai-text: #4C1D95;
  --tertiary-container: #CFFAFE; --on-tertiary-container: #164E63;
  --file-bg: #ECE8DC; --file-text: #6B6252;
  --trail-bg: #E2EEDD; --trail-text: #4B7A43;
  --space-bg: #E0E4FA; --space-text: #3D4C9E;
  --focus-tab-bg: #3B82F6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: #111827; --bg-card: #1E293B;
    --text-primary: #E5E7EB; --text-secondary: #94A3B8; --border: #334155;
    --primary: #3B82F6; --primary-dark: #1D4ED8; --primary-light: #1E3A5F; --navy: #DBEAFE;
    --bar-bg: #1E3A5F; --bar-text: #DBEAFE;
    --danger: #F87171; --danger-bg: #7F1D1D;
    --ai-bg: #3B2E5E; --ai-text: #EDE9FE;
    --tertiary-container: #0E4A52; --on-tertiary-container: #CFFAFE;
    --location-bg: #1B2C3E; --location-icon: #9FC9F0; --location-text: #9FC9F0;
    --text-bg: #332B14; --text-icon: #E8C874; --text-color: #E8C874;
    --image-bg: #1C332F; --image-icon: #8FD8CB; --image-text: #8FD8CB;
    --voice-bg: #2C2545; --voice-icon: #C9BCF5; --voice-text: #C9BCF5;
    --file-bg: #2E2820; --file-text: #B8AD98;
    --trail-bg: #1F2E1C; --trail-text: #A8D2A0;
    --space-bg: #262C4D; --space-text: #AEB8F0;
    color-scheme: dark;
  }
  .card { box-shadow: none; }
}
.category-file { background: var(--file-bg); color: var(--file-text); }
.category-space { background: var(--space-bg); color: var(--space-text); }

/* 顶栏/底栏:跟 Android 的 TopAppBar / NavigationBar 一样用 primaryContainer 底色。 */
header { background: var(--bar-bg); color: var(--bar-text); border-bottom: none; }
.bottom-nav { background: var(--bar-bg); border-top: none; }
.nav-btn { color: color-mix(in srgb, var(--bar-text) 70%, transparent); }
.nav-btn.active { color: var(--primary); }
.brand { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--bar-text); }
.brand-logo { width: 26px; height: 26px; border-radius: 8px; }
:root { --header-h: 52px; }
.topbar-date { display: flex; align-items: center; gap: 8px; color: var(--bar-text); }
.td-day { font-size: 30px; font-weight: 700; line-height: 1; }
.td-side { display: flex; flex-direction: column; line-height: 1.2; }
.td-weekday { font-size: 13px; font-weight: 700; white-space: nowrap; }
.td-month { font-size: 11px; opacity: .75; white-space: nowrap; }
.edge-tab.focus-tab { background: var(--focus-tab-bg); }

/* ═══ 今日页:周日期条 ═══ */
.date-strip { margin: 10px 0 12px; }
.ds-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ds-month { font-size: 13px; color: var(--dim); }
.ds-rel { border: 1px solid var(--primary); color: var(--primary); background: none; border-radius: 999px;
  padding: 3px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ds-rel.on { background: var(--primary); color: #fff; cursor: default; }
.ds-row { display: flex; align-items: center; gap: 2px; position: relative; }
.ds-circle { width: 30px; height: 30px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary-light); color: var(--text-secondary); font-size: 18px; }
.ds-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 0; border: 1.5px solid transparent; border-radius: 999px; background: none; color: var(--text); cursor: pointer; }
.ds-day .ds-wd { font-size: 11px; color: var(--dim); white-space: nowrap; }
.ds-day .ds-num { font-size: 14px; font-weight: 600; }
.ds-day.sel { background: var(--primary); color: #fff; }
.ds-day.sel .ds-wd { color: rgba(255,255,255,.85); }
.ds-day.today { border-color: var(--primary); color: var(--primary); }
.ds-hidden-input { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ═══ 今日页:当天捕获按分类分页 ═══ */
.today-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.today-tab { flex: none; border: none; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600;
  background: transparent !important; color: var(--dim) !important; cursor: pointer; white-space: nowrap; }
.today-tab.on { font-weight: 700; }
.today-tab.on.category-text { background: var(--text-bg) !important; color: var(--text-color) !important; }
.today-tab.on.category-image { background: var(--image-bg) !important; color: var(--image-text) !important; }
.today-tab.on.category-location { background: var(--location-bg) !important; color: var(--location-text) !important; }
.today-tab.on.category-file { background: var(--file-bg) !important; color: var(--file-text) !important; }
.today-tab.on:not([class*="category-"]) { background: var(--primary-light) !important; color: var(--text) !important; }
.tt-count { font-size: 12px; font-weight: 500; }
.today-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.today-record { cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.today-record .thumb { max-width: 100%; max-height: 180px; border-radius: 10px; object-fit: cover; }
.tr-text { overflow-wrap: anywhere; }

/* "临近"固定在底部导航上方(Android:贴着 footer,只显示 1 小时内开始的事项)。 */
.today-upcoming { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 6px 16px 8px; background: var(--bg); border-top: 1px solid var(--border); z-index: 30;
  max-height: 40vh; overflow-y: auto; }
.today-upcoming.hidden { display: none; }

/* ═══ 记忆页(Android 结构):输入框 + "问"按钮;分类条;回答面板贴底部 ═══ */
.ask-row { display: flex; gap: 8px; align-items: center; width: 66.667%; margin: 0 auto 10px; }
#view-memory .ask-row #ask-input { width: auto; flex: 1; min-width: 0; margin: 0; }
.ask-send { flex: none; border: none; border-radius: 999px; padding: 10px 16px; cursor: pointer;
  background: var(--primary); color: #fff; font-weight: 600; white-space: nowrap; }
.ask-send:disabled { opacity: .5; }
.mem-filter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.mem-filter { flex: none; border: none; border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer;
  white-space: nowrap; background: transparent !important; color: var(--dim) !important; }
.mem-filter sup { font-size: 10px; margin-left: 2px; }
.mem-filter.on { font-weight: 700; }
.mem-filter.on.category-text { background: var(--text-bg) !important; color: var(--text-color) !important; }
.mem-filter.on.category-image { background: var(--image-bg) !important; color: var(--image-text) !important; }
.mem-filter.on.category-location { background: var(--location-bg) !important; color: var(--location-text) !important; }
.mem-filter.on.category-file { background: var(--file-bg) !important; color: var(--file-text) !important; }
.mem-filter.on.category-space { background: var(--space-bg) !important; color: var(--space-text) !important; }
.mem-filter.on:not([class*="category-"]) { background: var(--primary-light) !important; color: var(--text) !important; }
.mem-more { display: block; margin: 10px auto 20px; }
.ask-result-panel { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  z-index: 35; display: flex; justify-content: center; pointer-events: none; }
.ask-result-panel .answer-card { pointer-events: auto; width: 66.667%; max-height: 50vh; overflow-y: auto; position: relative;
  background: var(--ai-bg); color: var(--ai-text); border-radius: var(--radius); padding: 14px 34px 14px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.ask-close { position: absolute; top: 8px; right: 10px; border: none; background: none; color: inherit; cursor: pointer; font-size: 15px; }
.error-text { color: var(--danger); }

/* ═══ 通用:入口行(Android ListItem 样式)+ 底部弹出面板(Android ModalBottomSheet) ═══ */
.entry-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: var(--radius); cursor: pointer; margin-bottom: 8px; }
.entry-row:active { background: var(--primary-light); }
.entry-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entry-title { font-size: 16px; }
.entry-sub { font-size: 13px; color: var(--dim); }
.entry-trail { color: var(--primary); font-size: 20px; flex: none; }
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 120; display: flex; align-items: flex-end; }
.sheet.hidden { display: none; }
.sheet-card { width: 100%; background: var(--bg); border-radius: 22px 22px 0 0; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
.sheet-title { font-size: 20px; font-weight: 600; margin-bottom: 14px; }

/* ═══「我」页(Android 结构):身份栏 / 关注领域卡片 / 菜单 / 二级页 ═══ */
#me-main.hidden, #me-sub.hidden { display: none; }
.me-identity { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px;
  background: var(--primary-light); border-radius: 999px; padding: 8px 6px 8px 12px; }
.me-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17px; }
.me-id-text { flex: 1; min-width: 0; }
.me-email { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-id-text .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.me-identity .me-alias-edit { display: none; }
.me-identity.editing .me-alias-edit { display: block; }
.me-identity.editing button.me-alias-edit { display: inline-flex; }
.me-identity.editing .me-alias-view { display: none; }
.me-identity input { width: 100%; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 14px; }
.me-identity .icon-btn { flex: none; }
.me-logout { flex: none; border: none; background: none; color: var(--danger); font-weight: 600; font-size: 14px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.me-focus { margin-top: 14px; }
.me-focus-title { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.focus-card-row { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
#focus-available-list .focus-add-chip.focus-card { flex: none; width: 72px; height: 62px; padding: 6px 4px; border: none;
  border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; }
.focus-card .fc-icon { font-size: 18px; }
.focus-card .fc-name { font-size: 11px; text-align: center; line-height: 1.2; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.focus-study { background: #DCE4F2 !important; color: #3A5A94 !important; }
.focus-parenting { background: #F5DEE3 !important; color: #B5586F !important; }
.focus-travel { background: #D9EFE9 !important; color: #2E7D6E !important; }
.focus-work { background: #DEE5EA !important; color: #4F6172 !important; }
.focus-health { background: #DCEBDC !important; color: #3D7A45 !important; }
.focus-finance { background: #F0E6C8 !important; color: #8A6B22 !important; }
.focus-general { background: #ECE8DC !important; color: #6B6252 !important; }
@media (prefers-color-scheme: dark) {
  .focus-study { background: #1F2A3D !important; color: #9FB6DD !important; }
  .focus-parenting { background: #332128 !important; color: #E6A6B8 !important; }
  .focus-travel { background: #17302B !important; color: #8FD3C1 !important; }
  .focus-work { background: #262E34 !important; color: #AEBCC6 !important; }
  .focus-health { background: #1B2E1D !important; color: #95CC9A !important; }
  .focus-finance { background: #332A14 !important; color: #E0C784 !important; }
  .focus-general { background: #2E2820 !important; color: #B8AD98 !important; }
}
.me-menu { margin-top: 16px; border-top: 1px solid var(--border); }
.me-menu-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 6px; background: none; border: none;
  border-bottom: 1px solid var(--border); color: var(--text); font-size: 16px; cursor: pointer; text-align: left; }
.me-menu-row span:nth-child(2) { flex: 1; }
.me-menu-row .chev { color: var(--dim); font-size: 20px; }
.me-back { border: none; background: none; color: var(--primary); font-size: 16px; padding: 8px 0; cursor: pointer; }
.me-page { display: none; }
.me-page.active { display: block; }
.bullets { padding-left: 20px; margin: 4px 0 8px; }
.bullets li { margin: 3px 0; }
input[type="date"], input[type="time"] { background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 10px; font-size: 15px; }
.me-identity .icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: none;
  color: var(--text); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.me-identity:not(.editing) button.me-alias-edit { display: none; }
.promise.hidden { display: none; }
.entry-title, .entry-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-focus .meta { color: var(--dim); font-size: 14px; }
#focus-available-list.focus-card-row { flex-wrap: nowrap; }

/* ═══ 数据与隐私 / 配色(对齐 Android) ═══ */
#me-audit-body.hidden, #advanced-body.hidden { display: none; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pager-row { justify-content: space-between; padding-top: 10px; }
button.small.danger-btn { color: var(--danger); border-color: var(--danger); }
.danger-text { color: var(--danger); }
.drawer-input { width: 100%; margin: 12px 0 6px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 16px; }
.palette-row { display: flex; gap: 14px; overflow-x: auto; padding: 10px 2px 4px; }
.palette-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text); cursor: pointer; flex: none; }
.palette-swatch .sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; }
.palette-swatch.on .sw { border-color: var(--text); }
.palette-swatch .sw-name { font-size: 12px; white-space: nowrap; }

/* ═══ 主页对齐 Android:角标、计划、未来日期、日程、月历 ═══ */
.home-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.home-badge { border: none; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  background: var(--tertiary-container); color: var(--on-tertiary-container); }
.home-badge.blink { animation: badgeblink 1.6s ease-in-out infinite; }
@keyframes badgeblink { 50% { opacity: .55; } }
.plan-card { cursor: pointer; }
.accent-text { color: var(--primary); }
.proc-badge { font-weight: 600; }
.note-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.link-btn { background: none; border: none; color: var(--primary); font-size: 13px; padding: 4px 0 0; cursor: pointer; }
.future-capture .cap-row input[type="text"] { font-size: 16px; padding: 10px 14px; }
.cap-round.recording { background: var(--danger); color: #fff; }
.ds-day { position: relative; }
.ds-dot, .cal-dot { position: absolute; bottom: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--primary); }
.ds-day.sel .ds-dot { background: #fff; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; text-align: center; }
.cal-wd { font-size: 12px; color: var(--dim); padding: 4px 0; }
.cal-day { position: relative; border: none; background: none; color: var(--text); padding: 10px 0; border-radius: 50%;
  font-size: 15px; cursor: pointer; }
.cal-day.today { color: var(--primary); font-weight: 700; }
.cal-day.sel { background: var(--primary); color: #fff; }
.cal-day.sel .cal-dot { background: #fff; }
.nc-option { display: block; width: 100%; margin: 6px 0; text-align: left; }
.raw-block.editable { cursor: text; }
.note-row { margin-top: 8px; cursor: pointer; font-weight: 600; color: var(--dim); }
details.provenance { margin-top: 18px; }
details.provenance summary { cursor: pointer; color: var(--dim); font-size: 14px; }
.record-actions .small { margin: 0; }
textarea.drawer-input { font-family: inherit; resize: vertical; }

/* ═══ 阶段 D:关注领域详情 / 学习领域 ═══ */
.plan-row { padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.plan-row:last-of-type { border-bottom: none; }
.plan-row .title { margin-bottom: 2px; }
#focus-detail .card .cap-row button.small { margin-top: 8px; }
.stat-big { font-size: 20px; font-weight: 700; margin: 4px 0; }
.setup-card { cursor: pointer; border: 1px dashed var(--primary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.chip-row .mem-filter { background: var(--panel); color: var(--text); }
.review-line { padding: 6px 0; border-bottom: 1px solid var(--border); gap: 8px; }
.review-line:last-child { border-bottom: none; }
.plan-item-input { margin-bottom: 6px; }

/* ═══ 阶段 E:空间(同 Android SpaceScreen / SpaceDetailScreen) ═══ */
.refresh-row { display: block; margin: 6px 0 8px; }
.space-card { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.space-card .chev { color: var(--dim); font-size: 22px; }
.space-card-body { flex: 1; min-width: 0; }
.space-card-name { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-card-name.big { font-size: 22px; font-weight: 700; white-space: normal; }
.initial-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--primary-light); color: var(--primary); font-weight: 600; font-size: 20px; }
.initial-avatar.big { width: 52px; height: 52px; font-size: 22px; }
.initial-avatar.small { width: 36px; height: 36px; font-size: 16px; }
.pending-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pending-pill.blink { animation: badgeblink 1.6s ease-in-out infinite; }
.space-head { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.space-head .icon-btn { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--text); padding: 4px 8px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary);
  animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.space-tabs { display: flex; margin-top: 14px; border-bottom: 1px solid var(--border); }
.space-tab { flex: 1; border: none; background: none; padding: 10px 0; font-size: 15px; color: var(--dim); cursor: pointer;
  border-bottom: 2px solid transparent; }
.space-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.space-tab.alert { color: var(--danger); }
.space-tab-body { padding-top: 12px; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.received-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.received-text { white-space: pre-wrap; word-break: break-word; }
.recv-img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 4px; }
.invite-token { font-size: 17px; word-break: break-all; user-select: all; margin: 4px 0 8px; }
.share-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; border: none;
  border-bottom: 1px solid var(--border); background: none; color: var(--text); font-size: 16px; cursor: pointer; text-align: left; }
.share-option span:nth-child(2) { flex: 1; }
.share-option .chev { color: var(--dim); }
.pwa-note { font-size: 12px; opacity: .8; }
input.switch { flex: none; width: 22px; height: 22px; accent-color: var(--primary); }
#space-main.hidden, #space-detail.hidden { display: none; }

/* ═══ 阶段 F:运动轨迹 / 位置(同 Android CategoryTones.trail*) ═══ */
.category-trail { background: var(--trail-bg); color: var(--trail-text); }
.card.cat-trail { background: var(--trail-bg); cursor: pointer; }
.card.cat-trail .title { color: var(--trail-text); }
.today-tab.on.category-trail { background: var(--trail-bg) !important; color: var(--trail-text) !important; }
.mem-filter.on.category-trail { background: var(--trail-bg) !important; color: var(--trail-text) !important; }
.trail-badge-row { display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 8px; }
.trail-badge-row:empty { display: none; }
.trail-pill { border: none; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap;
  background: var(--tertiary-container, #D9F2EE); color: var(--on-tertiary-container, #0E4A52); overflow: hidden; text-overflow: ellipsis; }
.trail-map-view { position: fixed; inset: 0; z-index: 60; background: var(--bg-page); display: flex; flex-direction: column; }
.trail-map-view.hidden { display: none; }
.tm-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px 0; }
.tm-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-actions { padding: 6px 16px; flex-wrap: wrap; }
.tm-actions:empty { display: none; }
#trail-map { flex: 1; min-height: 240px; }
#tm-fallback { padding: 24px; }
#tm-fallback.hidden { display: none; }
body.trail-map-open .bottom-nav { display: none; }
.trail-time-label { background: rgba(255,255,255,.85); border: none; box-shadow: none; font-size: 11px; color: #333; padding: 1px 4px; }
.trail-time-label::before { display: none; }
.radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dim); }
.radio.on { border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--bg-card, #fff); background: var(--primary); }
.card.unavailable .title { opacity: .7; }
.geo-option { align-items: flex-start; }
.meta.block { display: block; margin-top: 2px; }
body.trail-map-open .edge-tab { display: none; }
.card.row-between > button { flex: none; white-space: nowrap; }

/* ═══ 背景水印(同 Android:Overlay 混合叠在页面上方,不挡点击) ═══ */
#watermark-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; display: none;
  background-position: center; background-repeat: no-repeat; mix-blend-mode: overlay; }
.wm-presets { display: flex; gap: 10px; overflow-x: auto; padding: 6px 0 4px; }
.wm-preset { flex: none; width: 54px; height: 84px; object-fit: cover; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); }
.wm-preset.on { border: 3px solid var(--primary); }
.wm-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wm-row input[type=range] { flex: 1; accent-color: var(--primary); }
.link-btn.danger-text { color: var(--danger); }

/* 隐私声明 / 操作说明书 */
.doc-intro { margin: 8px 0 4px; }
.doc-section-title { color: var(--primary); font-weight: 600; font-size: 16px; margin: 22px 0 6px; }
.doc-line { margin: 0 0 6px; line-height: 1.65; font-size: 15px; }

/* 捕获:已挑好的附件(同 Android AttachmentBar) */
.cap-attachments { padding: 0 16px; }
.cap-attachments:empty { display: none; }
.cap-att-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px;
  padding: 8px 12px; border-radius: 12px; background: var(--panel); }
#orb-cancel { margin-top: 6px; }
#orb-cancel.hidden { display: none; }
#cap-send:disabled { opacity: .45; }

/* 悬浮"+"快速记录 */
.qc { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 24px); z-index: 70; display: flex; flex-direction: column;
  align-items: flex-end; gap: 12px; }
.qc.hidden { display: none; }
.qc-fab { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--primary); color: #fff;
  font-size: 28px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; touch-action: none; }
.qc-menu { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.qc-menu.hidden { display: none; }
.qc-opt { display: flex; align-items: center; gap: 10px; border: none; background: none; cursor: pointer; padding: 0; }
.qc-label { background: #3A3A3A; color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.qc-glyph { width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: flex; align-items: center;
  justify-content: center; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.qc-mask { position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.25); }
.qc-mask.hidden { display: none; }
.qc-voice { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 96px); z-index: 71; display: flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: 999px; padding: 6px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.qc-voice.hidden { display: none; }
.qc-voice-stop { border: none; background: none; color: var(--danger); font-size: 14px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translateX(-50%) translateY(20px); opacity: 0;
  z-index: 400; background: #323232; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: 86vw;
  pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 主页卡片双击"重要"(同 Android errorContainer)、转送角标、未读闪烁 */
.card.today-record.important { background: var(--danger-bg); }
.received-badge { font-size: 12px; font-weight: 600; color: var(--dim); }
.card.blink, .mem-filter.blink { animation: badgeblink 1.6s ease-in-out infinite; }
.today-record, #mem-list .card { -webkit-touch-callout: none; user-select: none; }

.auth-hint { margin: -4px 0 6px; }
.auth-legal { margin-top: 14px; }
.doc-overlay { position: fixed; inset: 0; z-index: 260; background: var(--bg); overflow-y: auto; }
.doc-overlay-card { max-width: 640px; margin: 0 auto; padding: 16px 20px 40px; }

/* 关注领域 Dock 把手 / 收起态 */
.dock-handle { align-self: flex-end; border: none; background: var(--card); color: var(--dim); font-size: 18px; font-weight: 700;
  width: 22px; height: 40px; border-radius: 12px 0 0 12px; cursor: pointer; box-shadow: -2px 2px 8px rgba(0,0,0,.12); }
#focus-dock.collapsed .edge-tabs { display: none; }
#focus-dock.collapsed .dock-handle { height: 48px; width: 16px; }
body.trail-map-open #focus-dock { display: none; }