:root{
  --bg:#f2f5fb;
  --surface:#ffffff;
  --surface-alt:#f8faff;
  --surface-hover:#f1f3f4;
  --tag-bg:#edf0f7;
  --primary:#0b57d0;
  --primary-ink:#0b57d0;
  --primary-soft:#dbe7fb;
  --primary-faint:#e9f0fc;
  --primary-deep:#0a4fb8;
  --on-primary:#ffffff;
  --text:#1f1f1f;
  --text2:#5a6472;
  --text3:#8992a2;
  --line:#e3e8f2;
  --danger:#d93025;
  --cost:#188038;
  --star:#f9ab00;
  --star-off:#d8dadd;
  --switch-off:#ced0d4;
  --muted-icon-filter:none;
  --shadow:0 1px 3px rgba(25,45,90,.10),0 2px 10px rgba(25,45,90,.06);
  --shadow2:0 8px 22px rgba(25,45,90,.18);
  --radius:18px;
  --surface-rgb:255,255,255;
  --bg-rgb:242,245,251;
  --bg-opacity:0.8;
  --card-alpha:0.88;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
:root[data-color-mode="dark"]{
  --bg:#111318;
  --surface:#1b1e24;
  --surface-alt:#22262e;
  --surface-hover:#292e37;
  --tag-bg:#292e37;
  --primary-soft:#263954;
  --primary-faint:#202a39;
  --text:#edf0f5;
  --text2:#bac2cf;
  --text3:#8993a3;
  --line:#303640;
  --danger:#ff776d;
  --cost:#66c98a;
  --star:#ffc34d;
  --star-off:#555d69;
  --switch-off:#4b525e;
  --surface-rgb:27,30,36;
  --bg-rgb:17,19,24;
  --muted-icon-filter:brightness(0) saturate(100%) invert(78%) sepia(8%) saturate(359%) hue-rotate(178deg) brightness(93%);
  --shadow:0 1px 3px rgba(0,0,0,.32),0 2px 12px rgba(0,0,0,.22);
  --shadow2:0 8px 24px rgba(0,0,0,.42);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{
  height:100%;
  overflow:hidden;
}
body{
  height:100%;
  width:100%;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(46% 34% at 90% -6%, var(--primary-faint) 0%, transparent 74%);
  background-repeat:no-repeat;
  color:var(--text);font-size:15px;line-height:1.5;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
[hidden]{display:none!important}
.theme-changing,.theme-changing *,.theme-changing *::before,.theme-changing *::after{transition:none!important}

/* ===== 顶部栏 ===== */
.appbar{
  position:fixed;top:0;left:0;right:0;z-index:40;background:linear-gradient(180deg,var(--primary) 0%,var(--primary-deep) 100%);color:#fff;
  box-shadow:0 2px 8px rgba(20,40,90,.18);
  padding-top:var(--safe-t);
}
.appbar-top,.searchbar{display:flex;align-items:center;height:56px;padding:0 6px}
.app-title{font-weight:500;font-size:19px;letter-spacing:.3px;margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-spacer{flex:1}
.iconbtn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.iconbtn:active{background:rgba(255,255,255,.22)}
.iconbtn.dark{color:#fff}
.ic{width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:contain;filter:invert(1)}





#appbarSortBtn.on{background:rgba(255,255,255,.22)}
.searchbar{background:var(--primary)}
.searchbar input{flex:1;height:44px;border:none;background:rgba(255,255,255,.16);border-radius:8px;padding:0 14px;color:#fff;font-size:16px;outline:none}
.searchbar input::placeholder{color:rgba(255,255,255,.8)}

/* ===== 侧边抽屉（类型） ===== */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;transition:opacity .2s}
.drawer{
  position:fixed;top:0;bottom:0;left:0;width:min(78vw,320px);z-index:80;background:var(--surface);
  display:flex;flex-direction:column;box-shadow:var(--shadow2);
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-head{display:flex;align-items:center;padding:8px 12px 4px;border-bottom:1px solid var(--line)}
.drawer-logobox{display:flex;align-items:center;gap:10px;flex:1;padding:6px}
.drawer-logo{width:26px;height:26px;background-color:var(--primary);}
.drawer-title{font-size:17px;font-weight:600;color:var(--text)}
.drawer-close{width:40px;height:40px;position:relative}
.drawer-close::before{content:"";display:block;width:22px;height:22px;}
.drawer-nav{flex:1;overflow-y:auto;padding:8px 0}
.dnav-title{padding:10px 20px 6px;font-size:12px;color:var(--text3);font-weight:600;letter-spacing:.5px}
.dnav-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 20px;font-size:15px;color:var(--text)}
.dnav-item.on{background:var(--primary-soft);color:var(--primary-ink);font-weight:500}
.dnav-item.on .dnav-ic{filter:none}
.dnav-item:active{background:var(--surface-hover)}
.dnav-item[data-kind="type"]{cursor:pointer;touch-action:pan-y}
.dnav-drag{width:28px;height:28px;flex-shrink:0;opacity:.75;color:var(--text2);margin-left:auto;cursor:grab;touch-action:none;display:inline-flex;align-items:center;justify-content:center}

.dnav-drag:active{opacity:.75;cursor:grabbing}
.dnav-all.on .dnav-ic{background-color:var(--primary);}

.dnav-count{font-size:12px;color:var(--text3);border-radius:10px;background:var(--primary-faint);padding:2px 8px}
.dnav-item.on .dnav-count{background:var(--surface)}
.dnav-item.press-hint{background:var(--primary-soft);color:var(--primary-ink)}
.dnav-add{display:block;width:calc(100% - 32px);margin:6px 16px;text-align:center;padding:10px;border:1px dashed var(--primary);color:var(--primary-ink);border-radius:10px;font-size:13.5px}
.dnav-add:active{background:var(--primary-soft)}
.db-seg{display:flex;background:var(--primary-faint);border-radius:10px;padding:3px;flex-wrap:wrap}
.db-seg .seg{flex:1 1 auto;padding:7px 0;border-radius:8px;font-size:13.5px;color:var(--text2);white-space:nowrap;min-width:0}
.db-seg .seg.on{background:var(--surface);color:var(--primary-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.drawer-foot{border-top:1px solid var(--line);padding:6px 10px;display:flex;align-items:center;gap:6px}
.df-btn{display:flex;align-items:center;gap:14px;flex:1;min-width:0;text-align:left;padding:11px 12px;border-radius:10px;font-size:14.5px;color:var(--text)}
.df-btn:active{background:var(--surface-hover)}
.df-theme,.df-info{width:40px;height:40px;border-radius:50%;flex-shrink:0;position:relative}
.df-theme:active,.df-info:active{background:var(--surface-hover)}
.df-theme::before{content:"";position:absolute;inset:0;margin:9px;}

.df-info::before{content:"";position:absolute;inset:0;margin:9px;}
.df-ic{width:20px;height:20px;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:contain;}

/* ===== 首页分组方式（按场景 / 按时间） ===== */
.home-groupby{
  position:fixed;top:calc(56px + var(--safe-t));left:0;right:0;z-index:30;
  background:var(--bg);padding:8px 14px 6px;
  width:100%;
}
.home-groupby .db-seg{
  max-width:640px;
  margin:0 auto;
}

/* ===== 主页面独立滚动区域 ===== */
.main-scroll{
  position:fixed;
  top:calc(56px + var(--safe-t));
  bottom:0;
  left:0;
  right:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.main-scroll::-webkit-scrollbar{
  width:6px;
}
.main-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.main-scroll::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:9999px;
}
.main-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--text3);
}

/* ===== 内容 ===== */
.content{
  padding:14px 14px calc(140px + var(--safe-b));
  max-width:640px;margin:0 auto;
}
body.home-view .content{
  padding-top:54px;
}
.section{
  margin-bottom:var(--sec-gap, 18px);
}
.section-head{
  width:100%;text-align:left;
  display:flex;align-items:center;gap:calc(var(--item-gap, 10px) * 0.9);
  padding:calc(var(--item-pad-y, 13px) * 0.85) var(--item-pad-x, 14px);
  cursor:pointer;
  transition:background-color 0.2s ease;
  user-select:none;
  -webkit-user-select:none;
}
.section-head:active{
  background:var(--surface-hover);
}
.section-head:not(:last-child){
  border-bottom:1px solid var(--line);
}
.sec-title{font-size:calc(var(--item-font, 15px) + 1.5px);font-weight:600;color:var(--text)}
.sec-count{font-size:calc(var(--item-font, 15px) - 2.5px);color:var(--text3);background:var(--primary-faint);padding:2px 8px;border-radius:10px;font-weight:500}
.sec-right{margin-left:auto;color:var(--text3);font-size:calc(var(--item-font, 15px) - 2px);display:flex;align-items:center;gap:3px}
.sec-right .sec-arrow, .sec-right .ci-arrow{width:16px;height:16px;flex-shrink:0;opacity:.7;filter:var(--muted-icon-filter)}
.section-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;cursor:pointer;
}

.card-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--item-font, 15px) + 7px);
  height:calc(var(--item-font, 15px) + 7px);
  border-radius:50%;
  border:2px solid var(--text3);
  flex-shrink:0;
  cursor:pointer;
  transition:transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.22s ease, border-color 0.22s ease;
}
.card-check:active{
  transform:scale(0.86);
}
@keyframes check-pop{
  0%{ transform:scale(0.82); }
  50%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
.card-check.done{border-color:var(--primary);background-color:var(--primary);background-position:center;background-size:contain}
.card-body, .item-row .card-body, .sec-item .card-body{flex:1;min-width:0}
.card-heading{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.card-heading .card-title{min-width:0;max-width:100%}
.repeat-tag{white-space:nowrap;flex-shrink:0}
.card-title{font-size:var(--item-font, 15px);font-weight:500;word-break:break-word;transition:color 0.26s ease, opacity 0.26s ease, text-decoration 0.26s ease}
.card-title.done{color:var(--text3);text-decoration:line-through}
.card-meta{display:flex;align-items:center;gap:calc(var(--item-gap, 10px) * 0.6);margin-top:3px;flex-wrap:wrap}
.swipe-front.has-subtasks{position:relative}
.has-subtasks .card-body{position:relative;padding-right:92px}
.has-subtasks .card-heading{min-height:22px}
.subtask-list{font-size:calc(var(--item-font, 15px) - 2px);color:var(--text2)}
.swipe-front.has-subtasks > .card-check{align-self:flex-start;margin-top:2px}
.subtask-list summary{position:absolute;right:8px;top:var(--subtask-anchor,22px);transform:translateY(-50%);display:flex;align-items:center;gap:5px;min-height:28px;padding:2px 3px;list-style:none;border-radius:6px;cursor:pointer;user-select:none}
.subtask-list summary::-webkit-details-marker{display:none}
.item-row .has-subtasks > .chev{display:none}
.subtask-list summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.subtask-ring{--size:22px;--track-width:2px;--track-color:var(--line);--indicator-width:2px;--indicator-color:var(--primary);--indicator-transition-duration:.28s;--indicator-transition-timing-function:linear;position:relative;width:22px;height:22px;flex:0 0 22px;display:inline-flex;vertical-align:middle}
.subtask-ring > span,.subtask-count{font-family:inherit;font-size:11px;line-height:22px;font-variant-numeric:tabular-nums}
.subtask-ring > span{position:relative;color:var(--text2)}
.subtask-count{color:var(--text3);white-space:nowrap}
.subtask-chevron{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:1px;line-height:0;color:var(--text3);flex-shrink:0}

.motion-enabled .modal,.motion-enabled .drawer,.motion-enabled .card-check.just-checked{animation:none}
.motion-enabled .csc-progress-bar{transition:none}
.motion-enabled .drawer-mask,.motion-enabled .modal-mask{transition:none}
.motion-enabled .drawer{will-change:transform}
.motion-enabled .drawer-mask{will-change:opacity}
.motion-enabled .card-check,.motion-enabled .subtask-chevron,.motion-enabled .btn-filled{transition:background-color .15s,border-color .15s,color .15s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.subtask-steps{margin-top:8px;margin-left:calc(3px - var(--item-font,15px) - var(--item-gap,10px));padding:0;border:0;background:transparent}
.subtask-check{display:flex;align-items:center;gap:8px;min-height:28px;padding:0 2px;border-radius:5px;cursor:pointer}
.subtask-check input{appearance:none;width:12px;height:12px;margin:0;flex-shrink:0;border:1.5px solid var(--text3);border-radius:4px;background:transparent;cursor:pointer}
.subtask-check input:checked{border-color:var(--primary);background:var(--primary)}
.subtask-check input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.subtask-toggle{position:relative;display:inline-flex;width:12px;height:12px;flex-shrink:0}
.subtask-toggle .subtask-tick{position:absolute;inset:0;width:12px;height:12px;color:var(--on-primary);pointer-events:none}
.subtask-check span{word-break:break-word}
.subtask-check.done span{color:var(--text3);text-decoration:line-through}
.subtask-edit{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fld .subtask-edit input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;accent-color:var(--primary);box-shadow:none}
.fld .subtask-edit input[type="text"]{flex:1;min-width:0}
.subtask-edit button{flex-shrink:0;padding:8px}
.tag{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;font-size:calc(var(--item-font, 15px) - 4px);padding:1px 7px;border-radius:5px;background:var(--tag-bg);color:var(--text2)}
.tag.type-blue{background:var(--primary-soft);color:var(--primary-ink)}
.cost{font-size:calc(var(--item-font, 15px) - 3px);font-weight:600;color:var(--cost)}
.star{color:var(--star);font-size:calc(var(--item-font, 15px) - 3px);letter-spacing:1px}
.sec-empty{padding:22px;text-align:center;color:var(--text3);font-size:13.5px}

/* 列表视图 */
/* item-row 基础样式已移入手势系统 */
.item-row.completing, .sec-item.completing{opacity:0.65;transform:scale(0.985);transition:transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease}
.chev{width:calc(var(--item-font, 15px) + 5px);height:calc(var(--item-font, 15px) + 5px);flex-shrink:0;opacity:.5}

/* ===== 自定义间距调节器面板 ===== */
.custom-spacing-box{
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 14px 10px;
  margin-top:10px;
}
.slider-row{
  margin-bottom:12px;
}
.slider-row:last-child{
  margin-bottom:2px;
}
.slider-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--text2);
  margin-bottom:6px;
}
.slider-val{
  font-size:12px;
  font-weight:600;
  color:var(--primary);
  background:var(--primary-faint);
  padding:2px 8px;
  border-radius:6px;
}
.density-slider{
  touch-action:pan-y;
  width:100%;
  height:6px;
  border-radius:3px;
  background:var(--line);
  outline:none;
  -webkit-appearance:none;
  accent-color:var(--primary);
}
.density-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  cursor:pointer;
}

/* ===== 右下角浮动按钮（速记在上，新增在下） ===== */
.fab-stack{position:fixed;right:14px;bottom:calc(20px + var(--safe-b));z-index:35;display:flex;flex-direction:column;align-items:center;gap:12px}
.fab{width:54px;height:54px;border-radius:16px;background:var(--primary);box-shadow:var(--shadow2);position:relative;flex-shrink:0}
.fab:active{transform:scale(.94)}
.fab:not(.fab-ai)::before{content:"";position:absolute;inset:0;margin:15px}


/* ===== 空状态 ===== */
.empty{text-align:center;padding:14vh 24px 40px;color:var(--text3);max-width:640px;margin:0 auto}
body.home-view .empty{padding-top:calc(14vh + 40px)}
.empty-icon{width:56px;height:56px;margin:0 auto 14px;}
.empty-title{font-size:16px;font-weight:500;color:var(--text2);margin-bottom:4px}

/* ===== 弹窗（居中 modal，保证不出屏） ===== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;
  width:min(92vw,520px);max-height:88vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:22px;box-shadow:var(--shadow2);overflow:hidden;
  animation:pop .18s ease;
}
.modal-sm{width:min(88vw,420px)}
#modalMask{z-index:105}
#modal{z-index:108}
#dlgMask{z-index:110}
#dlgModal{z-index:120}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.94);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.modal-head h2{font-size:17px;font-weight:600}
.md-close{width:38px;height:38px;position:relative}
.md-close::before{content:"";display:block;width:20px;height:20px;}
.modal-body{padding:18px;overflow-y:auto}
.modal-foot{display:flex;align-items:center;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--line);flex-shrink:0}
.modal-foot .spacer{flex:1}
.fld{display:block;margin-bottom:11px}
.fld input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;outline:none;background:var(--surface-alt);color:var(--text);transition:border .15s,background .15s}
.fld input:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 1px var(--primary)}
.fld-label{display:block;font-size:13px;color:var(--text2);font-weight:500;margin-bottom:8px}
.segbg{display:flex;flex-wrap:wrap;gap:8px}
.seg-chip{border:1px solid var(--line);background:var(--surface);color:var(--text2);border-radius:8px;padding:6px 13px;font-size:13.5px;font-weight:500}
.seg-chip.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}
.seg-chip.mini{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;background:var(--primary-soft);color:var(--primary-ink);border-color:var(--primary-soft)}
.fif{display:flex;gap:12px}
.fif .fld-in{flex:1}
.stars{display:flex;gap:6px}
.star-b{font-size:30px;color:var(--star-off);line-height:1;transition:color .1s}
.star-b.on{color:var(--star)}

.btn-text{padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--primary-ink)}
.btn-text:active{background:var(--primary-soft)}
.btn-text.danger{color:var(--danger)}
.btn-filled{background:var(--primary);color:#fff;padding:10px 22px;border-radius:10px;font-size:14.5px;font-weight:500;box-shadow:var(--shadow);transition:background-color 0.15s ease, transform 0.1s ease, filter 0.1s ease}
.btn-filled:active{background:var(--primary-deep);filter:brightness(0.92);transform:scale(0.98)}
.btn-line{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:11px 0;font-size:14px;flex:1}
.btn-line.danger{color:var(--danger);border-color:rgba(217,48,37,.4)}

/* 排序弹窗 */
.radio-list label{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15px;color:var(--text)}
.radio-list input{width:18px;height:18px;accent-color:var(--primary)}
.switch{display:flex;align-items:center;gap:10px;margin:8px 0 4px;font-size:14px;color:var(--text2)}
.switch input{display:none}
.switch span{width:40px;height:24px;border-radius:12px;background:var(--switch-off);transition:.2s;position:relative;flex-shrink:0}
.switch span::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::after{transform:translateX(16px)}

/* 设置 */
.set-section{margin-bottom:18px}
.set-section h3{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.set-tip{font-size:12.5px;color:var(--text3);margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.tag-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--text2);border-radius:8px;padding:5px 8px 5px 12px;font-size:13px}
.tag-chip-name{font:inherit;padding:0;text-align:left}
.meta-facts,.meta-tags{display:contents}
.tag-chip .x{color:var(--danger);font-weight:700;font-size:14px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.add-chip{border:1px dashed var(--primary);color:var(--primary-ink);background:transparent;border-radius:8px;padding:5px 12px;font-size:13px}
.set-divide{height:1px;background:var(--line);margin:4px 0 16px}
.set-section .btn-line{width:100%;margin:11px 0}
.settings-menu{display:grid;gap:12px}
.settings-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-alt);text-align:left}
.settings-entry>span{flex:1;min-width:0}
.settings-entry strong{display:block;font-size:15px;font-weight:600;color:var(--text)}
.settings-entry small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--text2)}
.settings-entry morph-icon{width:24px;height:24px;flex-shrink:0;color:var(--primary-ink)}
.settings-entry>morph-icon:last-child{width:20px;height:20px;color:var(--text3)}
#setTitle{flex:1}
#setBack{margin-right:8px}
@font-face{font-family:'Material Symbols Settings';font-style:normal;font-weight:400;font-display:block;src:url('../vendor/material/material-symbols-settings.ttf') format('truetype')}
.settings-icon-button{flex-shrink:0;--md-icon-font:'Material Symbols Settings';--md-sys-color-secondary-container:var(--surface-alt);--md-sys-color-on-secondary-container:var(--text);--md-sys-color-primary:var(--primary);--md-filled-tonal-icon-button-container-width:48px;--md-filled-tonal-icon-button-container-height:48px}
.bg-image-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.set-section .bg-image-actions .btn-line{width:auto;margin:0;white-space:nowrap}
#uploadBgBtn{flex:1 1 140px}
#removeBgBtn{flex:0 0 auto;min-width:96px}
.set-btns{display:flex;gap:8px;margin-bottom:11px}
.set-btns .btn-line{flex:1;margin:0}
.settings-menu + .set-section{margin-top:16px}
.palette{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:11px}
.pal-sw{width:38px;height:38px;border-radius:50%;border:2px solid transparent;position:relative;box-shadow:var(--shadow)}
.pal-sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
#colorMask{z-index:110}
#colorModal{z-index:120;border-radius:28px;background:var(--surface-container-high,var(--surface))}
.color-modal .modal-head,.color-modal .modal-foot{border:0}
.color-modal .modal-head h2{font-size:24px;font-weight:400}
.color-modal .modal-body{padding-top:8px}
.color-preview{height:100px;border-radius:20px;margin-bottom:20px;transition:background-color .15s ease}
.color-hex input{font-family:monospace;letter-spacing:1px}
.color-channel{display:block;margin-top:16px}
.color-channel>span{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);margin-bottom:8px}
.color-channel output{color:var(--primary-ink);font-variant-numeric:tabular-nums}
.color-range{width:100%;height:48px;margin:0;appearance:none;background:transparent;touch-action:pan-y;cursor:pointer}
.color-range::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:var(--color-track)}
.color-range::-moz-range-track{height:12px;border-radius:999px;background:var(--color-track)}
.color-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;margin-top:-6px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 1px 4px #0003}
.color-range::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 1px 4px #0003}
.color-range:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:12px}
#colorHue{--color-track:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
#colorPresets{gap:10px;margin:20px 4px}
#colorPresets .pal-sw[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.color-preview{transition:none}}


