:root{
  color-scheme:light dark;
  --bg:#ffffff; --bg2:#f6f5f1; --bg3:#eeece5;
  --tx:#1d1d1b; --tx2:#6b6a65; --tx3:#9b9a94;
  --bd:rgba(0,0,0,.11); --bd2:rgba(0,0,0,.2);
  --blue:#378add; --blue-d:#185fa5; --blue-l:#e6f1fb;
  --teal:#1d9e75; --teal-d:#0f6e56; --teal-l:#e1f5ee;
  --amber:#ef9f27; --amber-d:#854f0b; --amber-l:#faeeda;
  --purple:#7f77dd; --purple-d:#534ab7; --purple-l:#eeedfe;
  --pink:#d4537e; --pink-d:#993556; --pink-l:#fbeaf0;
  --red:#e24b4a; --red-d:#a32d2d; --red-l:#fcebeb;
  --r:10px; --r2:14px;
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Helvetica Neue",sans-serif;
  /* position:fixed 把 body 钉死在视口上——iOS 键盘弹出时会 pan 整个 document，
     overflow:hidden 挡不住，会出现第二条滚动条、弹层整体错位。钉死后只有弹窗内部滚动。 */
  position:fixed; inset:0;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
  /* iOS 10+ 的 Safari 直接忽略 viewport 里的 user-scalable=no，双指一捏就把整页放大。
     pan-x pan-y＝只留单指滚动，禁掉浏览器 pinch-zoom 和双击缩放——时间轴的缩放由
     app.js 的双指手势自己做（只拉伸时间轴，不碰页面）。 */
  touch-action:pan-x pan-y;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* iOS 长按/拖动会触发系统文本选中，弹出页上残留一大片蓝色选区——
   全局禁选中，只放开输入框和文本域 */
body{-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
.hidden{display:none !important}

/* ---------- topbar ---------- */
#topbar{flex:0 0 auto;padding-top:var(--safeT);border-bottom:.5px solid var(--bd);background:var(--bg)}
.tb-row{display:flex;align-items:center;padding:8px 12px;gap:6px}
.tb-btn{width:34px;height:34px;border-radius:9px;font-size:24px;line-height:1;color:var(--tx2);flex:0 0 auto}
.tb-btn:active{background:var(--bg2)}
.tb-date{flex:1;text-align:center;display:flex;flex-direction:column;gap:1px;padding:2px 0}
#dateMain{font-size:17px;font-weight:600;letter-spacing:.2px}
#dateSub{font-size:12px;color:var(--tx2)}
.tb-stats{padding:2px 12px 9px;gap:0}
.stat{display:flex;flex-direction:column;align-items:center;flex:1}
.stat-main{align-items:flex-start;padding-left:2px}
.stat-main .stat-n{font-size:14px;font-weight:500;letter-spacing:.01em}
.stat-n{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.stat-l{font-size:11px;color:var(--tx3)}
.stat-sep{width:.5px;height:22px;background:var(--bd);align-self:center}
.stat-edit{font-size:12px;color:var(--tx2);padding:6px 10px;border:.5px solid var(--bd);border-radius:8px;margin-left:8px}
/* 同步状态：绿=已同步 橙=有改动待传/同步中 灰=连不上主机 */
.sync-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-left:10px;padding:0;border:none;background:var(--bd);transition:background .2s}
.sync-dot.s-ok{background:#1d9e75}
.sync-dot.s-pend{background:#ef9f27}
.sync-dot.s-syncing{background:#85b7eb;animation:syPulse 1s infinite}
.sync-dot.s-err{background:#b4b2ac}
@keyframes syPulse{0%,100%{opacity:1}50%{opacity:.35}}
.sync-box{display:flex;flex-direction:column;gap:6px}
.sync-line{display:flex;align-items:baseline;gap:6px;padding:2px 2px 1px}
.sync-state{font-size:13px;color:var(--tx2)}
.sync-when{font-size:12px;color:var(--tx3)}
.hidden-picker{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

/* ---------- tabs ---------- */
#tabs{flex:0 0 auto;display:flex;gap:2px;padding:6px 12px;border-bottom:.5px solid var(--bd);background:var(--bg)}
.tab{flex:1;padding:7px 0;font-size:13px;color:var(--tx2);border-radius:8px}
.tab.active{background:var(--bg2);color:var(--tx);font-weight:500}

/* ---------- main ---------- */
#main{flex:1 1 auto;overflow:hidden;position:relative}
.view{display:none;height:100%;overflow:hidden}
.view.active{display:flex;flex-direction:column}

/* ---------- catch-up ---------- */
#cuCount{font-size:12px;color:var(--tx2);display:block;margin-bottom:6px}
.chip{font-size:13px;padding:7px 12px;border-radius:9px;border:.5px solid var(--bd);background:var(--bg);color:var(--tx)}
.chip.on{color:#fff;border-color:transparent;font-weight:500}
.chip.pin::after{content:"·";margin-left:4px;opacity:.5}

/* ---------- 顶部提示条 ---------- */
#livebar{flex:0 0 auto;border-bottom:.5px solid var(--bd);background:var(--bg)}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 12px}
.lb-name{flex:1;font-size:12px;color:var(--tx3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-back{font-size:12px;padding:6px 12px;border-radius:8px;border:.5px solid var(--bd);color:var(--tx2);flex:0 0 auto}
.lb-empty{margin:0 12px 12px;padding:14px;border-radius:12px;background:var(--bg2)}
.lb-empty.hidden{display:none}
.lb-empty-t{font-size:13px;font-weight:500;margin:0 0 4px}
.lb-empty-s{font-size:11px;color:var(--tx3);line-height:1.5;margin:0}

/* ---------- timeline ---------- */
.tl-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.tl-tl{font-size:11px;color:var(--tx3)}
.tl-unit{font-size:11px;color:var(--tx3);margin-left:2px}
.tl-sep{flex:1}
.tl-canvas{position:relative;display:flex;padding:10px 14px 0}
/* 双指捏合预览中：整轴只做纵向 transform 拉伸（scaleY），不重画 DOM（跟手的关键）。
   只拉纵轴——用户要的是「时间轴上下变宽/缩短」，不是横竖一起放大。 */
.tl-canvas.pinching{will-change:transform}
.tl-gutter{flex:0 0 58px;position:relative;touch-action:pan-y;cursor:ns-resize}
.tl-gutter span{position:absolute;right:7px;font-size:10px;color:var(--tx3);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.tl-gutter span.prev{color:var(--tx3);opacity:.6}
.tl-gutter span.half{opacity:.55}
.tl-track{flex:1;position:relative;min-height:100%;touch-action:pan-y}
.tl-track.locked{touch-action:none}
.tl-hr{position:absolute;left:0;right:8px;border-top:.5px solid var(--bd);opacity:.5}
.tl-hr.half{opacity:.2}
/* 按粒度画的分割线：细线 < 30 分中线（更明显）< 整点粗线 */
.tl-min{position:absolute;left:0;right:8px;border-top:.5px solid var(--bd);opacity:.14}
.tl-min.half{opacity:.32;border-top-width:1px}
.tl-dayline{position:absolute;left:0;right:8px;border-top:1px solid var(--tx3);opacity:.45}
.tl-gutter span.daymark{font-size:10px;font-weight:600;color:var(--tx);background:var(--bg);
  padding:1px 5px;border-radius:5px;right:2px;letter-spacing:.2px;z-index:2}
.tl-blk{position:absolute;left:5px;right:8px;border-radius:5px;padding:2px 6px;overflow:hidden;cursor:grab;touch-action:pan-y;z-index:3}
.tl-blk b{display:block;font-size:11px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-blk i{display:block;font-size:10px;font-style:normal;opacity:.75;font-variant-numeric:tabular-nums}
.tl-blk u{display:block;font-size:10px;text-decoration:none;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-blk.thin{padding-top:1px}
.tl-blk.thin b{font-size:10.5px;line-height:1.25}
.tl-blk.thin i{font-size:9.5px;line-height:1.25}
.tl-blk.thin u{font-size:9.5px;line-height:1.25}
.tl-handle{position:absolute;left:0;right:0;height:14px;display:flex;align-items:center;justify-content:center;cursor:ns-resize}
.tl-handle::before{content:"";width:20px;height:2px;border-radius:1px;background:currentColor;opacity:0}
.tl-blk.sel .tl-handle::before{opacity:.5}
.tl-handle.t{top:-3px}.tl-handle.b{bottom:-3px}
.tl-gap{position:absolute;left:5px;right:8px;border-radius:5px;border:.5px dashed var(--bd2);z-index:1;background:repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(0,0,0,.022) 5px,rgba(0,0,0,.022) 10px)}
.tl-gap-l{position:absolute;left:7px;font-size:10px;color:var(--tx3)}
.tl-sel{position:absolute;left:5px;right:8px;background:var(--blue);opacity:.2;border:.5px solid var(--blue);border-radius:5px;z-index:4;pointer-events:none}
.tl-sel-l{position:absolute;left:0;font-size:10px;color:var(--blue-d);background:var(--bg);padding:0 4px;border-radius:3px;font-variant-numeric:tabular-nums;z-index:5;pointer-events:none}
.tl-sel-tip{position:absolute;right:10px;font-size:10px;color:var(--bg);background:var(--blue-d);padding:1px 6px;border-radius:4px;z-index:5;pointer-events:none}
/* 起止与时长标签都贴选区底边（见 app.js draw 里的注释）：top 由 JS 给，不再上移 */
.tl-now{position:absolute;left:50px;right:8px;height:1px;background:var(--red);z-index:7}
/* 红线左端的当前时间小牌（苹果日程样式）：压在刻度栏上，和 Hour 标签同一列 */
.tl-now-l{position:absolute;left:-36px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;line-height:1.45;color:#fff;background:var(--red);padding:0 4px;border-radius:4px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.tl-now.flash{animation:nowflash .9s ease}
@keyframes nowflash{0%{opacity:1}25%{opacity:.15}45%{opacity:1}70%{opacity:.15}100%{opacity:1}}
.tl-hint{flex:0 0 auto;padding:9px 16px calc(11px + var(--safeB));font-size:11px;color:var(--tx3);text-align:center;border-top:.5px solid var(--bd);background:var(--bg)}

/* ---------- list ---------- */
.ls-filter{flex:0 0 auto;display:flex;gap:6px;padding:8px 14px;border-bottom:.5px solid var(--bd);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ls-filter::-webkit-scrollbar{display:none}
.ls-fchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:14px;border:1px solid var(--bd);background:var(--bg);color:var(--tx2);font-size:12px;line-height:1.2;white-space:nowrap}
.ls-fchip:active{background:var(--bg2)}
.ls-fchip i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ls-fchip.on{color:#fff;border-color:transparent;background:var(--tx)}
.ls-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px calc(20px + var(--safeB))}
.ls-empty{padding:40px 24px;text-align:center;color:var(--tx3);font-size:13px;line-height:1.7}
.ls-row{display:flex;gap:9px;align-items:flex-start;padding:9px 8px;border-radius:9px;cursor:pointer}
.ls-row:active{background:var(--bg2)}
.ls-dot{flex:0 0 auto;width:9px;height:9px;border-radius:3px;margin-top:5px}
.ls-main{flex:1;min-width:0}
.ls-t{font-size:13px;font-variant-numeric:tabular-nums;color:var(--tx2)}
.ls-n{font-size:14px;margin-top:1px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;white-space:pre-wrap;word-break:break-word}
.ls-n em{font-style:normal;font-size:10px;padding:1px 5px;border-radius:4px;background:var(--bg3);color:var(--tx2)}
.ls-note{font-size:12px;color:var(--tx3);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.ls-sub{font-size:11px;color:var(--tx3);margin-top:1px}
.ls-dur{flex:0 0 auto;font-size:12px;color:var(--tx2);margin-top:4px;font-variant-numeric:tabular-nums}
.ls-sec{margin-top:14px;padding:0 8px;font-size:11px;color:var(--tx3);letter-spacing:.3px}

/* ---------- stats ---------- */
.st-range{flex:0 0 auto;display:flex;gap:6px;padding:9px 16px;border-bottom:.5px solid var(--bd);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.st-range::-webkit-scrollbar{display:none}
.st-rchip{flex:0 0 auto;padding:5px 13px;border-radius:14px;border:1px solid var(--bd);background:var(--bg);color:var(--tx2);font-size:12px;line-height:1.2;white-space:nowrap}
.st-rchip:active{background:var(--bg2)}
.st-rchip.on{background:var(--blue);border-color:transparent;color:#fff}
.st-mod{flex:0 0 auto;display:flex;gap:5px;padding:0 16px 9px}
.st-mseg{flex:0 0 auto;padding:4px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);color:var(--tx2);font-size:11px;line-height:1.3;white-space:nowrap}
.st-mseg:active{background:var(--bg2)}
.st-mseg.on{background:var(--blue);border-color:transparent;color:#fff}
.st-none{padding:26px 8px;text-align:center;color:var(--tx3);font-size:13px}
.st-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(24px + var(--safeB))}
.st-h{font-size:13px;font-weight:500;margin:22px 0 9px}
.st-h:first-child{margin-top:0}
.st-sub{font-size:11px;color:var(--tx3);margin:-5px 0 9px}
.st-bars{display:flex;flex-direction:column;gap:1px}
.st-bar{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}
/* 标签列固定宽度：名字长短不一时，条形左端才不会各自错开 */
.st-bar .nm{flex:0 0 78px;width:78px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar .tr{flex:1;height:15px;background:var(--bg2);border-radius:4px;overflow:hidden}
.st-bar .tr i{display:block;height:100%;border-radius:4px}
.st-bar .vl{flex:0 0 auto;min-width:56px;text-align:right;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mx{border:.5px solid var(--bd);border-radius:var(--r);padding:12px;overflow-x:auto}
.mx-in{display:inline-block}
.mx-lab{font-size:9px;color:var(--tx3);text-align:center}
.mx-lay{display:flex;gap:2px;margin-bottom:3px}
.mx-lay .cl{width:17px;height:13px}
.mx-lay .rl{width:20px;height:13px;flex:0 0 auto;font-size:9px;color:var(--tx3);display:flex;align-items:center;justify-content:flex-end;padding-right:3px}
.st-note{font-size:12px;line-height:1.65;color:var(--tx);background:var(--bg2);border-radius:10px;padding:11px 12px}
.st-note b{font-weight:600}
.st-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:4px}
.st-cal .cd{aspect-ratio:1;border-radius:4px;background:var(--bg2)}
.st-cal .hd{font-size:9px;color:var(--tx3);text-align:center;padding-bottom:2px}

/* ---------- sheets ---------- */
.sheet-back{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:41;background:var(--bg);
  border-radius:18px 18px 0 0;padding-bottom:var(--safeB);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.13)}
/* 键盘开着时：Home 条已被键盘盖住，safe-area 留白是纯浪费——收掉，保存紧贴键盘 */
html.kb .sheet{padding-bottom:6px}
html.kb .sheet-foot{padding-bottom:10px}
/* 弹窗里的滚动条一律藏掉：内容照常滚，但不显示那根线（手机上尤其碍眼） */
.sheet-body,#edNote,.tx-area{scrollbar-width:none}
.sheet-body::-webkit-scrollbar,#edNote::-webkit-scrollbar,.tx-area::-webkit-scrollbar{display:none}
/* 绑定事件这个弹窗：搜索结果多少条高度都差不多，别让底抽屉忽高忽低 */
#sheetPoolPick{min-height:62vh}
/* sheet 之间是叠放关系（设置 → 分类管理 → 编辑分类），
   用 JS 设置的 --z 保证后打开的盖在先打开的上面 */
.sheet[data-z="1"]{z-index:41}
.sheet[data-z="2"]{z-index:42}
.sheet[data-z="3"]{z-index:43}
.sheet[data-z="4"]{z-index:44}
.sheet-grab{width:34px;height:4px;border-radius:2px;background:var(--bd2);margin:8px auto 0;flex:0 0 auto}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:.5px solid var(--bd);flex:0 0 auto}
.sheet-head span{font-size:15px;font-weight:600}
.sheet-head button{font-size:14px;color:var(--blue-d)}
.sheet-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 18px}
.sheet-note{font-size:11px;color:var(--tx3);margin:0 0 10px}
/* 底部留白只算一次 safe-area：.sheet 自身已有 padding-bottom:var(--safeB)，
   foot 再加一遍就会出现保存按钮下面一大段空 */
.sheet-foot{display:flex;gap:9px;padding:12px 18px 14px;border-top:.5px solid var(--bd);flex:0 0 auto}
.fld{display:block;font-size:12px;color:var(--tx2);margin-bottom:16px}
.fld input[type=text],.fld input[type=number],.fld select,.fld textarea,.tx-area{
  display:block;width:100%;margin-top:6px;padding:10px 11px;font-size:15px;color:var(--tx);
  background:var(--bg2);border:.5px solid var(--bd);border-radius:9px}
/* 备注是 contenteditable div，不是 textarea——iOS 的「自动填充联系人」条
   只认表单控件，autocomplete="off" 对它无效，换 contenteditable 才真正消失 */
#edNote{
  display:block;width:100%;margin-top:6px;padding:10px 11px;font-size:15px;color:var(--tx);
  background:var(--bg2);border:.5px solid var(--bd);border-radius:9px;
  min-height:78px;max-height:36vh;line-height:1.5;font-family:inherit;
  overflow-y:auto;-webkit-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-word;
  outline:none;-webkit-appearance:none;appearance:none}
#edNote:focus{border-color:var(--blue)}
#edNote:empty::before{content:attr(data-ph);color:var(--tx3);pointer-events:none}
/* 时间输入框（开始/结束）不写样式的话，iOS 夜间模式下会按原生样式
   渲染成白底胶囊、文字继承浅色，直接看不见——显式给它配色 */
input[type=time]{
  display:block;width:100%;padding:10px 11px;font-size:15px;color:var(--tx);
  background:var(--bg2);border:.5px solid var(--bd);border-radius:9px;
  -webkit-appearance:none;appearance:none}
.fld input:focus,.fld select:focus,.tx-area:focus{outline:none;border-color:var(--blue)}
.fld-unit{font-size:11px;color:var(--tx3);margin-left:6px}
.fld .btn-dashed,.fld .btn-line{margin-top:6px}
.ed-row{display:flex;gap:9px}
.ed-col{flex:1}
.fld-sm{font-size:11px;color:var(--tx3);display:block;margin-bottom:2px}
.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:7px}
.csw{aspect-ratio:1;border-radius:8px;border:2px solid transparent}
.csw.on{border-color:var(--tx)}
.tgl{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--tx);padding:10px 0;border-top:.5px solid var(--bd)}
.tgl input{display:none}
.tgl .sw{width:44px;height:26px;border-radius:13px;background:var(--bg3);position:relative;transition:background .18s;flex:0 0 auto}
.tgl .sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl input:checked + .sw{background:var(--teal)}
.tgl input:checked + .sw::after{transform:translateX(18px)}
.cl-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:.5px solid var(--bd)}
.cl-row.arch{opacity:.55}
.cl-res{margin-left:auto;font-size:12px;padding:3px 9px;border-radius:7px;border:.5px solid var(--bd);color:var(--tx2);background:var(--bg2)}
.cl-dot{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
.cl-nm{flex:1;font-size:14px}
.cl-min{font-size:11px;color:var(--tx3);width:54px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.cl-p{font-size:11px;color:var(--blue-d);padding:5px 7px;border-radius:6px}
.ed-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ec-gh{display:flex;align-items:center;gap:6px;width:100%;font-size:11px;color:var(--tx3);margin-top:8px}
.ec-gh span{flex:1}
.ec-add{width:20px;height:20px;border-radius:5px;border:1px dashed var(--bd2);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tx3);flex:0 0 auto}
.ec-add:hover{border-color:var(--tx3);color:var(--tx)}
.ed-cats-head{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.ed-cats-lb{font-size:12px;color:var(--tx2)}
.ed-note-fld{margin-top:14px}
.ed-note-lb{display:block}
.ed-notes{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 7px}
.ed-notes.hidden{display:none}
.nt-lb{font-size:11px;color:var(--tx3);margin-right:2px}
.nt-c{font-size:12px;padding:4px 9px;border-radius:7px;border:.5px solid var(--bd);
  background:var(--bg2);color:var(--tx2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-c:active{background:var(--bg3);color:var(--tx)}
.fld-seg{font-size:12px;color:var(--tx2);margin-bottom:16px}
.seg-row{display:flex;gap:5px;margin-top:7px}
.seg{flex:1;padding:9px 0;font-size:13px;border-radius:9px;border:.5px solid var(--bd);color:var(--tx2)}
.seg.on{background:var(--tx);color:var(--bg);border-color:transparent;font-weight:500}
.seg-note{font-size:11px;color:var(--tx3);margin-top:7px;line-height:1.5}
.cl-g{font-size:11px;color:var(--tx3);margin-top:14px;display:flex;align-items:center;gap:7px}
.cl-g:first-child{margin-top:0}
.cl-g .bar{width:9px;height:9px;border-radius:3px}
.cl-g .nm{flex:1;color:var(--tx);font-size:12px}
.cl-g .add{font-size:11px;color:var(--blue-d);padding:4px 8px;border-radius:6px;border:.5px solid var(--bd)}
.cl-row.cur{background:var(--bg2)}
/* ---------- 时间分类管理（折叠 + 绑定 + 显示开关） ---------- */
.tc-g{border-bottom:.5px solid var(--bd)}
.tc-g:last-child{border-bottom:none}
.tc-g.arch{opacity:.5}
.tc-row{display:flex;align-items:center;gap:8px;padding:12px 2px}
.tc-caret{font-size:10px;color:var(--tx3);width:15px;flex:0 0 auto;line-height:1;text-align:center}
.tc-dot{width:13px;height:13px;border-radius:5px;flex:0 0 auto}
.tc-nm{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-tag{font-size:10px;color:var(--tx3);flex:0 0 auto;background:var(--bg2);padding:3px 6px;border-radius:5px}
.tc-btn{width:28px;height:28px;border-radius:8px;color:var(--tx2);font-size:14px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.tc-btn:active{background:var(--bg2)}
.tc-heart.on{color:#dd5b52}
.tc-heart.off{color:var(--tx3)}
.tc-add{font-size:17px;color:var(--tx2)}
.tc-kids{margin:0 0 10px;padding:2px 10px 6px;border-radius:10px;background:var(--bg2)}
.tc-kid{display:flex;align-items:center;gap:8px;padding:10px 2px;border-bottom:.5px solid var(--bd)}
.tc-kid:last-of-type{border-bottom:none}
.tc-kid .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.tc-kid .nm{flex:1;font-size:13px;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-x{width:22px;height:22px;border-radius:6px;color:var(--tx3);font-size:15px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.tc-x:active{background:var(--bg3)}
.tc-addrow{display:block;width:100%;text-align:left;font-size:12px;color:var(--blue-d);padding:10px 2px 6px}
.tc-empty{font-size:12px;color:var(--tx3);padding:11px 2px;line-height:1.5}
.cat-bind-note{font-size:11px;color:var(--tx3);line-height:1.5;margin-top:8px;padding-top:10px;border-top:.5px solid var(--bd)}
.bd-group{margin-bottom:16px}
.bd-gh{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx);margin-bottom:7px}
.bd-gh .bar{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.bd-cats{display:flex;flex-wrap:wrap;gap:6px}
.bd-c{display:flex;align-items:center;gap:5px;font-size:12px;padding:6px 8px 6px 10px;border-radius:8px;border:.5px solid var(--bd);background:var(--bg2);position:relative}
.bd-c.on{color:#fff;border-color:transparent}
.bd-c .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.bd-c.on .sw{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.bd-x{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:#fff;opacity:.55;margin-left:1px;flex:0 0 auto}
.bd-x:hover{background:rgba(0,0,0,.18);opacity:1}
.bd-add{width:28px;height:28px;border-radius:8px;border:1px dashed var(--bd2);
  display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:15px;flex:0 0 auto}
.bd-add:hover{border-color:var(--tx3);color:var(--tx)}
.pp-list{display:flex;flex-direction:column;gap:7px}
.pp-search{flex:0 0 auto;padding:11px 18px 0}
.pp-search input{width:100%;padding:9px 11px;font-size:14px;background:var(--bg2);color:var(--tx);
  border:.5px solid var(--bd);border-radius:9px}
.pp-new{display:flex;align-items:center;gap:8px;width:100%;padding:12px;border-radius:10px;
  border:1px dashed var(--bd2);color:var(--blue-d);font-size:14px;text-align:left}
.pp-new span{font-size:16px;line-height:1}
.pp-c{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:10px;
  border:.5px solid var(--bd);background:var(--bg2);font-size:14px;text-align:left;width:100%}
.pp-c:active{background:var(--bg3)}
.pp-c .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.pp-c small{margin-left:auto;font-size:11px;color:var(--tx3);flex:0 0 auto}
  border:.5px solid var(--bd);border-radius:9px}
.arc-empty{text-align:center;color:var(--tx3);font-size:13px;padding:30px 0}
.gp-preview{margin-top:6px;padding:12px;border-radius:10px;background:var(--bg2)}
.gp-pv-name{font-size:14px;font-weight:500}
.gp-pv-hint{font-size:11px;color:var(--tx3);margin-top:3px}
.ed-hint{font-size:11px;color:var(--tx3);margin-top:-8px}
.btn-primary,.btn-danger,.btn-dashed,.btn-line{
  padding:11px 14px;border-radius:10px;font-size:14px;border:.5px solid var(--bd);text-align:center}
.btn-primary{background:var(--tx);color:#fff;border-color:transparent;font-weight:500;flex:1}
.btn-danger{color:var(--red);flex:0 0 auto}
/* 弹窗底部按钮一律平均分（几个按钮就几等分），不再按主次调宽窄 */
.sheet-foot > button{flex:1 1 0;width:auto;min-width:0}
.btn-dashed{display:block;width:100%;color:var(--tx2);border-style:dashed}
.btn-line{display:block;width:100%;color:var(--tx)}
.danger-line{color:var(--red)}
.set-acts{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.imp-opts{margin-top:10px;padding-top:4px;border-top:.5px solid var(--bd)}
.imp-hint{font-size:11px;color:var(--tx3);line-height:1.5;margin:4px 0 0}
.tx-area{font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;resize:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(30px + var(--safeB));transform:translateX(-50%) translateY(14px);
  background:var(--tx);color:#fff;font-size:13px;padding:9px 16px;border-radius:9px;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:720px){
  /* livebar 也要在 760 列里——否则它通栏撑满，「快速记录」按钮甩到屏幕最右，
     和顶栏「设置」、tab 栏对不齐（她 10-19 晚报的桌面端对齐问题） */
  #topbar,#tabs,#livebar,#main{max-width:760px;margin:0 auto;width:100%}
  .tb-date{font-size:19px}
  .cu-card{padding:22px 20px 16px}
  .cu-time{font-size:30px}
  .color-grid{grid-template-columns:repeat(10,1fr)}
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1a1a19;--bg2:#242423;--bg3:#33322f;
    --tx:#eceae4;--tx2:#a5a39c;--tx3:#78766f;
    --bd:rgba(255,255,255,.12);--bd2:rgba(255,255,255,.24);
    --blue-l:#14243a;--teal-l:#0f2a20;--amber-l:#33260f;--purple-l:#211f3c;--pink-l:#331c26;--red-l:#3a1615;
    --blue:#4e93dd;--blue-d:#8fc0ee;--teal:#2ba983;--teal-d:#5fc4a2;
    --amber:#f0aa3d;--amber-d:#f3c377;--purple:#948ceb;--purple-d:#b4adf0;
    --pink:#e0698f;--pink-d:#ef97b4;--red:#ef5f5e;
  }
  .cu-all{background:var(--tx);color:var(--bg)}
  /* 夜间 --tx 是浅色，btn-primary 白字会看不见 */
  .btn-primary{color:var(--bg)}
  .tl-gap{background:repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(255,255,255,.03) 5px,rgba(255,255,255,.03) 10px)}
  .toast{background:var(--tx);color:var(--bg)}
}
/* ---------- 登录 / 注册（全屏页） ---------- */
.login-screen{
  position:fixed; inset:0; z-index:80;
  background:
    radial-gradient(130% 55% at 50% -8%, var(--blue-l) 0%, rgba(0,0,0,0) 62%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:28px 24px calc(28px + var(--safeB));
  overflow-y:auto;
}
.login-card{
  width:100%; max-width:320px; margin:auto;
  display:flex; flex-direction:column; gap:14px;
}
.login-icon{
  width:68px; height:68px; margin:0 auto; border-radius:20px;
  background:var(--blue-l); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.login-icon svg{width:36px; height:36px}
.login-logo{font-size:24px; font-weight:800; letter-spacing:3px; text-align:center}
.login-sub{font-size:13px; color:var(--tx2); text-align:center; margin-top:-8px}
.login-tabs{
  display:flex; gap:6px; background:var(--bg2); padding:4px;
  border-radius:11px; margin-top:8px;
}
.ltab{flex:1; padding:9px 0; font-size:14px; border-radius:8px; color:var(--tx2)}
.ltab.active{background:var(--bg); color:var(--tx); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.10)}
.login-card .fld{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--tx2)}
.login-card .fld input{
  width:100%; box-sizing:border-box;
  font-size:16px; padding:12px 14px;
  border:1.5px solid var(--bd2); border-radius:12px;
  background:var(--bg2); color:var(--tx);
  -webkit-user-select:text; user-select:text;
}
.login-card .fld input:focus{outline:none; border-color:var(--blue); background:var(--bg)}
.login-err{min-height:18px; font-size:12.5px; color:var(--red); text-align:center}
.login-btn{
  margin-top:2px; width:100%; padding:13px 0;
  font-size:16px; font-weight:600;
  background:var(--blue); color:#fff; border-radius:12px;
}
.login-btn:active{filter:brightness(.88)}
.login-skip{align-self:center; font-size:13px; color:var(--tx3); padding:8px 12px}
.login-skip:active{color:var(--tx2)}

/* 设置页里的账号那一行 */
.sync-account{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 4px}
.sync-account #setAccountName{font-size:13.5px; font-weight:600; color:var(--tx)}
.sync-account .btn-line{font-size:12.5px; padding:6px 10px}

/* ---------- 滑块确认（清空全部数据） ---------- */
.swipe-confirm{
  position:relative; height:46px; border-radius:12px;
  background:var(--red-l, rgba(239,95,94,.12));
  border:1px solid var(--bd2); overflow:hidden;
  touch-action:pan-y;
}
.swipe-fill{
  position:absolute; left:0; top:0; bottom:0; width:46px;
  background:var(--red); opacity:.16; pointer-events:none;
}
.swipe-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--tx2); pointer-events:none; user-select:none;
  -webkit-user-select:none;
}
.swipe-knob{
  position:absolute; left:0; top:0; bottom:0; width:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; font-size:20px; font-weight:700;
  border-radius:11px; cursor:grab; touch-action:none;
  transition:transform .18s ease;
}
.swipe-confirm.swiping .swipe-knob{transition:none; cursor:grabbing}

/* ---------- 启动遮罩（刷新中） ----------
   init() 要从 IndexedDB 读设置、分类、记录，这几步之间有一帧到几百毫秒的空档。
   以前空档里页面是静态 HTML 的样子（写死的日期 + 「这里还是空的」），
   刷新就像换了一次页面（她 10-19 报）。现在用一层居中小动画盖住空档，
   数据渲染完再淡出——屏幕中间一个「刷新中」，不闪内容。 */
#bootVeil{
  position:fixed; inset:0; z-index:90;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .22s ease;
}
#bootVeil.gone{opacity:0; pointer-events:none}
#bootVeil .bv-spin{
  width:34px; height:34px; border-radius:50%;
  border:2.5px solid var(--bg3); border-top-color:var(--blue);
  animation:bvSpin .8s linear infinite;
}
#bootVeil .bv-tx{font-size:13px; color:var(--tx2); letter-spacing:.1px}
@keyframes bvSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #bootVeil .bv-spin{animation-duration:2.4s}
}

/* ---------- 搜索页 ----------
   第四个页签。搜索框钉在顶上，下面滚结果：先汇总一行（多少条/共多久/覆盖几天），
   再按日期分节倒序列出，每行直接点就能跳回那天编辑（她 10-19 要的全局搜索：
   时间分类、事件、备注三个字段都参与，比如搜「柳州环线」或「运动」）。
   行卡片复用列表页的 ls-row 体系，视觉上和「列表」页一致。 */
.sc-bar{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:10px 14px 8px;border-bottom:.5px solid var(--bd)}
.sc-bar input{flex:1;min-width:0;padding:9px 12px;font-size:14px;background:var(--bg2);color:var(--tx);
  border:.5px solid var(--bd);border-radius:9px}
.sc-bar input::placeholder{color:var(--tx3)}
.sc-bar input:focus{outline:none;border-color:var(--blue);background:var(--bg)}
.sc-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;font-size:17px;line-height:1;color:var(--tx3);background:var(--bg3)}
.sc-x:active{background:var(--bd)}
.sc-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px calc(20px + var(--safeB))}
.sc-hint{padding:36px 20px;text-align:center;color:var(--tx3);font-size:13px;line-height:1.9}
.sc-none{padding:36px 20px;text-align:center;color:var(--tx3);font-size:13px;line-height:1.8}
.sc-none b{color:var(--tx2);font-weight:600}
/* 汇总行：搜出来多少条、一共多久、覆盖几天 */
.sc-sum b{font-size:14px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
/* 历史搜索 + 试试搜（查询词为空时才出现） */
.sc-hs{margin:10px 4px 2px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sc-hs-t{font-size:12px;font-weight:500;color:var(--tx2)}
.sc-hs-clr{font-size:11px;color:var(--tx3);padding:2px 4px}
.sc-hs-clr:active{color:var(--red-d)}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 4px 4px}
.sc-chip{flex:0 0 auto;max-width:100%;padding:5px 11px;border-radius:14px;border:1px solid var(--bd);
  background:var(--bg);color:var(--tx2);font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-chip:active{background:var(--bg2)}
.sc-chip.on{background:var(--blue);border-color:transparent;color:#fff}
.sc-chip i{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-right:5px;vertical-align:1px}

/* ---------- 搜索页 · 日期折叠节（她 10-19 第二条） ----------
   日期分组默认收起：一眼看每天的统计（几条 · 共多久），点日期头展开当天明细，
   汇总行右边一个按钮一键全部展开/折叠。节标题用 13px（比列表页的 11px 大一点），
   只作用于搜索页——列表/统计页的 .ls-sec 不动。 */
.sc-day{margin-top:14px}
/* 两级折叠：年份是一级分组，日期缩进挂在年份下面 */
.sc-year{margin-top:14px}
.sc-year .sc-day{margin:6px 0 0 14px}
.sc-year .sc-day .sc-sec{padding-left:0;padding-right:0}
.sc-sec{display:flex;align-items:baseline;padding:8px 8px 7px;cursor:pointer;border-radius:8px;
  font-size:13px;color:var(--tx);-webkit-user-select:none;user-select:none}
.sc-sec:active{background:var(--bg2)}
/* caret 不用 transform 旋转——她 Safari 里 rotate 不生效（年份折叠/展开都显示 ›）。
   改用 ::before 直接换字符：折叠 ›、展开 ˅，零兼容风险 */
.sc-sec .sc-caret{flex:0 0 auto;font-style:normal;font-size:11px;line-height:1;color:var(--tx3);
  margin-right:6px}
.sc-sec .sc-caret::before{content:'›'}
.sc-year.open > .sc-sec .sc-caret::before,
.sc-day.open > .sc-sec .sc-caret::before{content:'˅'}
.sc-sec .sc-day-t{font-weight:600;font-variant-numeric:tabular-nums}
.sc-sec .sc-day-s{flex:0 0 auto;margin-left:3px;font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.sc-items{display:none}
/* 两层各自的展开规则必须用直接子选择器：`.sc-year.open .sc-items`（后代）会连带把
   该年份下所有日期节的内容也铺开——年份展开了日期却关不掉（她 10-19 晚报的） */
.sc-year.open > .sc-items{display:block}
.sc-day.open > .sc-items{display:block}
/* 汇总行：左边统计文字，右边「全部展开/折叠」按钮 */
.sc-sum{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 2px 0}
.sc-sum>span{font-size:12px;color:var(--tx2);line-height:1.7}
.sc-fold-btn{flex:0 0 auto;padding:4px 10px;border-radius:7px;background:var(--bg2);
  font-size:12px;color:var(--blue);line-height:1.4}
.sc-fold-btn:active{background:var(--bg3)}
/* 搜索结果行：第一行时间段＋备注（同行），第二行「事件名 · 时间分类名」小字副标题。
   备注用列表主标题的字号（14px、正文色）——她 10-19：搜索行也要参考列表的样式 */
.sc-row .ls-note{margin-left:6px;font-size:14px;color:var(--tx);line-height:1.45}
.sc-row .sc-meta{display:block;margin-top:2px;font-size:12px;color:var(--tx2);line-height:1.5}
/* 搜索命中的词加粗（时间分类/事件/备注里都加） */
.ls-row b{font-weight:700}

/* ---------- 快速记录按钮（她 10-19 晚） ----------
   挂在 livebar 行右侧：一键新建「最后记录结束 → 此刻」的记录。
   开始时间取当天最后一条记录的结束点（没记录＝00:00），结束＝此刻四舍五入到 5 分钟。 */
.lb-quick{flex:0 0 auto;padding:4px 12px;border-radius:14px;background:var(--blue);color:#fff;
  font-size:12px;line-height:1.5;letter-spacing:.2px}
.lb-quick:active{opacity:.82}