/* ============================================================
   T笔记 · 底部工具栏（两行）+ 收起状态
   ============================================================ */

#toolbar{
  flex:0 0 auto;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(23,32,48,.07);z-index:40;
  padding:8px 10px 10px;
}

.tb-row{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.tb-row::-webkit-scrollbar{display:none;}
.tb-row + .tb-row{margin-top:8px;}

.grp{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.vd{width:1px;height:38px;background:var(--line);margin:0 6px;flex:0 0 auto;}
.spacer{flex:1 1 auto;min-width:0;}

/* ---------- 工具按钮 ---------- */
.tool-btn{
  min-width:62px;height:56px;padding:4px 10px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#4a5364;background:#f5f7fb;border:1px solid transparent;
  font-size:11.5px;font-weight:500;
  transition:background .12s,color .12s,transform .07s;
}
.tool-btn:active{transform:scale(.95);background:#e8edf7;}
.tool-btn.active{background:var(--brand-soft);color:var(--brand);border-color:#c8daff;}
.tool-btn.small{min-width:46px;height:46px;padding:0;gap:0;}
.tool-btn.small svg{width:22px;height:22px;}
.tool-btn svg{pointer-events:none;}
.tool-btn[disabled]{opacity:.35;}

/* ---------- 导航 / 缩放按钮 ---------- */
.nav-btn{
  height:46px;min-width:46px;padding:0 12px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#f5f7fb;color:#4a5364;font-size:13px;font-weight:500;
  border:1px solid transparent;transition:background .12s,transform .07s;
}
.nav-btn:active{transform:scale(.95);background:#e8edf7;}
.nav-btn.active{background:var(--brand-soft);color:var(--brand);border-color:#c8daff;}
.nav-btn.zoom-val{min-width:70px;font-variant-numeric:tabular-nums;}

.page-input{
  width:62px;height:46px;text-align:center;font-size:16px;font-weight:600;
  border-radius:12px;border:1px solid var(--line);background:#fff;
  -webkit-user-select:text;user-select:text;
}
.page-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.page-total{font-size:13px;color:var(--muted);padding:0 2px;white-space:nowrap;}

/* ---------- 快捷颜色槽 ---------- */
.slot{
  width:46px;height:46px;border-radius:12px;flex:0 0 auto;position:relative;
  border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .07s;
}
.slot:active{transform:scale(.93);}
.slot i{width:26px;height:26px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);}
.slot.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.slot .del-hint{
  position:absolute;left:0;right:0;bottom:2px;text-align:center;
  font-size:9px;color:var(--danger);opacity:0;transition:opacity .15s;
}
.slot.pressing{border-color:var(--danger);}
.slot.pressing .del-hint{opacity:1;}
.slot-add{color:var(--muted);}
.slot-add:hover{background:#f1f4f9;color:var(--brand);}

/* ---------- 收起工具栏 ---------- */
body.toolbar-collapsed #toolbar{display:none;}
body.toolbar-collapsed{--toast-bottom:70px;}

#toolbarHandle{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:45;
  height:44px;padding:0 20px;border-radius:22px;
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-l);color:var(--brand);
  font-size:14px;font-weight:600;
  animation:pop .16s ease-out;
}
#toolbarHandle:active{transform:translateX(-50%) scale(.96);}