.pal-custom{display:flex;align-items:center;gap:11px;margin-top:11px}
.pal-custom .btn-line{flex:1}
/* ===== 长按操作菜单 ===== */
.ctx-modal{
  width:min(90vw,380px);
  border-radius:24px;
}
.ctx-head-info{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.ctx-head-info h2{
  font-size:16.5px;
  font-weight:700;
  white-space:nowrap;
}
.ctx-tag-pill{
  font-size:12.5px;
  font-weight:600;
  color:var(--primary-ink);
  background:var(--primary-soft);
  padding:3px 10px;
  border-radius:12px;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ctx-body{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ctx-action-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  padding:13px 15px;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:16px;
  transition:background .15s, transform .12s, border-color .15s;
  user-select:none;
}
.ctx-action-item:active{
  transform:scale(.98);
  background:var(--surface-hover);
  border-color:var(--line);
}
.ctx-action-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ctx-action-icon morph-icon{
  width:22px;
  height:22px;
}
.ctx-action-icon svg{width:100%;height:100%}
.ctx-action-icon.edit{
  background:var(--primary-soft);
  color:var(--primary-ink);
}
.ctx-action-icon.delete{
  background:rgba(217,48,37,.1);
  color:var(--danger);
}
.ctx-action-text{
  flex:1;
  min-width:0;
}
.ctx-action-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}
.ctx-action-item.danger .ctx-action-title{
  color:var(--danger);
}
.ctx-action-desc{
  font-size:12px;
  color:var(--text3);
  margin-top:2px;
}
.ctx-action-arrow{
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:.4;

}
.ctx-foot{
  padding:6px 16px 16px;
  border-top:none;
}
.ctx-cancel-btn{
  width:100%;
  border-radius:14px;
  padding:11px 0;
  font-size:14px;
  font-weight:500;
  color:var(--text2);
  background:var(--surface-alt);
  border:1px solid var(--line);
}
.ctx-cancel-btn:active{
  background:var(--surface-hover);
}

/* ===== AI：一句话速记 ===== */
.fab-ai{width:54px;height:54px;border-radius:16px;background:var(--primary-soft)}
.fab-ai:active{transform:scale(.94)}
.fab-ai::before{content:"";position:absolute;inset:0;margin:15px;background:var(--primary);background-image:none !important;}
#aiModal{width:min(92vw,560px)}
.ai-sugbox{margin:2px 0 16px;display:flex;flex-direction:column;gap:6px}
.ai-sug{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--primary-ink);background:var(--primary-soft);border-radius:8px;padding:8px 12px}
.ai-sug input{width:16px;height:16px;accent-color:var(--primary);flex-shrink:0}
.ai-switch{margin-bottom:14px}
.ai-tip{font-size:13px;color:var(--text3);margin:4px 0 10px}
.ai-loading{font-size:13px;color:var(--primary-ink);margin:4px 0}
.ai-status{font-size:12.5px;color:var(--text3);margin-top:10px}

