* { margin:0; padding:0; box-sizing:border-box; }
body { 
  font-family: 'Geist', system-ui, sans-serif; 
  background: #111; 
  color: #eee; 
  min-height: 100vh; 
}
.app { display: flex; height: 100vh; }
.sidebar { 
  width: 280px; 
  background: #1a1a1a; 
  padding: 20px; 
  border-right: 1px solid #333; 
  overflow-y: auto; 
}
.sidebar h1 { font-size: 1.5rem; margin-bottom: 20px; }
.btn { 
  padding: 10px 16px; 
  border: none; 
  border-radius: 6px; 
  cursor: pointer; 
  font-weight: 500; 
}
.primary { background: #6b46c1; color: white; }
.primary:hover { background: #553c9a; }
.danger { background: #e53e3e; color: white; }
.danger:hover { background: #c53030; }
.search-input, .title-input { 
  width: 100%; 
  padding: 10px; 
  margin: 10px 0; 
  background: #222; 
  border: 1px solid #444; 
  color: #eee; 
  border-radius: 6px; 
}
#note-list { list-style: none; }
#note-list li { 
  padding: 12px; 
  cursor: pointer; 
  border-radius: 6px; 
}
#note-list li:hover, #note-list li.active { background: #333; }
.editor-area { flex: 1; padding: 30px; display: flex; flex-direction: column; }
.empty-state { margin: auto; text-align: center; color: #888; }
.hidden { display: none; }
#note-content { 
  flex: 1; 
  background: #1a1a1a; 
  border: 1px solid #444; 
  color: #eee; 
  padding: 16px; 
  font-size: 1.1rem; 
  resize: none; 
  border-radius: 6px; 
  margin: 10px 0; 
}
.editor-actions { display: flex; gap: 10px; }

@media (max-width: 768px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid #333; }
}