* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: #191919; color: #e8e8e6; height: 100vh; overflow: hidden; }
#app { display: flex; height: 100vh; }

#sidebar { width: 260px; min-width: 260px; background: #202020; border-right: 1px solid #2f2f2f; display: flex; flex-direction: column; overflow-y: auto; }
#sidebar-top { padding: 10px; }
#new-page-btn { width: 100%; padding: 8px 10px; background: none; border: none; color: #9b9b9b; text-align: left; cursor: pointer; border-radius: 4px; font-size: 14px; }
#new-page-btn:hover { background: #2a2a2a; color: #fff; }

#tree { padding: 0 6px; flex: 1; }
.tree-item { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; color: #d4d4d4; white-space: nowrap; }
.tree-item:hover { background: #2a2a2a; }
.tree-item.active { background: #333; }
.tree-children { margin-left: 16px; }
.tree-toggle { width: 14px; display: inline-block; opacity: 0.5; cursor: pointer; }
.tree-del { opacity: 0; margin-left: auto; cursor: pointer; padding: 0 4px; }
.tree-item:hover .tree-del { opacity: 0.6; }
.tree-del:hover { opacity: 1; }

#editor { flex: 1; overflow-y: auto; padding: 60px 80px; }
#empty-state { color: #6b6b6b; font-size: 15px; margin-top: 100px; text-align: center; }

#page-icon-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
#page-title { font-size: 34px; font-weight: 700; border: none; background: none; color: #fff; outline: none; width: 100%; font-family: inherit; }
#page-title::placeholder { color: #555; }

.block { margin: 2px 0; position: relative; display: flex; gap: 6px; align-items: flex-start; }
.block-content { flex: 1; min-height: 1.5em; outline: none; font-size: 16px; line-height: 1.5; padding: 3px 2px; border-radius: 3px; }
.block-content:empty::before { content: attr(data-placeholder); color: #555; }
.block[data-type="heading1"] .block-content { font-size: 28px; font-weight: 700; }
.block[data-type="heading2"] .block-content { font-size: 22px; font-weight: 700; }
.block[data-type="todo"] { align-items: center; }
.block-del { opacity: 0; cursor: pointer; color: #666; padding: 3px 6px; user-select: none; }
.block:hover .block-del { opacity: 1; }

.block-image img { max-width: 100%; border-radius: 6px; margin: 4px 0; }
.block-file { display: flex; align-items: center; gap: 8px; background: #252525; padding: 8px 12px; border-radius: 6px; margin: 4px 0; }
.block-file a { color: #8ab4f8; text-decoration: none; }

#add-block-btn { color: #666; font-size: 14px; cursor: pointer; padding: 6px 2px; margin-top: 8px; }
#add-block-btn:hover { color: #aaa; }

@media (max-width: 700px) {
  #sidebar { position: fixed; z-index: 10; height: 100%; transform: translateX(-100%); transition: transform .2s; }
  #sidebar.open { transform: translateX(0); }
  #editor { padding: 50px 20px; }
}