/* ===== 智能整理 ===== */
.tidy-tip{font-size:12.5px;color:var(--text3);margin-bottom:12px}
.tidy-list{display:flex;flex-direction:column;gap:10px}
.tidy-item{background:var(--surface-alt);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tidy-title{font-size:14px;font-weight:500;color:var(--text);word-break:break-word;margin-bottom:8px}
.tidy-sels{display:flex;gap:10px;flex-wrap:wrap}
.tidy-sels label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.tidy-sels select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;background:var(--surface);color:var(--text);outline:none;max-width:140px}

/* ===== 通用对话框 ===== */
.dlg-body{text-align:center;padding:24px 20px 12px}
.dlg-icon{width:62px;height:62px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-ink);box-shadow:0 4px 12px rgba(11,87,208,.12)}
.dlg-icon morph-icon{width:30px;height:30px}
.dlg-icon svg{width:100%;height:100%}
.dlg-icon.danger{background:rgba(217,48,37,.1);color:var(--danger);box-shadow:0 4px 12px rgba(217,48,37,.14)}
.dlg-title{font-size:17px;font-weight:700;margin-bottom:6px;line-height:1.4}
.dlg-msg{font-size:14px;color:var(--text2);line-height:1.7;margin:0 auto;max-width:320px;white-space:pre-line}
.dlg-input{margin-top:18px;text-align:left}
.dlg-input input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;outline:none;background:var(--surface-alt);color:var(--text);transition:border .15s,box-shadow .15s,background .15s}
.dlg-input input:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 2px var(--primary-soft)}

