/* ==========================================================================
   滴答清单风格 · 网页版备忘录与任务管理
   ========================================================================== */

:root{
  --brand:          #3ebf9c;
  --brand-hover:    #35ab8b;
  --brand-soft:     #e9f7f2;
  --brand-soft-2:   #d7f0e8;

  --bg:             #ffffff;
  --bg-side:        #fafafa;
  --bg-panel:       #ffffff;
  --bg-hover:       #f5f6f7;
  --bg-active:      #f0f1f3;
  --bg-input:       #f4f5f6;

  --border:         #ececec;
  --border-2:       #e3e5e8;

  --text:           #1f2329;
  --text-2:         #6b7280;
  --text-3:         #9ca3af;

  --red:            #e8384f;
  --orange:         #f5a623;
  --blue:           #4772fa;
  --purple:         #8f7ef2;

  --prio-high:      #e8384f;
  --prio-mid:       #f5a623;
  --prio-low:       #4772fa;

  --shadow-1:       0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2:       0 4px 14px rgba(16,24,40,.10);
  --shadow-3:       0 12px 36px rgba(16,24,40,.16);

  --radius:         8px;
  --radius-sm:      6px;
  --side-w:         248px;
  --detail-w:       400px;
  --head-h:         56px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[data-theme="dark"]{
  --bg:             #1c1e21;
  --bg-side:        #17181b;
  --bg-panel:       #1c1e21;
  --bg-hover:       #26282c;
  --bg-active:      #2c2f34;
  --bg-input:       #26282c;
  --border:         #2c2f34;
  --border-2:       #383c42;
  --text:           #e8eaed;
  --text-2:         #9aa0a6;
  --text-3:         #6b7280;
  --brand-soft:     #1e3630;
  --brand-soft-2:   #23453c;
  --shadow-1:       0 1px 2px rgba(0,0,0,.4);
  --shadow-2:       0 4px 14px rgba(0,0,0,.45);
  --shadow-3:       0 12px 36px rgba(0,0,0,.55);
}

*{ box-sizing: border-box; }
*::before,*::after{ box-sizing: border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  font-size:14px;
  line-height:1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow:hidden;
}
button{ font-family:inherit; font-size:inherit; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }
a{ color: var(--brand); text-decoration:none; }
svg{ display:block; }
::selection{ background: var(--brand-soft-2); }

/* ---------- 滚动条 ---------- */
.task-scroll::-webkit-scrollbar,
.side-scroll::-webkit-scrollbar,
.detail-body::-webkit-scrollbar{ width:8px; height:8px; }
.task-scroll::-webkit-scrollbar-thumb,
.side-scroll::-webkit-scrollbar-thumb,
.detail-body::-webkit-scrollbar-thumb{
  background:#d8dade; border-radius:8px; border:2px solid transparent; background-clip:content-box;
}
.task-scroll::-webkit-scrollbar-thumb:hover,
.side-scroll::-webkit-scrollbar-thumb:hover,
.detail-body::-webkit-scrollbar-thumb:hover{ background:#bfc3c9; background-clip:content-box; }
html[data-theme="dark"] .task-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .side-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .detail-body::-webkit-scrollbar-thumb{ background:#3a3d43; background-clip:content-box; }
.task-scroll::-webkit-scrollbar-track,
.side-scroll::-webkit-scrollbar-track,
.detail-body::-webkit-scrollbar-track{ background:transparent; }

/* ==========================================================================
   布局
   ========================================================================== */
.app{
  display:flex;
  height:100vh;
  height:100dvh;
  width:100%;
  overflow:hidden;
  position:relative;
}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width: var(--side-w);
  flex: 0 0 var(--side-w);
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
  transition: margin-left .22s ease, transform .22s ease;
  z-index:30;
}
.sidebar-inner{ display:flex; flex-direction:column; height:100%; min-height:0; }

.side-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 10px;
}
.avatar{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg,#3ebf9c,#2f9c80);
  color:#fff; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 34px; cursor:pointer; user-select:none;
}
.side-head-text{ min-width:0; flex:1; }
.side-user{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-sub{ font-size:11px; color: var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn{
  border:0; background:transparent; width:28px; height:28px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--text-2); flex:0 0 auto;
}
.icon-btn:hover{ background: var(--bg-hover); color: var(--text); }
.side-close{ display:none; }

.side-add{ padding: 4px 14px 10px; }
.add-task-btn{
  width:100%; height:38px; border:0; border-radius: var(--radius);
  background: var(--brand); color:#fff; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:7px;
  cursor:pointer; transition: background .15s ease, transform .06s ease;
  box-shadow: 0 1px 2px rgba(62,191,156,.35);
}
.add-task-btn:hover{ background: var(--brand-hover); }
.add-task-btn:active{ transform: scale(.985); }
.add-task-btn svg{ width:15px; height:15px; }

.side-search{
  position:relative; margin: 0 14px 10px;
}
.side-search input{
  width:100%; height:34px; border-radius: var(--radius-sm);
  border:1px solid transparent; background: var(--bg-input);
  padding: 0 28px 0 32px; outline:none; font-size:13px;
  transition: border-color .15s ease, background .15s ease;
}
.side-search input:focus{ background: var(--bg); border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.side-search input::placeholder{ color: var(--text-3); }
.side-search-icon{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color: var(--text-3); pointer-events:none;
}
.search-clear{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border:0; background:transparent; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--text-3);
}
.search-clear:hover{ background: var(--border); color: var(--text); }
.search-clear svg{ width:12px; height:12px; }

.side-scroll{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding: 0 8px 16px;
}

.side-section{ margin-top:10px; }
.side-section-head{
  display:flex; align-items:center; gap:6px;
  padding: 6px 8px 6px 10px;
  font-size:12px; color: var(--text-3); font-weight:600;
  letter-spacing:.02em;
}
.side-section-head .sec-title{ flex:1; }
.sec-actions{ display:flex; gap:2px; opacity:0; transition: opacity .15s ease; }
.side-section:hover .sec-actions{ opacity:1; }
.sec-actions .icon-btn{ width:22px; height:22px; }
.sec-actions .icon-btn svg{ width:14px; height:14px; }

.side-item{
  display:flex; align-items:center; gap:9px;
  height:34px; padding:0 8px 0 10px; margin:1px 0;
  border-radius: var(--radius-sm); cursor:pointer;
  color: var(--text); font-size:13.5px; user-select:none;
  position:relative; transition: background .12s ease;
}
.side-item:hover{ background: var(--bg-hover); }
.side-item.active{ background: var(--bg-active); font-weight:600; }
.side-item .s-ic{ width:17px; height:17px; flex:0 0 17px; display:flex; align-items:center; justify-content:center; }
.side-item .s-ic svg{ width:17px; height:17px; }
.side-item .s-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-item .s-count{ font-size:12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.side-item.active .s-count{ color: var(--text-2); }
.side-item .s-more{ opacity:0; }
.side-item:hover .s-more{ opacity:1; }
.side-item .s-more .icon-btn{ width:22px; height:22px; }
.side-item .s-more .icon-btn svg{ width:14px; height:14px; }

.side-item .dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 9px; background:#c9cdd4;
}
.side-item.drag-over{ background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }

.side-item .s-chev{
  width:14px; height:14px; flex:0 0 14px; color: var(--text-3);
  display:flex; align-items:center; justify-content:center;
  margin-left:-4px; border-radius:3px;
}
.side-item .s-chev:hover{ background: var(--border); }
.side-item .s-chev svg{ width:12px; height:12px; transition: transform .15s ease; }
.side-item.folder-open .s-chev svg{ transform: rotate(90deg); }

.side-empty{
  padding: 8px 12px; font-size:12.5px; color: var(--text-3);
}
.list-group{ overflow:hidden; }

.side-foot{
  border-top:1px solid var(--border);
  padding: 8px 14px;
  font-size:12px; color: var(--text-3);
}
.side-foot-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.link-btn{
  border:0; background:transparent; color: var(--text-2); cursor:pointer;
  font-size:12px; padding:2px 6px; border-radius:4px;
}
.link-btn:hover{ background: var(--bg-hover); color: var(--brand); }

/* ---------- 主区域 ---------- */
.main{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background: var(--bg); position:relative;
}
.main-head{
  height: var(--head-h); flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  padding: 0 18px;
  border-bottom:1px solid transparent;
  position:relative;
}
.main-head.scrolled{ border-bottom-color: var(--border); }
.head-toggle{ display:none; }
.head-title-wrap{ display:flex; align-items:baseline; gap:10px; min-width:0; flex:0 1 auto; }
.head-title{
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.head-count{ font-size:13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.head-sub{ font-size:12.5px; color: var(--text-3); margin-top:1px; }
.head-spacer{ flex:1; }
.head-actions{ display:flex; align-items:center; gap:2px; }

.chip-btn{
  height:30px; padding:0 10px; border-radius: var(--radius-sm);
  border:1px solid transparent; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; color: var(--text-2); font-size:13px;
  white-space:nowrap;
}
.chip-btn:hover{ background: var(--bg-hover); color: var(--text); }
.chip-btn svg{ width:15px; height:15px; }
.chip-btn.on{ color: var(--brand); background: var(--brand-soft); }
.chip-btn.pill{ border-color: var(--border-2); }

.filter-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding: 0 18px 10px;
}
.filter-tag{
  display:inline-flex; align-items:center; gap:5px;
  height:26px; padding:0 8px; border-radius:13px;
  background: var(--brand-soft); color:#2c8f76; font-size:12.5px;
  border:1px solid transparent;
}
html[data-theme="dark"] .filter-tag{ color:#6dd8b8; }
.filter-tag button{ border:0; background:transparent; cursor:pointer; color:inherit; display:flex; padding:0; }
.filter-tag svg{ width:11px; height:11px; }

.task-scroll{
  flex:1; min-height:0; overflow-y:auto; position:relative;
  padding-bottom: 40vh;
}
.task-groups{ padding: 0 0 4px; }

/* ---------- 分组标题 ---------- */
.group-head{
  display:flex; align-items:center; gap:8px;
  padding: 14px 18px 6px;
  font-size:13px; font-weight:600; color: var(--text-2);
  background: var(--bg);
  position:sticky; top:0; z-index:5;
}
.group-head .gh-count{ font-weight:400; color: var(--text-3); font-size:12px; }
.group-head .gh-line{ flex:1; height:1px; background: var(--border); }
.group-head.collapsed-head{ padding-bottom:10px; }
.group-toggle{
  border:0; background:transparent; padding:2px; cursor:pointer; color: var(--text-3);
  display:flex; border-radius:4px;
}
.group-toggle:hover{ background: var(--bg-hover); }
.group-toggle svg{ width:13px; height:13px; transition: transform .15s ease; }
.group.collapsed .group-toggle svg{ transform: rotate(-90deg); }
.group.collapsed .group-body{ display:none; }

/* ---------- 任务行 ---------- */
.task{
  display:flex; align-items:flex-start; gap:10px;
  padding: 9px 18px 9px 16px;
  border-bottom:1px solid #f4f5f6;
  cursor:pointer; position:relative;
  transition: background .12s ease;
}
html[data-theme="dark"] .task{ border-bottom-color:#26282c; }
.task:hover{ background: var(--bg-hover); }
.task.selected{ background: var(--brand-soft); }
.task.dragging{ opacity:.4; }
.task.drag-over-top{ box-shadow: inset 0 2px 0 var(--brand); }
.task.drag-over-bottom{ box-shadow: inset 0 -2px 0 var(--brand); }

.checkbox{
  width:19px; height:19px; flex:0 0 19px; border-radius:50%;
  border:1.6px solid #c9cdd4; background:transparent;
  margin-top:2px; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .15s ease, background .15s ease;
}
.checkbox:hover{ border-color: var(--brand); background: var(--brand-soft); }
.checkbox svg{ width:12px; height:12px; color:#fff; opacity:0; transition:opacity .12s ease; }
.checkbox:hover svg{ opacity:.5; color: var(--brand); }
.checkbox.prio-3{ border-color: var(--prio-high); }
.checkbox.prio-2{ border-color: var(--prio-mid); }
.checkbox.prio-1{ border-color: var(--prio-low); }
.task.done .checkbox{ background: var(--brand); border-color: var(--brand); }
.task.done .checkbox svg{ opacity:1; color:#fff; }

.task-main{ flex:1; min-width:0; }
.task-line1{ display:flex; align-items:center; gap:6px; }
.task-title{
  font-size:14px; line-height:20px; color: var(--text);
  word-break: break-word; flex:0 1 auto; min-width:0;
}
.task.done .task-title{ color: var(--text-3); text-decoration: line-through; }
.task-note-ic{ color: var(--text-3); flex:0 0 auto; display:flex; }
.task-note-ic svg{ width:14px; height:14px; }

.task-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:3px; font-size:12px; color: var(--text-3);
  min-height:0;
}
.task-meta:empty{ display:none; }
.m-item{ display:inline-flex; align-items:center; gap:3px; }
.m-item svg{ width:12px; height:12px; }
.m-date.overdue{ color: var(--red); }
.m-date.today{ color: var(--red); }
.m-date.done{ color: var(--text-3); }
.m-sub{ color: var(--text-3); }
.m-tag{
  display:inline-flex; align-items:center; gap:2px;
  padding:0 6px; height:17px; border-radius:4px;
  background: var(--bg-active); color: var(--text-2); font-size:11.5px;
}
.m-list{ display:inline-flex; align-items:center; gap:3px; }
.m-list .dot{ width:7px; height:7px; border-radius:50%; background:#c9cdd4; }
.m-prio{
  display:inline-flex; align-items:center; gap:2px; font-weight:600;
}
.m-prio-3{ color: var(--prio-high); }
.m-prio-2{ color: var(--prio-mid); }
.m-prio-1{ color: var(--prio-low); }

.task-actions{
  display:flex; align-items:center; gap:1px;
  opacity:0; transition: opacity .12s ease;
  flex:0 0 auto; margin-top:-1px;
}
.task:hover .task-actions,
.task.selected .task-actions{ opacity:1; }
.task-actions .icon-btn{ width:27px; height:27px; }
.task-actions .icon-btn svg{ width:15px; height:15px; }
.task-actions .icon-btn.hl{ color: var(--prio-high); }
.task-actions .icon-btn.hl-1{ color: var(--prio-low); }
.task-actions .icon-btn.hl-2{ color: var(--prio-mid); }

/* ---------- 空状态 ---------- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 64px 24px; text-align:center; color: var(--text-3);
}
.empty-state .es-art{ width:96px; height:96px; margin-bottom:14px; opacity:.9; }
.empty-state .es-title{ font-size:14px; color: var(--text-2); margin-bottom:4px; }
.empty-state .es-desc{ font-size:12.5px; }

/* ---------- 添加任务行 ---------- */
.add-row{ padding: 6px 16px 8px; }
.add-collapsed{
  display:flex; align-items:center; gap:9px; height:38px;
  padding:0 10px; border-radius: var(--radius-sm);
  color: var(--text-3); cursor:text; font-size:14px;
}
.add-collapsed:hover{ background: var(--bg-hover); color: var(--text-2); }
.add-collapsed .plus{ width:19px; height:19px; flex:0 0 19px; display:flex; align-items:center; justify-content:center; color: var(--brand); }
.add-collapsed .plus svg{ width:17px; height:17px; }

.add-box{
  border:1px solid var(--border-2); border-radius: var(--radius);
  background: var(--bg-panel); box-shadow: var(--shadow-2);
  padding: 10px 12px 8px;
}
.add-box:focus-within{ border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-2); }
.add-input{
  width:100%; border:0; outline:none; background:transparent;
  font-size:14px; line-height:22px; resize:none; overflow:hidden;
  min-height:22px; max-height:120px; padding:0;
}
.add-input::placeholder{ color: var(--text-3); }
.add-hint{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:6px; font-size:12px; color: var(--text-3);
}
.add-hint-chip{
  display:inline-flex; align-items:center; gap:4px;
  height:22px; padding:0 8px; border-radius:11px;
  background: var(--brand-soft); color:#2c8f76; font-size:12px;
}
html[data-theme="dark"] .add-hint-chip{ color:#6dd8b8; }
.add-hint-chip svg{ width:11px; height:11px; }
.add-hint-chip button{ border:0;background:transparent;cursor:pointer;color:inherit;display:flex;padding:0; }

.add-toolbar{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--border);
}
.add-tool{
  height:28px; padding:0 8px; border-radius: var(--radius-sm);
  border:1px solid transparent; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; color: var(--text-2); font-size:12.5px;
  white-space:nowrap;
}
.add-tool svg{ width:15px; height:15px; }
.add-tool:hover{ background: var(--bg-hover); color: var(--text); }
.add-tool.on{ background: var(--brand-soft); color:#2c8f76; }
html[data-theme="dark"] .add-tool.on{ color:#6dd8b8; }
.add-tool.prio-3.on{ background:#fdeaed; color: var(--prio-high); }
.add-tool.prio-2.on{ background:#fef4e3; color: var(--prio-mid); }
.add-tool.prio-1.on{ background:#eaeffe; color: var(--prio-low); }
html[data-theme="dark"] .add-tool.prio-3.on{ background:#3a1e23; }
html[data-theme="dark"] .add-tool.prio-2.on{ background:#3a2f18; }
html[data-theme="dark"] .add-tool.prio-1.on{ background:#1e2740; }
.add-toolbar .spacer{ flex:1; }
.btn{
  height:30px; padding:0 14px; border-radius: var(--radius-sm);
  border:1px solid var(--border-2); background: var(--bg-panel);
  cursor:pointer; font-size:13px; color: var(--text);
  display:inline-flex; align-items:center; gap:5px;
}
.btn:hover{ background: var(--bg-hover); }
.btn-primary{ background: var(--brand); border-color: var(--brand); color:#fff; font-weight:600; }
.btn-primary:hover{ background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-danger{ color: var(--red); border-color:#f6c8ce; }
.btn-danger:hover{ background:#fdeaed; }
.btn-sm{ height:26px; padding:0 10px; font-size:12.5px; }
.btn-block{ width:100%; justify-content:center; }

.list-end{ height: 8px; }

/* ---------- 进度条 ---------- */
.progress-wrap{
  display:flex; align-items:center; gap:10px; padding: 4px 18px 12px;
}
.progress-bar{ flex:1; height:4px; border-radius:2px; background: var(--border); overflow:hidden; }
.progress-bar span{ display:block; height:100%; background: var(--brand); border-radius:2px; transition: width .25s ease; }
.progress-text{ font-size:12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   详情面板
   ========================================================================== */
.detail{
  width:0; flex:0 0 0; overflow:hidden;
  background: var(--bg-panel); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transition: width .2s ease, flex-basis .2s ease;
  z-index:25;
}
.detail.open{ width: var(--detail-w); flex-basis: var(--detail-w); }
.detail-inner{ width: var(--detail-w); display:flex; flex-direction:column; height:100%; }

.detail-head{
  flex:0 0 auto; display:flex; align-items:center; gap:4px;
  padding: 10px 12px; border-bottom:1px solid var(--border);
}
.detail-head .spacer{ flex:1; }
.detail-back{ display:none; }

.detail-body{
  flex:1; min-height:0; overflow-y:auto; padding: 14px 16px 32px;
}

.d-title-row{ display:flex; align-items:flex-start; gap:10px; }
.d-title-row .checkbox{ margin-top:5px; }
.d-title{
  flex:1; border:0; outline:none; background:transparent; resize:none;
  font-size:17px; font-weight:600; line-height:24px; padding:2px 0;
  min-height:28px; overflow:hidden;
}
.d-title::placeholder{ color: var(--text-3); font-weight:400; }
.d-title.done{ text-decoration: line-through; color: var(--text-3); }

.d-notes{
  width:100%; border:0; outline:none; background:transparent; resize:none;
  font-size:13.5px; line-height:21px; color: var(--text-2);
  padding:6px 0; min-height:26px; overflow:hidden;
  border-bottom:1px solid transparent;
}
.d-notes:focus{ border-bottom-color: var(--border); }
.d-notes::placeholder{ color: var(--text-3); }

.d-sec{ margin-top:14px; }
.d-sec-label{
  font-size:12px; color: var(--text-3); font-weight:600;
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.d-sec-label svg{ width:13px; height:13px; }
.d-sec-label .spacer{ flex:1; }

.d-row{
  display:flex; align-items:center; gap:9px;
  height:36px; padding: 0 4px; border-radius: var(--radius-sm);
  cursor:pointer; color: var(--text); font-size:13.5px;
}
.d-row:hover{ background: var(--bg-hover); }
.d-row .d-ic{ width:17px; height:17px; color: var(--text-3); flex:0 0 17px; display:flex; }
.d-row .d-ic svg{ width:17px; height:17px; }
.d-row .d-val{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-row .d-val.muted{ color: var(--text-3); }
.d-row .d-chev{ color: var(--text-3); display:flex; }
.d-row .d-chev svg{ width:13px; height:13px; }
.d-row .dot{ width:9px; height:9px; border-radius:50%; background:#c9cdd4; flex:0 0 9px; }

.d-inline-picker{
  display:flex; flex-wrap:wrap; gap:6px; padding: 4px 4px 2px;
}
.d-inline-picker button{
  height:28px; padding:0 10px; border-radius:14px;
  border:1px solid var(--border-2); background:var(--bg-panel);
  cursor:pointer; font-size:12.5px; color: var(--text-2);
}
.d-inline-picker button:hover{ border-color: var(--brand); color: var(--brand); }
.d-inline-picker button.on{ background: var(--brand); border-color: var(--brand); color:#fff; }

.d-prio-row{ display:flex; gap:6px; }
.d-prio-btn{
  flex:1; height:32px; border-radius: var(--radius-sm);
  border:1px solid var(--border-2); background:var(--bg-panel);
  cursor:pointer; font-size:12.5px; color: var(--text-2);
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.d-prio-btn svg{ width:14px; height:14px; }
.d-prio-btn:hover{ border-color:#c9cdd4; }
.d-prio-btn.on[data-p="3"]{ background:#fdeaed; border-color: var(--prio-high); color: var(--prio-high); font-weight:600; }
.d-prio-btn.on[data-p="2"]{ background:#fef4e3; border-color: var(--prio-mid); color:#c07d0f; font-weight:600; }
.d-prio-btn.on[data-p="1"]{ background:#eaeffe; border-color: var(--prio-low); color: var(--prio-low); font-weight:600; }
.d-prio-btn.on[data-p="0"]{ background: var(--bg-active); border-color: var(--text-3); color: var(--text); font-weight:600; }
html[data-theme="dark"] .d-prio-btn.on[data-p="3"]{ background:#3a1e23; }
html[data-theme="dark"] .d-prio-btn.on[data-p="2"]{ background:#3a2f18; }
html[data-theme="dark"] .d-prio-btn.on[data-p="1"]{ background:#1e2740; }

.d-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.d-tag{
  display:inline-flex; align-items:center; gap:5px;
  height:26px; padding:0 8px; border-radius:13px;
  background: var(--bg-active); color: var(--text-2); font-size:12.5px;
}
.d-tag button{ border:0;background:transparent;cursor:pointer;color:var(--text-3);display:flex;padding:0; }
.d-tag button:hover{ color: var(--red); }
.d-tag button svg{ width:11px; height:11px; }
.d-tag-add{
  height:26px; padding:0 10px; border-radius:13px; border:1px dashed var(--border-2);
  background:transparent; cursor:pointer; font-size:12.5px; color: var(--text-3);
  display:inline-flex; align-items:center; gap:4px;
}
.d-tag-add:hover{ border-color: var(--brand); color: var(--brand); }
.d-tag-input{
  height:26px; width:110px; border-radius:13px; border:1px solid var(--brand);
  background:var(--bg-panel); padding:0 10px; outline:none; font-size:12.5px;
}

.d-sub-list{ display:flex; flex-direction:column; gap:1px; }
.d-sub{
  display:flex; align-items:center; gap:9px; padding: 5px 4px;
  border-radius: var(--radius-sm); cursor:pointer;
}
.d-sub:hover{ background: var(--bg-hover); }
.d-sub .checkbox{ width:16px; height:16px; flex:0 0 16px; margin-top:0; }
.d-sub .checkbox svg{ width:10px; height:10px; }
.d-sub-title{ flex:1; font-size:13.5px; min-width:0; word-break:break-word; }
.d-sub.done .d-sub-title{ color: var(--text-3); text-decoration: line-through; }
.d-sub-del{ opacity:0; }
.d-sub:hover .d-sub-del{ opacity:1; }
.d-sub-del .icon-btn{ width:22px; height:22px; }
.d-sub-del .icon-btn svg{ width:13px; height:13px; }

.d-sub-add{
  display:flex; align-items:center; gap:9px; padding: 5px 4px;
  color: var(--text-3); cursor:text; border-radius: var(--radius-sm); font-size:13.5px;
}
.d-sub-add:hover{ background: var(--bg-hover); color: var(--text-2); }
.d-sub-add .icon-btn{ pointer-events:none; }

.d-attach-list{ display:flex; flex-direction:column; gap:4px; }
.d-attach{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border:1px solid var(--border); border-radius: var(--radius-sm); font-size:12.5px;
  color: var(--text-2);
}
.d-attach .spacer{ flex:1; }

.d-foot{
  flex:0 0 auto; border-top:1px solid var(--border);
  padding: 10px 14px; display:flex; align-items:center; gap:8px;
  font-size:12px; color: var(--text-3);
}
.d-foot .spacer{ flex:1; }

/* ==========================================================================
   弹层 / 菜单 / 模态
   ========================================================================== */
.context-menu{
  position:fixed; z-index:200; min-width:172px;
  background: var(--bg-panel); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  padding:5px; font-size:13px;
}
.menu-item{
  display:flex; align-items:center; gap:9px;
  height:32px; padding:0 10px; border-radius: var(--radius-sm);
  cursor:pointer; color: var(--text); white-space:nowrap;
}
.menu-item:hover{ background: var(--bg-hover); }
.menu-item.danger{ color: var(--red); }
.menu-item.danger:hover{ background:#fdeaed; }
html[data-theme="dark"] .menu-item.danger:hover{ background:#3a1e23; }
.menu-item svg{ width:15px; height:15px; flex:0 0 15px; }
.menu-item .spacer{ flex:1; }
.menu-item .k{ font-size:11px; color: var(--text-3); }
.menu-sep{ height:1px; background: var(--border); margin:5px 8px; }
.menu-label{ padding:6px 10px 4px; font-size:11.5px; color: var(--text-3); font-weight:600; }
.menu-panel{ max-height:340px; overflow-y:auto; }

.popover{
  position:fixed; z-index:200;
  background: var(--bg-panel); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  padding:8px;
}
.popover-title{ font-size:12px; color: var(--text-3); font-weight:600; padding:2px 6px 8px; }
.pop-row{ display:flex; gap:8px; align-items:center; }
.pop-field{ margin-bottom:8px; }
.pop-field label{ display:block; font-size:11.5px; color: var(--text-3); margin-bottom:4px; }
.pop-field input, .pop-field select, .pop-field textarea{
  width:100%; height:32px; border:1px solid var(--border-2); border-radius: var(--radius-sm);
  padding:0 9px; outline:none; background: var(--bg-panel); font-size:13px;
}
.pop-field input:focus,.pop-field select:focus,.pop-field textarea:focus{ border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.pop-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pop-quick button{
  height:28px; padding:0 10px; border-radius:14px; border:1px solid var(--border-2);
  background: var(--bg-panel); cursor:pointer; font-size:12.5px; color: var(--text-2);
}
.pop-quick button:hover{ border-color: var(--brand); color: var(--brand); }
.pop-check{
  display:flex; align-items:center; gap:9px; height:32px; padding:0 8px;
  border-radius: var(--radius-sm); cursor:pointer; font-size:13px;
}
.pop-check:hover{ background: var(--bg-hover); }
.pop-check input{ accent-color: var(--brand); width:15px; height:15px; margin:0; }

/* 模态 */
.modal-mask{
  position:fixed; inset:0; background: rgba(15,20,26,.42);
  z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;
  animation: fadeIn .14s ease;
}
.modal{
  width:100%; max-width:400px; background: var(--bg-panel);
  border-radius:12px; box-shadow: var(--shadow-3); overflow:hidden;
  animation: popIn .16s cubic-bezier(.2,.9,.3,1.1);
}
.modal-head{ padding:16px 18px 6px; font-size:16px; font-weight:700; }
.modal-body{ padding: 6px 18px 4px; font-size:13.5px; color: var(--text-2); }
.modal-body input{
  width:100%; height:36px; border:1px solid var(--border-2); border-radius: var(--radius-sm);
  padding:0 10px; outline:none; background: var(--bg-panel); margin-top:10px; font-size:14px;
}
.modal-body input:focus{ border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding: 16px 18px 18px; }

/* Toast */
.toasts{
  position:fixed; right:18px; bottom:18px; z-index:400;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  pointer-events:none;
}
.toast{
  pointer-events:auto; min-width:240px; max-width:330px;
  background: var(--bg-panel); border:1px solid var(--border);
  border-left:3px solid var(--brand);
  border-radius: var(--radius); box-shadow: var(--shadow-3);
  padding: 10px 12px; display:flex; gap:10px; align-items:flex-start;
  animation: slideUp .2s ease;
}
.toast.out{ animation: fadeOut .2s ease forwards; }
.toast .t-ic{ color: var(--brand); flex:0 0 17px; margin-top:1px; }
.toast .t-ic svg{ width:17px; height:17px; }
.toast .t-main{ flex:1; min-width:0; }
.toast .t-title{ font-size:13.5px; font-weight:600; }
.toast .t-desc{ font-size:12.5px; color: var(--text-2); margin-top:2px; word-break:break-word; }
.toast .t-actions{ display:flex; gap:6px; margin-top:8px; }
.toast.warn{ border-left-color: var(--orange); }
.toast.warn .t-ic{ color: var(--orange); }
.toast.danger{ border-left-color: var(--red); }
.toast.danger .t-ic{ color: var(--red); }

/* ---------- 日历视图 ---------- */
.cal-wrap{ padding: 4px 18px 8px; }
.cal-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.cal-month{ font-size:16px; font-weight:700; min-width:110px; }
.cal-week{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-week span{ text-align:center; font-size:12px; color: var(--text-3); padding:4px 0; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-cell{
  min-height:92px; border-radius: var(--radius-sm);
  border:1px solid var(--border); padding:5px 6px; cursor:pointer;
  display:flex; flex-direction:column; gap:3px; overflow:hidden;
  transition: border-color .12s ease, background .12s ease;
}
.cal-cell:hover{ background: var(--bg-hover); }
.cal-cell.out{ opacity:.42; }
.cal-cell.sel{ border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal-cell.today .cal-daynum{ background: var(--brand); color:#fff; }
.cal-daynum{
  font-size:12.5px; font-weight:600; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color: var(--text-2);
}
.cal-chip{
  font-size:11.5px; padding:1px 5px; border-radius:4px;
  background: var(--bg-active); color: var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:2px solid #c9cdd4;
}
.cal-chip.prio-3{ border-left-color: var(--prio-high); }
.cal-chip.prio-2{ border-left-color: var(--prio-mid); }
.cal-chip.prio-1{ border-left-color: var(--prio-low); }
.cal-chip.done{ opacity:.5; text-decoration: line-through; }
.cal-more{ font-size:11px; color: var(--text-3); padding-left:5px; }

/* ---------- 动画 ---------- */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeOut{ to{opacity:0; transform:translateY(6px)} }
@keyframes popIn{ from{opacity:0; transform:scale(.96) translateY(6px)} to{opacity:1; transform:none} }
@keyframes slideUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ==========================================================================
   响应式 —— 平板 / 移动
   ========================================================================== */
@media (max-width: 1180px){
  :root{ --detail-w: 360px; }
}
@media (max-width: 1000px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-3);
    width: 270px; flex-basis:270px;
  }
  .sidebar.open{ transform:none; }
  .sidebar-inner{ width:270px; }
  .side-close{ display:inline-flex; }
  .backdrop{
    position:fixed; inset:0; background: rgba(15,20,26,.4); z-index:20;
  }
  .head-toggle{ display:inline-flex; }
  .main-head{ padding: 0 12px; }
  .detail{ display:none; }
  .detail.open{
    display:flex; position:fixed; inset:0; width:100%; flex-basis:100%;
    z-index:100; border-left:0;
  }
  .detail-inner{ width:100%; }
  .detail-back{ display:inline-flex; }
  .task, .add-row, .main-head, .filter-bar, .group-head, .cal-wrap, .progress-wrap{ padding-left:12px; padding-right:12px; }
}
@media (max-width: 640px){
  :root{ --head-h: 52px; }
  .head-title{ font-size:17px; }
  .cal-cell{ min-height:64px; padding:3px 4px; }
  .cal-chip{ font-size:10.5px; }
  .task-actions{ opacity:1; }
  .task-actions .icon-btn:not(.always){ display:none; }
  .task-actions .icon-btn.always{ display:inline-flex; }
  .toasts{ left:12px; right:12px; bottom:12px; align-items:stretch; }
  .toast{ max-width:none; }
  .detail-body{ padding: 12px 14px 40px; }
  .chip-btn .label{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}