body {
  margin:0;
  font-family: Segoe UI, Arial, sans-serif;
  background:#f5f6f8;
  color:#172b4d;
}
.topbar {
  background:#0747a6;
  color:white;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar select, .topbar input {
  padding:6px;
}
.layout {
  display:flex;
  height:calc(100vh - 48px);
}
.sidebar {
  width:260px;
  background:#fff;
  border-right:1px solid #ddd;
  overflow:auto;
  padding:12px;
}
.content {
  flex:1;
  padding:24px;
  overflow:auto;
}
.page {
  background:#fff;
  padding:32px;
  min-height:80vh;
  width:100%;
  box-sizing:border-box;
}
.page[contenteditable="true"] {
  outline:2px solid #0052cc;
}
.tree-item {
  cursor:pointer;
  padding:4px;
}
.tree-item:hover {
  background:#e6f0ff;
}
.toolbar {
  margin-bottom:12px;
}
button {
  padding:6px 10px;
  margin-right:4px;
}
.badge {
  padding:2px 8px;
  border-radius:12px;
  font-size:12px;
  background:#dfe1e6;
}
.comment {
  border-top:1px solid #ddd;
  padding:8px 0;
  font-size:14px;
}
.toc {
  background:#f4f5f7;
  padding:12px;
  margin-bottom:16px;
}
.dashboard {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap:16px;
}
.card {
  background:#fff;
  padding:16px;
  border:1px solid #ddd;
}