/* ===== 软件信息弹窗 ===== */
.info-hero{display:flex;flex-direction:column;align-items:center;padding:4px 0 18px}
.info-logo{width:88px;height:88px;border-radius:24px;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}
.info-logo img{width:100%;height:100%;object-fit:contain}
.info-logo-dark{display:none}
:root[data-color-mode="dark"] .info-logo-light{display:none}
:root[data-color-mode="dark"] .info-logo-dark{display:block}
.info-name{font-size:20px;font-weight:700;letter-spacing:.5px}
.info-ver{font-size:13px;color:var(--text3);margin-top:3px;cursor:pointer;user-select:none;-webkit-user-select:none}
.info-desc{font-size:12.5px;color:var(--text2);margin-top:7px;text-align:center;line-height:1.4}
.info-author{font-size:12px;color:var(--text3);margin-top:5px;display:inline-flex;align-items:center;gap:4px}
.info-author .heart{color:#ff4d4f;font-size:11px}
.info-author strong{color:var(--text);font-weight:600}
.info-actions{
  display:flex;
  gap:8px;
  margin-top:22px;
  width:100%;
}
.info-pill{
  flex:1;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 4px;
  border-radius:22px;
  border:1px solid var(--line);
  background:var(--surface-alt);
  color:var(--text);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
  user-select:none;
}
.info-pill morph-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:.9;
}
.info-pill svg{width:100%;height:100%}
.info-pill:active{
  background:var(--primary-faint);
  color:var(--primary-ink);
  border-color:var(--primary);
  transform:scale(.96);
}
@media(hover:hover){
  .info-pill:hover{
    background:var(--primary-faint);
    color:var(--primary-ink);
    border-color:var(--primary);
  }
}

/* ===== 手动拖拽排序 ===== */
.drag-handle{width:22px;height:22px;flex-shrink:0;opacity:.38;cursor:grab;touch-action:none;padding:4px;margin:-4px;box-sizing:content-box;background-repeat:no-repeat;background-position:center;background-size:contain}
.drag-handle:hover{opacity:.7}.drag-handle:active{opacity:.95;cursor:grabbing}
.sortable-ghost{opacity:.35;background:var(--primary-soft)!important}
.sortable-chosen{cursor:grabbing}
.sortable-drag{box-shadow:var(--shadow2)!important;opacity:.95;cursor:grabbing!important;z-index:9999}
.sortable-fallback{transition:none!important;will-change:transform;pointer-events:none!important}

.drawer-close::before,.df-theme::before,.df-info::before,.df-ic,.md-close::before,.sec-caret,.ci-arrow,.chev,.drag-handle,.dnav-item:not(.on) .dnav-ic,.ctx-action-arrow{filter:var(--muted-icon-filter)}

/* ===== 版本更新日志 ===== */
.cl-modal{
  width:min(92vw,560px);
  max-height:82vh;
  display:flex;
  flex-direction:column;
}
.changelog-body{
  padding:14px 16px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
}
.cl-card{
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:12px;
}
.cl-card:last-child{
  margin-bottom:4px;
}
.cl-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.cl-badge{
  font-size:12.5px;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
  letter-spacing:.2px;
}
.cl-badge.formal{
  background:var(--primary);
  color:var(--on-primary);
}
.cl-badge.pre{
  background:var(--tag-bg);
  color:var(--text2);
  border:1px solid var(--line);
}
.cl-badge.cur{
  background:var(--cost);
  color:#fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:4px;
}
.cl-date{
  font-size:12px;
  color:var(--text3);
  margin-left:auto;
}
.cl-list{
  margin:0;
  padding-left:18px;
  color:var(--text);
  font-size:13.5px;
  line-height:1.65;
}
.cl-list li{
  margin-bottom:6px;
}
.cl-list li:last-child{
  margin-bottom:0;
}
.cl-code{
  background:var(--primary-faint);
  color:var(--primary-ink);
  padding:1px 5px;
  border-radius:4px;
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.cl-subhead{
  font-size:13px;
  font-weight:600;
  color:var(--text2);
  margin:8px 0 4px;
}
.cl-p{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text);
  margin:4px 0;
}
.cl-loading, .cl-error{
  text-align:center;
  padding:40px 16px;
  color:var(--text3);
  font-size:14px;
}

/* ===== 新版本推送弹窗 ===== */
.update-modal{
  width:min(92vw,480px);
  max-height:80vh;
  display:flex;
  flex-direction:column;
}
.update-body{
  padding:14px 18px;
  overflow-y:auto;
  flex:1;
}
.update-ver-banner{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.update-ver-tag{
  background:var(--primary);
  color:var(--on-primary);
  font-size:13.5px;
  font-weight:700;
  padding:3px 10px;
  border-radius:8px;
  letter-spacing:.2px;
}
.update-ver-tag.pre{
  background:var(--tag-bg);
  color:var(--text2);
  border:1px solid var(--line);
}
.update-ver-date{
  font-size:12.5px;
  color:var(--text3);
}
.update-notes-title{
  font-size:13px;
  font-weight:600;
  color:var(--text2);
  margin-bottom:8px;
}
.update-notes-box{
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  max-height:42vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.update-notes-box .cl-subhead{
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
  margin:10px 0 5px;
}
.update-notes-box .cl-subhead:first-child{
  margin-top:2px;
}
.update-notes-box ul{
  margin:0;
  padding-left:18px;
  color:var(--text);
  font-size:13.5px;
  line-height:1.65;
}
.update-notes-box li{
  margin-bottom:6px;
}
.update-notes-box li:last-child{
  margin-bottom:0;
}
.update-notes-box code{
  background:var(--primary-faint);
  color:var(--primary-ink);
  padding:1px 5px;
  border-radius:4px;
  font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.update-notes-box p{
  margin:4px 0;
  font-size:13.5px;
  color:var(--text);
  line-height:1.6;
}
.cl-empty{
  color:var(--text3);
  font-size:13px;
  padding:12px 0;
  text-align:center;
}

/* 下载中与成功状态样式 */
.update-progress-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 20px 24px;
  text-align:center;
}
.up-progress-icon{
  width:52px;
  height:52px;
  color:var(--primary);
  margin-bottom:14px;
  animation:floatUpDown 2s ease-in-out infinite alternate;
}
.up-progress-icon morph-icon,.up-progress-icon svg{
  width:100%;
  height:100%;
}
@keyframes floatUpDown{
  from{ transform:translateY(-2px); }
  to{ transform:translateY(4px); }
}
.up-progress-status{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:18px;
}
.up-bar-track{
  width:100%;
  max-width:340px;
  height:10px;
  background:var(--line);
  border-radius:9999px;
  overflow:hidden;
  position:relative;
  margin-bottom:10px;
}
.up-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary-ink) 100%);
  border-radius:9999px;
  transition:width 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.up-progress-meta{
  width:100%;
  max-width:340px;
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
}

/* 下载完成成功页面 */
.update-success-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 20px 20px;
  text-align:center;
}
.up-success-icon{
  width:58px;
  height:58px;
  color:#188038;
  margin-bottom:14px;
  animation:popSuccess .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.up-success-icon morph-icon,.up-success-icon svg{
  width:100%;
  height:100%;
}
@keyframes popSuccess{
  0%{ transform:scale(0.5); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.up-success-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}
.up-success-desc{
  font-size:13px;
  color:var(--text3);
  max-width:300px;
  line-height:1.5;
}

/* 胶囊按钮包裹（与立即更新等主按钮圆角矩形完全一致） */
.btn-capsule{
  border-radius:10px !important;
  padding:10px 22px !important;
  font-size:14.5px !important;
  font-weight:500 !important;
}

/* ===== 四象限桌面小部件 (4×4) ===== */
.quadrant-modal{
  width:min(96vw,640px);
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
.quadrant-body{
  padding:12px 14px;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.q-head-pill{
  font-size:12px;
  font-weight:600;
  color:var(--primary-ink);
  background:var(--primary-soft);
  padding:2px 8px;
  border-radius:10px;
}
.qw-preview-section{
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
}
.qw-preview-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.qw-preview-title{
  font-size:13.5px;
  font-weight:700;
  color:var(--text);
}
.qw-preview-sub{
  font-size:11.5px;
  color:var(--text3);
}
.qw-widget-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 12px;
  box-shadow:var(--shadow);
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio:1 / 1;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.qw-matrix-container{
  position:relative;
  padding:10px 4px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
/* 坐标轴（加深清晰度） */
.qw-axis-x{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:var(--text3);
  opacity:0.65;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
}
.qw-axis-y{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:var(--text3);
  opacity:0.65;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
}
/* 坐标轴纯文字标注（彻底去除胶囊外观，纯文字展示） */
.qw-axis-text{
  display:inline-block;
  color:var(--text3);
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  padding:2px 6px;
  letter-spacing:0.5px;
  background:var(--surface);
  user-select:none;
}
[data-theme="dark"] .qw-axis-text{
  color:#9aa0a6;
  background:var(--surface);
}
.qw-axis-label-top{
  position:absolute;
  top:2px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
}
.qw-axis-label-bottom{
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
}
.qw-axis-label-left{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
}
.qw-axis-label-right{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
}
.qw-matrix-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
  position:relative;
  z-index:1;
  flex:1;
  min-height:0;
}
.qw-preview-cell{
  border-radius:14px;
  padding:4px 4px 2px 4px;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
  overflow:hidden;
}
.qw-cell-header{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  text-align:center;
  flex-shrink:0;
}
.qw-cell-header.bottom{
  margin-top:6px;
  margin-bottom:0;
}
.qw-title-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:3px 10px 3px 12px;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  outline:none;
  user-select:none;
}
.qw-title-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.qw-title-pill:active{
  transform:scale(0.97);
}
.qw-title-pill.q1{ color:#d93025; border-color:rgba(217,48,37,.3); background:rgba(217,48,37,.06); }
.qw-title-pill.q2{ color:#e37400; border-color:rgba(227,116,0,.3); background:rgba(227,116,0,.06); }
.qw-title-pill.q3{ color:#188038; border-color:rgba(24,128,56,.3); background:rgba(24,128,56,.06); }
.qw-title-pill.q4{ color:#1a73e8; border-color:rgba(26,115,232,.3); background:rgba(26,115,232,.06); }

.qw-title-pill:hover.q1{ background:rgba(217,48,37,.12); border-color:#d93025; }
.qw-title-pill:hover.q2{ background:rgba(227,116,0,.12); border-color:#e37400; }
.qw-title-pill:hover.q3{ background:rgba(24,128,56,.12); border-color:#188038; }
.qw-title-pill:hover.q4{ background:rgba(26,115,232,.12); border-color:#1a73e8; }

.qw-pill-title{
  font-weight:700;
  letter-spacing:0.2px;
}
.qw-pill-count{
  font-size:10.5px;
  font-weight:600;
  opacity:.75;
  background:rgba(0,0,0,.06);
  padding:1px 5px;
  border-radius:8px;
}
[data-theme="dark"] .qw-pill-count{
  background:rgba(255,255,255,.1);
}
.qw-pill-arrow{
  font-size:11.5px;
  font-weight:700;
  opacity:.7;
}

.qw-tag{
  font-size:13px;
  font-weight:700;
  padding:0;
  border-radius:0;
  letter-spacing:0.2px;
}
.qw-tag.q1{background:transparent;color:#d93025}
.qw-tag.q2{background:transparent;color:#e37400}
.qw-tag.q3{background:transparent;color:#188038}
.qw-tag.q4{background:transparent;color:#1a73e8}
.qw-count{
  display:none;
}
.qw-cell-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  min-height:0;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.qw-empty-cell{
  margin:auto;
  font-size:11.5px;
  color:var(--text3);
  text-align:center;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
}
.qw-preview-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  border-radius:8px;
  background:var(--surface-alt);
  border:1px solid var(--line);
  cursor:pointer;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 1px 2px rgba(0,0,0,.02);
  position:relative;
  flex:1;
  min-height:0;
  max-height:36px;
  box-sizing:border-box;
}
.qw-preview-item:hover{
  border-color:var(--primary);
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.qw-chk{
  width:16px;
  height:16px;
  border-radius:4px;
  border:1.6px solid var(--text3);
  flex-shrink:0;
  position:relative;
  transition:all .15s ease;
}
.qw-chk.done{
  background:var(--primary);
  border-color:var(--primary);
}

.qw-title{
  font-size:12.5px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  line-height:1.2;
}
.qw-title.done{
  text-decoration:line-through;
  color:var(--text3);
  opacity:.7;
}
.qw-item-del{
  width:18px;
  height:18px;
  border-radius:50%;
  background:transparent;
  border:none;
  color:var(--text3);
  font-size:10px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0.4;
  transition:all .15s ease;
  flex-shrink:0;
  margin-left:auto;
  padding:0;
}
.qw-preview-item:hover .qw-item-del{
  opacity:1;
}
.qw-item-del:hover{
  background:rgba(217,48,37,.12);
  color:#d93025;
  opacity:1;
}
.qw-add-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0 8px;
  border-radius:8px;
  border:1px dashed var(--line);
  background:transparent;
  color:var(--text3);
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease;
  width:100%;
  outline:none;
  flex:1;
  min-height:0;
  max-height:36px;
  box-sizing:border-box;
}
.qw-add-slot:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--surface-alt);
}

/* 象限编辑器列表 */
.qw-editors-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.qw-editors-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.qw-limit-tip{
  font-size:12px;
  font-weight:500;
  color:var(--text3);
}
.qw-grid-editors{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.qe-card{
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.qe-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
}
.qe-title-col{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.qe-title-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.qe-dot{
  display:none;
}
.qe-name{
  font-size:13.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qe-card.q1 .qe-name, .qe-name.q1{ color:#d93025; }
.qe-card.q2 .qe-name, .qe-name.q2{ color:#e37400; }
.qe-card.q3 .qe-name, .qe-name.q3{ color:#188038; }
.qe-card.q4 .qe-name, .qe-name.q4{ color:#1a73e8; }

:root[data-color-mode="dark"] .qe-card.q1 .qe-name,
:root[data-color-mode="dark"] .qe-name.q1{ color:#ff776d; }
:root[data-color-mode="dark"] .qe-card.q2 .qe-name,
:root[data-color-mode="dark"] .qe-name.q2{ color:#ffb74d; }
:root[data-color-mode="dark"] .qe-card.q3 .qe-name,
:root[data-color-mode="dark"] .qe-name.q3{ color:#81c995; }
:root[data-color-mode="dark"] .qe-card.q4 .qe-name,
:root[data-color-mode="dark"] .qe-name.q4{ color:#8ab4f8; }

:root[data-color-mode="dark"] .qw-tag.q1{ color:#ff776d; }
:root[data-color-mode="dark"] .qw-tag.q2{ color:#ffb74d; }
:root[data-color-mode="dark"] .qw-tag.q3{ color:#81c995; }
:root[data-color-mode="dark"] .qw-tag.q4{ color:#8ab4f8; }
.qe-desc{
  font-size:11px;
  color:var(--text3);
  line-height:1.3;
}
.qe-count-badge{
  font-size:12px;
  font-weight:600;
  color:var(--text2);
  background:var(--surface);
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:10px;
  white-space:nowrap;
}
.qe-count-badge.full{
  background:rgba(24,128,56,.12);
  color:#188038;
  border-color:rgba(24,128,56,.25);
}
.qe-items-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.qe-empty{
  font-size:12.5px;
  color:var(--text3);
  padding:6px 0;
  text-align:center;
}
.qe-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
}
.qe-row-title{
  flex:1;
  font-size:13.5px;
  color:var(--text);
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  user-select:none;
}
.qe-row-title.done{
  text-decoration:line-through;
  color:var(--text3);
}
.qe-row-del{
  width:24px;
  height:24px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--text3);
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qe-row-del:active{
  background:rgba(217,48,37,.1);
  color:var(--danger);
}
.qe-add-box{
  display:flex;
  flex-direction:row;
  gap:8px;
  margin-top:2px;
}
.qe-btn{
  flex:1;
  padding:9px 0;
  font-size:13px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  text-align:center;
  background:var(--surface);
  color:var(--primary-ink);
  border:1px dashed var(--line);
}
.qe-btn:hover{
  border-color:var(--primary);
  background:var(--primary-soft);
}
.qe-btn:active{
  transform:scale(.98);
}
.qe-full-badge{
  font-size:12px;
  color:#188038;
  font-weight:600;
  padding:6px 0;
  text-align:center;
}

/* 待办选择弹窗 */
.picker-modal{
  width:min(90vw,440px);
  max-height:75vh;
}
.picker-body{
  padding:14px 16px;
  max-height:60vh;
  overflow-y:auto;
}
.picker-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.picker-item-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  transition:background .15s;
}
.picker-item-row:active{
  background:var(--primary-soft);
}
.picker-item-text{
  flex:1;
  min-width:0;
}
.picker-item-title{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.picker-item-meta{
  font-size:11.5px;
  color:var(--text3);
  margin-top:2px;
}
.picker-empty{
  text-align:center;
  padding:30px 10px;
  color:var(--text3);
  font-size:13.5px;
}



/* ===== 预算与花费汇总展示（跟随外观·主色） ===== */
.sec-cost-pill{
  display:inline-flex;
  align-items:center;
  font-size:calc(var(--item-font, 15px) - 3.5px);
  font-weight:600;
  color:var(--primary-ink);
  background:var(--primary-faint);
  padding:2px 7px;
  border-radius:8px;
  margin-left:4px;
}
.sec-more-cost{
  color:var(--primary-ink);
  font-weight:600;
  margin-left:2px;
}
.cost-summary-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:13px 15px 11px;
  margin-bottom:var(--sec-gap, 16px);
  border:1px solid var(--primary-soft);
  position:relative;
  overflow:hidden;
}
:root[data-color-mode="dark"] .cost-summary-card{
  border-color:var(--primary-soft);
}
.csc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.csc-title-wrap{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.csc-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary-faint);
  color:var(--primary-ink);
  font-weight:700;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.csc-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.csc-count-badge{
  font-size:11px;
  color:var(--text3);
  background:var(--tag-bg);
  padding:1px 6px;
  border-radius:6px;
  white-space:nowrap;
}
.csc-total-wrap{
  text-align:right;
  flex-shrink:0;
}
.csc-total-label{
  font-size:10.5px;
  color:var(--text3);
  display:block;
  line-height:1.2;
}
.csc-total-val{
  font-size:16px;
  font-weight:700;
  color:var(--primary-ink);
  letter-spacing:-0.2px;
}
.csc-progress-track{
  height:5px;
  background:var(--tag-bg);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:8px;
}
.csc-progress-bar{
  height:100%;
  background:linear-gradient(90deg, var(--primary), var(--primary-deep));
  border-radius:999px;

}
.csc-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}
.csc-stats{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.csc-stat{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--text2);
}
.csc-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block;
}
.csc-stat.undone .csc-dot{
  background:var(--star);
}
.csc-stat.done .csc-dot{
  background:var(--primary);
}
.csc-stat-lbl{
  color:var(--text3);
  font-size:11.5px;
}
.csc-stat-num{
  font-weight:600;
  color:var(--text);
  font-size:12px;
}
.csc-pct{
  font-size:11px;
  color:var(--text3);
  margin-left:auto;
  white-space:nowrap;
}

/* ===== 截止日期临期与逾期高亮标签（严格保持与普通标签尺寸一致，仅改变颜色与背景） ===== */
.tag.due-overdue{
  background:rgba(217,48,37,0.12);
  color:var(--danger);
}
:root[data-color-mode="dark"] .tag.due-overdue{
  background:rgba(255,119,109,0.18);
  color:var(--danger);
}
.tag.due-today{
  background:rgba(232,113,10,0.12);
  color:#e8710a;
}
:root[data-color-mode="dark"] .tag.due-today{
  background:rgba(255,167,38,0.18);
  color:#ffa726;
}
.tag.due-soon{
  background:rgba(249,171,0,0.14);
  color:#b06000;
}
:root[data-color-mode="dark"] .tag.due-soon{
  background:rgba(255,195,77,0.18);
  color:var(--star);
}
.tag.due-done{
  opacity:0.65;
}


/* ===== 抽屉回收站与分割线 ===== */
.dnav-divider{height:1px;background:var(--border);margin:8px 16px}


/* ===== 回收站弹窗（Modal） ===== */
.trash-modal{max-height:84vh;display:flex;flex-direction:column}
.trash-body{padding:14px 16px;flex:1;overflow-y:auto}
.trash-empty-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:46px 20px;text-align:center}
.trash-empty-ic{width:48px;height:48px;opacity:0.35;background-repeat:no-repeat;background-position:center;background-size:contain;margin-bottom:12px}
.trash-empty-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.trash-empty-sub{font-size:13px;color:var(--text3);line-height:1.4}

.trash-modal-summary{font-size:12.5px;color:var(--text3);margin-bottom:12px;padding:0 2px}
.trash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:10px;padding:12px 14px;display:flex;align-items:center;gap:12px;transition:opacity 0.2s ease, background-color 0.2s ease}
.trash-card-content{flex:1;min-width:0}
.trash-card-title{font-size:14.5px;font-weight:500;color:var(--text);word-break:break-word;margin-bottom:4px}
.trash-card-note{font-size:12.5px;color:var(--text2);margin-bottom:6px;word-break:break-word;line-height:1.35}
.trash-card-tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11.5px}
.trash-card-time{font-size:11px;color:var(--text3);margin-left:2px}
.trash-card-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.trash-act-btn{padding:5px 12px;font-size:12px;font-weight:500;border-radius:14px;cursor:pointer;transition:all 0.15s ease}
.trash-act-btn.restore{color:var(--primary-ink);background:var(--primary-soft);border:none}
.trash-act-btn.restore:active{opacity:0.75}
.trash-act-btn.delete{color:var(--danger, #ba1a1a);background:transparent;border:none}
.trash-act-btn.delete:active{opacity:0.75}



/* ===== 事项卡片与滑动手势系统（双重兜底防御，永不崩坏） ===== */
.item-row{
  position:relative;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:var(--item-gap, 10px);
  padding:var(--item-pad-y, 13px) var(--item-pad-x, 14px);
  display:flex;
  align-items:center;
  gap:calc(var(--item-gap, 10px) + 2px);
  overflow:hidden;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  transition:max-height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), margin-bottom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.item-row:has(.swipe-front){
  padding:0 !important;
  display:block !important;
}

.item-row .swipe-front{
  position:relative;
  z-index:2;
  background:transparent;
  border-radius:inherit;
  display:flex;
  align-items:center;
  gap:calc(var(--item-gap, 10px) + 2px);
  padding:var(--item-pad-y, 13px) var(--item-pad-x, 14px);
  width:100%;
  touch-action:pan-y;
}

.sec-item{
  position:relative;
  background:transparent;
  border-bottom:1px solid var(--line);
  padding:0;
  display:block;
  overflow:hidden;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  transition:max-height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.sec-item:last-child{
  border-bottom:none;
}

.sec-item .swipe-front{
  position:relative;
  z-index:2;
  background:transparent;
  display:flex;
  align-items:center;
  gap:calc(var(--item-gap, 10px) + 2px);
  padding:var(--item-pad-y, 13px) var(--item-pad-x, 14px);
  width:100%;
  touch-action:pan-y;
  transition:background-color 0.2s ease;
}

.item-row.swiping-delete, .sec-item.swiping-delete{
  max-height:0 !important;
  margin-bottom:0 !important;
  opacity:0 !important;
  border-bottom:none !important;
}

.item-row .swipe-back, .sec-item .swipe-back{
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.swipe-action{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 24px;
  font-size:14.5px;
  font-weight:600;
  color:#ffffff;
  opacity:0;
  transition:opacity 0.12s ease;
}

.swipe-action.swipe-complete{
  background:#1b873f;
  justify-content:flex-start;
}

.swipe-action.swipe-delete{
  background:var(--danger, #ba1a1a);
  justify-content:flex-end;
}

.swipe-action.active{
  opacity:1;
}

.swipe-action .swipe-ic{
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  flex-shrink:0;
  transition:transform 0.15s ease;
}

.swipe-action.active.ready .swipe-ic{
  transform:scale(1.18);
}
.swipe-action.active.ready .swipe-txt{
  transform:scale(1.08);
}

.swipe-txt{
  display:inline-block;
  transition:transform 0.15s ease;
}





.item-row.swiping .swipe-front,
.sec-item.swiping .swipe-front {
  background: transparent !important;
  opacity: 1 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

.item-row.completing .swipe-front, .sec-item.completing .swipe-front{
  opacity:0.65;
  transform:scale(0.985);
  transition:transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

.item-row.sortable-drag .swipe-front, .item-row.sortable-ghost .swipe-front{
  transition:none !important;
}

.card-check.done{
  border-color:var(--primary);
  background-color:var(--primary);

  background-position:center;
  background-size:contain;
}
.card-check.just-checked{
  animation:check-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 自定义主页面背景与透明度支持 ===== */
.app-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}

[data-has-custom-bg="true"] body {
  background-image: none;
}

[data-has-custom-bg="true"] .app-bg-layer {
  opacity: var(--bg-opacity, 0.8);
}
.slider-preview-active .app-bg-layer{transition:none}

[data-has-custom-bg="true"] .main-scroll {
  background: transparent;
}

[data-has-custom-bg="true"] .home-groupby {
  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-has-custom-bg="true"] .home-groupby .db-seg {
  background: rgba(var(--surface-rgb), 0.65);
}

[data-has-custom-bg="true"] .section-card {
  background: rgba(var(--surface-rgb), var(--card-alpha, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

[data-has-custom-bg="true"] .section-head {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: calc(var(--item-pad-y, 13px) * 0.85) var(--item-pad-x, 14px);
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-has-custom-bg="true"] .section-head:active {
  background: rgba(var(--surface-rgb), 0.35);
}

[data-has-custom-bg="true"] .section-head:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

[data-has-custom-bg="true"] .section-head .sec-title {
  color: var(--text);
  font-weight: 600;
}

[data-has-custom-bg="true"] .section-head .sec-count {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
}

[data-has-custom-bg="true"] .section-head .sec-right {
  color: var(--text2);
  font-weight: 500;
}

[data-has-custom-bg="true"] .section-head .sec-caret,
[data-has-custom-bg="true"] .section-head .sec-arrow {
  filter: var(--muted-icon-filter);
  opacity: 0.9;
}

[data-has-custom-bg="true"] .item {
  background: rgba(var(--surface-rgb), var(--card-alpha, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-has-custom-bg="true"] .item-row {
  background: rgba(var(--surface-rgb), var(--card-alpha, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

[data-has-custom-bg="true"] .item-row .swipe-front {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-has-custom-bg="true"] .sec-item {
  background: transparent;
  border-bottom: 1px solid var(--line);
}

[data-has-custom-bg="true"] .sec-item:last-child {
  border-bottom: none;
}

[data-has-custom-bg="true"] .sec-item .swipe-front {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-has-custom-bg="true"] .item-row.swiping .swipe-front,
[data-has-custom-bg="true"] .sec-item.swiping .swipe-front {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: none !important;
}

[data-has-custom-bg="true"] .cost-summary-card {
  background: rgba(var(--surface-rgb), var(--card-alpha, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-has-custom-bg="true"] .empty-card {
  background: rgba(var(--surface-rgb), var(--card-alpha, 0.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== 背景透明度调节临时预览模式 ===== */
.modal.preview-mode-hidden,
.modal-mask.preview-mode-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.22s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

#setModal, #setMask {
  transition: opacity 0.24s cubic-bezier(0.2, 0, 0.2, 1);
}

.opacity-preview-bar {
  position: fixed;
  box-sizing: border-box;
  padding: 12px 16px 14px;
  background: rgba(var(--surface-rgb), 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  z-index: 1000;
  color: var(--text);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: scale(0.98);
  animation: opPreviewPopIn 0.2s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
}

@keyframes opPreviewPopIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.opacity-preview-bar.closing {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.op-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.op-preview-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.op-preview-title svg {
  color: var(--primary);
  flex-shrink: 0;
}

.op-preview-val {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--primary-ink);
  font-variant-numeric: tabular-nums;
}

.op-preview-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.op-preview-slider {
  width: 100%;
}



/* All interface glyphs are rendered by the local Morphicons element. */
morph-icon{display:inline-flex!important;width:1em;height:1em;flex-shrink:0;vertical-align:middle;pointer-events:none;color:inherit;line-height:0}
morph-icon[data-icon="blank"]{visibility:hidden}
morph-icon svg{display:block;width:100%;height:100%;fill:none!important;stroke:currentColor}
.ic,.df-ic,.dnav-ic,.drawer-logo,.sec-caret,.ci-arrow,.chev,.sec-arrow,.ctx-action-arrow,.drag-handle,.trash-empty-ic,.swipe-ic{display:inline-flex;align-items:center;justify-content:center;background:none!important;mask:none!important;-webkit-mask:none!important;filter:none!important;color:var(--text3)}
.ic{color:inherit}.drawer-logo,.dnav-item.on .dnav-ic{color:var(--primary)}
.swipe-action .swipe-ic{color:#fff}
.card-check morph-icon{width:100%;height:100%;color:var(--on-primary)}
.ic morph-icon,.df-ic morph-icon,.dnav-ic morph-icon,.drawer-logo morph-icon,.empty-icon morph-icon,.trash-empty-ic morph-icon,.swipe-ic morph-icon,.subtask-chevron morph-icon,.chev morph-icon,.sec-arrow morph-icon,.ctx-action-arrow morph-icon,.drag-handle morph-icon{width:100%;height:100%}
.drawer-close::before,.df-theme::before,.df-info::before,.md-close::before,.fab::before{display:none!important}
.drawer-close,.df-theme,.df-info,.md-close,.fab,.empty-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text3)}
.drawer-close morph-icon,.df-theme morph-icon,.df-info morph-icon,.md-close morph-icon{width:22px;height:22px}
.fab morph-icon{width:26px;height:26px;color:var(--on-primary)}.fab-ai morph-icon{color:var(--primary)}
.empty-icon{display:flex;color:var(--text3)}
.dnav-drag morph-icon{width:20px;height:22px}
.dnav-drag morph-icon svg,.drag-handle morph-icon svg{stroke-width:3.4}
.drag-handle{opacity:.75;color:var(--text2)}
.drag-handle:hover{opacity:.9}

/* Air Datepicker follows the app theme in all three views. */
.due-field{position:relative}
.due-field input{width:100%;padding-right:42px!important;cursor:pointer}
.due-field>morph-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text3)}
.air-datepicker{
  --adp-width:334px;--adp-z-index:1200;--adp-padding:12px;
  --adp-background-color:var(--surface);--adp-color:var(--text);
  --adp-background-color-hover:var(--primary-faint);--adp-background-color-active:var(--primary-soft);
  --adp-accent-color:var(--primary-ink);--adp-color-other-month-hover:var(--text2);
  --adp-color-secondary:var(--text2);--adp-color-other-month:var(--text3);
  --adp-color-current-date:var(--primary-ink);--adp-color-disabled:var(--text3);
  --adp-border-color:var(--line);--adp-border-color-inner:var(--line);
  --adp-border-radius:20px;--adp-box-shadow:var(--shadow2);
  --adp-cell-border-radius:12px;--adp-cell-background-color-hover:var(--primary-faint);
  --adp-cell-background-color-selected:var(--primary);--adp-cell-background-color-selected-hover:var(--primary-deep);
  --adp-cell-background-color-in-range:var(--primary-faint);--adp-cell-background-color-in-range-hover:var(--primary-soft);
  --adp-day-cell-height:44px;--adp-month-cell-height:64px;--adp-year-cell-height:64px;
  --adp-nav-height:48px;--adp-nav-arrow-color:var(--text2);--adp-nav-action-size:44px;
  --adp-nav-color-secondary:var(--text2);
  --adp-day-name-color:var(--text3);--adp-font-family:inherit;--adp-font-size:14px;
  width:min(var(--adp-width),calc(100vw - 24px));
}
.air-datepicker.-is-mobile-{--adp-mobile-width:354px;--adp-mobile-day-cell-height:44px;--adp-mobile-month-cell-height:64px;--adp-mobile-year-cell-height:64px}
.air-datepicker-overlay{--adp-overlay-z-index:1100}
.air-datepicker--pointer{display:none}
.air-datepicker-nav--title{min-height:44px;font-size:16px;font-weight:600;border-radius:12px}
.air-datepicker-nav--title i{color:var(--text2)}
.air-datepicker-nav--action{border-radius:12px}
.air-datepicker-nav morph-icon{width:20px;height:20px}
.air-datepicker-nav morph-icon svg{width:100%;height:100%}
.air-datepicker-cell.-selected-{color:var(--on-primary)}
.air-datepicker-cell.-other-month-,.air-datepicker-cell.-other-decade-{opacity:.45}
.air-datepicker-cell.-current-:not(.-selected-){box-shadow:inset 0 0 0 1px var(--primary-ink)}
.air-datepicker--buttons{padding:12px;gap:6px}
.air-datepicker-buttons{display:flex;gap:6px}
.air-datepicker-button{flex:1;min-height:44px;padding:0 4px;border-radius:10px;background:var(--primary-faint);color:var(--primary-ink);font-size:12px;font-weight:600}
.air-datepicker-button:last-child{background:var(--surface-alt);color:var(--text2)}
.air-datepicker-button:hover{background:var(--primary-soft)}
.air-datepicker [role="button"]:focus-visible,.air-datepicker-button:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.air-datepicker{transition:none}}

/* Home group previews: show 5 or 7 rows, with the remaining tasks scrollable. */
.section-head{flex-wrap:wrap;cursor:default}
.section-head .sec-title{text-align:left;overflow-wrap:anywhere;min-width:0}
.sec-expand{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px 8px;border-radius:10px;background:var(--primary-faint);color:var(--primary);font-size:12px;flex-shrink:0}
.sec-expand:focus-visible,.section-items:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.section-items{overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.section-items:empty{display:none}
.advanced-options{border-top:1px solid var(--line);margin-top:8px}
.advanced-options>summary{padding:14px 0;cursor:pointer;color:var(--primary);font-weight:500}
.advanced-options-body{padding-top:4px}

.section-items{display:flex;flex-direction:column}
.section-items>.sec-item{flex-shrink:0}

/* Detail editors follow the selected theme's existing surfaces and controls. */
.fld textarea,.task-detail-fields textarea,#aiInput{width:100%;resize:vertical;min-height:76px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;line-height:1.5}
.task-detail-fields>label,.reminder-edit label{display:block;font-size:13px;color:var(--text2);margin:10px 0}
.task-detail-fields input:not([type=checkbox]),.task-detail-fields select,#fCostKind{display:block;width:100%;min-height:40px;margin-top:4px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit}
.subtask-edit{display:block;border:1px solid var(--line);border-radius:12px;padding:8px}
.subtask-edit-row{display:flex;align-items:center;gap:8px}
.subtask-edit summary{padding:8px 0;color:var(--text2);font-size:13px;cursor:pointer}
.reminder-edit{border:1px solid var(--line);border-radius:12px;padding:10px;margin:10px 0}
.fld .reminder-enable input[type=checkbox]{display:inline-block;width:18px;height:18px;margin-right:5px;vertical-align:middle}
.task-detail-summary{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--text2);width:100%;white-space:pre-wrap}
.task-detail-summary:empty{display:none}
.subtask-note{display:block;white-space:pre-wrap;color:var(--text2);font-size:12px}
.ai-conversation p{padding:10px;border-radius:10px;background:var(--primary-faint);margin-bottom:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-draft{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.ai-draft p{white-space:pre-wrap;color:var(--text2);font-size:13px;margin:6px 0}
.ai-draft-actions{display:flex;gap:8px}
#aiModal .modal-foot{flex-wrap:wrap}

/* Three primary destinations share the existing classic / Material color tokens. */
:root{--bottom-nav-height:64px}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-nav-height) + var(--safe-b));padding:4px max(12px,calc((100vw - 640px)/2)) var(--safe-b);display:flex;background:var(--surface);border-top:1px solid var(--line);z-index:45;box-shadow:0 -2px 12px rgba(25,45,90,.04)}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--text3);border-radius:12px;min-width:0}
.bottom-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav button.on{color:var(--primary);background:var(--primary-faint);font-weight:600}
.bottom-nav button:focus-visible{outline:2px solid var(--primary);outline-offset:-3px}
.main-scroll{bottom:calc(var(--bottom-nav-height) + var(--safe-b))}
body .fab-stack{bottom:calc(var(--bottom-nav-height) + 18px + var(--safe-b))}
body[data-section="chat"] .fab-stack{display:none}
.notes-page,#aiModal.chat-page{position:fixed;top:calc(56px + var(--safe-t));bottom:calc(var(--bottom-nav-height) + var(--safe-b));left:0;right:0;width:auto;margin:0;display:flex;flex-direction:column;overflow:hidden}
.notes-toolbar,.chat-toolbar{width:100%;max-width:680px;margin:0 auto;padding:14px 20px 10px;flex-shrink:0}
.notes-toolbar p{font-size:12px;color:var(--text3);margin-top:8px;text-align:center}
.notes-scroll,.chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:12px 20px 100px;scrollbar-width:thin}
#notesList,.workspace-empty{max-width:640px;margin:0 auto}
.note-group{margin-bottom:22px}
.note-group h2{font-size:14px;color:var(--text2);font-weight:500;margin:0 2px 10px;display:flex;align-items:center;gap:8px}
.note-group h2 span{color:var(--text3);font-size:12px}
.note-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.note-open{display:block;width:100%;text-align:left;padding:16px 18px;cursor:pointer}
.note-open:disabled{cursor:default;opacity:1}
.note-open time{font-size:12px;color:var(--text3)}
.note-open p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;margin:9px 0 12px;font-size:15px}
.note-scene{display:inline-block;font-size:12px;color:var(--text2);background:var(--primary-faint);padding:3px 9px;border-radius:7px}
.workspace-empty,.chat-empty{text-align:center;padding:60px 18px;color:var(--text2)}
.workspace-empty h2,.chat-empty h2{font-size:20px;font-weight:500;margin-bottom:10px;color:var(--text)}
.workspace-empty p,.chat-empty p{font-size:14px;line-height:1.8}
.workspace-help{font-size:12px;color:var(--text3);line-height:1.7;padding:12px 20px}
.note-scene-select,.note-scene-row{display:flex;align-items:center;gap:8px}
.note-scene-select select{flex:1;min-width:0;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit}
.note-scene-row{padding:8px 0;border-bottom:1px solid var(--line)}
.note-scene-row span{flex:1;overflow-wrap:anywhere}
#aiModal.chat-page{z-index:1;border:none;border-radius:0;box-shadow:none;background:transparent;transform:none;max-height:none}
.chat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}
.chat-toolbar .db-seg{flex:1;max-width:340px}
.chat-scroll{padding-bottom:20px;width:100%;max-width:680px;margin:0 auto}
.chat-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--primary-faint);color:var(--primary);font-size:30px;border-radius:18px;margin-bottom:16px}
.chat-composer{width:100%;max-width:680px;margin:0 auto;padding:10px 20px 12px;flex-shrink:0;border-top:1px solid var(--line);background:var(--bg)}
.chat-composer .ai-tip{margin:0 0 7px}
.chat-composer #aiInput{min-height:58px;max-height:130px;background:var(--surface);resize:vertical}
.chat-send-row{display:flex;justify-content:flex-end;gap:8px;align-items:center;margin-top:6px}
.chat-send-row #aiSaveDrafts{margin-right:auto}
.chat-scroll .ai-draft{background:var(--surface);margin:12px 0;border-radius:var(--radius)}
.chat-scroll .ai-conversation p{font-weight:400;line-height:1.7;padding:12px 14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){.notes-toolbar,.chat-toolbar{padding-left:14px;padding-right:14px}.notes-scroll,.chat-scroll{padding-left:14px;padding-right:14px}.chat-composer{padding:8px 14px}.chat-toolbar .btn-text{padding:8px}.bottom-nav{padding-left:12px;padding-right:12px}}
@media(max-height:520px){.chat-composer .ai-tip{display:none}.chat-composer #aiInput{min-height:40px;max-height:70px}.chat-toolbar{padding-top:5px;padding-bottom:5px}}

.ai-config-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}
.ai-config-status{font-size:13px;line-height:1.6;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text2)}
.ai-config-status[data-kind="error"]{color:var(--danger,#c0392b)}
.ai-config-status[data-kind="success"]{color:var(--primary-ink)}
#aiProvider,#aiModelPicker{width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit}

.cloud-gate{position:fixed;inset:0;z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);padding:24px;text-align:center;gap:20px}
html[data-cloud-hosted]:not([data-cloud-auth]) #cloudGate{display:flex!important}
#cloudMask{z-index:1501}#cloudPanel{z-index:1502}#dlgMask{z-index:1600}#dlgModal{z-index:1601}
#cloudPanel .modal-body{overflow-y:auto}#cloudPanel p{line-height:1.7;margin:10px 0}#cloudPanel button{margin:5px 0}#cloudInitial .btn-line{display:block;width:100%}
#cloudWho{overflow-wrap:anywhere}#cloudConflictList{white-space:pre-wrap;font-size:13px}.cloud-user{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.cloud-user span{flex:1}
#cloudPanel .danger{color:var(--danger,#d93025)}